:root { --bg:#f4f6f5; --card:#fff; --ink:#1b2421; --muted:#66736e; --line:#dde3e0; --main:#0f766e; --main-ink:#fff; --offer:#e7f6f3; --err:#b42318; --warn:#9a6700; }
@media (prefers-color-scheme: dark) { :root { --bg:#111614; --card:#1a211e; --ink:#e7eeeb; --muted:#93a19b; --line:#2c3632; --main:#14b8a6; --main-ink:#062b27; --offer:#123430; --err:#ff8a7a; --warn:#e5b54a; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.top { position:sticky; top:0; z-index:2; display:flex; gap:12px; align-items:center; padding:12px 16px; background:var(--card); border-bottom:1px solid var(--line); }
.top b { font-size:18px; color:var(--main); }
.pc { font-size:13px; color:var(--muted); margin-left:auto; } .pc.on { color:#16a34a; } .pc.off { color:var(--err); }
.wrap { max-width:640px; margin:0 auto; padding:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin:12px 0; }
h1 { margin:0 0 4px; } h2 { font-size:16px; margin:24px 0 4px; color:var(--muted); }
label { display:block; margin:10px 0; font-size:14px; color:var(--muted); }
input { display:block; width:100%; margin-top:4px; padding:12px; font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:10px; }
button { font:inherit; padding:10px 14px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; }
.primary { background:var(--main); color:var(--main-ink); border-color:var(--main); font-weight:600; }
button.primary { width:100%; padding:14px; }
.link { background:none; border:0; color:var(--muted); text-decoration:underline; padding:4px; cursor:pointer; }
.shoot { display:block; text-align:center; padding:22px; font-size:20px; border-radius:16px; cursor:pointer; margin:4px 0; color:var(--main-ink); }
.pick { display:block; text-align:center; font-size:14px; margin:4px 0 0; }
.err { color:var(--err); } .warn { color:var(--warn); } .muted { color:var(--muted); } .small { font-size:13px; }
.job { display:flex; gap:12px; align-items:flex-start; cursor:pointer; }
.job.big { cursor:default; border-color:var(--main); }
.th { width:64px; height:64px; object-fit:cover; border-radius:10px; flex:none; background:var(--bg); }
.job.big .th { width:96px; height:96px; }
.grow { flex:1; min-width:0; }
.job p { margin:2px 0; }
.name { font-weight:600; overflow-wrap:anywhere; }
.b { display:inline-block; font-size:12px; padding:2px 8px; border-radius:99px; background:var(--offer); margin:4px 0; }
.prices { display:flex; gap:10px; margin:8px 0; flex-wrap:wrap; }
.prices > div { display:flex; flex-direction:column; padding:6px 10px; border-radius:10px; background:var(--bg); }
.prices b { font-size:18px; }
.prices .offer { background:var(--offer); }
.job.big .prices .offer b { font-size:26px; color:var(--main); }
.redo { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.redo input { margin:0; flex:1 1 180px; padding:9px; font-size:14px; }
.redo button { font-size:14px; }
details { margin-top:6px; } a { color:var(--main); }
details.fix { margin-top:10px; } details.fix summary { cursor:pointer; color:var(--main); }
[data-preview] { align-self:center; }