/* The app's styles. Every colour, font and radius is a token from tokens.css (linked first): this file only says var(--name), and test/tokens.test.js holds it to that. */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{--glows:radial-gradient(ellipse 80% 55% at 100% 0%,var(--glow-1),transparent 70%),radial-gradient(ellipse 60% 45% at 0% 0%,var(--glow-2),transparent 70%);font-family:var(--font);background-color:var(--bg);background-image:var(--glows);background-repeat:no-repeat;background-attachment:fixed;color:var(--text);-webkit-font-smoothing:antialiased;overflow:hidden}
body.bg-grid{background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px),var(--glows);background-size:46px 46px,46px 46px,auto;background-repeat:repeat,repeat,no-repeat;background-attachment:scroll,scroll,fixed}
body.bg-gradient{background:linear-gradient(160deg,var(--bg),var(--bg-alt))}
body.bg-solid{background-image:none}
body.bg-image{background-size:cover;background-position:center;background-attachment:fixed}
h1,h2,.brand{font-family:var(--font-display)}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hidden{display:none!important}
input,select,button,textarea{font-family:inherit;font-size:14px;color:var(--text)}
select option{background:var(--panel);color:var(--text)}
select{cursor:pointer}
::selection{background:var(--accent-fill);color:var(--on-accent)}
::placeholder{color:var(--muted);opacity:1}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--muted)}
a{color:var(--accent)}

.cover{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:50;background:var(--bg)}
.spinner{width:38px;height:38px;border:3px solid var(--line-strong);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Signed out: the hero on the left, the sign-in card on the right; stacked on a phone. */
.auth-screen{position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,540px) minmax(0,420px);grid-template-rows:minmax(min-content,1fr);justify-content:center;align-items:center;column-gap:clamp(40px,7vw,104px);row-gap:32px;padding:clamp(20px,4vw,56px);overflow:auto;z-index:40}
.hero{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.hero-mark{display:block;width:clamp(112px,14vw,176px);height:auto;margin-bottom:clamp(20px,3vw,32px);filter:drop-shadow(0 16px 40px var(--glow-1))}
.hero-glyph{display:grid;place-items:center;aspect-ratio:1;border-radius:22%;background:var(--accent-fill);color:var(--on-accent);font-size:clamp(56px,7vw,88px);line-height:1}
.hero h1{font-size:clamp(44px,6.4vw,76px);line-height:1.02;font-weight:700;letter-spacing:-.035em;margin-bottom:clamp(14px,2vw,22px)}
.hero-lead{font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--muted);max-width:30em;margin-bottom:clamp(24px,3vw,36px)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-actions .auth-btn{width:auto;margin-top:0;padding:13px 26px}
.auth-card{width:100%;max-width:420px;margin:auto;background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);padding:34px 30px;box-shadow:var(--shadow)}
.auth-card.wide{max-width:560px}
.auth-card p{color:var(--muted);margin:4px 0 18px;font-size:14px}
.auth-step-title{font-size:21px;letter-spacing:-.3px;margin-bottom:4px}
.auth-form{display:flex;flex-direction:column;gap:11px}
.auth-card label{font-size:12px;color:var(--muted);font-weight:600;margin-top:6px;display:block}
.hint-inline{font-weight:400;color:var(--muted);font-size:11px;text-transform:none}
.auth-card input[type=text],.auth-card input[type=password],.auth-card input[type=number],.modal input,.modal select,.modal textarea{width:100%;background:var(--panel-2);border:1px solid var(--control-line);border-radius:var(--radius-sm);padding:11px 13px;outline:none;transition:border-color .15s,box-shadow .15s;margin-top:5px}
.auth-card input:focus,.modal input:focus,.modal select:focus,.modal textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.auth-card input[aria-invalid=true]{border-color:var(--bad)}
.auth-btn{margin-top:14px;background:var(--accent-fill);color:var(--on-accent);border:0;border-radius:var(--radius-sm);padding:12px;font-weight:700;cursor:pointer;transition:background .15s;width:100%}
.auth-btn:hover{background:var(--accent-fill-hover)}
.auth-btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--control-line)}
.auth-btn.ghost:hover{background:var(--panel-2)}
.auth-btn.btn-link{display:inline-block;text-decoration:none}
.auth-switch{margin-top:14px;text-align:center;color:var(--muted);font-size:13px;cursor:pointer}
.auth-switch b{color:var(--accent)}
.login-error{color:var(--bad);font-size:13px;min-height:16px;margin-top:8px;display:block}
.form-section{margin:22px 0 6px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:700}
.adv{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.adv summary{cursor:pointer;color:var(--muted);font-size:13px;user-select:none}
.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer;margin-top:8px}
.check input{width:16px;height:16px;accent-color:var(--accent-fill)}
.credit{margin-top:18px;text-align:center;font-size:12px;color:var(--muted);letter-spacing:.3px}
.credit.small{margin-top:4px;font-size:11px}
.credit.credit-foot{margin:26px 0 12px}
.credit a{color:inherit;text-decoration:none}
.credit a:hover{text-decoration:underline}
.rules{list-style:none;margin:4px 0 2px;padding:0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.rules:empty{display:none}
.rules li{display:flex;gap:7px;align-items:baseline}
.rules li::before{content:"\25CB";flex:none;width:1em;text-align:center}
.rules li.ok{color:var(--good)}
.rules li.ok::before{content:"\2713"}
.rules li.bad{color:var(--bad)}
.rules li.bad::before{content:"\2717"}
.auth-card label.consent{display:flex;align-items:flex-start;gap:9px;margin-top:10px;font-size:13px;font-weight:400;line-height:1.45;color:var(--muted);cursor:pointer}
.auth-card label.consent input{flex:none;margin-top:2px}
.auth-card label.consent a{color:var(--accent)}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0}
.codes code{display:block;text-align:center;background:var(--panel-2);border:1px dashed var(--line-strong);border-radius:10px;padding:9px 8px;font-family:var(--font-mono);letter-spacing:1.5px;user-select:all}
.auth-form .codes code{font-size:12px;letter-spacing:.3px;padding:9px 4px}
.code-actions{display:flex;gap:8px;margin-bottom:6px}
.legal-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin-top:20px;font-size:12px}
.legal-nav a{color:var(--muted);text-decoration:none}
.legal-nav a:hover,.legal-nav a:focus-visible{color:var(--text);text-decoration:underline}
.legal-nav + .credit{margin-top:10px}

/* The app: sidebar, top bar, content */
.app{display:grid;grid-template-columns:264px 1fr;grid-template-rows:minmax(0,1fr);height:100vh;height:100dvh}
.sidebar{display:flex;flex-direction:column;gap:14px;padding:18px 14px;border-right:1px solid var(--line);background:linear-gradient(180deg,var(--nav-tint),transparent 40%),var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);min-height:0}
.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700;letter-spacing:-.02em;padding:4px 6px}
.brand-logo{display:block;width:30px;height:30px;flex:none}
.brand-mark{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;font-size:16px;background:var(--accent-fill);color:var(--on-accent)}
.actions{display:flex;gap:8px}
.btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;font-weight:600;font-size:13px;transition:.15s}
.btn:hover{border-color:var(--line-strong);background:var(--panel-2)}
.btn-accent{background:var(--accent-fill);color:var(--on-accent);border-color:transparent}
.btn-accent:hover{background:var(--accent-fill-hover);border-color:transparent}
.install-btn{width:100%;justify-content:center}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--radius-sm);color:var(--muted);cursor:pointer;font-weight:600;font-size:14px;transition:.12s}
.nav-item:hover{background:var(--panel-2);color:var(--text)}
.nav-item.active{background:var(--accent-soft);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent-line)}
.nav-item.active .ic{color:var(--accent)}
.nav-sub{padding:6px 11px 6px 39px;font-size:13px;font-weight:500}
.nav-badge{margin-left:auto;background:var(--accent-fill);color:var(--on-accent);font-size:11px;font-weight:700;border-radius:20px;padding:1px 7px}
.tree-label{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);font-weight:700;padding:4px 6px}
.tree{flex:1;overflow:auto;min-height:40px;margin:-6px 0}
.tnode{user-select:none}
.trow{display:flex;align-items:center;gap:5px;padding:5px 6px;border-radius:8px;cursor:pointer;color:var(--muted);font-size:13.5px}
.trow:hover{background:var(--panel-2);color:var(--text)}
.trow.active{color:var(--accent)}
.trow.drag-over,.crumb.drag-over{background:var(--accent-fill);color:var(--on-accent)}
.tcaret{display:grid;place-items:center;width:16px;height:16px;color:var(--muted);transition:transform .12s}
.tcaret.open{transform:rotate(90deg)}
.tcaret.leaf{visibility:hidden}
.tname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tchildren{margin-left:14px;border-left:1px solid var(--line);padding-left:4px}
.sidebar-foot{display:flex;flex-direction:column;gap:10px}
.stats{font-size:12px;color:var(--muted);line-height:1.7;padding:0 6px}
.stats b{color:var(--text)}
.quota{margin-top:6px}.quota-bar{height:6px;background:var(--panel-2);border-radius:6px;overflow:hidden}.quota-fill{height:100%;width:0;background:var(--accent)}.quota span{font-size:11px;color:var(--muted);display:block;margin-top:3px}
.userchip{display:flex;align-items:center;gap:9px;padding:8px;border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;transition:.15s}
.userchip:hover{background:var(--panel-2);border-color:var(--line-strong)}
.avatar{width:32px;height:32px;border-radius:9px;background:var(--accent-fill);color:var(--on-accent);display:grid;place-items:center;font-weight:800}
.userchip-info{flex:1;min-width:0}.userchip-name{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.userchip-role{font-size:11px}
.badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;background:var(--panel-2);color:var(--muted);padding:1px 6px;border-radius:5px}
.badge-admin{background:var(--accent-fill);color:var(--on-accent)}
.badge-pending{background:var(--warn-soft);color:var(--warn)}
.badge-off{background:var(--panel-2);color:var(--muted)}

.main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;position:relative}
.topbar{display:flex;align-items:center;gap:14px;padding:16px 26px;border-bottom:1px solid var(--line)}
.breadcrumb{flex:1;display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:15px;min-width:0}
.crumb{color:var(--muted);cursor:pointer;padding:3px 6px;border-radius:6px;white-space:nowrap}
.crumb:hover{background:var(--panel-2);color:var(--text)}
.crumb.current{color:var(--text);font-weight:700}
.crumb-sep{color:var(--muted)}
.crumb-members{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:3px 10px;border:1px solid var(--line-strong);border-radius:999px;background:var(--panel);color:var(--muted);font-size:12.5px;cursor:pointer}
.crumb-members:hover{background:var(--panel-2);color:var(--text)}
.crumb-members .ic{width:14px;height:14px}
.hamburger{display:none;align-items:center;justify-content:center;width:38px;height:38px;flex:none;border:0;border-radius:var(--radius-sm);background:none;color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent}
.hamburger:hover{background:var(--panel-2)}
.hamburger .ic{width:22px;height:22px}
.sidebar-backdrop{display:none}
.view-toggle{display:flex;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:3px}
.view-toggle button{display:grid;place-items:center;width:34px;height:30px;border:0;border-radius:7px;background:none;color:var(--muted);cursor:pointer}
.view-toggle button.sel{background:var(--accent-fill);color:var(--on-accent)}
.search{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--control-line);border-radius:var(--radius-sm);padding:8px 12px;width:280px}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search input{background:none;border:0;outline:none;width:100%;color:var(--text)}
.search .ic{color:var(--muted)}
.content{flex:1;overflow:auto;min-height:0;padding:22px 26px 70px}
.hintbar{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 14px;color:var(--muted);font-size:13px;margin-bottom:16px}
.section-h{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);font-weight:700;margin:6px 0 12px}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);padding:80px 20px;text-align:center}
.empty-mark{font-size:42px;opacity:.5}
.loading{color:var(--muted);padding:40px;text-align:center}

/* Files: cards and the list */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--gap);margin-bottom:26px}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px;cursor:pointer;transition:border-color .15s,background .15s,transform .15s;overflow:hidden}
.card:hover{border-color:var(--line-strong);background:var(--panel-2);transform:translateY(-2px)}
.card.selected{border-color:var(--accent);background:var(--panel-2)}
.card.selected::after{content:"";position:absolute;inset:0;border:2px solid var(--accent);border-radius:var(--radius);pointer-events:none}
.card.drag-over,.lrow.drag-over{outline:2px dashed var(--accent);outline-offset:-2px;background:var(--panel-2)}
.card-ico{width:46px;height:46px;margin-bottom:12px}.card-ico svg{width:100%;height:100%}
.card-name{font-weight:600;font-size:14px;word-break:break-word;line-height:1.3;max-height:2.6em;overflow:hidden}
.card-meta{color:var(--muted);font-size:12px;margin-top:5px}
.card-tools{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transition:.15s}
.card:hover .card-tools{opacity:1}
.tool{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);color:var(--muted);cursor:pointer;text-decoration:none}
.tool:hover{color:var(--accent);border-color:var(--accent)}
.selbox{position:absolute;top:9px;left:9px;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--control-line);background:var(--panel);display:grid;place-items:center;color:transparent;opacity:0;transition:.12s;z-index:2}
.card:hover .selbox,.lrow:hover .selbox{opacity:1}
.selbox.on{opacity:1;background:var(--accent-fill);border-color:transparent;color:var(--on-accent)}
.selbox .ic{width:14px;height:14px;stroke-width:3}
.starred-dot{position:absolute;top:10px;right:auto;left:38px;color:var(--warn);width:16px;height:16px}
.starred-dot .ic{width:16px;height:16px;fill:var(--warn);stroke:var(--warn)}
.t-folder{color:var(--accent)}.t-image{color:var(--hue-green)}.t-video{color:var(--hue-violet)}.t-audio{color:var(--hue-orange)}.t-archive{color:var(--hue-yellow)}.t-pdf{color:var(--hue-red)}.t-doc{color:var(--hue-blue)}.t-file{color:var(--muted)}

.ltable{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:hidden}
.lrow{display:grid;grid-template-columns:40px 1fr 110px 190px 76px;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--line);cursor:pointer;position:relative;font-size:13.5px}
.lrow:last-child{border-bottom:0}
.lrow:hover{background:var(--panel-2)}
.lrow.selected{background:var(--panel-2)}
.lrow.lhead{position:sticky;top:0;background:var(--panel-2);cursor:default;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700}
.lrow .selbox{position:static;opacity:1}
.lc-name{display:flex;align-items:center;gap:10px;min-width:0;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-name .li{width:22px;height:22px;flex:none}.lc-name .li svg{width:100%;height:100%}
.lc-size,.lc-date{color:var(--muted);font-size:13px}
.lc-act{display:flex;gap:4px;justify-content:flex-end;opacity:0;transition:.12s}
.lrow:hover .lc-act{opacity:1}
.star-mini{display:inline-flex;width:13px;height:13px;color:var(--warn)}.star-mini svg,.star-mini .ic{width:100%;height:100%;fill:var(--warn);stroke:var(--warn)}
.lock-mini{display:inline-flex;flex:none;width:13px;height:13px;margin-left:6px;color:var(--muted);vertical-align:-2px}
.lock-mini .ic{width:100%;height:100%}
.card.playing,.row.playing,.lrow.playing{outline:2px solid var(--accent);outline-offset:-2px}

.bulkbar{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:36;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line-strong);border-radius:30px;padding:8px 12px;box-shadow:var(--shadow-pop);flex-wrap:wrap;justify-content:center;max-width:92vw}
.bb-count{font-weight:700;font-size:13px;padding:0 6px}
.marquee{position:fixed;z-index:35;border:1px solid var(--accent);background:var(--accent-soft);pointer-events:none;border-radius:2px}
.marquee-on{user-select:none;-webkit-user-select:none}

.drop{position:fixed;inset:0;z-index:30;background:var(--scrim);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:30px;pointer-events:none}
.drop-inner{border:2px dashed var(--accent);border-radius:var(--radius);padding:70px 100px;font-size:18px;font-weight:700;color:var(--accent);background:var(--panel)}
.toast{position:fixed;bottom:24px;right:24px;z-index:37;width:330px;max-width:92vw;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-pop)}
.toast-title{font-weight:700;font-size:14px}.toast-bar{height:6px;background:var(--panel-2);border-radius:6px;overflow:hidden;margin:10px 0 7px}.toast-fill{height:100%;width:0;background:var(--accent);transition:width .2s}.toast-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.menu{position:fixed;z-index:45;min-width:210px;background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;padding:6px;box-shadow:var(--shadow-pop)}
.mitem{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--text)}
.mitem:hover{background:var(--panel-2)}
.mitem.danger{color:var(--bad)}.mitem .ic{color:var(--muted)}.mitem.danger .ic{color:var(--bad)}
.msep{height:1px;background:var(--line);margin:5px 8px}

/* Dialogs */
.modal-wrap{position:fixed;inset:0;z-index:46;background:var(--scrim);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}
.modal{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-pop);max-height:92vh;overflow:auto}
.modal.wide{max-width:580px}
.modal.editor{max-width:min(940px,94vw)}
.modal h2{font-size:19px;margin-bottom:14px;word-break:break-word}
.modal label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin:12px 0 0}
.modal .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal textarea{resize:vertical}
.modal-row{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;flex-wrap:wrap}
.modal-btn{padding:10px 16px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--panel);color:var(--text);cursor:pointer;font-weight:600}
.modal-btn:hover{background:var(--panel-2)}
.modal-btn.primary{background:var(--accent-fill);color:var(--on-accent);border-color:transparent}
.modal-btn.primary:hover{background:var(--accent-fill-hover)}
.modal-btn.saved-ok{background:var(--good);color:var(--on-inverse);border-color:transparent}
.modal-row .modal-btn.danger{background:var(--bad);color:var(--on-inverse);border-color:transparent}
.modal-row .modal-btn.danger:hover{filter:brightness(1.08)}
.modal-btn:disabled,.mini:disabled{opacity:.5;cursor:not-allowed}
.modal label.opt{display:flex;align-items:flex-start;gap:10px;margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text);font-size:13.5px;cursor:pointer}
.modal label.opt input{flex:none;width:16px;height:16px;margin:2px 0 0;padding:0;accent-color:var(--accent-fill)}
.modal label.opt small{display:block;margin-top:2px;color:var(--muted);font-size:12.5px;font-weight:400}
.modal label.opt:has(input:checked){border-color:var(--accent)}
.info-row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.info-row span{color:var(--muted)}
.meta-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.meta-pair{display:flex;gap:8px;align-items:center}.meta-pair input{flex:1}
.meta-del{background:var(--panel-2);border:1px solid var(--line);color:var(--muted);border-radius:8px;width:34px;height:34px;cursor:pointer;flex:none}
.meta-add{margin-top:10px;background:none;border:1px dashed var(--line-strong);color:var(--muted);padding:8px;border-radius:8px;cursor:pointer;width:100%}
.pick-list{max-height:300px;overflow:auto;display:flex;flex-direction:column;gap:3px;margin-top:8px}
.pick{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;cursor:pointer;color:var(--text);font-size:14px}
.pick:hover{background:var(--panel-2)}
.share-link{display:flex;gap:8px;margin-top:14px}.share-link input{flex:1}
.share-hint{color:var(--good);font-size:13px;margin-top:8px}
.slug-row{display:flex;align-items:center;gap:0;margin-top:5px}
.slug-prefix{background:var(--panel-2);border:1px solid var(--control-line);border-right:0;border-radius:var(--radius-sm) 0 0 var(--radius-sm);padding:11px 10px;color:var(--muted);font-family:var(--font-mono);font-size:13px}
.slug-row input{border-radius:0 var(--radius-sm) var(--radius-sm) 0!important;margin-top:0!important}
.ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:8px}
.ov-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
.ov-row select{padding:5px 8px;border-radius:7px;background:var(--panel-2);border:1px solid var(--control-line);color:var(--text)}

/* Shares and link rows */
.shares{display:flex;flex-direction:column;gap:10px}
.share-row{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.share-main{display:flex;align-items:center;gap:12px}
.share-ico{width:30px;height:30px;flex:none}.share-ico svg{width:100%;height:100%}
.share-meta{flex:1;min-width:0}.share-name{font-weight:700;font-size:14px}.share-label{color:var(--muted);font-weight:400}
.share-sub{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.tag{font-size:11px;background:var(--panel-2);color:var(--muted);padding:2px 7px;border-radius:6px}
.status{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}
.status.on{background:var(--good-soft);color:var(--good)}.status.off{background:var(--bad-soft);color:var(--bad)}
.share-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.mini{font-size:12px;padding:6px 11px;border-radius:8px;border:1px solid var(--line-strong);background:var(--panel);color:var(--text);cursor:pointer}
.mini:hover{background:var(--panel-2)}
.mini.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.mini.primary{background:var(--accent-fill);color:var(--on-accent);border-color:transparent;font-weight:600}
.mini.primary:hover{background:var(--accent-fill-hover)}
.gshare-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--panel)}
.gs-name{font-weight:600}
.gs-sub{font-size:12px;color:var(--muted);margin-top:2px}
.gs-actions{display:flex;gap:6px;flex-shrink:0}
.gs-expired{color:var(--bad)}

/* Admin console, settings */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);padding:10px 14px;cursor:pointer;font-weight:600;font-size:14px}
.tab.active{color:var(--text);border-bottom-color:var(--accent)}
.admin-head{display:flex;justify-content:flex-end;margin-bottom:14px;gap:8px}
.utable{width:100%;border-collapse:collapse;font-size:13.5px}
.utable th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;border-bottom:1px solid var(--line)}
.utable td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.setting-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line)}
.setting-row:last-of-type{border-bottom:0}
.setting-title{font-weight:700;font-size:14px}
.setting-desc{color:var(--muted);font-size:12.5px;margin-top:3px;max-width:520px}
.setting-card label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-top:14px}
.setting-card > label:first-of-type{margin-top:4px}
.setting-card label.check{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer}
.setting-card input[type=text],.setting-card input[type=password],.setting-card input[type=number],.setting-card input[type=email],.setting-card select,.setting-card textarea{width:100%;background:var(--panel-2);border:1px solid var(--control-line);border-radius:var(--radius-sm);padding:11px 13px;outline:none;margin-top:5px;transition:border-color .15s,box-shadow .15s}
.setting-card input[type=text]:focus,.setting-card input[type=number]:focus,.setting-card input[type=password]:focus,.setting-card input[type=email]:focus,.setting-card select:focus,.setting-card textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.setting-card .grid2 input[type=color]{margin-top:5px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;margin-top:14px}
.stat-cell{background:var(--panel-2);border-radius:var(--radius-sm);padding:14px;text-align:center}
.stat-cell b{display:block;font-size:24px;font-weight:700;letter-spacing:-.01em}.stat-cell span{font-size:12px;color:var(--muted)}
.danger-zone{border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.danger-zone .setting-title{color:var(--bad)}
.cs-banner{border-color:var(--warn)}
.cs-text{max-width:none;line-height:1.5}
.cs-text code{overflow-wrap:anywhere}

.switch{position:relative;display:inline-block;width:46px;height:26px;flex:none}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:var(--panel-2);border:1px solid var(--control-line);border-radius:26px;transition:.2s}
.slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:var(--muted);border-radius:50%;transition:.2s}
.switch input:checked + .slider{background:var(--accent-fill);border-color:transparent}
.switch input:checked + .slider:before{transform:translateX(20px);background:var(--on-accent)}
.switch input:focus-visible + .slider{outline:2px solid var(--accent);outline-offset:2px}

.swatches{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.swatch{width:30px;height:30px;border-radius:8px;cursor:pointer;border:2px solid transparent}
.swatch.sel{border-color:var(--text)}
.swatches .swatch{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;cursor:pointer;margin:0 8px 6px 0;box-shadow:0 0 0 2px transparent;transition:box-shadow .12s,transform .12s}
.swatches .swatch:hover{transform:scale(1.08)}
.swatches .swatch.sel{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--accent)}
.swatches .swatch.swatch-none{background:transparent;border:1px dashed var(--line);color:var(--muted)}
.seg{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.seg button{padding:8px 14px;border-radius:8px;border:1px solid var(--line-strong);background:var(--panel);color:var(--text);cursor:pointer;font-size:13px}
.seg button.sel{background:var(--accent-fill);color:var(--on-accent);border-color:transparent}
input[type=color]{width:46px;height:34px;padding:2px;border:1px solid var(--control-line);border-radius:8px;background:var(--panel-2);cursor:pointer;vertical-align:middle}
input[type=range]{accent-color:var(--accent-fill)}

/* The share page (/s/...) */
.share-page{max-width:920px;margin:0 auto;padding:40px 24px 80px}
.share-head{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.share-head .logo{display:block;width:46px;height:46px;flex:none}
.share-head .logo.mark{background:url(/icons/logo-mark.svg) center/contain no-repeat}
.share-head .logo.glyph{display:grid;place-items:center;border-radius:13px;background:var(--accent-fill);color:var(--on-accent);font-size:22px}
.share-head h1{font-size:22px}.share-head .sub{color:var(--muted);font-size:13px}
.gate{max-width:380px;margin:80px auto;text-align:center}
.gate input{width:100%;margin:14px 0;padding:11px 13px;background:var(--panel-2);border:1px solid var(--control-line);border-radius:var(--radius-sm);color:var(--text);font-size:15px;outline:none;box-sizing:border-box}
.gate input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.file-hero{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:34px;text-align:center;max-width:460px;margin:30px auto}
.file-hero .big{width:72px;height:72px;margin:0 auto 16px}.file-hero .big svg{width:100%;height:100%}
.file-hero h2{font-size:18px;word-break:break-word}.file-hero .meta{color:var(--muted);margin:6px 0 20px}
.msg-box{max-width:460px;margin:80px auto;text-align:center;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:40px}

@media(max-width:900px){
  .auth-screen{grid-template-columns:minmax(0,440px);grid-template-rows:none;align-content:start;row-gap:28px}
  .hero{align-items:center;text-align:center}
  .hero-mark{width:96px}
  .hero-lead{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
}
@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .hamburger{display:flex}
  .search{width:auto;flex:1}
  .sidebar{position:fixed;z-index:38;left:0;top:0;bottom:0;width:min(280px,82vw);transform:translateX(-100%);transition:transform .2s;background:var(--panel);box-shadow:var(--shadow-pop)}
  .sidebar.open{transform:none}
  .sidebar-backdrop{position:fixed;inset:0;background:var(--scrim);z-index:37;display:block}
  .lrow{grid-template-columns:34px 1fr auto}
  .lc-size,.lc-date{display:none}
}
/* On a phone the search box has a row of its own: next to the breadcrumb and the view switch it is left about 100px wide at 390px, and its placeholder is cut. */
@media(max-width:640px){
  .topbar{flex-wrap:wrap;row-gap:10px}
  .search{flex:1 1 100%}
}
@media(max-width:600px){.ov-grid{grid-template-columns:1fr}}

/* Connection and update screens, support links */
.conn-blocker{position:fixed;inset:0;z-index:9999;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(6px);display:grid;place-items:center;padding:24px;overflow:auto}
.conn-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:32px;max-width:440px;text-align:center}
.conn-card .conn-ic{font-size:40px;margin-bottom:10px}
.conn-card h2{margin:0 0 8px}
.conn-card p{color:var(--muted);margin:0 0 18px}
.conn-card.upd-card{max-width:460px;text-align:left;max-height:88vh;display:flex;flex-direction:column}
.conn-card.upd-card h2,.conn-card.upd-card .conn-ic{text-align:center}
.conn-card.upd-card .conn-ic{display:block}
.upd-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.upd-actions .modal-btn{flex:1 1 auto}
.upd-sched{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.upd-auto{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;color:var(--text)}
.upd-auto input{width:auto}
.conn-card.upd-card .upd-intro{margin:0 0 12px}
.upd-notes{flex:1 1 auto;min-height:0;overflow-y:auto;max-height:42vh;margin:0 0 14px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.donate-link{color:var(--hue-red)!important;opacity:1!important;transition:color .15s}
.donate-link:hover{color:var(--accent)!important}

/* Setup: help, codes, the wizard */
.su-help{margin:6px 0 12px;font-size:13px;color:var(--muted)}
.su-help summary{cursor:pointer;color:var(--accent)}
.su-help ol{margin:8px 0 0 18px;padding:0;display:grid;gap:5px}
.su-help code{background:var(--panel-2);padding:1px 5px;border-radius:5px}
.su-note{color:var(--muted);font-size:12.5px;line-height:1.5;margin-top:6px;display:block}
.su-note.ok{color:var(--good)}
.su-note.err{color:var(--bad)}
.code-box{background:var(--panel-2);border:1px dashed var(--line-strong);border-radius:10px;padding:9px 12px;font-family:var(--font-mono);letter-spacing:1px;margin:8px 0;word-break:break-all}
.link-btn{background:none;border:none;color:var(--accent);cursor:pointer;margin-top:10px;font-size:13px}
.tf-secret{display:block;text-align:center;background:var(--panel-2);border:1px dashed var(--line-strong);border-radius:10px;padding:9px 12px;font-family:var(--font-mono);letter-spacing:1.5px;word-break:break-all;user-select:all}
.qr-box{display:flex;justify-content:center;background:var(--qr-bg);border-radius:12px;padding:12px;margin:12px auto;width:max-content;max-width:100%}
.qr-box svg{width:190px;height:190px;display:block}
.qr-box img{width:190px;height:190px;display:block}
.setup-sub{color:var(--muted);font-size:14px;margin:2px 0 4px}
.wiz-progress{display:flex;gap:7px;justify-content:center;margin:18px 0 20px}
.wiz-dot{width:9px;height:9px;border-radius:50%;background:var(--line-strong);transition:background .2s,transform .2s}
.wiz-dot.active{background:var(--accent);transform:scale(1.25)}
.wiz-dot.done{background:var(--accent);opacity:.55}
.wiz-step{animation:wizfade .25s ease}
@keyframes wizfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wiz-nav{display:flex;gap:10px;align-items:center;margin-top:22px}
.wiz-nav .modal-btn{min-width:96px}
.wiz-nav #wiz-next{margin-left:auto}
.wiz-nav #su-go{margin-left:auto;width:auto;padding-left:26px;padding-right:26px}
.lang-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:6px}
.lang-btn{padding:13px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;font-size:15px;font-weight:600;color:var(--text);transition:border-color .15s,background .15s,transform .12s}
.lang-btn:hover{transform:translateY(-1px);border-color:var(--accent)}
.lang-btn.sel{border-color:var(--accent);background:var(--panel-2);box-shadow:0 0 0 1px var(--accent) inset}
.su-connect-row{display:flex;gap:12px;align-items:center;margin-top:10px;flex-wrap:wrap}

/* Folders: notes, emoji, colours */
.folder-note{grid-column:1 / -1;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:12px 14px;margin:2px 0 14px}
.folder-note .fn-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:14px}
.folder-note .fn-head .ic{width:16px;height:16px;opacity:.8}
.folder-note .fn-head .fn-edit{margin-left:auto}
.folder-note .fn-body{white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.5;max-height:280px;overflow:auto}
.folder-note-add{grid-column:1 / -1;margin:2px 0 14px}
.fn-add-btn{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px dashed var(--line-strong);color:var(--muted);border-radius:10px;padding:8px 13px;cursor:pointer;font-size:13px;transition:border-color .15s,color .15s}
.fn-add-btn:hover{border-color:var(--accent);color:var(--text)}
.fn-add-btn .ic{width:15px;height:15px}
.folder-emoji{font-size:30px;line-height:1;display:inline-block}
.card-ico .folder-emoji{font-size:34px}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:6px}
.emoji-pick{font-size:20px;padding:6px 0;background:var(--panel);border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:border-color .12s,transform .12s}
.emoji-pick:hover{transform:translateY(-1px)}
.emoji-pick.sel{border-color:var(--accent);background:var(--panel-2)}
.card.folder.has-color{border-color:color-mix(in srgb,var(--fc) 45%,var(--line));background:color-mix(in srgb,var(--fc) 10%,var(--panel))}
.card.folder.has-color .card-ico{color:var(--fc)}
.card.folder.has-color:hover{border-color:color-mix(in srgb,var(--fc) 72%,var(--line-strong));background:color-mix(in srgb,var(--fc) 16%,var(--panel-2))}
.card.folder.fshadow{box-shadow:var(--shadow-sm)}
.card.folder.fshadow.has-color{box-shadow:0 10px 28px -10px color-mix(in srgb,var(--fc) 70%,transparent)}
@supports not (color: color-mix(in srgb, currentcolor, currentcolor)){
  .card.folder.has-color{border-color:var(--fc)}
  .card.folder.has-color .card-ico{color:var(--fc)}
  .card.folder.fshadow.has-color{box-shadow:0 10px 26px -12px var(--fc)}
}
.bg-upload-row{display:flex;gap:10px;align-items:center;margin-top:5px}
.bg-upload-row input[type=text]{flex:1;margin-top:0}
.bg-upload-btn{cursor:pointer;white-space:nowrap}

.prog{height:7px;background:var(--panel-2);border-radius:7px;overflow:hidden}
.prog-fill{height:100%;width:0;background:var(--accent);transition:width .3s}
.act-card .act-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.act-card .act-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.act-card .act-head .su-note{white-space:nowrap}
.act-log{display:flex;flex-direction:column;gap:2px}
.act-log-row{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px;border-bottom:1px solid var(--line)}
.act-log-row:last-child{border-bottom:none}
.act-dot{width:8px;height:8px;border-radius:50%;flex:none}
.act-dot.ok{background:var(--good)}
.act-dot.err{background:var(--bad)}
.act-log-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-log-stat{color:var(--muted)}
.act-log-time{color:var(--muted);font-variant-numeric:tabular-nums}
.ev-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ev-log{display:flex;flex-direction:column}
.ev-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 2px;border-bottom:1px solid var(--line);font-size:13px}
.ev-row:last-child{border-bottom:none}
.ev-badge{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--panel-2);color:var(--muted);border:1px solid var(--line)}
.ev-who{font-weight:600;color:var(--text)}
.ev-act{color:var(--muted)}
.ev-detail{color:var(--text);overflow:hidden;text-overflow:ellipsis;max-width:46%;white-space:nowrap}
.ev-meta{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11.5px}
.ev-ip,.ev-time{font-variant-numeric:tabular-nums}
.ev-badge.ev-auth{--ev:var(--hue-blue)}
.ev-badge.ev-upload{--ev:var(--hue-green)}
.ev-badge.ev-download{--ev:var(--hue-teal)}
.ev-badge.ev-share{--ev:var(--hue-violet)}
.ev-badge.ev-folder{--ev:var(--hue-yellow)}
.ev-badge.ev-admin{--ev:var(--hue-red)}
.ev-badge.ev-guest{--ev:var(--hue-orange)}
.ev-badge.ev-auth,.ev-badge.ev-upload,.ev-badge.ev-download,.ev-badge.ev-share,.ev-badge.ev-folder,.ev-badge.ev-admin,.ev-badge.ev-guest{background:color-mix(in srgb,var(--ev) 16%,transparent);color:var(--ev);border-color:color-mix(in srgb,var(--ev) 35%,transparent)}
.ev-badge.ev-file,.ev-badge.ev-system{background:var(--panel-2);color:var(--muted)}

/* Audio player */
.player{position:fixed;left:0;right:0;bottom:0;z-index:36;display:flex;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--panel);border-top:1px solid var(--line-strong)}
.player-info{min-width:0;flex:0 1 220px}
.player-title{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player audio{flex:1 1 auto;min-width:0;height:38px}
.player-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);color:var(--text);cursor:pointer;flex:none}
.player-btn:hover{border-color:var(--accent)}
body.has-player .content{padding-bottom:96px}
body.has-player .toast{bottom:92px}
@media (max-width:720px){.player{flex-wrap:wrap}.player-info{flex:1 1 100%}.player audio{order:3;flex:1 1 100%}}

/* Folders that only chosen people can see */
.access-list{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow:auto;margin-top:12px}
.access-user{padding:7px 9px;border-radius:8px}
.modal .access-user{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:400}
.modal .access-user input{flex:none;width:16px;height:16px;margin:0;padding:0}
.access-user:hover{background:var(--panel-2)}
.access-user .au-name{font-weight:600;color:var(--text)}
.access-user .su-note{margin:0 0 0 auto}
#fa-note{margin-top:12px}
.member-list{display:flex;flex-direction:column;gap:2px;max-height:300px;overflow:auto;margin-top:12px}
.member-row{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:8px}
.member-row:hover{background:var(--panel-2)}
.member-row .mr-who{flex:1;min-width:0;overflow-wrap:anywhere}
.member-row .au-name{font-weight:600;color:var(--text)}
.member-row .su-note{margin-top:2px}
.modal .member-row select{width:auto;margin:0;padding:6px 8px}
.member-add{display:flex;gap:8px;align-items:center;margin-top:6px}
.modal .member-add input{flex:1;min-width:0;margin:0}
.modal .member-add select{width:auto;margin:0}
.member-add .modal-btn{flex:none}

/* Upload keys */
.key-list{display:flex;flex-direction:column;margin-top:6px}
.key-row{display:flex;align-items:center;gap:12px;padding:10px 2px;border-top:1px solid var(--line)}
.key-row.is-expired{opacity:.6}
.key-main{flex:1;min-width:0}
.key-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-weight:600;font-size:14px;overflow-wrap:anywhere}
.key-sub{color:var(--muted);font-size:12.5px;line-height:1.5;margin-top:2px;overflow-wrap:anywhere}
.key-row .mini{flex:none}
.req-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;flex:none}
.key-make{border-top:1px solid var(--line);margin-top:14px}
.key-cmd{display:block;background:var(--panel-2);border:1px dashed var(--line-strong);border-radius:10px;padding:9px 12px;margin:8px 0;font-family:var(--font-mono);font-size:13px;word-break:break-all;user-select:all}

/* Import tab */
.im-box{margin:2px 0 6px 24px}
.im-ready{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.im-list{margin:4px 0 0;padding-left:18px;color:var(--muted);font-size:12.5px;line-height:1.5;overflow-wrap:anywhere}
progress.im-bar{display:block;width:100%;height:10px;margin-top:12px;accent-color:var(--accent-fill)}

/* The Reports tab */
.rp-head{justify-content:flex-start}
.rp-head .seg{margin-top:0}
.rp-ref{font-family:var(--font-mono);font-size:12px;white-space:nowrap}
.rp-where{max-width:340px;overflow-wrap:anywhere;color:var(--muted)}
.rp-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 12px;color:var(--muted);font-size:13px}
.rp-fields{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.rp-row{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:9px 12px;border-bottom:1px solid var(--line)}
.rp-row:last-child{border-bottom:0}
.rp-label{color:var(--muted);font-size:12px;font-weight:600}
.rp-value{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.5px}
@media (max-width:560px){.rp-row{grid-template-columns:1fr;gap:2px}}

/* People: the sign-up queue and the dialogs of the account actions */
.utable-wrap{overflow-x:auto}
.utable-wrap .utable{min-width:760px}
.utable td .su-note{margin-top:3px;max-width:240px}
.pq-list{list-style:none;margin:10px 0 0;padding:0}
.pq-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}
.pq-who{min-width:0;overflow-wrap:anywhere}
.pq-who .su-note{display:inline;margin:0 0 0 10px}

/* Utilities. They stand in for the style="" attributes the pages used to carry: the Content-Security-Policy (src/security.js) refuses inline styles, so the markup that app.js and share.js build uses these classes instead. A value only known at run time (a width in %, a colour) goes into data-w / data-bg / data-fg and is applied from script (paintDynamic in app.js). Margin, padding, width and colour keep !important because the inline style they replace outranked every other rule; display never gets it, so .hidden still wins. */
.mt0{margin-top:0!important}.mt4{margin-top:4px!important}.mt6{margin-top:6px!important}.mt8{margin-top:8px!important}.mt10{margin-top:10px!important}.mt12{margin-top:12px!important}.mt14{margin-top:14px!important}.mt16{margin-top:16px!important}.mt18{margin-top:18px!important}.mt22{margin-top:22px!important}.mt26{margin-top:26px!important}.mt28{margin-top:28px!important}
.mb10{margin-bottom:10px!important}.mb12{margin-bottom:12px!important}.mb18{margin-bottom:18px!important}
.m-0{margin:0!important}.m-6-0-0{margin:6px 0 0!important}.m-0-0-8{margin:0 0 8px!important}.m-0-0-16{margin:0 0 16px!important}.m-4-0-10{margin:4px 0 10px!important}.m-10-0-2{margin:10px 0 2px!important}
.pad10{padding:10px!important}.pad-6-11{padding:6px 11px!important}
.w-full{width:100%!important}.w-120{width:120px!important}
.minw-160{min-width:160px!important}.minw-190{min-width:190px!important}.minw-200{min-width:200px!important}.minw-220{min-width:220px!important}.minw-240{min-width:240px!important}
.grow-150{flex:1!important;min-width:150px!important}.grow-260{flex:1 1 260px!important;min-width:0!important}
.jc-start{justify-content:flex-start!important}.jc-center{justify-content:center!important}
.c-text{color:var(--text)!important}
.txt-dim-lh{color:var(--muted)!important;line-height:1.6!important}
.txt-err{color:var(--bad)!important}
.ic-12{width:12px!important;height:12px!important}.ic-15{width:15px!important;height:15px!important}.ic-18{width:18px!important;height:18px!important}
.ic.ic-emoji{display:inline-flex;width:20px!important;justify-content:center;font-style:normal}
.row-wrap{display:flex;gap:8px;flex-wrap:wrap}
.row-center{display:flex;align-items:center;gap:8px}
.row-fixed{display:flex;gap:8px;flex:none}
.col-end{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.modal-row.row-wrap-m14{flex-wrap:wrap;gap:8px;margin:14px 0!important}
.setting-card.row-between{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ed-area{min-height:55vh!important;font-family:var(--font-mono)!important;line-height:1.5!important;resize:vertical!important}
/* File server access (docs/DESIGN.md 1): a person without it sees none of the file area's controls, only the panel that explains it. */
.app.no-files .actions,.app.no-files #nav-root,.app.no-files #nav-starred,.app.no-files #nav-shares,.app.no-files #nav-activity,.app.no-files #ext-label,.app.no-files #ext-nav,.app.no-files .tree-label,.app.no-files #tree,.app.no-files #stats,.app.no-files .search,.app.no-files #view-toggle{display:none!important}
.fg h2{margin:0;font-size:20px}
.fg-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.fg .su-note{margin-top:0}
/* The tools launcher: a card for each tool the account holds. */
.tl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gap);width:100%;max-width:760px;margin:10px 0 4px}
.tl-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.tl-name{font-weight:700;font-size:16px;color:var(--text)}
.tl-card .setting-desc{margin:0 0 8px}
.tl-card .modal-btn{margin-top:auto}
/* The Access column of the Users table: tools and file server access as switches, and the Requests filter beside New user. */
.acc-grid{display:grid;grid-template-columns:repeat(2,max-content);gap:3px 16px}
.acc-grid .check{margin-top:0;font-size:12.5px;white-space:nowrap}
.acc-grid .check.off,.acc-grid .check.off input{cursor:not-allowed}
.acc-grid .check.off{opacity:.6}
.req-filter{display:inline-flex;align-items:center;gap:6px}
.req-filter.on{border-color:var(--accent);color:var(--accent)}