:root {
  --blue:#0d4f9e;
  --blue-2:#176cff;
  --navy:#061a3d;
  --navy-2:#031126;
  --cyan:#00aaff;
  --yellow:#ffcc16;
  --ink:#172033;
  --muted:#667085;
  --line:#dce3ed;
  --soft:#eaf2fc;
  --bg:#f3f6fa;
  --red:#b42318;
  --shadow:0 16px 42px rgba(6,26,61,.10);
  --radius:18px;
}

* { box-sizing:border-box; }
html { color-scheme:light; }
body { min-height:100vh; margin:0; color:var(--ink); background:var(--bg); font-family:Arial,Helvetica,sans-serif; }
button,input,select { font:inherit; }
a { color:inherit; }
.shell { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }
.muted { color:var(--muted); }
.eyebrow { margin:0 0 8px; color:var(--blue); font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }

.button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:9px 16px; border:1px solid transparent; border-radius:10px; text-decoration:none; font-weight:750; cursor:pointer; transition:transform .15s ease,box-shadow .15s ease,background .15s ease; }
.button:hover { transform:translateY(-1px); }
.button-primary { color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue-2)); box-shadow:0 7px 18px rgba(13,79,158,.22); }
.button-secondary { border-color:#b9cce5; color:var(--blue); background:#f7faff; }
.button-quiet { border-color:var(--line); color:var(--ink); background:#fff; }
.button-danger { border-color:#f4b6b0; color:var(--red); background:#fff5f4; }
.button-small { min-height:34px; padding:6px 10px; font-size:.82rem; }
.button-wide { width:100%; }
.button:disabled { cursor:not-allowed; opacity:.52; transform:none; box-shadow:none; }
input,select { width:100%; min-height:43px; padding:9px 11px; border:1px solid #cbd5e1; border-radius:9px; color:var(--ink); background:#fff; outline:none; }
input:focus,select:focus { border-color:var(--blue-2); box-shadow:0 0 0 3px rgba(23,108,255,.12); }
input:disabled { color:#526174; background:#f3f6fa; cursor:not-allowed; opacity:1; -webkit-text-fill-color:#526174; }
label { display:grid; gap:7px; color:#344054; font-size:.88rem; font-weight:700; }
label small { color:var(--muted); font-size:.78rem; font-weight:400; line-height:1.5; }

.login-page { color:#fff; background:var(--navy-2); }
.login-shell { display:grid; grid-template-columns:1.15fr .85fr; min-height:100vh; }
.login-welcome { position:relative; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding:8vh clamp(40px,8vw,130px); background:radial-gradient(circle at 18% 22%,rgba(0,170,255,.22),transparent 36%),radial-gradient(circle at 87% 76%,rgba(23,108,255,.24),transparent 34%),linear-gradient(145deg,#020b19,#061a3d); }
.login-welcome::after { position:absolute; right:-220px; bottom:-210px; width:430px; height:430px; border:1px solid rgba(255,255,255,.1); border-radius:50%; box-shadow:0 0 0 60px rgba(255,255,255,.02),0 0 0 120px rgba(255,255,255,.02); content:""; }
.login-logo { display:block; width:min(430px,94%); height:auto; margin-bottom:36px; }
.login-welcome .eyebrow { color:var(--yellow); }
.login-welcome h1 { max-width:760px; margin:0; font-size:clamp(2.2rem,4.2vw,4.25rem); line-height:1.04; letter-spacing:-.045em; }
.login-lead { max-width:620px; margin:27px 0 36px; color:rgba(255,255,255,.72); font-size:1.08rem; line-height:1.65; }
.feature-list { display:grid; gap:13px; margin:0; padding:0; color:rgba(255,255,255,.88); list-style:none; }
.feature-list li { display:flex; align-items:center; gap:13px; }
.feature-list span { color:var(--cyan); font-size:.72rem; font-weight:900; }
.login-panel { display:grid; place-items:center; padding:45px; color:var(--ink); background:var(--bg); }
.login-card { width:min(440px,100%); padding:clamp(25px,4vw,45px); border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:var(--shadow); }
.login-card-head h2 { margin:0 0 9px; color:var(--navy); font-size:2rem; letter-spacing:-.03em; }
.login-card-head>p:not(.eyebrow) { color:var(--muted); line-height:1.55; }
.stack-form { display:grid; gap:17px; margin-top:24px; }
.login-back { display:block; margin-top:22px; color:var(--blue); font-size:.8rem; font-weight:700; text-align:center; text-decoration:none; }
.login-back:hover { text-decoration:underline; }
.alert { margin:18px 0 0; padding:13px 15px; border:1px solid; border-radius:12px; line-height:1.45; }
.alert-error { border-color:#efb5af; color:#8d2017; background:#fff3f1; }

.site-header { position:relative; z-index:20; color:#fff; background:linear-gradient(115deg,var(--navy-2),var(--navy) 62%,#0b3974); box-shadow:0 8px 28px rgba(3,17,38,.2); }
.site-header::after { position:absolute; inset:auto 0 0; height:3px; background:linear-gradient(90deg,var(--cyan),var(--blue-2),var(--yellow)); content:""; }
.header-inner { display:flex; align-items:center; gap:28px; min-height:128px; }
.brand { display:flex; align-items:center; gap:13px; text-decoration:none; font-weight:800; letter-spacing:.02em; }
.brand img { display:block; width:300px; height:auto; }
.brand span { padding-left:13px; border-left:1px solid rgba(255,255,255,.25); }
.main-nav { display:flex; align-self:stretch; align-items:center; gap:20px; margin-left:auto; }
.main-nav a { position:relative; display:flex; align-items:center; align-self:stretch; padding:0 15px; color:#fff; text-decoration:none; font-size:.93rem; font-weight:700; }
.main-nav a.active::after { position:absolute; right:15px; bottom:0; left:15px; height:4px; border-radius:4px 4px 0 0; background:var(--yellow); content:""; }
.readonly-nav,.readonly-badge { display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px; font-size:.72rem; font-weight:800; }
.readonly-nav { border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.82); background:rgba(255,255,255,.08); }
.readonly-nav::before,.readonly-badge::before { width:7px; height:7px; border-radius:50%; background:#35d796; content:""; }
.account { display:flex; align-items:center; gap:10px; }
.account-copy { display:grid; font-size:.8rem; text-align:right; }
.account-copy span { color:rgba(255,255,255,.65); }
.account-menu { position:relative; }
.account-menu summary { display:grid; place-items:center; width:40px; height:40px; border:1px solid rgba(255,255,255,.25); border-radius:50%; background:rgba(255,255,255,.1); font-weight:800; cursor:pointer; list-style:none; }
.account-drive { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.account-menu summary::-webkit-details-marker { display:none; }
.account-menu>div { position:absolute; top:50px; right:0; min-width:130px; padding:8px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:var(--shadow); }
.account-menu a { display:block; width:100%; padding:10px 12px; border-radius:8px; color:var(--ink); text-decoration:none; }
.account-menu a:hover { background:var(--soft); }
.nav-toggle { display:none; margin-left:auto; padding:8px 10px; border:1px solid rgba(255,255,255,.3); border-radius:9px; color:#fff; background:rgba(255,255,255,.08); cursor:pointer; }

.page-main { min-height:calc(100vh - 195px); padding-block:42px 60px; }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:24px; }
.page-heading h1 { margin:2px 0 8px; color:var(--navy); font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.06; letter-spacing:-.035em; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:7px; color:var(--muted); font-size:.9rem; }
.breadcrumbs a { text-decoration:none; }
.breadcrumbs a:hover { color:var(--blue); text-decoration:underline; }
.storage-summary { width:min(340px,100%); padding:15px 18px; border:1px solid #c9d9ed; border-radius:14px; background:#fff; box-shadow:0 8px 20px rgba(6,26,61,.06); }
.storage-summary>div { display:flex; justify-content:space-between; gap:15px; font-size:.83rem; }
.storage-summary span { color:var(--muted); }
.storage-bar { display:block; width:100%; height:7px; margin-top:11px; overflow:hidden; border:0; border-radius:99px; background:var(--soft); }
.storage-bar::-webkit-progress-bar { background:var(--soft); }
.storage-bar::-webkit-progress-value { background:linear-gradient(90deg,var(--cyan),var(--blue-2)); }
.storage-bar::-moz-progress-bar { background:linear-gradient(90deg,var(--cyan),var(--blue-2)); }

.card { border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); }
.explorer-card { overflow:hidden; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 20px; border-bottom:1px solid var(--line); }
.toolbar-actions { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.readonly-badge { color:#0d6847; background:#e8f8f1; }
.search-form { display:flex; align-items:center; gap:9px; }
.search-form input { width:min(300px,36vw); }
.table-wrap { width:100%; overflow:hidden; }
.file-table { width:100%; border-collapse:separate; border-spacing:0; }
.file-table th { padding:13px 17px; color:var(--muted); background:#f8fafc; font-size:.72rem; letter-spacing:.06em; text-align:left; text-transform:uppercase; }
.file-table td { height:66px; padding:10px 17px; border-top:1px solid #edf0f4; font-size:.88rem; vertical-align:middle; }
.file-table tbody tr:hover { background:#f9fbfe; }
.item-name { display:flex; align-items:center; gap:12px; min-width:210px; color:var(--ink); text-decoration:none; }
.item-name strong { max-width:440px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item-name:hover strong { color:var(--blue); }
.item-icon { flex:0 0 auto; display:grid; place-items:center; width:38px; height:38px; border-radius:10px; font-size:.62rem; font-weight:900; }
.item-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.folder-icon { color:#8a6400; background:#fff4c4; }
.file-icon { color:var(--blue); background:var(--soft); }
.empty-state { padding:80px 20px; text-align:center; }
.empty-state h2 { margin:13px 0 6px; color:var(--navy); }
.empty-state p { margin:0; color:var(--muted); }
.empty-icon { display:grid; place-items:center; width:54px; height:54px; margin:auto; border-radius:16px; color:var(--blue); background:var(--soft); font-size:1.6rem; }

.preview-card { margin-bottom:24px; overflow:hidden; }
.preview-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 22px; border-bottom:1px solid var(--line); }
.preview-toolbar h2 { margin:0; color:var(--navy); font-size:1.3rem; }
.preview-body { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(250px,.8fr); gap:28px; padding:25px; background:#f8fafc; }
.document-preview { position:relative; display:grid; place-items:center; min-height:340px; overflow:hidden; border:1px solid #cad5e3; border-radius:14px; background:linear-gradient(135deg,#e6edf6,#f8fafc); }
.preview-filetype { position:absolute; top:14px; right:14px; z-index:2; padding:6px 9px; border-radius:7px; color:#fff; background:var(--blue); font-size:.7rem; font-weight:900; }
.paper-mock { display:grid; gap:14px; width:min(300px,75%); min-height:270px; padding:38px 34px; border-radius:3px; background:#fff; box-shadow:0 15px 35px rgba(6,26,61,.18); }
.paper-mock strong { color:var(--navy); font-size:1.05rem; }
.paper-mock span { display:block; height:9px; border-radius:9px; background:#dce5ef; }
.paper-mock span.short { width:65%; }
.image-mock { position:relative; width:min(460px,82%); aspect-ratio:16/10; overflow:hidden; border:10px solid #fff; background:linear-gradient(150deg,#55b9f3 0 45%,#afd46d 46% 67%,#3b8f63 68%); box-shadow:0 15px 35px rgba(6,26,61,.18); }
.image-mock span { position:absolute; top:15%; right:18%; width:18%; aspect-ratio:1; border-radius:50%; background:#ffe37b; }
.image-mock i { position:absolute; bottom:-20%; left:16%; width:62%; height:70%; background:#2b6d53; transform:rotate(34deg); }
.file-details { display:grid; align-content:start; gap:0; margin:0; border:1px solid var(--line); border-radius:13px; background:#fff; }
.file-details div { display:grid; grid-template-columns:100px 1fr; gap:12px; padding:15px; border-top:1px solid var(--line); }
.file-details div:first-child { border-top:0; }
.file-details dt { color:var(--muted); font-size:.76rem; font-weight:700; }
.file-details dd { margin:0; overflow-wrap:anywhere; font-size:.86rem; font-weight:700; }

.modal { width:min(560px,calc(100% - 28px)); padding:0; border:0; border-radius:18px; color:var(--ink); background:transparent; box-shadow:0 25px 70px rgba(0,0,0,.3); }
.modal::backdrop { background:rgba(3,17,38,.68); backdrop-filter:blur(3px); }
.modal-card { display:grid; gap:20px; padding:25px; border-radius:18px; background:#fff; }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.modal-head h2 { margin:0; color:var(--navy); font-size:1.55rem; }
.modal-head>button { width:34px; height:34px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:#fff; font-size:1.4rem; cursor:pointer; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; }
.drop-zone { padding:25px; border:2px dashed #b8cce6; border-radius:13px; background:#f7faff; text-align:center; }
.drop-zone input { border:0; background:transparent; }
.drop-zone small { color:var(--muted); font-size:.78rem; font-weight:400; line-height:1.5; }
.demo-notice { margin:0; padding:11px 13px; border-radius:10px; color:#735300; background:#fff7d6; font-size:.82rem; line-height:1.45; }
.share-target-name { margin:-5px 0 0; padding:12px 14px; border-radius:10px; color:var(--navy); background:var(--soft); overflow-wrap:anywhere; }
.check-single { display:flex; align-items:center; gap:8px; }
.check-single input { width:18px; min-height:18px; }
.demo-row-actions { text-align:right; }
.trash-actions { display:flex; flex-wrap:wrap; gap:7px; }
.share-table th:last-child { width:245px; }
.share-name { display:grid; gap:3px; min-width:0; }
.share-name small { color:var(--muted); font-size:.72rem; }
.share-actions { display:flex; flex-wrap:wrap; align-items:center; gap:7px; min-width:220px; }
.status { display:inline-flex; padding:5px 8px; border-radius:99px; font-size:.69rem; font-weight:800; }
.status-expired { color:#735300; background:#fff7d6; }
.public-share-page { min-height:100vh; }
.public-header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:128px; }
.public-secure-badge { padding:8px 11px; border:1px solid rgba(255,255,255,.22); border-radius:99px; color:rgba(255,255,255,.86); background:rgba(255,255,255,.08); font-size:.75rem; font-weight:800; }
.public-share-main { min-height:calc(100vh - 195px); }
.public-share-heading { align-items:center; }
.share-permissions { display:grid; justify-items:end; gap:5px; padding:14px 17px; border:1px solid #c9d9ed; border-radius:13px; background:#fff; }
.share-permissions span { color:var(--blue); font-weight:800; }
.share-permissions small { color:var(--muted); }
.site-footer { min-height:67px; padding-block:22px; color:#758298; background:#e9eef5; font-size:.8rem; text-align:center; }

@media (max-width:950px) {
  .login-shell { grid-template-columns:1fr; }
  .login-welcome { min-height:390px; padding:55px 8vw; }
  .login-logo { width:min(400px,92%); margin-bottom:24px; }
  .feature-list { display:none; }
  .login-panel { padding:35px 20px 55px; }
  .brand img { width:230px; }
  .header-inner { min-height:91px; }
  .account-copy { display:none; }
  .main-nav { display:none; position:absolute; top:95px; right:20px; left:20px; height:auto; padding:8px; border:1px solid rgba(255,255,255,.15); border-radius:12px; background:var(--navy); box-shadow:var(--shadow); }
  .main-nav.open { display:grid; }
  .main-nav a { min-height:42px; border-radius:8px; }
  .main-nav a.active { background:rgba(255,255,255,.08); }
  .main-nav a.active::after { display:none; }
  .readonly-nav { justify-self:start; margin:6px 8px; }
  .nav-toggle { display:block; }
  .brand { margin-right:auto; }
  .header-inner { gap:10px; }
  .public-header-inner { min-height:91px; }
}

@media (max-width:720px) {
  .shell { width:min(100% - 24px,1180px); }
  .header-inner { min-height:78px; gap:10px; }
  .brand { margin-right:auto; }
  .brand img { width:min(175px,48vw); }
  .brand span { display:none; }
  .main-nav { top:82px; margin-left:0; }
  .page-main { padding-top:28px; }
  .page-heading,.toolbar,.preview-toolbar { align-items:stretch; flex-direction:column; }
  .storage-summary { width:100%; }
  .search-form { flex-wrap:wrap; width:100%; }
  .search-form input { width:100%; }
  .toolbar-actions { width:100%; }
  .toolbar-actions .button { flex:1; }
  .toolbar-actions .readonly-badge { flex-basis:100%; justify-content:center; }
  .preview-body { grid-template-columns:1fr; padding:15px; }
  .document-preview { min-height:280px; }
  .file-table thead { display:none; }
  .file-table,.file-table tbody,.file-table tr,.file-table td { display:block; width:100%; }
  .file-table tr { padding:13px; border-top:1px solid var(--line); }
  .file-table td { display:flex; justify-content:space-between; gap:20px; height:auto; min-height:34px; padding:5px 0; border:0; }
  .file-table td::before { color:var(--muted); font-size:.74rem; font-weight:700; content:attr(data-label); }
  .file-table td:first-child::before { display:none; }
  .file-table td:first-child { display:block; padding-bottom:8px; }
  .item-name { min-width:0; }
  .item-name strong { max-width:calc(100vw - 120px); }
  .trash-actions { justify-content:flex-end; }
  .share-actions { justify-content:flex-end; min-width:0; }
  .demo-row-actions { justify-content:flex-end!important; }
  .modal-card { padding:20px; }
  .public-header-inner .brand { margin-right:0; }
  .public-header-inner .brand img { width:min(175px,48vw); }
  .public-header-inner .brand span { display:none; }
  .public-secure-badge { font-size:.65rem; }
  .public-share-heading { align-items:stretch; }
  .share-permissions { justify-items:start; }
}

@media (max-width:420px) {
  .readonly-nav { display:none; }
  .login-welcome h1 { font-size:2.15rem; }
  .login-welcome { min-height:350px; }
  .paper-mock { width:82%; padding:30px 24px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; }
}