:root{
  --accent:#1F4E9C; --accent-soft:#EAF0FA; --ink:#1A1D21; --muted:#5B6370; --line:#E3E6EA; --line2:#EEF0F3;
  --bg:#F3F4F6; --card:#FFFFFF; --ok:#1E8E5A; --ok-soft:#E3F3EA; --warn:#C46A08; --warn-soft:#FBEFDF; --bad:#B4201C; --bad-soft:#FBE9E8;
  --safe-top: env(safe-area-inset-top,0px); --safe-bottom: env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:Jost,Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;-webkit-text-size-adjust:100%}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent);text-decoration:none}
.screen{min-height:100%;display:flex;flex-direction:column}
.hdr{background:var(--card);padding:calc(14px + var(--safe-top)) 20px 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.hdr .row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.title{font-size:20px;font-weight:700;line-height:1.2;margin:0}
.sub{font-size:13px;color:var(--muted)}
.body{flex:1 1 auto;padding:16px 20px;display:flex;flex-direction:column;gap:12px}
.ftr{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--line);padding:12px 20px calc(16px + var(--safe-bottom));display:flex;flex-direction:column;gap:8px}
.center{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 24px;flex-direction:column;gap:16px}
.muted{color:var(--muted)}
.small{font-size:12px}
.label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:8px 0 2px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:12px;border:none;background:var(--accent);color:#fff;font-size:16px;font-weight:600;width:100%}
.btn:disabled{background:#D5D9DF;color:var(--muted)}
.btn.ghost{background:var(--card);color:var(--ink);border:1.5px solid #D5D9DF}
.btn.ok{background:var(--ok)}
.btn.link{background:transparent;color:var(--accent);min-height:44px}
.icon-btn{width:44px;height:44px;margin-left:-10px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.search{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;border-radius:12px;background:var(--bg);border:1.5px solid var(--line)}
.search input{flex:1;min-width:0;border:none;background:transparent;outline:none;font-size:15px}
.search input::placeholder,textarea::placeholder{color:#8A919C}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;min-height:36px;padding:0 12px;border-radius:999px;border:none;background:var(--card);color:var(--ink);font-size:13px;font-weight:600;white-space:nowrap;border:1px solid var(--line)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.room{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);text-align:left;width:100%}
.room .dot{width:10px;height:10px;border-radius:999px;flex:0 0 auto}
.room .name{flex:1;font-size:15px;font-weight:500}
.room .meta{font-size:12px;color:var(--muted);white-space:nowrap}
.pill{min-height:36px;padding:0 12px;border-radius:999px;border:1.5px solid #D5D9DF;background:var(--card);color:var(--ink);font-size:13px;font-weight:500}
.pill.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.photo-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:96px;border-radius:12px;border:1.5px dashed #AEB5BF;background:var(--card);font-size:15px;font-weight:600;width:100%}
.photos{display:flex;gap:8px;flex-wrap:wrap}
.photos .ph{position:relative;width:88px;height:88px;border-radius:10px;overflow:hidden;background:#D5D9DF}
.photos .ph img{width:100%;height:100%;object-fit:cover;display:block}
.photos .ph button{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:999px;border:none;background:rgba(0,0,0,.6);color:#fff;font-size:14px;line-height:1}
textarea{width:100%;font-size:15px;padding:12px 14px;border-radius:12px;border:1.5px solid #D5D9DF;background:var(--card);resize:none}
.check{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 14px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.check input{width:20px;height:20px;margin:0;accent-color:var(--bad)}
.err{color:var(--bad);font-size:13px;font-weight:600;text-align:center}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px}
.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}
.b-new{background:var(--bad-soft);color:var(--bad)} .b-assigned,.b-in_progress,.b-returned{background:var(--warn-soft);color:var(--warn)}
.b-review{background:var(--accent-soft);color:var(--accent)} .b-closed{background:var(--ok-soft);color:var(--ok)}
.okmark{width:88px;height:88px;border-radius:999px;background:var(--ok-soft);display:flex;align-items:center;justify-content:center}
.summary{width:100%;padding:16px;border-radius:12px;background:var(--bg);display:flex;flex-direction:column;gap:6px;text-align:left}
.tabs{display:flex;gap:6px}
.tab{flex:1;text-align:center;padding:8px 0;border-radius:10px;background:var(--card);border:1px solid var(--line);font-size:13px;font-weight:500}
.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.nav{display:flex;background:var(--card);border-top:1px solid var(--line);padding:8px 8px calc(10px + var(--safe-bottom))}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--muted);font-size:11px;font-weight:600}
.nav a.on{color:var(--accent)}
@media (min-width:700px){ .screen{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);box-shadow:0 0 0 1px var(--line)} }