:root{--forest:#17382f;--green:#216545;--surface:#fffdfa;--paper:#f7f6f1;--text:#26362c;--muted:#65766a;--border:#d9e4db;--warn:#a95d34;--error:#a63b3b;--ok:#257a4a}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--text);font:15px/1.5 system-ui,-apple-system,Segoe UI,Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:default}[hidden]{display:none!important}.topbar{background:var(--forest);color:white}.topinner{max-width:1200px;min-height:76px;padding:15px 22px;margin:auto;display:flex;align-items:center;gap:12px}.logo{width:44px;height:44px;border:1px solid #9abb9c;border-radius:12px;display:grid;place-items:center;font:30px Georgia}.brand{flex:1}.brand strong{font:24px Georgia,serif;display:block}.brand small{font-size:11px;color:#c7dacd;letter-spacing:.4px}.netbadge{font-size:11px;background:#ffffff18;border:1px solid #ffffff30;padding:7px 10px;border-radius:30px}.wrap{max-width:1200px;margin:auto;padding:24px 20px 80px}.panel{background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:0 9px 32px #233c2a0b}.gate{padding:30px;max-width:540px;margin:28px auto}.gate h1,.hero h1{font:normal 35px/1.15 Georgia,serif;margin:0 0 12px}.gate p,.hero p{color:var(--muted);margin:0 0 16px}.field{margin:15px 0;display:block}.field span{display:block;font-weight:700;color:#3f624c;font-size:12px;margin:0 0 6px}input,select{background:#fff;color:var(--text);border:1px solid #cbd9ce;border-radius:9px;padding:12px;width:100%;min-height:44px}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #91bc95;outline-offset:2px}.btn{border:0;border-radius:10px;padding:12px 16px;background:var(--green);color:#fff;font-weight:750}.btn.outline{border:1px solid #c4d7c8;background:#fff;color:var(--forest)}.btn.mini{font-size:12px;min-height:38px;padding:8px 12px}.btn.ghost{background:#e9f2e9;color:var(--forest)}.btn.bad{background:#f9eeeb;color:var(--error);border:1px solid #eed0ca}.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.btnrow>.btn{flex:1}.status{padding:12px 14px;border-radius:10px;background:#edf5ee;color:#40664c;margin:15px 0}.status.error{background:#fff0ea;color:#8c4032}.status.warn{background:#fff7ea;color:#946133}.status.good{background:#e8f5ed;color:#216841}.hero{display:flex;gap:20px;align-items:center;justify-content:space-between;margin:4px 0 14px}.hero p{margin:0}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0}.stats>div{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 16px}.stats b{display:block;font:30px Georgia;color:var(--forest)}.stats span{font-size:11px;color:var(--muted)}.tabs{display:flex;flex-wrap:wrap;background:#e5ede5;border:1px solid var(--border);padding:5px;gap:3px;border-radius:13px;width:max-content;max-width:100%;margin-bottom:15px}.tabs button{border:0;background:none;border-radius:9px;padding:10px 15px;color:#486251;font-size:13px;font-weight:750}.tabs button.active{background:#fff;color:var(--forest);box-shadow:0 2px 5px #1232}.toolbar{display:flex;flex-wrap:wrap;gap:9px;align-items:end;margin:0 0 16px;background:#fff;border:1px solid var(--border);padding:12px;border-radius:14px}.toolbar label{font-size:11px;color:var(--muted);min-width:158px}.toolbar select{padding:7px 10px;margin-top:5px;font-size:12px;min-height:36px}.toolbar .btn{margin-left:auto}.study{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:15px}.photo,.detail{min-width:0;overflow:hidden}.phototop{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;gap:8px;color:var(--muted);font-size:12px}.photoarea{min-height:385px;display:flex;align-items:center;justify-content:center;background:#e7eee7;padding:18px;position:relative}.photoarea img{max-height:62vh;width:100%;object-fit:contain;cursor:zoom-in}.photoarea button{position:absolute;bottom:20px;right:20px}.detail{padding:24px;display:flex;flex-direction:column}.overline{text-transform:uppercase;color:#72927b;letter-spacing:1.4px;font-weight:800;font-size:11px}.detail h2{font:30px/1.2 Georgia,serif;margin:10px 0 12px}.detail p{color:var(--muted)}.answer{background:#edf5ed;border:1px solid #d3e4d3;border-radius:13px;padding:17px;margin:14px 0}.answer strong{display:block;font-size:23px;font-family:Georgia,serif;font-weight:normal;color:#235138}.answer em{display:block;font-size:18px;margin:5px 0 8px}.answer small{display:block;color:#65826c}.hint{text-align:center;background:#f2f5ed;border:1px dashed #b8cdb9;border-radius:12px;padding:28px 16px;margin:18px 0;color:#657d67}.detail .btnrow{margin-top:auto}.detail .field{margin:9px 0}.result{background:#fff6ec;border:1px solid #e6d2b4;border-radius:10px;padding:12px;margin:12px 0;font-size:13px}.result.good{background:#edfaee;border-color:#c0e4cb}.resultsTable{border-collapse:collapse;width:100%;font-size:13px}.resultsTable td{border-top:1px solid #e6ede7;padding:10px;vertical-align:top}.resultTitle{font-size:24px;font-family:Georgia,serif;margin-top:0}.stack{padding:24px}.libraryhead{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:15px}.libraryhead input{max-width:320px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.species-card{border:1px solid var(--border);border-radius:12px;background:white;overflow:hidden;text-align:left;padding:0;color:var(--text)}.species-card figure{margin:0;height:150px;background:#e7eee7;display:flex;align-items:center;justify-content:center}.species-card img{width:100%;height:100%;object-fit:contain}.species-card .inf{padding:12px}.species-card strong{display:block;font-size:13px}.species-card em{display:block;color:var(--muted);font-size:12px}.species-card small{display:block;color:#65816c;font-size:11px}.spinner{font-size:12px;color:#69816f}.bar{height:10px;background:#e6efe5;overflow:hidden;border-radius:20px}.bar>div{height:100%;width:0;background:var(--green);transition:width .25s}.muted{color:var(--muted)}.tiny{font-size:11px}.modal{position:fixed;inset:0;z-index:100;background:#09190feb;display:flex;flex-direction:column;align-items:center;padding:12px}.modal .modaltop{width:100%;max-width:1100px;display:flex;gap:12px;align-items:center;justify-content:space-between;color:white;padding-bottom:8px}.modal img{max-width:95vw;max-height:calc(100vh - 95px);object-fit:contain}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#183c2d;color:white;padding:12px 16px;border-radius:11px;z-index:200;box-shadow:0 12px 25px #0002;max-width:90vw}.warning{color:#91602e}.mini-list{display:flex;flex-direction:column;gap:8px}.mini-item{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #e6eee7;padding:9px 0}.onlyonline{font-size:11px;color:var(--muted)}@media(max-width:900px){.study{grid-template-columns:1fr}.grid{grid-template-columns:repeat(3,1fr)}.photoarea{min-height:270px}.photoarea img{max-height:52vh}}@media(max-width:580px){.topinner{padding:11px 13px}.brand strong{font-size:19px}.brand small{font-size:10px}.wrap{padding:14px 10px 55px}.netbadge{font-size:10px;padding:5px 7px}.gate{margin:16px auto;padding:22px}.gate h1,.hero h1{font-size:29px}.hero{align-items:start}.stats{grid-template-columns:repeat(2,1fr);gap:8px;margin:15px 0}.stats>div{padding:12px}.stats b{font-size:25px}.tabs{width:100%;flex-wrap:nowrap;overflow:auto}.tabs button{white-space:nowrap;font-size:12px;padding:10px 12px}.toolbar label{flex:1;min-width:130px}.toolbar .btn{margin:0}.detail{padding:20px 17px}.detail h2{font-size:26px}.grid{grid-template-columns:repeat(2,1fr);gap:8px}.species-card figure{height:110px}.species-card .inf{padding:9px}.species-card strong{font-size:12px}.libraryhead input{width:100%;max-width:none}.stack{padding:17px}}
.photoarea img:not([src]),.species-card img:not([src]){display:none}.photoarea .spinner{position:absolute;z-index:1;pointer-events:none}.species-card .spinner{position:relative}

/* v1.1: keep hidden img placeholders from affecting layout, but trigger fetching via visible parent */
.photoarea.missing .spinner{max-width:85%;text-align:center;background:#fff7ed;padding:10px 16px;border-radius:9px;color:#9a4733}
.modal-loading{color:white;padding:25px}

/* Sync v1.3: inline safe link for already configured device */
.device-connect{border:1px solid #c8d8ca;border-radius:12px;padding:15px;margin-top:14px;}
.device-connect summary{cursor:pointer;color:#1b5744;font-size:1rem;}
.device-connect .field{display:block;margin:12px 0;}
.device-connect input{width:100%;max-width:100%;overflow-wrap:anywhere;box-sizing:border-box;}