:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#152a38;background:#f3f6f8;font-synthesis:none;font-size:16px;line-height:1.5}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer;min-height:44px;border:0;border-radius:8px;padding:.65rem 1rem;font-weight:650}button:disabled{cursor:wait;opacity:.6}a{color:inherit}header{height:88px;border-bottom:1px solid #d9e2e7;background:white;display:flex;align-items:center;gap:24px;padding:0 max(24px,calc((100vw - 1240px)/2))}.brand{text-decoration:none;font-size:1.35rem;font-weight:750;letter-spacing:-.04em;display:flex;align-items:center;gap:12px}.mark{display:grid;place-items:center;background:#123e50;color:#8ee9c7;width:36px;height:36px;border-radius:10px;font-size:1.8rem}.private-label{font-size:.75rem;letter-spacing:.12em;color:#637480;margin-left:auto}header button{margin-left:auto}main{max-width:1240px;padding:56px 24px;margin:auto;min-height:calc(100vh - 165px)}h1{font-size:clamp(2rem,4vw,3.3rem);line-height:1.1;letter-spacing:-.05em;margin:12px 0 28px;font-weight:720}h2{font-size:1.25rem;letter-spacing:-.03em;margin:0 0 24px}.eyebrow{color:#486977;font-size:.75rem;letter-spacing:.16em;font-weight:700}.intro{color:#627582;margin-bottom:28px}.auth-panel{max-width:460px;margin:7vh auto}.auth-panel h1{font-size:3rem}.auth-panel .primary{width:100%}label{display:flex;flex-direction:column;gap:8px;font-size:.875rem;font-weight:650;margin-bottom:20px}input,select{background:#fff;color:#162d3c;border:1px solid #b9c8d1;border-radius:7px;padding:12px;width:100%;min-width:0}input:focus,select:focus,button:focus-visible,a:focus-visible{outline:3px solid #63a5bc;outline-offset:3px}.primary{background:#133f50;color:white;display:flex;align-items:center;justify-content:space-between;gap:24px}.primary:hover{background:#1b5266}.secondary{background:#e9eff3;color:#294553;border:1px solid #cdd9df}.quiet{background:transparent;color:#355b6c}.danger{background:#a83036;color:#fff}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.work-grid{display:grid;grid-template-columns:minmax(300px,430px) minmax(0,1fr);gap:30px;align-items:start}.upload-panel,.shares-panel{background:#fff;border:1px solid #dce4e9;border-radius:14px;padding:28px;box-shadow:0 5px 25px #18384804}.drop-zone{position:relative;border:1.5px dashed #90aebb;border-radius:10px;background:#f6fafb;padding:24px 14px;text-align:center;align-items:center;font-weight:400;cursor:pointer}.drop-zone span:last-of-type{font-size:.8rem;color:#607986}.drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer}.drop-zone:focus-within{outline:3px solid #63a5bc;outline-offset:3px}.upload-glyph{background:#dfedf1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;color:#305969}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field-note{font-size:.875rem;color:#586f7d;margin:0 0 22px}.upload-panel .primary{width:100%}.list-heading{display:flex;justify-content:space-between;align-items:center}.count{font-size:.875rem;color:#6d808b}.share{border-top:1px solid #e2e9ed;padding:20px 0}.share:last-child{padding-bottom:0}.share-title{font-size:1rem;font-weight:650;overflow-wrap:anywhere;margin:0 0 4px}.share-meta{font-size:.875rem;color:#607381;overflow-wrap:anywhere;margin:3px 0}.share-top{display:flex;gap:15px;justify-content:space-between;align-items:start}.badge{font-size:.75rem;padding:3px 9px;border-radius:20px;background:#e2f2eb;color:#196241;white-space:nowrap}.badge.warn{background:#fff0d2;color:#815b16}.badge.muted{background:#edf0f3;color:#5d707c}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.actions button{font-size:.875rem;padding:.35rem .65rem;min-height:36px}.empty{color:#697d89;padding:36px 12px;text-align:center;border:1px dashed #d5e0e6;border-radius:8px}.notice{background:#e9f1f5;border-left:3px solid #44748a;padding:12px 16px;margin:0 0 24px;font-size:.875rem}.progress-label{display:flex;justify-content:space-between;margin:24px 0 12px}progress{width:100%;height:10px;accent-color:#287b69}#transfer-detail,#message{font-size:.9rem}#message{position:sticky;bottom:20px;max-width:720px;background:#183e50;color:white;padding:14px 18px;border-radius:8px;box-shadow:0 8px 32px #12334426}#message:empty{display:none}#setup-secret{display:block;overflow-wrap:anywhere;background:#e4edf2;padding:16px;font-size:1rem;margin-bottom:20px}dialog{border:1px solid #c5d3db;border-radius:14px;max-width:480px;padding:28px;color:inherit}dialog::backdrop{background:#102b3d88}.dialog-actions{display:flex;gap:12px;justify-content:flex-end}footer{padding:24px;text-align:center;color:#728591;font-size:.8rem;border-top:1px solid #d9e2e7}[hidden]{display:none!important}@media(max-width:850px){.work-grid{grid-template-columns:1fr}.section-heading{align-items:start}main{padding-top:32px}.private-label{display:none}.section-heading h1{font-size:2.3rem}.upload-panel,.shares-panel{padding:22px}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s}.share{animation:appear .15s ease-out}@keyframes appear{from{opacity:.5}to{opacity:1}}}

#setup-qr{display:block;max-width:100%;height:auto;margin:16px auto;background:white}#challenge-error{font-size:.9rem}#challenge-error:empty,#copy-status:empty{display:none}#copy-status{font-size:.875rem;color:#355b6c}

/* Keep authentication feedback aligned with its form, with errors distinct from status notices. */

#message.error,#challenge-error:not(:empty){background:#fff0f0;color:#9b1c24;border:1px solid #e7a4aa;border-left:4px solid #b4232d;border-radius:8px;padding:14px 16px;font-weight:600;line-height:1.55;overflow-wrap:anywhere;box-shadow:none}
input[aria-invalid="true"]{border-color:#b4232d;background:#fff8f8}

/* Separate authenticator enrollment from entering the generated code. */
#setup{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid #d9e2e7}
#setup-secret{border-radius:8px;margin-bottom:12px}
#copy-secret{display:block}
#copy-status{margin:10px 0 0}

/* Consistent control dimensions, including native selects and numeric inputs. */
input:not([type="file"]),select{height:48px;padding:0 12px;font-size:16px;line-height:1.5}
.form-row{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.form-row>label{min-width:0;justify-content:space-between}
.form-row input,.form-row select{flex-shrink:0}
.notice{width:100%}
/* One aligned, dismissible notification area below the header. */
#notifications{position:fixed;top:104px;right:max(24px,calc((100vw - 1192px)/2));width:min(420px,calc(100vw - 48px));z-index:20;filter:drop-shadow(0 8px 16px #12334426)}
#notifications:has(#message:empty){display:none}
#notifications #message{position:static;width:100%;max-width:none;margin:0;padding:16px 52px 16px 18px;line-height:1.55;overflow-wrap:anywhere;box-shadow:none}
#dismiss-message{position:absolute;right:4px;top:4px;width:44px;padding:0;background:transparent;color:white;font-size:24px;font-weight:400}
#notifications:has(.error) #dismiss-message{color:#9b1c24}
@media(max-width:600px){#notifications{top:96px;right:16px;width:calc(100vw - 32px)}}