:root{
  --paper:#F6F5F0; --raised:#FFFFFF; --ink:#1F2A26; --ink-soft:#6B7570;
  --line:#DDE0D8; --teal:#2E6B5E; --teal-deep:#20554A; --gold:#E3A93C;
  --brick:#B84B3A; --shadow:0 6px 24px rgba(31,42,38,.08); --radius:18px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;}
.wrap{max-width:460px; margin:0 auto; padding:22px 18px 48px; min-height:100dvh;}
.eyebrow{display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:2px;
  font-weight:700; color:var(--ink-soft); text-transform:uppercase; margin-bottom:8px;}
.dot{width:8px; height:8px; border-radius:50%; background:var(--teal);}
h1.brand{font-size:26px; margin:0 0 16px; letter-spacing:-.5px;}
.card{background:var(--raised); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px 18px; margin-bottom:14px;}
.hidden{display:none !important;}
.question{font-size:18px; font-weight:700; text-align:center; margin:0 0 12px;}
.hint{font-size:13px; color:var(--ink-soft); margin:8px 0 0;}
.small{font-size:12px; color:var(--ink-soft);}

/* Звёзды */
.stars{display:flex; justify-content:center; gap:6px;}
.star-btn{font-size:44px; line-height:1; background:none; border:none; cursor:pointer;
  padding:6px; color:var(--line); transition:transform .08s;}
.star-btn:active{transform:scale(1.25);}
.star-btn.on{color:var(--gold);}
.star-label{text-align:center; min-height:20px; font-size:14px; color:var(--ink-soft); margin-top:6px;}

/* Голос */
.voice-zone{text-align:center;}
.mic-btn{width:84px; height:84px; border-radius:50%; border:none; background:var(--teal);
  color:#fff; font-size:34px; cursor:pointer; box-shadow:var(--shadow); transition:transform .1s;}
.mic-btn:active{transform:scale(.94);}
.mic-btn.rec{background:var(--brick); animation:pulse 1.2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(184,75,58,.35);}70%{box-shadow:0 0 0 18px rgba(184,75,58,0);}100%{box-shadow:0 0 0 0 rgba(184,75,58,0);}}
.live-transcript{min-height:44px; font-size:15px; text-align:left; color:var(--ink-soft);
  background:var(--paper); border-radius:12px; padding:10px 12px; margin-top:12px;}
textarea.draft{width:100%; min-height:120px; border:1.5px solid var(--line); border-radius:12px;
  padding:12px; font-size:15.5px; font-family:inherit; resize:vertical; background:var(--paper);}
.ai-notice{font-size:12.5px; color:var(--teal-deep); background:rgba(46,107,94,.08);
  border-radius:10px; padding:8px 10px; margin:8px 0;}

/* Кнопки */
.primary-btn{display:block; width:100%; padding:16px; margin-top:12px; border:none;
  border-radius:14px; background:var(--teal); color:#fff; font-size:16.5px; font-weight:700; cursor:pointer;}
.primary-btn:disabled{opacity:.5;}
.google-btn{background:#1a73e8;}
.ghost-btn{display:block; width:100%; padding:12px; margin-top:8px; background:none;
  border:1.5px solid var(--line); border-radius:14px; color:var(--ink); font-size:14px; font-weight:600; cursor:pointer;}
.link-btn{display:block; width:100%; padding:10px; margin-top:6px; background:none; border:none;
  color:var(--ink-soft); font-size:13.5px; cursor:pointer; text-decoration:underline;}
.opt-row{display:flex; gap:10px; margin-top:6px;}
.opt-btn{flex:1; padding:14px 6px; border:1.5px solid var(--line); border-radius:14px;
  background:var(--raised); font-size:13px; font-weight:600; cursor:pointer; text-align:center; line-height:1.5;}
.opt-btn.active{border-color:var(--teal); background:rgba(46,107,94,.07);}
.opt-btn .ico{display:block; font-size:22px;}

/* Фото */
.file-label{display:inline-block; padding:10px 16px; border:1.5px dashed var(--line);
  border-radius:12px; font-size:13.5px; cursor:pointer; color:var(--ink-soft);}
.thumb-row{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.thumb{width:64px; height:64px; object-fit:cover; border-radius:10px; border:1px solid var(--line);}

/* Финал */
.done{text-align:center; padding:28px 6px;}
.stamp{display:inline-block; padding:10px 26px; border:3px solid var(--teal); color:var(--teal);
  border-radius:12px; font-weight:800; font-size:20px; letter-spacing:3px; text-transform:uppercase;
  transform:rotate(-6deg) scale(1.4); opacity:0; transition:all .35s cubic-bezier(.2,1.4,.4,1);}
.stamp.show{transform:rotate(-6deg) scale(1); opacity:1;}
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(80px);
  background:var(--ink); color:#fff; padding:11px 18px; border-radius:12px; font-size:14px;
  opacity:0; transition:all .25s; z-index:50; max-width:90vw; text-align:center;}
.toast.show{transform:translateX(-50%) translateY(0); opacity:1;}

/* Панель */
.field-label{display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin:14px 0 6px;}
.field-input{width:100%; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px;
  font-size:14.5px; background:var(--paper); font-family:inherit;}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:4px;}
.stat{background:var(--paper); border-radius:12px; padding:10px 6px; text-align:center;}
.stat b{display:block; font-size:20px;}
.stat span{font-size:10.5px; color:var(--ink-soft);}
.fb-row{background:var(--paper); border-radius:14px; padding:14px; margin-bottom:10px; border:1px solid var(--line);}
.fb-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:13px;}
.gold{color:var(--gold); letter-spacing:2px;}
.flag-row{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}
.flag{font-size:10.5px; padding:4px 8px; border-radius:10px; background:rgba(46,107,94,.1); color:var(--teal-deep); font-weight:600;}
.flag.warn{background:rgba(184,75,58,.12); color:var(--brick);}
.loc-item{display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 14px; border-radius:12px; background:var(--paper); border:1px solid var(--line); margin-bottom:8px; font-size:13.5px;}
.loc-item button{background:var(--teal); color:#fff; border:none; border-radius:8px; padding:8px 10px; font-size:11.5px; font-weight:700; cursor:pointer;}
.token-box{display:flex; gap:8px; align-items:center; background:var(--paper); border:1px dashed var(--line);
  border-radius:12px; padding:10px 12px; margin-top:10px; font-size:12px; word-break:break-all;}
.copy-mini{background:var(--teal); color:#fff; border:none; border-radius:8px; padding:8px 10px;
  font-size:11px; font-weight:700; cursor:pointer; flex-shrink:0;}
.empty{text-align:center; padding:32px 16px; color:var(--ink-soft); font-size:14px;}
.qr-block{text-align:center; margin-top:12px;}
.qr-block img{width:200px; height:200px; border-radius:14px; border:1px solid var(--line);}