/* Evoweb Page Review. Same look as Ads Builder: system type, lime accent, grouped surfaces. */
:root {
  --bg:#f5f5f7; --surface:#fff; --surface-2:#f2f2f4; --ink:#1d1d1f; --muted:#6e6e73; --faint:#86868b;
  --line:rgba(60,60,67,.13); --line-strong:rgba(60,60,67,.24); --hover:rgba(60,60,67,.07); --active:rgba(60,60,67,.12);
  --accent:#b4e825; --accent-ink:#1d1d1f; --accent-text:#3f7a00; --accent-soft:rgba(114,190,0,.14);
  --pin:#ff5a1f; --red:#d70015; --red-soft:rgba(255,59,48,.10); --amber:#b25000; --amber-soft:rgba(255,149,0,.13);
  --blue:#0066cc; --blue-soft:rgba(0,122,255,.10); --focus:#0071e3; --device:#1d1d1f; --stage:#e8e8ed;
  --scrim:rgba(0,0,0,.32); --lift:0 12px 40px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.08);
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) { :root {
  --bg:#000; --surface:#1c1c1e; --surface-2:#2a2a2d; --ink:#f5f5f7; --muted:#a1a1a6; --faint:#8a8a90;
  --line:rgba(84,84,88,.5); --line-strong:rgba(120,120,128,.55); --hover:rgba(255,255,255,.06); --active:rgba(255,255,255,.11);
  --accent-text:#b4e825; --accent-soft:rgba(180,232,37,.13); --red:#ff6961; --red-soft:rgba(255,69,58,.16);
  --amber:#ffb340; --amber-soft:rgba(255,159,10,.15); --blue:#64b0ff; --blue-soft:rgba(10,132,255,.17); --focus:#409cff;
  --device:#3a3a3c; --stage:#111113; --scrim:rgba(0,0,0,.55); --lift:0 12px 40px rgba(0,0,0,.6),0 0 0 .5px rgba(255,255,255,.1);
  color-scheme:dark; } }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { height:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.43 var(--ui); letter-spacing:-.006em; -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; }
button,input,textarea,select { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:6px; }
.logo-w { display:none; }
@media (prefers-color-scheme: dark) { .logo-i { display:none; } .logo-w { display:inline; } }

.top { position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px;
  padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));
  background:var(--surface); border-bottom:.5px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; min-width:0; }
.brand img { height:28px; width:auto; }
.who { min-width:0; }
.who b { display:block; font:600 15px/1.2 var(--display); letter-spacing:-.012em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.who span { color:var(--muted); font-size:12px; }
.grow { flex:1; }
.seg { display:inline-flex; background:var(--active); border-radius:9px; padding:2px; }
.seg button { border:0; background:none; padding:5px 11px; border-radius:7px; cursor:pointer; font-size:13px; font-weight:500; white-space:nowrap; }
.seg button.on { background:var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.05); font-weight:600; }
.btn { border:.5px solid var(--line-strong); background:var(--surface); border-radius:9px; padding:6px 12px; cursor:pointer; font-weight:500; white-space:nowrap; }
.btn:hover { background:var(--hover); }
.btn.primary { background:var(--accent); color:var(--accent-ink); border-color:transparent; font-weight:600; }
.btn.primary:hover { filter:brightness(.96); }
.btn.on { background:var(--pin); color:#fff; border-color:transparent; }
.btn.warn { color:var(--red); }
.btn:disabled { opacity:.5; cursor:default; }

.main { flex:1; display:grid; grid-template-columns:minmax(0,1fr) 340px; min-height:0; }
.stage { position:relative; background:var(--stage); padding:20px; overflow:auto; min-width:0; display:flex; gap:24px; align-items:flex-start; justify-content:center; }
.dev { flex:none; display:flex; flex-direction:column; gap:8px; }
.dev h4 { margin:0; font:600 12px var(--ui); color:var(--muted); display:flex; gap:8px; align-items:center; }
.dev h4 em { font-style:normal; font-weight:500; color:var(--faint); }
.frame { position:relative; background:var(--device); padding:7px; border-radius:16px; }
.clip { overflow:hidden; border-radius:10px; background:#fff; position:relative; }
.clip iframe { display:block; border:0; transform-origin:0 0; background:#fff; }
.commenting .frame { box-shadow:0 0 0 3px var(--pin); }

.pop { position:absolute; z-index:6; width:280px; background:var(--surface); border-radius:12px; box-shadow:var(--lift); padding:12px; display:grid; gap:8px; }
.pop label, .modal label { font-size:12px; color:var(--muted); display:grid; gap:3px; }
input,textarea { width:100%; border:.5px solid var(--line-strong); background:var(--surface-2); border-radius:8px; padding:7px 9px; resize:vertical; }
.meta { font:11px/1.4 var(--mono); color:var(--faint); word-break:break-all; }
.row { display:flex; gap:8px; justify-content:flex-end; }

.rail { background:var(--surface); border-left:.5px solid var(--line); display:flex; flex-direction:column; min-width:0; min-height:0; }
.rail-h { padding:14px 16px 10px; display:grid; gap:10px; border-bottom:.5px solid var(--line); }
.rail-h h3 { margin:0; font:600 17px/1.2 var(--display); letter-spacing:-.016em; display:flex; justify-content:space-between; align-items:baseline; }
.rail-h h3 small { font:400 13px var(--ui); color:var(--faint); }
.signoff { font-size:12.5px; border-radius:10px; padding:8px 10px; background:var(--surface-2); display:grid; gap:2px; }
.signoff b { font-weight:600; }
.signoff.ok { background:var(--accent-soft); }
.signoff.chg { background:var(--amber-soft); }
.list { overflow:auto; padding:8px; display:grid; gap:6px; align-content:start; flex:1; }
.c { border-radius:12px; padding:10px 12px; display:grid; gap:6px; border:.5px solid transparent; cursor:pointer; }
.c:hover { background:var(--hover); }
.c.sel { background:var(--surface-2); border-color:var(--line-strong); cursor:default; }
.c-top { display:flex; gap:8px; align-items:center; }
.num { width:20px; height:20px; flex:none; border-radius:10px 10px 10px 2px; background:var(--pin); color:#fff; font:700 11px/20px var(--ui); text-align:center; }
.num.resolved { background:#34a853; } .num.fixed { background:#1a73e8; }
.c-top b { font-weight:600; }
.when { color:var(--faint); font-size:12px; margin-left:auto; white-space:nowrap; }
.c p { margin:0; white-space:pre-wrap; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { font:500 11px/1 var(--ui); padding:4px 7px; border-radius:999px; background:var(--active); color:var(--muted); white-space:nowrap; }
.chip.open { background:var(--red-soft); color:var(--red); }
.chip.fixed { background:var(--blue-soft); color:var(--blue); }
.chip.resolved,.chip.approved { background:var(--accent-soft); color:var(--accent-text); }
.chip.changes { background:var(--amber-soft); color:var(--amber); }
.reply { border-left:2px solid var(--line-strong); padding-left:9px; display:grid; gap:2px; font-size:13px; }
.reply b { font-weight:600; font-size:12.5px; color:var(--accent-text); }
.c-act { display:flex; gap:6px; flex-wrap:wrap; }
.c-act .btn { padding:4px 9px; font-size:12.5px; }
.tabs { display:flex; gap:4px; }
.tabs button { border:0; background:none; padding:4px 10px; border-radius:7px; cursor:pointer; color:var(--muted); font-weight:500; }
.tabs button.on { background:var(--active); color:var(--ink); font-weight:600; }
.empty { color:var(--muted); padding:20px 12px; text-align:center; font-size:13px; }
.hint { font-size:12.5px; color:var(--muted); }
.foot { text-align:center; font-size:12px; color:var(--faint); padding:8px 16px calc(8px + env(safe-area-inset-bottom)); background:var(--surface); border-top:.5px solid var(--line); }

.scrim { position:fixed; inset:0; background:var(--scrim); z-index:20; display:grid; place-items:center; padding:16px; }
.modal { background:var(--surface); border-radius:16px; box-shadow:var(--lift); width:min(440px,100%); padding:20px; display:grid; gap:12px; }
.modal h3 { margin:0; font:600 19px/1.25 var(--display); letter-spacing:-.018em; }
.modal p { margin:0; color:var(--muted); }
.toast { position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:9px 16px; border-radius:999px; z-index:30; font-weight:500; max-width:90vw; text-align:center; }

/* Admin */
.page { width:100%; max-width:1180px; margin:0 auto; padding:24px max(16px,env(safe-area-inset-right)) 60px max(16px,env(safe-area-inset-left)); display:grid; gap:16px; align-content:start; }
.page h2 { margin:10px 0 0; font:600 19px/1.25 var(--display); letter-spacing:-.016em; }
.tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.tile { background:var(--surface); border-radius:14px; padding:14px 16px; display:grid; gap:2px; }
.tile b { font:700 26px/1.1 var(--display); font-variant-numeric:tabular-nums; }
.tile span { color:var(--muted); font-size:12.5px; }
.group { background:var(--surface); border-radius:14px; overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:13px; }
th { text-align:left; font-weight:600; color:var(--muted); font-size:12px; padding:9px 12px; border-bottom:.5px solid var(--line); white-space:nowrap; }
td { padding:9px 12px; border-bottom:.5px solid var(--line); vertical-align:top; }
tr:last-child td { border-bottom:0; }
td.n { font-variant-numeric:tabular-nums; white-space:nowrap; }
td a { color:var(--blue); }
.filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
pre.code { margin:0; background:var(--surface); border-radius:12px; padding:12px 14px; font:12px/1.5 var(--mono); overflow-x:auto; }
.login { max-width:360px; margin:12vh auto; background:var(--surface); border-radius:16px; padding:22px; display:grid; gap:12px; }

@media (max-width: 900px) {
  html,body { height:auto; }
  body { display:block; }
  .main { display:block; }
  .stage { overflow:visible; }
  .rail { border-left:0; border-top:.5px solid var(--line); }
  .stage { padding:12px 8px; }
  .wide-only { display:none; }
  .tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .top { gap:8px; }
  .top .grow { display:none; }
  .brand { width:100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; scroll-behavior:auto !important; } }