:root{--bg:#f5faff;--card:#fff;--line:#e2eef7;--text:#17324a;--muted:#718aa0;--sky:#31a9e8;--sky-dark:#1688c5;--sky-soft:#e8f6ff;--danger:#d95363;--shadow:0 12px 32px rgba(42,113,160,.09)}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:linear-gradient(180deg,#f0f9ff 0,#f8fcff 250px,var(--bg) 100%);color:var(--text);font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif}.app-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{height:68px;padding:0 clamp(18px,5vw,76px);display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.9);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}.brand-mark{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#62ccf7,#2e98db);color:#fff;font-size:19px;box-shadow:0 7px 16px rgba(49,169,232,.24)}.brand strong{display:block;line-height:1.2;font-size:17px;letter-spacing:.04em}.brand small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.top-actions{display:flex;align-items:center;gap:12px}.access-hint{font-size:12px;color:#5b8aa8}.unlock-btn,.lock-btn{border:1px solid #b9e2f6;border-radius:9px;padding:9px 14px;background:#fff;color:var(--sky-dark);font-weight:700;cursor:pointer}.unlock-btn:hover,.lock-btn:hover{background:var(--sky-soft)}.lock-btn{color:#6b8395;border-color:var(--line)}main{width:min(1120px,100%);margin:0 auto;flex:1;padding:clamp(30px,6vw,70px) clamp(18px,4vw,48px)}.page-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}.eyebrow{font-size:11px;letter-spacing:.16em;color:var(--sky);font-weight:800}.page-intro h1{font-size:clamp(30px,5vw,43px);line-height:1.1;margin:12px 0 8px;letter-spacing:-.04em}.page-intro p{margin:0;color:var(--muted);font-size:14px}.storage-card{width:210px;padding:15px 17px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.8);box-shadow:var(--shadow)}.storage-card span{font-size:12px;color:var(--muted)}.storage-card strong{display:block;margin:4px 0 10px;font-size:15px}.storage-track{height:5px;border-radius:6px;background:#e6f2f8;overflow:hidden}.storage-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#65cef6,var(--sky));transition:width .4s}.unlock-panel{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 18px;margin-bottom:16px;border:1px solid #bfe5f7;border-radius:14px;background:#f1faff}.unlock-panel strong{font-size:14px}.unlock-panel p{margin:5px 0 0;color:var(--muted);font-size:12px}.unlock-panel form{display:flex;gap:8px;align-items:center}.unlock-panel input{width:210px;padding:10px 12px;border:1px solid #cfe6f2;border-radius:9px;background:#fff;outline:0}.unlock-panel input:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(49,169,232,.12)}.manage-bar{display:flex;align-items:center;gap:9px;margin-bottom:16px}.primary-btn,.secondary-btn{border:0;border-radius:9px;padding:10px 15px;font-weight:700;cursor:pointer}.primary-btn{color:#fff;background:linear-gradient(135deg,#42baf0,#208fce);box-shadow:0 6px 14px rgba(49,169,232,.2)}.secondary-btn{color:#277da8;background:#fff;border:1px solid #c7e7f5}.primary-btn:hover,.secondary-btn:hover{transform:translateY(-1px)}.manage-tip{margin-left:auto;color:#5c9ab9;font-size:12px}.content-card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}.list-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 18px;border-bottom:1px solid var(--line)}.breadcrumb{display:flex;align-items:center;gap:4px;min-width:0}.breadcrumb button{border:0;background:transparent;color:#347ea5;padding:4px 6px;cursor:pointer;font-weight:700;white-space:nowrap}.breadcrumb button:not(:last-child)::after{content:'/';color:#a4bfd0;margin-left:10px;font-weight:400}.list-actions{display:flex;align-items:center;gap:8px}.search-box{display:flex;align-items:center;gap:5px;width:190px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;color:#83a5b9}.search-box input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:13px}.icon-btn{width:34px;height:34px;border:1px solid var(--line);background:#fff;color:var(--sky-dark);border-radius:8px;font-size:20px;cursor:pointer}.drop-zone{margin:15px 18px 0;padding:18px;text-align:center;border:1px dashed #8dd3f3;border-radius:11px;color:#3f96bd;background:#f2fbff}.notice{min-height:35px;padding:13px 18px 6px;color:var(--muted);font-size:12px}.notice.error,.error-text{color:var(--danger)}.file-list{min-height:220px}.file-row{display:grid;grid-template-columns:minmax(0,1fr) 120px 170px 100px;gap:12px;align-items:center;padding:14px 18px;border-top:1px solid #eef5f9}.file-main{display:flex;align-items:center;gap:11px;min-width:0}.file-icon{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px;background:var(--sky-soft);color:var(--sky-dark)}.file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.file-meta{font-size:12px;color:var(--muted)}.file-actions{text-align:right}.download-btn{border:1px solid #bfe5f7;color:#277fa9;background:#fff;border-radius:7px;padding:6px 10px;font-size:12px;cursor:pointer}.download-btn:hover{background:var(--sky-soft)}.empty{padding:60px 20px;text-align:center;color:var(--muted)}.public-note{text-align:center;color:#81a4b9;font-size:12px;margin:17px 0}footer{display:flex;justify-content:center;gap:16px;padding:25px 18px;color:#8aa5b8;font-size:12px}footer a{color:#6c9ab1;text-decoration:none}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.error-text{min-height:18px;margin:4px 0 0;font-size:12px}
@media(max-width:720px){.page-intro{display:block}.storage-card{width:100%;margin-top:20px}.unlock-panel{display:block}.unlock-panel form{margin-top:12px}.unlock-panel input{flex:1;width:auto}.file-row{grid-template-columns:minmax(0,1fr) auto}.file-meta{display:none}.file-actions{grid-column:2;grid-row:1}.list-head{align-items:stretch;display:block}.list-actions{margin-top:10px}.search-box{flex:1}.manage-bar{flex-wrap:wrap}.manage-tip{width:100%;margin:0}.top-actions .access-hint{display:none}}
@media(max-width:430px){.topbar{height:62px}.brand strong{font-size:16px}.unlock-btn{padding:8px 10px;font-size:12px}.unlock-btn span{display:none}main{padding:28px 12px}.page-intro h1{font-size:32px}.file-row{padding:13px 12px}.list-head{padding:13px 12px}.drop-zone{margin-left:12px;margin-right:12px}}

/* selection and inline editing controls */
.primary-btn,.secondary-btn,.danger-btn,.text-btn{border-radius:9px;padding:10px 15px;font-weight:700;cursor:pointer}
.danger-btn{color:#bd4a58;background:#fff;border:1px solid #efb9c0}
.danger-btn.danger-confirm{color:#fff;background:#d95363;border-color:#d95363}
.text-btn{padding:8px 7px;color:#6f91a7;background:transparent}
.inline-editor{display:flex;align-items:center;gap:9px;margin:0 18px 15px;padding:12px;background:#f4fbff;border:1px solid #bfe5f7;border-radius:10px}
.inline-editor label{font-size:13px;font-weight:700;color:#387b9d;white-space:nowrap}
.inline-editor input{flex:1;min-width:0;padding:9px 11px;border:1px solid #cfe6f2;border-radius:8px;background:#fff;outline:0}
.inline-editor input:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(49,169,232,.12)}
.selection-bar{display:flex;align-items:center;gap:14px;margin:0 18px 2px;padding:10px 12px;border:1px solid #c5e7f6;border-radius:10px;background:#f2fbff;color:#347ea5}
.selection-bar strong{font-size:13px;white-space:nowrap}.selection-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.selection-bar .secondary-btn,.selection-bar .danger-btn{padding:7px 11px;font-size:12px}
.file-row{grid-template-columns:32px minmax(0,1fr) 120px 170px;position:relative}
.file-row.is-selected{background:#f0faff}.select-cell{width:32px;height:32px;display:grid;place-items:center;cursor:pointer}
.file-check{width:17px;height:17px;accent-color:var(--sky);cursor:pointer}
.file-name{color:var(--text);text-align:left;border:0;background:transparent;padding:0;cursor:pointer}
.file-name:hover{text-decoration:underline;color:var(--sky-dark)}
@media(max-width:720px){.file-row{grid-template-columns:30px minmax(0,1fr)}.selection-bar{align-items:flex-start;display:block;margin-left:12px;margin-right:12px}.selection-actions{margin-top:8px}.inline-editor{align-items:stretch;flex-wrap:wrap;margin-left:12px;margin-right:12px}.inline-editor label{width:100%}.inline-editor input{flex-basis:100%}}

/* Keep the brand and access controls together in the centered page column. */
.topbar{width:min(1120px,100%);height:auto;margin:0 auto;padding:24px clamp(18px,4vw,48px) 18px;flex-direction:column;justify-content:center;gap:14px;position:relative}
.brand{text-align:center}.top-actions{justify-content:center}
@media(max-width:430px){.topbar{height:auto;padding-top:18px;padding-bottom:14px}}

.file-table-head{display:grid;grid-template-columns:85px minmax(0,1fr) 120px 120px 170px;gap:12px;align-items:center;padding:11px 18px;color:#89a2b3;background:#f8fcff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px}
.search-btn{border:1px solid #bfe5f7;border-radius:8px;padding:7px 12px;background:#fff;color:var(--sky-dark);font-size:12px;font-weight:700;cursor:pointer}.search-btn:hover{background:var(--sky-soft)}
.password-wrap{position:relative;display:flex;align-items:center}.password-wrap input{padding-right:38px}.password-toggle{position:absolute;right:5px;width:29px;height:29px;border:0;border-radius:7px;background:transparent;color:#6e9ab2;cursor:pointer;font-size:15px;line-height:1}.password-toggle:hover{background:var(--sky-soft);color:var(--sky-dark)}
.password-editor{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 18px 15px;padding:13px;background:#f4fbff;border:1px solid #bfe5f7;border-radius:10px}.password-editor strong{font-size:13px;color:#387b9d;white-space:nowrap}.password-fields{display:flex;gap:8px;flex:1;flex-wrap:wrap}.password-fields .password-wrap{flex:1;min-width:170px}.password-fields input{width:100%;padding:9px 38px 9px 11px;border:1px solid #cfe6f2;border-radius:8px;background:#fff;outline:0}.password-editor-actions{display:flex;gap:7px}.password-editor-actions .primary-btn,.password-editor-actions .secondary-btn{padding:8px 11px;font-size:12px}.password-editor .error-text{width:100%;margin:0}
@media(max-width:720px){.password-editor{align-items:stretch;margin-left:12px;margin-right:12px}.password-fields{display:block}.password-fields .password-wrap{margin-top:8px}.password-editor-actions{width:100%}}
.select-all-cell{display:flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer}.select-all-cell input{width:17px;height:17px;accent-color:var(--sky);cursor:pointer}.file-row{grid-template-columns:32px minmax(0,1fr) 120px 120px 170px}
@media(max-width:720px){.file-table-head{grid-template-columns:30px minmax(0,1fr);padding:10px 12px}.file-table-head>span:nth-of-type(n+2),.file-table-head>span:nth-of-type(n+3),.file-table-head>span:nth-of-type(n+4){display:none}.select-all-cell span{display:none}.file-row{grid-template-columns:30px minmax(0,1fr)}}

/* Align the two top-side groups with the centered file-management panel. */
.topbar{width:min(1024px,calc(100% - 24px));height:68px;margin:0 auto;padding:0;flex-direction:row;justify-content:space-between;gap:16px;position:sticky;top:0}
.brand{text-align:left}.top-actions{justify-content:flex-end}
@media(max-width:430px){.topbar{height:62px;padding:0}}

.page-intro h1{font-size:clamp(28px,4vw,36px);letter-spacing:-.03em}
@media(max-width:430px){.page-intro h1{font-size:30px}}
.file-icon.folder-icon{background:#fff4cf;color:#d99a18}.file-icon.document-icon{background:#e8f6ff;color:#2b9ad4}
 .breadcrumb button:first-child{background:#e8f6fd;border:1px solid #b9e2f6;border-radius:7px;color:#1978a8;padding:6px 10px}.breadcrumb button:first-child:hover{background:#d9f0fb}