:root {
  --turq: #30DDE6; --turq-2: #30C9D3; --turq-soft: #EAFBFC; --turq-line: #BFEFF3; --turq-dark: #0A7F88; --turq-ink: #0A6A73;
  --navy: #0E3B43; --navy-2: #1B5360; --pale: #CDEFF2; --pale-2: #9FE7EC;
  --ink: #0E3B43; --ink-2: #33494D; --muted: #4A6166;
  --yellow: #F6C744; --yellow-soft: #FFF6D8; --yellow-line: #F3DE92; --yellow-ink: #6B5100; --yellow-ink-2: #5C4400;
  --green: #1D6B3D; --green-2: #2E9E5B; --green-soft: #E3F6E8;
  --red: #9E2B25; --red-2: #D9534F; --red-soft: #FCE8E6;
  --bg: #F4FBFC; --card: #FFFFFF; --line: #D5F1F4; --line-2: #E6F4F6;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: 'Figtree', system-ui, sans-serif; color: var(--ink); background: var(--bg); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--ink); }
a:hover { color: var(--turq-ink); }
h1, h2, h3 { font-family: 'Lexend', sans-serif; margin: 0; line-height: 1.2; font-weight: 700; }
button, input, textarea, select { font-family: inherit; font-size: 15px; color: var(--ink); }
button { cursor: pointer; }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.loading { padding: 60px; text-align: center; color: var(--muted); }
.hide-m { }
.only-m { display: none !important; }

/* ---------- shell (aluno) ---------- */
.shell { display: flex; min-height: 100vh; }
.side { width: 248px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--line); padding: 24px 16px; display: flex; flex-direction: column; gap: 28px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; text-decoration: none; }
.brand img { width: 44px; height: 44px; border-radius: 12px; }
.brand b { font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .08em; display: block; color: var(--ink); }
.brand small { display: block; font-size: 10px; letter-spacing: .14em; color: var(--turq-dark); font-weight: 700; }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink-2); border-radius: 10px; padding: 12px 14px; font-size: 14px; font-weight: 600; }
.nav a:hover { background: var(--bg); color: var(--ink); }
.nav a.on { background: var(--navy); color: #fff; font-weight: 700; }
.me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--turq); display: flex; align-items: center; justify-content: center; font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 13px; flex-shrink: 0; color: var(--ink); }
.me .who { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.me .who b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me .who span { font-size: 12px; color: var(--muted); }
.linkbtn { background: none; border: none; padding: 4px 0; font-size: 13px; font-weight: 700; color: var(--turq-ink); text-decoration: underline; cursor: pointer; }
.main { flex: 1; min-width: 0; }
.pad { padding: 36px 44px 56px; display: flex; flex-direction: column; gap: 26px; }
.topbar, .tabbar { display: none; }

/* ---------- shell (professor) ---------- */
.side.t { background: var(--navy); border-right: none; color: #fff; }
.side.t .brand b { color: #fff; }
.side.t .brand small { color: var(--pale-2); letter-spacing: 0; font-size: 11px; }
.side.t .nav a { color: var(--pale); }
.side.t .nav a:hover { background: var(--navy-2); color: #fff; }
.side.t .nav a.on { background: var(--navy-2); color: #fff; }
.side.t .me { background: var(--navy-2); border-color: var(--navy-2); }
.side.t .me .who span { color: var(--pale-2); }
.side.t .linkbtn { color: var(--pale-2); }

/* ---------- common ---------- */
.hello { display: flex; flex-direction: column; gap: 4px; }
.hello .hi { font-size: 15px; color: var(--muted); }
.h1 { font-size: 32px; }
.h1s { font-size: 28px; }
.sub { font-size: 14px; color: var(--muted); }
.kicker { font-family: 'Lexend', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--turq-dark); text-transform: uppercase; }
.kicker-s { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
a.card { text-decoration: none; color: var(--ink); }
a.card:hover { border-color: var(--turq-2); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.span2 { grid-column: span 2; }
.hero { background: var(--navy); color: #fff; border-radius: 20px; padding: 28px; display: flex; gap: 28px; align-items: center; }
.hero .txt { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
.hero .ttl { font-family: 'Lexend', sans-serif; font-size: 26px; font-weight: 700; line-height: 1.2; }
.hero .desc { font-size: 15px; color: var(--pale); }
.hero .meta { font-size: 13px; color: var(--pale-2); }
.tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 5px 11px; border-radius: 999px; text-transform: uppercase; }
.tag.y { background: var(--yellow); color: var(--ink); }
.tag.d { background: var(--navy-2); color: var(--pale); }
.tag.t { background: var(--turq-soft); color: var(--turq-dark); }
.tag.g { background: var(--green-soft); color: var(--green); }
.pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; flex-shrink: 0; }
.pill.pend { background: var(--yellow-soft); color: var(--yellow-ink); }
.pill.ok { background: var(--green-soft); color: var(--green); }
.pill.t { background: var(--turq-soft); color: var(--turq-ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--navy); color: #fff; border: none; border-radius: 12px; padding: 11px 16px; min-height: 44px; font-weight: 700; font-size: 14px; text-decoration: none; align-self: flex-start; }
.btn:hover { color: #fff; background: #154b55; }
.btn.cta { background: var(--turq); color: var(--ink); font-family: 'Lexend', sans-serif; font-size: 16px; padding: 16px 24px; border-radius: 14px; }
.btn.cta:hover { background: #45E3EB; color: var(--ink); }
.btn.cta.sm { font-size: 15px; padding: 12px 18px; border-radius: 12px; }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--turq-line); }
.btn.ghost:hover { border-color: var(--turq-2); color: var(--ink); }
.btn.line { background: #fff; color: var(--ink); border: 1px solid var(--navy); }
.btn.danger { background: #fff; color: var(--red); border: 1px solid var(--red); }
.btn:disabled { opacity: .5; cursor: default; }
.more { font-size: 14px; font-weight: 700; color: var(--turq-ink); text-decoration: none; }
.more:hover { text-decoration: underline; }
.back { display: flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--muted); align-self: flex-start; }
.datebox { width: 60px; height: 60px; border-radius: 14px; background: var(--turq-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.datebox b { font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 22px; line-height: 1; color: var(--ink); }
.datebox span { font-size: 11px; font-weight: 700; color: var(--turq-dark); }
.datebox.s { width: 50px; height: 50px; border-radius: 12px; }
.datebox.s b { font-size: 18px; }
.datebox.s span { font-size: 10px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chipw { display: flex; flex-wrap: wrap; gap: 8px; }
.wchip { background: var(--bg); border: 1px solid var(--turq-line); border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 600; }
.fchip { min-height: 38px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #fff; color: var(--ink); border: 1px solid var(--turq-line); }
.fchip.sm { min-height: 34px; padding: 0 12px; font-size: 12px; }
.fchip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.in { width: 100%; min-height: 44px; border: 1px solid var(--turq-line); border-radius: 10px; padding: 0 12px; background: #fff; font-size: 14px; }
textarea.in { padding: 10px 12px; min-height: 70px; resize: vertical; line-height: 1.5; }
.in:focus { outline: 2px solid var(--turq); border-color: var(--turq); }
label.f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.notice { background: var(--yellow-soft); border-left: 4px solid var(--yellow); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--yellow-ink-2); }
.okbox { background: var(--green-soft); border-radius: 10px; padding: 12px 14px; font-size: 14px; color: var(--green); font-weight: 700; }
.err { background: var(--red-soft); border-radius: 10px; padding: 10px 14px; font-size: 14px; color: var(--red); font-weight: 600; }
.empty { font-size: 14px; color: var(--muted); padding: 16px; border: 1px dashed var(--turq-line); border-radius: 14px; }
.saved { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--green); }
.saved::before { content: ''; width: 8px; height: 8px; border-radius: 4px; background: var(--green-2); }
.hwrow { text-decoration: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }

/* materiais */
.mat { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.mat.v { background: var(--yellow-soft); border-color: var(--yellow-line); }
.mat .ic { width: 42px; height: 42px; border-radius: 10px; background: var(--turq); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mat.v .ic { background: var(--yellow); }
.mat .body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.mat .ttl { font-weight: 700; font-size: 15px; line-height: 1.35; }
.mat .cm { font-size: 13px; line-height: 1.45; color: var(--muted); }
.mat.v .cm { color: var(--yellow-ink); }
.mat .open { flex-shrink: 0; align-self: center; background: var(--navy); color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; padding: 10px 14px; border-radius: 10px; }
.mat .open:hover { color: #fff; }
.mtag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.mtag.v { background: var(--yellow); color: var(--ink); }
.mtag.s { background: var(--turq); color: var(--ink); }
.mtag.l { background: var(--turq-soft); color: var(--turq-ink); text-decoration: none; }
.mat.mini { padding: 14px; gap: 12px; align-items: center; border-radius: 14px; }
.mat.mini .ic { width: 40px; height: 40px; }

/* ---------- resumo ---------- */
.rs-wrap { display: flex; min-height: 100vh; }
.rs-list { width: 330px; flex-shrink: 0; border-right: 1px solid var(--line); background: #FBFEFE; padding: 28px 20px; display: flex; flex-direction: column; gap: 14px; }
.rs-item { display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); text-align: left; }
.rs-item:hover { border-color: var(--turq-2); color: var(--ink); }
.rs-item .tt { font-weight: 700; font-size: 14px; line-height: 1.3; }
.rs-item .ss { font-size: 12px; color: var(--muted); }
.rs-item .bd { align-self: flex-start; margin-top: 2px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--yellow-soft); color: var(--yellow-ink); }
.rs-item .bd.ok { background: var(--green-soft); color: var(--green); }
.rs-item.on { background: var(--navy); border-color: var(--navy); }
.rs-item.on .tt { color: #fff; }
.rs-item.on .ss { color: var(--pale); }
.rs-item.on .datebox { background: var(--turq); }
.rs-item.on .datebox span { color: var(--ink); }
.rs-item.on .bd { background: var(--yellow); color: var(--ink); }
.rs-item.on .bd.ok { background: var(--green-soft); color: var(--green); }
.rs-detail { flex: 1; min-width: 0; padding: 28px 40px 56px; display: flex; flex-direction: column; gap: 22px; max-width: 900px; }
.rs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.rs-head .k { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--turq-dark); }
.rs-head h2 { font-size: 30px; }
.bar { height: 4px; border-radius: 2px; background: var(--turq); margin-top: 8px; width: 80px; }
.sec { display: flex; flex-direction: column; gap: 10px; }
.sec-h { display: flex; align-items: center; gap: 10px; }
.num { width: 26px; height: 26px; border-radius: 7px; background: var(--navy); color: #fff; font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.num.y { background: var(--yellow); color: var(--ink); }
.sec-h h3 { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.summary { background: var(--turq-soft); border: 1px solid var(--turq-line); border-radius: 14px; padding: 14px 16px; font-size: 15px; line-height: 1.5; white-space: pre-line; }
.expr { background: #fff; border: 1px solid var(--turq-line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.expr .term { font-family: 'Lexend', sans-serif; font-size: 17px; font-weight: 700; }
.expr .mean { font-size: 14px; color: var(--turq-ink); font-style: italic; font-weight: 600; }
.expr .desc { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ex { background: var(--bg); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; }
.ex .en { font-size: 14px; font-weight: 700; line-height: 1.4; }
.ex .pt { font-size: 12px; color: var(--muted); line-height: 1.4; }
.vrow { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; display: flex; gap: 10px; align-items: baseline; }
.vrow .w { font-weight: 700; font-size: 14px; width: 130px; flex-shrink: 0; }
.vrow .m { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.vrow .m i { color: var(--ink-2); }
.corr { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.corr .x { color: var(--red); text-decoration: line-through; }
.corr .c { color: var(--green); font-weight: 700; }
.corr .n { font-size: 12px; color: var(--muted); }
.fix { background: #fff; border: 1px solid var(--turq-line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.fix .hint { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.wbtn { min-height: 38px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 700; background: #fff; color: var(--ink); border: 1.5px solid var(--turq-2); }
.wbtn.used { background: var(--bg); color: #9DB3B7; border-color: var(--line); text-decoration: line-through; }
.fix ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.fix li { font-size: 15px; line-height: 2.1; }
.fix li .n { font-weight: 700; color: var(--turq-dark); }
.blank { display: inline-block; vertical-align: middle; min-width: 110px; min-height: 36px; margin: 0 2px; padding: 4px 10px; border-radius: 8px; font-size: 15px; font-weight: 700; line-height: 1.3; text-align: center; background: #fff; border: 2px dashed #7FCFD6; color: var(--muted); }
.blank.act { background: var(--yellow-soft); border: 2px solid var(--navy); color: var(--ink); }
.blank.val { background: var(--turq-soft); border: 2px solid var(--turq-2); color: var(--ink); }
.blank.right { background: var(--green-soft); border: 2px solid var(--green-2); color: var(--green); }
.blank.wrong { background: var(--red-soft); border: 2px solid var(--red-2); color: var(--red); }
.fixmsg { font-size: 13px; color: var(--red); font-weight: 600; line-height: 1.4; }
.score { font-family: 'Lexend', sans-serif; font-size: 18px; font-weight: 700; }
.yourturn { background: var(--yellow-soft); border: 1px solid var(--yellow-line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.yourturn .tip { font-size: 14px; line-height: 1.5; color: var(--yellow-ink-2); }
.yourturn textarea { min-height: 130px; border: 1px solid #E5CB6E; border-radius: 10px; padding: 12px; font-size: 14px; line-height: 1.5; background: #fff; width: 100%; resize: vertical; }
.sentbox { background: #fff; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.sentbox b { color: var(--green); font-size: 14px; }
.sentbox div { font-size: 14px; line-height: 1.5; white-space: pre-line; color: var(--ink-2); }

/* ---------- flashcards ---------- */
.fc-wrap { display: flex; gap: 32px; }
.fc-deck { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.fc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.fc-row.cur { border: 2px solid var(--turq); }
.fc-row .en { font-weight: 700; font-size: 14px; }
.fc-row .pt { font-size: 12px; color: var(--muted); }
.fc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; max-width: 700px; }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; background: #E3F4F6; padding: 4px; border-radius: 12px; width: 380px; max-width: 100%; }
.seg button { border: none; border-radius: 9px; padding: 9px 10px; min-height: 40px; font-size: 13px; font-weight: 700; background: transparent; color: var(--muted); }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(14,59,67,.12); }
.counter { font-family: 'Lexend', sans-serif; font-size: 15px; font-weight: 700; color: var(--turq-dark); }
.prog { height: 8px; background: #DDEFF1; border-radius: 4px; overflow: hidden; }
.prog > div { height: 8px; border-radius: 4px; background: var(--turq-2); }
.fcard { width: 100%; min-height: 380px; border-radius: 22px; padding: 28px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; background: #fff; border: 2px solid var(--turq-line); box-shadow: 0 10px 24px rgba(14,59,67,.10); }
.fcard .lbl { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--turq-dark); }
.fcard .big { font-family: 'Lexend', sans-serif; font-size: 40px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.fcard .hint { font-size: 14px; color: var(--muted); }
.fcard.back { background: var(--navy); border-color: var(--navy); box-shadow: 0 10px 24px rgba(14,59,67,.22); }
.fcard.back .lbl { color: var(--pale-2); }
.fcard.back .big { color: #fff; font-size: 32px; }
.fcard.back .exm { font-size: 16px; line-height: 1.5; color: var(--pale); font-style: italic; }
.fcard.back .nt { font-size: 14px; color: var(--pale); }
.fcard.back .src { font-size: 13px; font-weight: 600; color: var(--pale-2); }
.fcbtns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fcbtns button { width: 100%; border-radius: 12px; padding: 14px; min-height: 52px; font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 15px; }
.fb-learn { background: var(--yellow-soft); border: 1.5px solid #E5CB6E; color: var(--yellow-ink-2); }
.fb-known { background: var(--green-soft); border: 1.5px solid var(--green-2); color: var(--green); }
.fb-flip { grid-column: span 2; background: var(--turq); border: none; color: var(--ink); }
.fcdone { background: var(--navy); color: #fff; border-radius: 22px; padding: 44px 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; min-height: 300px; justify-content: center; }
.fcdone .t { font-family: 'Lexend', sans-serif; font-size: 30px; font-weight: 700; }
.fcdone .m { font-size: 16px; line-height: 1.5; color: var(--pale); max-width: 460px; }
.fcdone button { border: none; border-radius: 12px; padding: 14px 20px; min-height: 52px; font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 15px; }

/* ---------- login ---------- */
.center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--turq); }
.login { width: 100%; max-width: 400px; background: #fff; border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 10px 40px rgba(14,59,67,.15); }
.login img { width: 120px; height: 120px; border-radius: 18px; align-self: center; }
.login .btn { align-self: stretch; }

/* ---------- professor ---------- */
.tlist a { text-decoration: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid var(--line-2); border-radius: 14px; padding: 14px 16px; color: var(--ink); }
.tlist a:hover { border-color: var(--turq-2); color: var(--ink); }
.tlist { display: flex; flex-direction: column; gap: 10px; }
.stat { display: flex; flex-direction: column; }
.stat b { font-family: 'Lexend', sans-serif; font-size: 30px; }
.stat span { font-size: 13px; color: var(--muted); }
.copybox { background: var(--bg); border: 1px dashed var(--turq-dark); border-radius: 10px; padding: 12px; white-space: pre-wrap; font-size: 14px; }


/* ---------- homework ---------- */
.hwgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hwcard { text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; color: var(--ink); }
.hwcard:hover { border-color: var(--turq-2); color: var(--ink); }
.hwcard .band { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--turq-soft); }
.hwcard .band.y { background: var(--yellow-soft); }
.hwcard .band.p { background: #F1EDFB; }
.hwcard .lv { background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 5px 10px; border-radius: 999px; }
.st-pend { background: var(--yellow); color: var(--ink); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.st-ok { background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.hwcard .bd { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hwcard .kk { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--turq-dark); }
.hwcard .tt { font-family: 'Lexend', sans-serif; font-size: 20px; font-weight: 700; line-height: 1.25; }
.hwcard .ds { font-size: 14px; line-height: 1.5; color: var(--muted); }
.hwcard .tg { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.hwcard .ft { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 8px; gap: 10px; }
.hwhead { display: flex; flex-direction: column; gap: 6px; }
.hwhead .lv { align-self: flex-start; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; padding: 6px 12px; border-radius: 999px; }
.hwrap { display: flex; flex-direction: column; gap: 16px; max-width: 920px; }
.htabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.htab { min-height: 44px; border-radius: 10px; font-size: 13px; font-weight: 700; padding: 0 8px; background: #fff; color: var(--ink); border: 1px solid var(--turq-line); }
.htab.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.hsec { display: flex; flex-direction: column; gap: 18px; }
.hst { font-size: 21px; line-height: 1.3; }
.hblock { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.hbt { font-size: 16px; color: var(--turq-ink); }
.hlead { background: var(--turq-soft); border: 1px solid var(--turq-line); border-radius: 12px; padding: 12px 14px; font-size: 15px; line-height: 1.5; font-weight: 600; }
.hcard { border: 1px solid var(--line-2); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.hct { font-family: 'Lexend', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.hform { border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 700; }
.huse { font-size: 14px; line-height: 1.45; }
.hmark { font-size: 13px; color: var(--muted); }
.hrow { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px solid #EEF6F7; font-size: 14px; }
.hwarn { background: var(--yellow-soft); border-left: 4px solid var(--yellow); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--yellow-ink-2); }
.hctx { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.hvid { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.hvid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hclip { text-decoration: none; background: var(--navy); color: #fff; border-radius: 14px; padding: 12px 14px; display: flex; gap: 14px; align-items: center; }
.hclip:hover { color: #fff; }
.hclip .play { width: 38px; height: 38px; border-radius: 19px; background: var(--turq); color: var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.hclip b { display: block; font-size: 15px; }
.hclip small { display: block; font-size: 12px; color: var(--pale-2); }
.htext { background: #FBFEFE; border: 1px solid var(--line-2); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.httl { font-family: 'Lexend', sans-serif; font-size: 20px; font-weight: 700; }
.htext p { margin: 0 0 4px; font-size: 16px; line-height: 1.85; color: #1F3A40; }
.tok { display: inline; background: none; border: none; border-bottom: 2px dotted #7B5CC9; padding: 0 2px; margin: 0; font: inherit; line-height: inherit; color: inherit; cursor: pointer; }
.tok.on { background: #F1EDFB; border-bottom: 2px solid #6A4DBF; font-weight: 700; }
.tok.good { background: var(--green-soft); border-bottom: 2px solid var(--green-2); color: var(--green); font-weight: 700; }
.tok.bad { background: var(--red-soft); border-bottom: 2px solid var(--red-2); color: var(--red); font-weight: 700; }
.tok.miss { border-bottom: 2px dashed var(--green-2); color: var(--green); }
.hinstr { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.hitem { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-bottom: 1px solid #EEF6F7; }
.hq { font-size: 16px; line-height: 1.5; }
.hn { font-family: 'Lexend', sans-serif; font-weight: 700; color: var(--turq-dark); }
.gline { font-size: 16px; line-height: 2.3; }
.gap { display: inline-block; vertical-align: middle; width: 200px; max-width: 70vw; min-height: 36px; margin: 0 2px; padding: 0 10px; border-radius: 8px; font-size: 15px; font-weight: 700; background: var(--bg); border: 2px dashed #7FCFD6; color: var(--ink); }
.gap:focus, .hin:focus, .hta:focus { outline: 2px solid var(--turq); }
.gap.good, .hin.good { background: var(--green-soft); border: 2px solid var(--green-2); color: var(--green); }
.gap.bad, .hin.bad { background: var(--red-soft); border: 2px solid var(--red-2); color: var(--red); }
.hx { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 32px; height: 32px; margin: 0 4px; border-radius: 16px; border: 1px solid #E6D3D1; background: #fff; color: var(--red); font-size: 14px; font-weight: 700; flex-shrink: 0; }
.hin { flex: 1; width: 100%; min-height: 44px; border-radius: 10px; padding: 0 12px; font-size: 15px; background: var(--bg); border: 1px solid var(--turq-line); }
.hkey { background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; padding: 3px 8px; border-radius: 6px; }
.hta { min-height: 76px; width: 100%; border: 1px solid var(--turq-line); border-radius: 10px; padding: 10px 12px; font-size: 15px; line-height: 1.5; background: var(--bg); resize: vertical; }
.opt { min-height: 40px; padding: 6px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; background: var(--bg); border: 2px solid var(--turq-line); color: var(--turq-ink); }
.opt.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.opt.good { background: var(--green-soft); border-color: var(--green-2); color: var(--green); }
.opt.bad { background: var(--red-soft); border-color: var(--red-2); color: var(--red); text-decoration: line-through; }
.opt.dim { background: #fff; border-color: var(--line-2); color: #6B7F83; }
.hnote { font-size: 13px; line-height: 1.45; border-radius: 8px; padding: 6px 10px; align-self: flex-start; }
.hnote.ok { color: var(--green); background: var(--green-soft); }
.hnote.bad { color: var(--red); background: var(--red-soft); }
.hfb { background: var(--yellow-soft); border: 1px solid var(--yellow-line); border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.5; color: var(--yellow-ink-2); }
.mbank { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 46px; padding: 12px; background: #F7F6FE; border-radius: 14px; }
.mw { min-height: 42px; padding: 8px 16px; border-radius: 999px; font-size: 15px; font-weight: 700; cursor: grab; background: #fff; color: var(--ink); border: 2px solid #9B8CE0; }
.mw.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.mgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mdefs { display: flex; flex-direction: column; gap: 10px; }
.mt { border: 2px dashed #D6DBF5; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mdefs .mt { align-items: stretch; border-radius: 14px; padding: 12px 14px; gap: 10px; }
.mt img { width: 100%; max-width: 150px; aspect-ratio: 1 / 1; object-fit: contain; }
.mt.over { border-color: var(--turq-2); background: var(--turq-soft); }
.mdef { font-size: 15px; line-height: 1.5; }
.mslot { width: 100%; max-width: 260px; min-height: 46px; border-radius: 999px; font-size: 15px; font-weight: 700; background: #EEF0FB; border: 2px dashed #C9CFF0; color: #7A86C2; }
.mslot.ready { background: var(--yellow-soft); border: 2px dashed #E5CB6E; color: var(--yellow-ink); }
.mslot.filled { background: #fff; border: 2px solid #9B8CE0; color: var(--ink); }
.mslot.good { background: var(--green-soft); border: 2px solid var(--green-2); color: var(--green); }
.mslot.bad { background: var(--red-soft); border: 2px solid var(--red-2); color: var(--red); }
.mfix { font-size: 12px; font-weight: 700; color: var(--red); }
.hcheck { gap: 14px; }
.hnav { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.hnav .btn { align-self: auto; }
.deliver { background: var(--navy); color: #fff; border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.deliver .sub { color: var(--pale); }
.fbbox { background: var(--yellow-soft); border: 1px solid var(--yellow-line); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; color: var(--yellow-ink-2); }
.bar8 { height: 8px; background: #DDEFF1; border-radius: 4px; overflow: hidden; }
.bar8 > div { height: 8px; border-radius: 4px; background: var(--turq-2); }
.bar8 > div.ok { background: var(--green-2); }
.qchip { background: var(--turq-soft); border: 1px solid var(--turq-line); border-radius: 999px; padding: 6px 12px; min-height: 32px; font-size: 12px; font-weight: 700; color: var(--turq-ink); }
@media (max-width: 899px) {
  .hwgrid { grid-template-columns: minmax(0, 1fr); }
  .hblock { padding: 16px; border-radius: 16px; }
  .htext { padding: 16px; }
  .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gap { width: 150px; }
  .htabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- celular ---------- */
@media (max-width: 899px) {
  .hide-m { display: none !important; }
  .only-m { display: revert !important; }
  .side { display: none; }
  .shell { flex-direction: column; }
  .topbar { display: flex; align-items: center; gap: 12px; background: #fff; border-bottom: 1px solid var(--line); padding: 14px 16px 12px; position: sticky; top: 0; z-index: 5; }
  .topbar.t { background: var(--navy); border-bottom: none; }
  .topbar.t .brand b { color: #fff; }
  .topbar.t .brand small { color: var(--pale-2); }
  .topbar .brand { flex: 1; padding: 0; }
  .topbar .brand img { width: 40px; height: 40px; }
  .topbar .avatar { width: 42px; height: 42px; border: 1px solid var(--turq-line); background: var(--turq-soft); font-size: 14px; }
  .menu-pop { position: absolute; right: 16px; top: 64px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; box-shadow: 0 10px 30px rgba(14,59,67,.15); display: flex; flex-direction: column; gap: 8px; min-width: 200px; z-index: 6; }
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--line); padding: 8px 4px calc(10px + env(safe-area-inset-bottom)); z-index: 5; }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; min-height: 48px; color: var(--muted); font-size: 11px; font-weight: 600; text-align: center; line-height: 1.15; }
  .tabbar a.on { color: var(--ink); font-weight: 700; }
  .pad { padding: 20px 16px 110px; gap: 20px; }
  .h1 { font-size: 26px; }
  .h1s { font-size: 24px; }
  .grid3 { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .span2 { grid-column: auto; }
  .hero { flex-direction: column; align-items: stretch; padding: 18px; gap: 14px; border-radius: 18px; }
  .hero .ttl { font-size: 19px; font-weight: 600; }
  .hero .desc { font-size: 14px; }
  .hero .btn.cta { font-size: 15px; padding: 12px 18px; align-self: flex-start; }
  .card { padding: 16px; border-radius: 16px; }
  .rs-wrap { display: block; min-height: 0; }
  .rs-list { width: auto; border-right: none; background: transparent; padding: 20px 16px 110px; }
  .rs-detail { padding: 16px 16px 110px; gap: 20px; }
  .rs-head { flex-direction: column; }
  .rs-head h2 { font-size: 24px; }
  .vrow { flex-direction: column; gap: 2px; }
  .vrow .w { width: auto; }
  .fc-wrap { flex-direction: column; }
  .fc-deck { width: auto; order: 2; }
  .fcard { min-height: 300px; }
  .fcard .big { font-size: 32px; }
  .fcard.back .big { font-size: 26px; }
  .mat { flex-wrap: wrap; }
  .mat .open { align-self: flex-start; margin-left: 56px; }
  .fcdone { padding: 32px 20px; }
  .fcdone .t { font-size: 24px; }
}
@media print {
  .side, .topbar, .tabbar, .rs-list, .noprint { display: none !important; }
  .rs-detail { padding: 0; }
  body { background: #fff; }
}