:root {
  --ink: #17221f;
  --muted: #607069;
  --paper: #f5f7f5;
  --surface: #ffffff;
  --line: #dce5df;
  --brand: #12382f;
  --brand-2: #2c725a;
  --sun: #f4c95d;
  --coral: #e96043;
  --shadow: 0 12px 34px rgba(27, 57, 46, 0.1);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
a { color: inherit; }

.app-shell { min-height: 100svh; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(16px, 4vw, 42px); background: rgba(245,247,245,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 37px; height: 37px; flex: 0 0 auto; border-radius: 11px; background: var(--brand); color: var(--sun); font-size: 19px; font-weight: 900; }
.brand-copy { min-width: 0; line-height: 1.05; }
.brand-copy strong { display: block; font-size: 14px; letter-spacing: -.02em; }
.brand-copy span { display: block; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }

.page { width: min(1160px, 100%); margin: 0 auto; padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 36px) 50px; }
.hero { display: grid; grid-template-columns: 1.35fr .65fr; gap: 28px; align-items: stretch; margin-bottom: 28px; }
.hero-copy { padding: clamp(24px, 5vw, 52px); border-radius: 28px; background: var(--brand); color: #fff; box-shadow: var(--shadow); }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; color: var(--sun); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 13ch; margin-bottom: 16px; font-size: clamp(34px, 6vw, 62px); line-height: .98; letter-spacing: -.06em; }
h2 { margin-bottom: 8px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.045em; }
h3 { margin-bottom: 7px; font-size: 17px; letter-spacing: -.025em; }
.hero-copy p { max-width: 55ch; margin-bottom: 22px; color: #dcebe5; font-size: 16px; line-height: 1.55; }
.hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stat { padding: 18px; border: 1px solid #417a68; border-radius: 16px; background: rgba(255,255,255,.04); }
.stat strong { display: block; color: var(--sun); font-size: 25px; letter-spacing: -.06em; }
.stat span { color: #dcebe5; font-size: 12px; }
.notice-card { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 26px; border-radius: 28px; background: var(--sun); box-shadow: var(--shadow); }
.notice-card .big-icon { font-size: 48px; }
.notice-card p { margin: 0; color: #4b3d11; line-height: 1.48; }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 30px 0 14px; }
.section-heading p { margin: 0; color: var(--muted); font-size: 14px; }
.course-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.course-card { position: relative; display: flex; min-height: 218px; flex-direction: column; justify-content: space-between; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 4px 13px rgba(25,55,43,.04); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.course-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.course-card::after { position: absolute; right: -22px; bottom: -40px; width: 112px; height: 112px; border-radius: 50%; background: var(--card-color); content: ""; opacity: .13; }
.course-number { color: var(--card-color); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.course-icon { display: grid; place-items: center; width: 46px; height: 46px; margin: 18px 0; border-radius: 14px; background: color-mix(in srgb, var(--card-color) 16%, white); color: var(--card-color); font-size: 23px; }
.course-card h3 { max-width: 16ch; margin-bottom: 8px; }
.course-card p { z-index: 1; margin-bottom: 0; color: var(--muted); font-size: 12px; line-height: 1.42; }
.course-card .go { z-index: 1; align-self: end; color: var(--card-color); font-size: 20px; font-weight: 800; }

.safety-strip { display: flex; gap: 12px; align-items: flex-start; margin-top: 28px; padding: 16px 18px; border: 1px solid #f0d18a; border-radius: 16px; background: #fff7dd; color: #664a12; font-size: 13px; line-height: 1.45; }
.safety-strip strong { color: #3e2d08; }
.pill, .soft-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font-size: 12px; font-weight: 750; }
.pill { padding: 7px 11px; background: #edf4f0; color: var(--brand); }
.soft-pill { padding: 6px 10px; background: #f2f4f3; color: var(--muted); }

.gate-page { display: grid; min-height: 100svh; place-items: center; padding: 18px; background: radial-gradient(circle at top right, #d7f2df, transparent 32%), var(--paper); }
.gate-card { width: min(520px, 100%); padding: clamp(28px, 7vw, 52px); border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
.gate-card h1 { max-width: 12ch; margin-top: 16px; color: var(--brand); font-size: clamp(36px, 9vw, 52px); }
.gate-card p { color: var(--muted); line-height: 1.5; }

.form-stack { display: grid; gap: 12px; }
.field { display: grid; gap: 6px; color: #43534d; font-size: 13px; font-weight: 750; }
.field input, .field select, .field textarea { width: 100%; min-height: 45px; padding: 11px 12px; border: 1px solid #cbd9d1; border-radius: 12px; background: #fff; color: var(--ink); }
.field textarea { min-height: 88px; resize: vertical; }
.field small { color: var(--muted); font-size: 11px; font-weight: 500; }
.two-fields, .three-fields { display: grid; gap: 12px; }
.two-fields { grid-template-columns: repeat(2, minmax(0,1fr)); }
.three-fields { grid-template-columns: repeat(3, minmax(0,1fr)); }

.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border: 1px solid transparent; border-radius: 12px; background: var(--brand); color: #fff; font-size: 14px; font-weight: 800; text-decoration: none; transition: filter .16s ease, transform .16s ease; }
.button:hover { filter: brightness(1.07); }
.button:active { transform: translateY(1px); }
.button-secondary { border-color: #cbd9d1; background: #fff; color: var(--brand); }
.button-quiet { min-height: 38px; padding: 8px 10px; background: transparent; color: var(--brand); }
.button-danger { border-color: #f0b6aa; background: #fff4f1; color: #a33d29; }
.button-accent { background: var(--accent, var(--brand)); }
.button-row { display: flex; flex-wrap: wrap; gap: 9px; }
.button[disabled] { cursor: not-allowed; opacity: .55; }

.sim-header { margin-bottom: 18px; padding: 22px; border-radius: 23px; background: linear-gradient(120deg, var(--sim-color), color-mix(in srgb, var(--sim-color) 72%, #10271e)); color: #fff; }
.sim-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sim-header h1 { max-width: none; margin: 8px 0; font-size: clamp(30px, 6vw, 46px); }
.sim-header p { max-width: 66ch; margin: 0; color: #e1f1ea; line-height: 1.5; }
.sim-icon { display: grid; width: 52px; height: 52px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.32); border-radius: 16px; background: rgba(255,255,255,.12); font-size: 25px; }
.progress-line { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 22px; }
.progress-step { height: 7px; border-radius: 99px; background: rgba(255,255,255,.25); }
.progress-step.is-done { background: var(--sun); }

.workspace { display: grid; grid-template-columns: 255px minmax(0,1fr); gap: 18px; align-items: start; }
.side-panel, .work-panel { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 5px 16px rgba(24,49,39,.045); }
.side-panel { position: sticky; top: 76px; padding: 14px; }
.side-label { padding: 7px 9px 11px; color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.module-nav { display: grid; gap: 4px; }
.module-nav button { display: flex; width: 100%; align-items: center; gap: 9px; padding: 11px; border: 0; border-radius: 11px; background: transparent; color: #4a5a54; font-size: 13px; font-weight: 750; text-align: left; }
.module-nav button:hover, .module-nav button.active { background: color-mix(in srgb, var(--sim-color) 12%, white); color: var(--sim-color); }
.module-nav .nav-count { display: grid; min-width: 20px; height: 20px; place-items: center; margin-left: auto; border-radius: 50%; background: #edf1ef; color: var(--muted); font-size: 10px; }
.operator-card { margin: 16px 0 2px; padding: 14px; border-radius: 14px; background: #f0f5f2; }
.operator-card strong { display: block; font-size: 13px; }
.operator-card span { color: var(--muted); font-size: 12px; }
.work-panel { min-height: 510px; padding: clamp(16px, 3vw, 26px); }
.panel-title { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.panel-title p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 15px 0; }
.metric { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfb; }
.metric strong { display: block; color: var(--sim-color); font-size: 23px; letter-spacing: -.06em; }
.metric span { color: var(--muted); font-size: 11px; }
.step-card { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fbfcfb; }
.empty-state { display: grid; min-height: 260px; place-items: center; padding: 26px; color: var(--muted); text-align: center; }
.empty-state .empty-icon { font-size: 35px; }

.catalog-search { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; margin-bottom: 12px; }
.catalog { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.catalog-item { display: flex; gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.catalog-item strong { display: block; font-size: 13px; }
.catalog-item small { color: var(--muted); font-size: 11px; }
.item-price { margin-left: auto; color: var(--sim-color); font-size: 12px; font-weight: 850; white-space: nowrap; }
.icon-button { display: grid; width: 33px; height: 33px; place-items: center; flex: 0 0 auto; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--sim-color) 14%, white); color: var(--sim-color); font-size: 18px; font-weight: 850; }
.cart-table { width: 100%; margin-top: 13px; border-collapse: collapse; font-size: 13px; }
.cart-table th { color: var(--muted); font-size: 11px; text-align: left; }
.cart-table th, .cart-table td { padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.qty-control { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.qty-control button { width: 27px; height: 27px; border: 0; background: #fff; color: var(--sim-color); font-size: 17px; }
.qty-control span { min-width: 25px; text-align: center; }
.total-box { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding: 16px; border-radius: 14px; background: color-mix(in srgb, var(--sim-color) 11%, white); }
.total-box strong { color: var(--sim-color); font-size: 25px; letter-spacing: -.06em; }

.record-list { display: grid; gap: 9px; margin-top: 15px; }
.record-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.record-avatar { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--sim-color) 15%, white); color: var(--sim-color); font-size: 13px; font-weight: 900; }
.record-row strong { display: block; font-size: 13px; }
.record-row span { color: var(--muted); font-size: 11px; }
.record-row .row-action { margin-left: auto; }
.timeline { display: grid; gap: 11px; margin-top: 18px; }
.timeline-item { display: grid; grid-template-columns: 9px 1fr; gap: 10px; color: #4b5d55; font-size: 13px; line-height: 1.4; }
.timeline-item::before { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--sim-color); content: ""; box-shadow: 0 0 0 4px color-mix(in srgb, var(--sim-color) 12%, white); }
.timeline-item time { color: var(--muted); font-size: 11px; }

.payment-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; margin: 12px 0; }
.pay-option { padding: 11px 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: #52635b; font-size: 12px; font-weight: 800; text-align: center; }
.pay-option.active { border-color: var(--sim-color); background: color-mix(in srgb, var(--sim-color) 10%, white); color: var(--sim-color); }
.receipt { margin-top: 16px; padding: 20px; border: 1px dashed #a7b8ae; border-radius: 14px; background: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.6; }
.receipt h3 { margin-bottom: 8px; font-family: inherit; font-size: 14px; }
.receipt-line { display: flex; justify-content: space-between; gap: 10px; }
.success-panel { padding: 24px; border-radius: 18px; background: #e8f6ec; color: #18472d; text-align: center; }
.success-panel .success-icon { display: grid; width: 52px; height: 52px; place-items: center; margin: 0 auto 12px; border-radius: 50%; background: #278452; color: #fff; font-size: 26px; }
.success-panel p { margin: 0; color: #3d6d4d; }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 20; max-width: min(360px, calc(100% - 36px)); padding: 13px 15px; border-radius: 13px; background: #17392e; color: #fff; box-shadow: var(--shadow); font-size: 13px; font-weight: 700; }

/* Aplicativos: no computador parecem uma tela de celular; no celular ocupam a tela. */
.mobile-stage { display: grid; min-height: calc(100svh - 67px); place-items: start center; padding: 28px 16px 42px; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--sim-soft) 62%, white), transparent 42%), #eef3f1; }
.mobile-app { width: min(100%, 470px); min-height: min(840px, calc(100svh - 120px)); overflow: hidden; border: 9px solid #14201b; border-radius: 35px; background: #fff; box-shadow: 0 26px 70px rgba(15, 31, 25, .25); }
.app-header { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; min-height: 76px; padding: 12px 14px; background: linear-gradient(130deg, var(--sim-dark), var(--sim-color)); color: #fff; }
.app-header > div { display: grid; gap: 2px; padding: 0 8px; }
.app-header span { color: color-mix(in srgb, var(--sim-soft) 73%, white); font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.app-header strong { overflow: hidden; font-size: 18px; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.back-button, .round-action { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 29px; line-height: 1; }
.round-action { font-size: 19px; }
.app-content { min-height: 670px; padding: 0 0 78px; background: #fff; }
.app-course { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid #e8ece9; background: color-mix(in srgb, var(--sim-soft) 32%, white); color: var(--sim-dark); }
.app-course small { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 800; }
.app-course b { color: var(--sim-color); font-size: 13px; }
.app-progress { width: min(250px, 60vw); height: 5px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--sim-color) 16%, white); }
.app-progress span { display: block; height: 100%; border-radius: inherit; background: var(--sim-color); transition: width .2s ease; }
.app-tabs { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: repeat(5, 1fr); min-height: 70px; border-top: 1px solid #e4e9e6; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.app-tabs button { position: relative; display: grid; min-width: 0; place-items: center; gap: 3px; border: 0; background: transparent; color: #7b8882; font-size: 10px; font-weight: 750; }
.app-tabs button span { color: inherit; font-size: 20px; line-height: 1; }
.app-tabs button b { overflow: hidden; max-width: 100%; font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.app-tabs button.active { color: var(--sim-color); }
.app-tabs button.active::before { position: absolute; top: 0; width: 30px; height: 3px; border-radius: 0 0 4px 4px; background: var(--sim-color); content: ""; }
.app-tabs button i { position: absolute; top: 8px; right: calc(50% - 20px); display: grid; min-width: 16px; height: 16px; place-items: center; border-radius: 50%; background: var(--sim-color); color: #fff; font-size: 9px; font-style: normal; }
.app-home { padding: 18px; }
.cover-art { position: relative; display: grid; height: 175px; place-items: center; overflow: hidden; border-radius: 22px; background: linear-gradient(135deg, var(--sim-dark), var(--sim-color)); color: #fff; }
.cover-art::before { position: absolute; width: 215px; height: 215px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; content: ""; transform: translate(70px, -45px); }
.cover-art::after { position: absolute; width: 152px; height: 152px; border-radius: 50%; background: color-mix(in srgb, var(--sim-soft) 52%, transparent); content: ""; transform: translate(-125px, 84px); }
.cover-art span { z-index: 1; display: grid; width: 86px; height: 86px; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 26px; background: rgba(255,255,255,.13); box-shadow: 0 18px 30px rgba(0,0,0,.15); font-size: 46px; }
.cover-art i { position: absolute; z-index: 1; width: 11px; height: 11px; border-radius: 50%; background: var(--sim-soft); }
.cover-art i:nth-of-type(1) { top: 26px; right: 34px; }.cover-art i:nth-of-type(2) { bottom: 36px; left: 42px; width: 6px; height: 6px; }
.welcome-copy { padding: 18px 2px 12px; }.welcome-copy small, .section-kicker { color: var(--sim-color); font-size: 10px; font-weight: 900; letter-spacing: .1em; }.welcome-copy h1 { max-width: 17ch; margin: 6px 0 8px; color: var(--sim-dark); font-size: 27px; line-height: 1.05; letter-spacing: -.055em; }.welcome-copy p, .app-section > p { margin: 0; color: #65716b; font-size: 13px; line-height: 1.5; }
.mission-button { display: grid; grid-template-columns: 33px 1fr; align-items: center; width: 100%; min-height: 62px; padding: 10px 13px; border: 0; border-radius: 16px; background: var(--sim-color); color: #fff; font-size: 15px; font-weight: 850; text-align: left; }.mission-button > span { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; }.mission-button small { grid-column: 2; opacity: .75; font-size: 10px; font-weight: 600; }
.mobile-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }.mobile-metrics > div { min-width: 0; padding: 11px 9px; border: 1px solid color-mix(in srgb, var(--sim-color) 14%, #dfe6e1); border-radius: 13px; background: #fff; }.mobile-metrics b { display: block; overflow: hidden; color: var(--sim-color); font-size: 16px; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }.mobile-metrics span { display: block; margin-top: 4px; color: #75827c; font-size: 9px; font-weight: 700; line-height: 1.15; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }.dashboard-card { display: grid; min-height: 111px; align-content: start; gap: 5px; padding: 13px; border: 1px solid #e2e9e5; border-radius: 16px; background: #fff; color: var(--sim-dark); text-align: left; }.dashboard-card > span { display: grid; width: 31px; height: 31px; place-items: center; margin-bottom: 3px; border-radius: 10px; background: var(--sim-soft); color: var(--sim-color); font-size: 18px; }.dashboard-card strong { font-size: 13px; letter-spacing: -.03em; }.dashboard-card small { color: #75827c; font-size: 10px; line-height: 1.3; }
.app-disclaimer, .app-tip { margin-top: 14px; padding: 12px; border-radius: 13px; background: #fff8df; color: #6b5013; font-size: 11px; font-weight: 600; line-height: 1.45; }.action-sheet, .next-step { margin: 0 18px 18px; padding: 17px; border: 1px solid color-mix(in srgb, var(--sim-color) 18%, #dfe6e1); border-radius: 18px; background: color-mix(in srgb, var(--sim-soft) 28%, #fff); }.action-sheet h2, .next-step strong { display: block; margin: 0 0 5px; color: var(--sim-dark); font-size: 17px; }.action-sheet p, .next-step span { display: block; margin: 0 0 14px; color: #65716b; font-size: 12px; line-height: 1.42; }
.app-section { padding: 20px 18px; }.app-section h2 { margin: 6px 0 6px; color: var(--sim-dark); font-size: 25px; line-height: 1.06; }.app-section .form-stack, .app-section .checklist { margin-top: 18px; }.status-pill { display: inline-flex; margin: 12px 0; padding: 6px 9px; border-radius: 99px; background: #fff0da; color: #8b5a18; font-size: 10px; font-weight: 800; }.status-pill.ready { background: var(--sim-soft); color: var(--sim-color); }.muted-copy { color: #75827c; font-size: 12px; }
.queue-list, .stock-list, .ledger-list { display: grid; gap: 9px; margin-top: 16px; }.queue-list article, .stock-list > div, .ledger-list article { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #e1e8e4; border-radius: 14px; background: #fff; }.queue-list article > span, .ledger-list article > span { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 11px; background: var(--sim-soft); color: var(--sim-color); font-size: 11px; font-weight: 900; }.queue-list article div, .ledger-list article div { display: grid; min-width: 0; gap: 3px; }.queue-list strong, .ledger-list strong, .stock-list b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.queue-list small, .ledger-list small, .stock-list small { color: #748079; font-size: 10px; }.queue-list .button, .ledger-list .button { min-height: 34px; margin-left: auto; padding: 7px 9px; font-size: 11px; }.stock-list > div > span { display: grid; min-width: 0; gap: 3px; }.stock-list > div > strong { margin-left: auto; color: var(--sim-color); font-size: 12px; }.stock-list .low { color: #bc3b2e; }.ledger-list article > b { margin-left: auto; color: #ba3a2d; font-size: 12px; }.ledger-list .in { color: #17804b; }.ledger-list article > span.in { background: #e3f6e9; }.ledger-list article > span.out { background: #fff0ec; color: #bc3b2e; }
.checklist { display: grid; gap: 9px; }.checklist > label:not(.field) { display: flex; align-items: center; gap: 10px; min-height: 47px; padding: 11px; border: 1px solid #e1e8e4; border-radius: 13px; background: #fff; color: #42544b; font-size: 12px; font-weight: 750; }.checklist input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--sim-color); }.checklist label span { display: flex; gap: 8px; align-items: center; }.checklist label span b { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--sim-soft); color: var(--sim-color); font-size: 11px; }
.finance-cards { display: grid; gap: 9px; margin: 18px 0; }.finance-cards > div { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-radius: 14px; background: color-mix(in srgb, var(--sim-soft) 40%, #fff); }.finance-cards span { color: #54705e; font-size: 12px; font-weight: 750; }.finance-cards b { color: var(--sim-dark); font-size: 19px; letter-spacing: -.045em; }.dark-mode { background: linear-gradient(180deg, var(--sim-dark), #122033); color: #fff; }.dark-mode h2 { color: #fff; }.dark-mode > p { color: #cbd5e2; }.dark-mode .checklist > label:not(.field), .dark-mode .field input, .dark-mode .field select, .dark-mode .field textarea { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; }.dark-mode .field { color: #dbe5f3; }.dark-mode .section-kicker { color: #f7b733; }
.result-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 13px 0; }.result-metrics > div { padding: 11px 8px; border-radius: 13px; background: var(--sim-soft); text-align: center; }.result-metrics b { display: block; color: var(--sim-dark); font-size: 16px; letter-spacing: -.04em; }.result-metrics span { display: block; margin-top: 4px; color: #61746a; font-size: 9px; font-weight: 750; line-height: 1.1; }
.local-photo-preview { display: grid; gap: 9px; }.local-photo-preview:empty { display: none; }.local-photo-preview img { width: 100%; max-height: 190px; object-fit: cover; border-radius: 13px; }

@media (max-width: 920px) {
  .course-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .workspace { grid-template-columns: 1fr; }
  .side-panel { position: static; overflow-x: auto; padding: 8px; }
  .side-label, .operator-card { display: none; }
  .module-nav { display: flex; min-width: max-content; }
  .module-nav button { width: auto; white-space: nowrap; }
  .module-nav .nav-count { display: none; }
}

@media (max-width: 680px) {
  body:has(.mobile-stage) .topbar { display: none; }
  .mobile-stage { min-height: 100svh; padding: 0; background: #fff; }
  .mobile-app { width: 100%; min-height: 100svh; border: 0; border-radius: 0; box-shadow: none; }
  .mobile-stage ~ * { display: none; }
  .topbar { padding: 11px 14px; }
  .topbar-actions .button-quiet { display: none; }
  .page { padding: 18px 14px 35px; }
  .hero { grid-template-columns: 1fr; gap: 14px; }
  .hero-copy, .notice-card { border-radius: 22px; }
  .course-grid, .catalog { grid-template-columns: 1fr; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .two-fields, .three-fields, .metric-grid { grid-template-columns: 1fr; }
  .payment-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .catalog-search { grid-template-columns: 1fr; }
  .work-panel { min-height: 430px; padding: 16px; }
  .sim-header { padding: 18px; border-radius: 18px; }
  .sim-header-top { align-items: center; }
  .progress-line { gap: 5px; }
  .cart-table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media print {
  .topbar, .side-panel, .button-row, .sim-header .progress-line { display: none !important; }
  .page { width: 100%; padding: 0; }
  .workspace { display: block; }
  .work-panel { border: 0; box-shadow: none; }
}