:root{
  --pink:#ff6e91; --gold:#f4b143; --peach:#ffb0c3;
  --ink:#000; --paper:#fff; --bg:#fff; --muted:#666; --line:#eee;

  --brand1:#ff6e91; --brand2:#8b7dff; --brand3:#5ec6ff;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0; height:100%; background:var(--bg); color:#111; font-family:Inter,system-ui,Arial,sans-serif; -webkit-tap-highlight-color:transparent; }
a{ color:#111; text-decoration:none }

/* Layout */
.shell{ max-width:980px; margin:0 auto; padding:16px; display:grid; gap:16px }
.card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.04) }
.section-title{ margin:0 0 10px; font-size:22px; font-weight:700; color:#222 }
.section-title-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px }
.hint{ color:var(--muted); margin:8px 0 0 }

/* Tone grid */
.tone-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
@media(min-width:900px){ .tone-grid{ grid-template-columns:repeat(4,1fr) } }
.tone-pill{
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:12px 16px; font-weight:700; cursor:pointer;
  transition:.15s box-shadow,.15s border; text-align:center
}
.tone-pill:hover{ box-shadow:0 4px 18px rgba(0,0,0,.06) }
.tone-pill.active{ border-color:var(--pink); box-shadow:0 0 0 4px rgba(255,110,145,.15) }

/* Form */
label{ display:block; font-size:14px; font-weight:700; margin:10px 0 }
label small{ font-weight:600; color:#999; margin-left:4px }
input,textarea,select{ width:100%; padding:12px; border-radius:14px; border:1px solid #ddd; font-size:14px; background:#fff }
textarea{ resize:vertical }
.row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.row-chk{ grid-template-columns:repeat(2,auto); align-items:center }
.check{ font-weight:700 }
.check.one-line{ display:flex; align-items:center; gap:8px; font-weight:800 }

/* Buttons */
.btn{ border:none; border-radius:14px; padding:12px 16px; font-weight:800; cursor:pointer; transition:transform .06s ease }
.btn:active{ transform:translateY(1px) }
.primary{ background:var(--pink); color:#fff; box-shadow:0 8px 20px rgba(255,110,145,.25) }
.accent{ background:linear-gradient(135deg,var(--brand3),var(--brand2)); color:#fff; box-shadow:0 8px 20px rgba(0,0,0,.12) }
.btn.ghost{ background:#fff; border:1px solid var(--line) }
.btn.micro{ padding:6px 10px; font-size:12px; border-radius:10px }

/* Toast */
.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  background:#111; color:#fff; padding:10px 14px; border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.25); opacity:0; pointer-events:none;
  transition:opacity .2s ease; z-index:5000
}
.toast.show{ opacity:1 }

/* Header banner */
.app-header { position: sticky; top: 0; z-index: 1000; width: 100%; background: #fff; }
.app-header .header-img { display:block; width:100%; height:160px; object-fit:cover; object-position:center; pointer-events:none; }
@media (min-width: 481px) { .app-header .header-img { height: 200px; } }

/* Results */
.status{ color:var(--muted); margin:8px 0 0 }
.results{
  border:1px dashed var(--line); border-radius:14px; min-height:160px; padding:16px;
  background:#fafafa; overflow:hidden;
}
.results.empty{ display:flex; align-items:center; justify-content:center }
.empty-inner{ text-align:center; color:#888 }
.empty-inner .spark{ font-size:28px; margin-bottom:6px }

.scrollable-results{
  max-height: 520px; overflow-y: auto; padding-right: 8px;
  -webkit-overflow-scrolling: touch;
}
@media (min-height: 760px){ .scrollable-results{ max-height: 64vh; } }

.script-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; margin-bottom:12px;
}
.script-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;
}
.script-head.loading::after{
  content: attr(data-loading);
  margin-left: 8px; font-weight:800; color:#999;
  animation: blink 1s infinite steps(4,start);
}
@keyframes blink { to { visibility: hidden; } }
.mini-actions{ display:flex; flex-wrap:wrap; gap:6px }
.script-md h2,.script-md h3,.script-md h4{ margin:10px 0 8px; font-weight:800; color:#111 }
.script-md p{ margin:8px 0; line-height:1.55 }
.script-md table{
  width:100%; border-collapse:collapse; margin:8px 0 12px;
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden
}
.script-md th,.script-md td{ border:1px solid #eee; padding:10px; font-size:14px; text-align:left; vertical-align:top }
.script-md thead th{ background:#f9fafb; font-weight:800 }
.script-md tbody tr:nth-child(odd){ background:#fcfcfc }

/* Tab bar */
body.has-tabbar { padding-bottom: calc(64px + var(--safe-bottom)); }
.tabbar{
  position:fixed; left:0; right:0; bottom:0; height:64px; padding-bottom: var(--safe-bottom);
  background:#fff; border-top:1px solid var(--line); display:flex; justify-content:space-around; align-items:center; gap:6px; z-index:999;
}
.tabbar .tab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#444; font-weight:800; font-size:11px; }
.tabbar .tab svg{ width:22px; height:22px; fill:#777 }
.tabbar .tab.is-active { color:#111 }
.tabbar .tab.is-active svg{ fill: var(--pink) }

/* Screenshot preview */
.shot-preview{ margin-top:10px; }
.shot-preview img{ max-width:80px; max-height:80px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }

/* Gate */
.gate { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; }
.gate[hidden] { display: none; }
.gate-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); }
.gate-modal { position: relative; z-index: 1; width: min(520px, 92vw); background: #fff; border-radius: 22px; padding: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.gate-modal h3 { margin: 0 0 6px; font-size: 20px; }
.gate-sub { margin: 0 0 12px; color: #666; }
.gate-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin: 8px 0 6px; }
.gate-row input { height: 44px; }
.gate-row .btn { height: 44px; }
.gate-msg { min-height: 18px; margin: 6px 0 2px; color: #e11d48; font-weight: 600; }
.gate-help { margin-top: 10px; display: flex; gap: 8px; align-items: center; justify-content: center; font-weight:800; }
body.gate-open { overflow: hidden; }