.app { padding-top:32px; padding-bottom:120px; }
.app h1 { font-size:clamp(28px,5vw,42px); line-height:1.12; margin:0 0 10px; }
.app .lead { color:var(--muted); font-size:17px; max-width:60ch; margin:0 0 18px; }
.privacy-pill { display:inline-flex; gap:8px; align-items:center; background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:13.5px; color:var(--muted); margin-bottom:24px; }
.layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:22px; align-items:start; }
.stack > .panel { margin-bottom:18px; }
.panel h2 { font-size:18px; margin:0 0 4px; display:flex; align-items:center; gap:10px; }
.panel h2 .n { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--grad); color:#fff; font-size:14px; flex:none; }
.panel .hint { color:var(--muted); font-size:14px; margin:0 0 14px; }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fields .full { grid-column:1 / -1; }
.app label { display:block; font-weight:600; font-size:14px; margin:0 0 6px; }
.app input, .app textarea, .app select { width:100%; font:inherit; font-size:16px; color:var(--fg); background:var(--bg); border:1.5px solid var(--line); border-radius:12px; padding:11px 13px; min-height:46px; -webkit-appearance:none; appearance:none; }
.app textarea { resize:vertical; line-height:1.5; }
.app input:focus, .app textarea:focus, .app select:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent); }
.row-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.btn.sm { padding:10px 16px; min-height:44px; font-size:15px; border-radius:12px; box-shadow:none; }
.btn.soft { background:var(--bg2); color:var(--fg); border:1.5px solid var(--line); }
.btn.wa { background:#25d366; color:#06330f; box-shadow:0 12px 30px -14px rgba(37,211,102,.7); }
.btn[disabled], .btn[aria-disabled="true"] { opacity:.5; pointer-events:none; }
.add-row { display:grid; grid-template-columns:76px 1fr auto; gap:10px; }

.counts { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
.counts span { background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:4px 12px; font-size:13px; color:var(--muted); font-weight:600; }
.counts span.abs { background:#ffe7ea; color:#8a1f3a; border-color:#ffd0d8; }
.list { display:flex; flex-direction:column; gap:8px; }
.stu { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:10px; align-items:center; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:8px 10px; }
.stu .roll { text-align:center; font-weight:700; color:var(--muted); }
.stu .nm { font-weight:600; overflow-wrap:anywhere; }
.stu .del { background:none; border:0; color:var(--muted); font-size:20px; line-height:1; min-width:36px; min-height:44px; cursor:pointer; border-radius:10px; }
.seg { grid-column:1 / -1; display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.seg button { font:inherit; font-size:14px; font-weight:700; min-height:44px; border-radius:11px; border:1.5px solid var(--line); background:var(--card); color:var(--muted); cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.seg button[aria-pressed="true"] { color:#fff; border-color:transparent; }
.seg button[data-s="P"][aria-pressed="true"] { background:#11b981; }
.seg button[data-s="A"][aria-pressed="true"] { background:#e8456b; }
.seg button[data-s="L"][aria-pressed="true"] { background:#f58a3a; }
.seg button[data-s="ML"][aria-pressed="true"] { background:#7c5cff; }
.seg button[data-s="OD"][aria-pressed="true"] { background:#3ea8ff; }
.seg button[data-s="PL"][aria-pressed="true"] { background:#9a7a2f; }
.legend { color:var(--muted); font-size:12.5px; margin:10px 0 0; }
.empty { text-align:center; color:var(--muted); padding:22px 8px; border:1.5px dashed var(--line); border-radius:14px; }

.side { position:sticky; top:84px; }
.tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:5px; margin-bottom:12px; }
.tabs button { font:inherit; font-weight:700; min-height:42px; border:0; border-radius:10px; background:transparent; color:var(--muted); cursor:pointer; }
.tabs button[aria-selected="true"] { background:var(--card); color:var(--fg); box-shadow:0 2px 8px rgba(0,0,0,.08); }
#preview { min-height:230px; }
.send-row { display:grid; gap:10px; margin-top:12px; }
.send-row .two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.note { color:var(--muted); font-size:12.5px; margin:10px 0 0; }
details.tpl { margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }
details.tpl summary { cursor:pointer; font-weight:600; min-height:44px; display:flex; align-items:center; }
details.tpl textarea { margin-bottom:10px; min-height:120px; }
.toast { position:fixed; left:50%; bottom:calc(86px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(20px); background:#1d1a22; color:#fff; padding:10px 18px; border-radius:999px; font-weight:600; font-size:14px; opacity:0; transition:opacity .25s, transform .25s; z-index:60; pointer-events:none; }
.toast.show { opacity:1; transform:translateX(-50%); }

.mbar { display:none; }
.cta-card { margin-top:28px; background:var(--grad); color:#fff; border-radius:24px; padding:30px 24px; text-align:center; box-shadow:var(--shadow); }
.cta-card h2 { margin:0 0 8px; font-size:24px; }
.cta-card p { margin:0 0 18px; opacity:.95; max-width:52ch; margin-inline:auto; }
.cta-card .btn { background:#fff; color:#b32447; box-shadow:none; }
.cta-card ul { list-style:none; padding:0; margin:0 0 20px; display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center; font-size:14px; }
.cta-card li::before { content:"✓ "; font-weight:800; }

@media (max-width:900px) {
  .layout { grid-template-columns:minmax(0,1fr); }
  .side { position:static; }
  .mbar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; gap:10px; align-items:center; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--bg) 92%,transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--line); }
  .mbar .info { flex:1; font-weight:700; font-size:14px; line-height:1.25; }
  .mbar .info small { display:block; font-weight:400; color:var(--muted); }
  .mbar .btn { flex:none; }
}
@media (max-width:520px) {
  .fields { grid-template-columns:1fr; }
  .add-row { grid-template-columns:64px 1fr; }
  .add-row .btn { grid-column:1 / -1; }
  .seg button { font-size:13px; }
}
@media (max-width:520px) { .add-row .btnwrap label { display:none; } .add-row .btnwrap .btn { width:100%; } }

.panel.import { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--card)),var(--card)); }
.how ol { margin:0 0 6px; padding-left:20px; }
.how li { margin:0 0 12px; }
.how li .btn { margin:6px 8px 0 0; }
.how .tpl p { margin:0 0 10px; }
.hp { position:absolute; left:-9999px; top:auto; }

.dev { margin:0 0 14px; }
.js .dev { display:none; }
html[data-dev="ios"] .dev.ios, html[data-dev="android"] .dev.android, html[data-dev="desktop"] .dev.desktop { display:block; }
.devtag { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); margin:0 0 8px; }
.how i { font-style:normal; font-weight:600; }