:root{font-family:"DM Sans","Noto Sans SC",system-ui,sans-serif;color:#192421;background:#f6f7f5;font-synthesis:none;text-rendering:optimizeLegibility;--ink:#192421;--muted:#77817d;--line:#e5e9e5;--green:#176b52;--green-dark:#10553f;--mint:#e4f2eb;--paper:#fff;--red:#b4473a;--shadow:0 10px 32px rgba(21,48,37,.055)}
*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse at 14% 0%,#edf4ee 0,transparent 34rem),#f6f7f5}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,.file-button:focus-within{outline:3px solid #99c9b3;outline-offset:2px}[hidden]{display:none!important}.shell{width:min(100% - 40px,1050px);margin:auto;padding:20px 0 72px}.topbar{height:48px;display:flex;align-items:center;justify-content:space-between;margin-bottom:42px}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700;font-size:15px;letter-spacing:-.02em}.brand-mark{width:28px;height:28px;border-radius:9px;background:var(--green);color:white;display:grid;place-items:center;font-size:19px}.account-bar{display:flex;align-items:center;gap:16px}.account-name{color:#5d6863;font-size:13px}.text-button{border:0;background:none;color:var(--green);font-size:13px;font-weight:600;padding:8px 3px}.text-button:hover{color:var(--green-dark)}
.auth-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:8%;align-items:center;max-width:900px;margin:8vh auto}.intro h1,.welcome-row h1{margin:12px 0 15px;font-size:clamp(36px,5vw,58px);line-height:1.15;letter-spacing:-.055em}.intro-copy,.muted{color:var(--muted);line-height:1.75;font-size:15px;max-width:430px}.eyebrow{margin:0;color:var(--green);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.card{background:var(--paper);border:1px solid #edf0ed;border-radius:20px;box-shadow:var(--shadow)}.auth-card{padding:25px}.tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);margin-bottom:22px}.tab{border:0;background:transparent;color:#8b9490;padding:0 12px 13px;font-weight:600;border-bottom:2px solid transparent}.tab.active{color:var(--green);border-color:var(--green)}.field{display:block;margin:0 0 17px}.field>span{display:block;margin:0 0 8px;font-size:12px;font-weight:600;color:#58635e}.field input{width:100%;height:46px;padding:0 13px;border:1px solid #dfe5e0;border-radius:10px;background:#fcfdfc;color:var(--ink)}.field input:focus{border-color:#7cb79d;outline:none;box-shadow:0 0 0 3px #e5f2eb}.button{min-height:43px;border:0;border-radius:10px;padding:0 17px;display:inline-flex;justify-content:center;align-items:center;font-size:13px;font-weight:700;transition:transform .12s,background .12s}.button:active{transform:translateY(1px)}.primary{color:white;background:var(--green)}.primary:hover{background:var(--green-dark)}.secondary{background:#f0f3f1;color:#34423b}.secondary:hover{background:#e7ece8}.full{width:100%;margin-top:3px}.fine-print,.privacy-note{font-size:11px;line-height:1.6;color:#97a09b}.fine-print{text-align:center;margin:16px 0 0}.error{color:#a33f34;background:#fff2f0;border-radius:8px;padding:10px 12px;font-size:12px}.auth-layout:has(.error:not([hidden])){align-items:start}
.welcome-row{margin:0 0 25px}.welcome-row h1{font-size:clamp(29px,4vw,40px);margin:8px 0}.welcome-row .muted{margin:0;font-size:14px}.upload-card{padding:24px 27px;margin-bottom:47px}.upload-copy{display:flex;align-items:center;gap:14px}.camera-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:14px;background:var(--mint);color:var(--green);font-size:29px}.upload-copy h2,.section-heading h2{margin:0;font-size:17px;letter-spacing:-.025em}.upload-copy p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.5}.upload-actions{display:flex;gap:10px;margin:21px 0 0 57px}.file-button{position:relative;overflow:hidden}.file-button input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.privacy-note{margin:15px 0 0 57px}.upload-status{margin:18px 0 0 57px}.status-line{display:flex;justify-content:space-between;color:#53615a;font-size:12px;margin-bottom:8px}.progress-track{height:5px;background:#e9eeea;border-radius:8px;overflow:hidden}.progress-fill{height:100%;width:0;background:#3e9b76;border-radius:8px;transition:width .15s}.retry-button{margin-top:6px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:16px}.section-heading h2{font-size:24px;margin-top:4px}.icon-button{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:11px;background:white;color:#52615a;font-size:20px}.icon-button:hover{background:#f0f5f1}.gallery-message{font-size:13px;color:var(--muted);margin:8px 0 15px}.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.photo-card{overflow:hidden;background:white;border:1px solid #e9ede9;border-radius:15px;box-shadow:0 5px 18px rgba(21,48,37,.035);cursor:pointer;transition:transform .16s,box-shadow .16s}.photo-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.photo-thumb{display:block;width:100%;aspect-ratio:1.12;object-fit:cover;background:#e9eeea}.photo-meta{padding:11px 12px 13px}.photo-time{font-size:12px;font-weight:600;color:#34413b}.photo-size{font-size:10px;color:#939d97;margin-top:4px}.load-more{display:flex;margin:22px auto 0}.empty-state{grid-column:1/-1;min-height:180px;display:grid;place-items:center;text-align:center;border:1px dashed #dce4de;border-radius:15px;color:#89938d;font-size:13px;padding:25px}.empty-symbol{font-size:29px;color:#91b7a2;margin-bottom:8px}.toast{position:fixed;z-index:10;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translate(-50%,14px);opacity:0;pointer-events:none;background:#20332b;color:white;border-radius:11px;padding:12px 16px;font-size:13px;box-shadow:0 8px 25px #10261b35;transition:opacity .2s,transform .2s;max-width:calc(100% - 32px)}.toast.show{opacity:1;transform:translate(-50%,0)}
.preview-dialog{border:0;border-radius:18px;padding:0;width:min(760px,calc(100% - 28px));max-height:min(92vh,900px);box-shadow:0 24px 90px #07170f55;color:var(--ink)}.preview-dialog::backdrop{background:#101b16a6;backdrop-filter:blur(3px)}.preview-top{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;font-size:12px;color:#627069;border-bottom:1px solid #eff2ef}.close-button{font-size:24px;width:32px;height:32px;border:0}.preview-image-wrap{background:#101512;display:grid;place-items:center;min-height:160px;max-height:68vh}.preview-image-wrap img{display:block;max-width:100%;max-height:68vh;object-fit:contain}.preview-details{display:flex;justify-content:space-between;align-items:center;padding:15px 18px 5px;font-size:12px;color:var(--muted)}.preview-actions{display:flex;gap:8px}.danger{color:#a8463a;background:#fbefed}.danger:hover{background:#f7dfdb}.preview-message{padding:0 18px;min-height:15px;font-size:12px;color:var(--green)}
@media(max-width:700px){.shell{width:min(100% - 30px,520px);padding-top:13px}.topbar{margin-bottom:32px}.auth-layout{display:flex;flex-direction:column;align-items:stretch;gap:25px;margin:2vh auto}.intro h1{font-size:39px}.intro-copy{font-size:13px;margin-bottom:0}.auth-card{padding:21px}.welcome-row{margin-bottom:21px}.welcome-row h1{font-size:30px}.welcome-row .muted{font-size:13px}.upload-card{padding:19px 17px;margin-bottom:37px}.upload-copy{align-items:flex-start}.camera-icon{flex:none}.upload-copy h2{font-size:15px}.upload-copy p{font-size:11px}.upload-actions{margin:17px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}.upload-actions .button{padding:0 8px;font-size:12px}.privacy-note,.upload-status{margin-left:0}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.photo-card{border-radius:12px}.photo-meta{padding:9px 10px 11px}.section-heading h2{font-size:22px}.preview-dialog{width:calc(100% - 16px);border-radius:14px}.preview-details{align-items:flex-start;gap:12px;flex-direction:column}.preview-actions{width:100%}.preview-actions .button{flex:1}.account-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(min-width:701px) and (max-width:900px){.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.auth-layout{gap:5%}}
.diagnostics-panel{margin-top:42px;border-top:1px solid var(--line);padding-top:18px}.diagnostics-panel summary{cursor:pointer;font-size:15px;font-weight:700;color:#34423b}.diagnostics-count{color:var(--muted);font-weight:500}.diagnostics-note{font-size:12px;line-height:1.6;color:var(--muted);max-width:700px}.diagnostics-actions{display:flex;align-items:center;gap:14px;margin:13px 0}.diagnostics-actions .button{min-height:36px}.diagnostics-list{display:grid;gap:10px}.diagnostic-entry{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}.diagnostic-head{display:flex;justify-content:space-between;gap:12px;font-size:13px}.diagnostic-head time,.diagnostic-meta,.diagnostic-received{color:var(--muted);font-size:11px}.diagnostic-meta{margin-top:5px}.diagnostic-detail{white-space:pre-wrap;overflow-wrap:anywhere;background:#f6f8f6;border-radius:8px;padding:10px 12px;margin:10px 0;color:#34423b;font:12px/1.6 ui-monospace,Consolas,monospace}.diagnostic-received{text-align:right}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
/* LAN connection readiness shown beside the capture controls. */
.lan-status{display:flex;align-items:center;gap:8px;margin:14px 0 0 57px;color:#66736c;font-size:12px;line-height:1.5}.lan-status::before{content:"";width:8px;height:8px;flex:none;border-radius:50%;background:#d2a34b;box-shadow:0 0 0 3px #d2a34b20}.lan-status[data-state="ready"]{color:#287550}.lan-status[data-state="ready"]::before{background:#38a36f;box-shadow:0 0 0 3px #38a36f20}.lan-status[data-state="relay"]{color:#777f7a}.lan-status[data-state="relay"]::before{background:#99a29d;box-shadow:0 0 0 3px #99a29d20}.lan-status[data-state="used"]{color:#287550}.lan-status[data-state="used"]::before{background:#38a36f;box-shadow:0 0 0 3px #38a36f20}
@media(max-width:700px){.lan-status{margin-left:0}}