/* =========================================================
   建筑施工企业“三精管理”沙盘 v3.0
   Neo-Brutalism 设计系统：奶白底 / 4px 黑边 / 硬阴影
   ========================================================= */
:root {
  --bg: #FFF5E1;          /* 奶白 */
  --surface: #FFFFFF;
  --surface-2: #FFF8EC;
  --ink: #111111;         /* 黑边/文字 */
  --ink-soft: #4a4a4a;
  --muted: #8a7f66;
  --border: 4px solid #111111;
  --shadow: 6px 6px 0 #111111;
  --shadow-sm: 4px 4px 0 #111111;
  --radius: 0px;
  /* 高饱和撞色（工地主题） */
  --c-yellow: #FFD23F;
  --c-red: #FF5757;
  --c-blue: #3A86FF;
  --c-green: #06D6A0;
  --c-orange: #FF8C42;
  --c-purple: #9B5DE5;
  --font: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Heiti SC', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  font-weight: 500;
  background-image:
    radial-gradient(rgba(17,17,17,0.05) 1px, transparent 1px);
  background-size: 22px 22px;
}

h1, h2, h3, h4 { font-weight: 900; letter-spacing: .5px; margin: 0 0 10px; }

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 22px;
  background: var(--c-yellow);
  border-bottom: var(--border);
  position: sticky; top: 0; z-index: 50; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand .logo {
  font-size: 30px; width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--surface); border: var(--border);
  box-shadow: var(--shadow-sm);
}
.brand h1 { font-size: 20px; line-height: 1.1; }
.brand .sub { font-size: 12px; color: var(--ink-soft); font-weight: 700; margin: 2px 0 0; }

.status { display: flex; gap: 10px; flex-wrap: wrap; }
.pill {
  background: var(--surface); border: 3px solid var(--ink);
  padding: 6px 12px; font-size: 14px; font-weight: 800;
  display: flex; gap: 6px; align-items: center; box-shadow: 3px 3px 0 var(--ink);
}
.pill label { color: var(--ink-soft); font-weight: 700; }
.pill.money { background: var(--c-green); }
.pill.ach { background: var(--c-blue); color: #fff; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  border: 3px solid var(--ink); background: var(--surface);
  padding: 9px 16px; font-size: 14px; font-weight: 800;
  cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .08s, box-shadow .08s; font-family: var(--font);
}
.btn:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(4px,4px); box-shadow: 0 0 0 var(--ink); }
.btn.primary { background: var(--c-red); color: #fff; }
.btn.success { background: var(--c-green); }
.btn.accent { background: var(--c-blue); color: #fff; }
.btn.warn { background: var(--c-orange); }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: 3px 3px 0 var(--ink); transform: none; }

/* ---------- 选项卡 ---------- */
.tabs {
  display: flex; gap: 0; padding: 0 22px; flex-wrap: wrap;
  background: var(--surface-2); border-bottom: var(--border);
}
.tab {
  border: 3px solid var(--ink); border-right: none;
  background: var(--surface-2); padding: 11px 18px; cursor: pointer;
  font-size: 14px; font-weight: 800; color: var(--ink-soft);
  border-bottom: none;
}
.tab:last-child { border-right: 3px solid var(--ink); }
.tab.active {
  background: var(--c-yellow); color: var(--ink);
  box-shadow: inset 0 4px 0 var(--ink);
}

.app { padding: 22px; max-width: 1320px; margin: 0 auto; }
.panel { display: none; }
.panel.active { display: block; animation: pop .18s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none; } }

/* ---------- 通用卡片 ---------- */
.card {
  background: var(--surface); border: var(--border);
  box-shadow: var(--shadow); padding: 16px;
}
.card h2 { font-size: 17px; margin-top: 0; }
.card h3 { font-size: 15px; }

/* ---------- 双树盘面 ---------- */
.board-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.tree-wrap {
  background: var(--surface); border: var(--border);
  box-shadow: var(--shadow); padding: 16px;
}
.tree-wrap h2 { margin: 0 0 12px; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.tree-tag {
  font-size: 12px; font-weight: 800; padding: 2px 8px;
  border: 2px solid var(--ink); background: var(--c-yellow);
}
.tree {
  position: relative; width: 100%; border: 3px solid var(--ink);
  background: #fff; overflow: hidden;
}
.tree img { width: 100%; display: block; }
.tree-node {
  position: absolute; width: 34px; height: 34px;
  border-radius: 50%; transform: translate(-50%, -50%);
  cursor: pointer; border: 3px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .12s; z-index: 2;
}
.tree-node:hover { transform: translate(-50%, -50%) scale(1.18); }
.tree-node.unlocked { background: var(--c-green); }
.tree-node.available { background: var(--c-yellow); animation: blink 1.1s infinite; }
.tree-node.locked { background: #d9cfb4; }
@keyframes blink { 50% { box-shadow: 2px 2px 0 var(--ink), 0 0 0 4px rgba(255,210,63,.6); } }
.tree-node::after {
  content: attr(data-letter); position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); font-size: 13px; font-weight: 900; color: var(--ink);
}
.tree-legend {
  display: flex; gap: 18px; margin-top: 12px; font-size: 13px; font-weight: 800;
  flex-wrap: wrap;
}
.tree-legend .chip {
  background: var(--surface-2); border: 2px solid var(--ink); padding: 4px 10px;
}
.tree-tooltip {
  position: absolute; background: var(--ink); color: #fff;
  padding: 9px 13px; border: 2px solid #fff; font-size: 12px; font-weight: 700;
  pointer-events: none; z-index: 20; max-width: 240px; display: none; line-height: 1.5;
}

/* ---------- 订单 ---------- */
.orders-header { margin-bottom: 16px; }
.orders-header h2 { font-size: 20px; }
.orders-header p { margin: 6px 0 0; color: var(--ink-soft); font-weight: 700; font-size: 13px; }
.orders-grid, .active-orders {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px; margin-bottom: 26px;
}
.order-card {
  background: var(--surface); border: var(--border);
  box-shadow: var(--shadow); padding: 14px;
  display: flex; flex-direction: column; gap: 9px; position: relative;
  border-top: 10px solid var(--c-blue);
}
.order-card.locked { border-top-color: #bdbdbd; opacity: .85; }
.order-card.active { border-top-color: var(--c-orange); }
.order-card.done { border-top-color: var(--c-green); }
.order-header { display: flex; justify-content: space-between; align-items: center; }
.order-name { font-size: 19px; font-weight: 900; }
.order-profit { font-size: 17px; color: #0a7a4f; font-weight: 900; }
.order-meta { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.order-reqs { font-size: 13px; display: flex; gap: 6px; flex-wrap: wrap; }
.phase-row {
  display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 700;
  padding: 6px 0; border-top: 2px dashed var(--ink);
}
.phase-row.done { color: #0a7a4f; }
.phase-row.current { color: var(--c-orange); font-weight: 900; }
.phase-row.pending { color: var(--muted); }
.phase-ico { width: 20px; height: 20px; display: inline-grid; place-items: center;
  border: 2px solid var(--ink); font-size: 12px; background: var(--surface-2); }

/* ---------- 资源 ---------- */
.resource-layout { display: grid; grid-template-columns: 380px 1fr; gap: 22px; }
.inventory, .market { background: var(--surface); border: var(--border); box-shadow: var(--shadow); padding: 16px; }
.inventory h2, .market h2 { font-size: 17px; margin-top: 0; }
.res-group { margin-bottom: 16px; }
.res-group h4 { margin: 0 0 7px; font-size: 13px; font-weight: 900; background: var(--c-yellow);
  display: inline-block; padding: 2px 10px; border: 2px solid var(--ink); }
.res-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 11px; background: var(--surface-2); border: 2px solid var(--ink);
  margin-bottom: 5px; font-size: 13px; font-weight: 800;
}
.res-item .qty { background: var(--ink); color: #fff; padding: 1px 9px; font-weight: 900; }
.team-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; border-bottom: 2px solid var(--ink); font-weight: 800;
}
.team-row button { padding: 5px 12px; font-size: 12px; }
.market-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.market-cat h3 { margin: 0 0 10px; font-size: 15px; background: var(--c-blue); color:#fff;
  display: inline-block; padding: 3px 12px; border: 2px solid var(--ink); }
.market-item {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  padding: 9px; background: var(--surface-2); border: 2px solid var(--ink);
  margin-bottom: 7px; font-size: 13px; font-weight: 800;
}
.market-item .price { color: #0a7a4f; font-weight: 900; }
.market-item input {
  width: 48px; text-align: center; border: 2px solid var(--ink); padding: 4px;
  font-weight: 800; font-family: var(--font);
}
.market-item button { padding: 4px 11px; font-size: 12px; box-shadow: 2px 2px 0 var(--ink); }

/* ---------- 财务表 ---------- */
.finance-tables { display: grid; gap: 22px; }
.finance-table {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: var(--border); box-shadow: var(--shadow); font-size: 13px; font-weight: 700;
}
.finance-table th, .finance-table td {
  padding: 10px 12px; border: 2px solid var(--ink); text-align: center;
}
.finance-table th { background: var(--c-yellow); font-weight: 900; }
.finance-table td:first-child, .finance-table th:first-child { text-align: left; }
.finance-table tfoot td { font-weight: 900; background: var(--surface-2); }

/* ---------- 规则 ---------- */
.rules-layout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rule-card { background: var(--surface); border: var(--border); box-shadow: var(--shadow); padding: 16px; }
.rule-card h2 { font-size: 17px; margin-top: 0; }
.flow {
  background: var(--c-yellow); border: 3px solid var(--ink); padding: 11px 14px;
  font-weight: 900; font-size: 14px; margin-bottom: 14px; box-shadow: var(--shadow-sm);
}
.rule-card ul { padding-left: 18px; margin: 0; }
.rule-card li { margin-bottom: 9px; font-size: 13px; font-weight: 700; }
.hint { color: var(--ink-soft); font-size: 12px; font-weight: 700; }

/* ---------- 标签 ---------- */
.tag {
  display: inline-block; padding: 3px 9px; border: 2px solid var(--ink);
  font-size: 12px; font-weight: 900;
}
.tag.green { background: var(--c-green); }
.tag.yellow { background: var(--c-yellow); }
.tag.red { background: var(--c-red); color: #fff; }
.tag.gray { background: var(--surface-2); }
.tag.blue { background: var(--c-blue); color: #fff; }

/* =========================================================
   新增：引导页 / 步骤 / 日志 / 复盘
   ========================================================= */

/* 引导页（全屏遮罩） */
#guide {
  position: fixed; inset: 0; z-index: 200; overflow: auto;
  background: var(--bg);
  background-image:
    radial-gradient(rgba(17,17,17,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}
#guide.hidden { display: none; }
.guide-inner { max-width: 980px; margin: 0 auto; padding: 46px 24px 70px; }
.guide-hero {
  background: var(--c-yellow); border: var(--border); box-shadow: var(--shadow);
  padding: 30px 32px; margin-bottom: 26px; position: relative;
}
.guide-hero .badge {
  position: absolute; top: -16px; right: 24px; background: var(--c-red); color: #fff;
  border: 3px solid var(--ink); padding: 6px 14px; font-weight: 900; font-size: 13px;
  box-shadow: var(--shadow-sm); transform: rotate(4deg);
}
.guide-hero h1 { font-size: 34px; line-height: 1.15; }
.guide-hero .sub { font-size: 15px; font-weight: 800; color: var(--ink-soft); margin-top: 8px; }
.guide-hero .intro { font-size: 15px; font-weight: 700; margin-top: 16px; line-height: 1.7; }

.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 26px; }
.guide-box { background: var(--surface); border: var(--border); box-shadow: var(--shadow); padding: 20px; }
.guide-box h3 { font-size: 18px; display: flex; align-items: center; gap: 8px; }
.guide-box h3 .dot { width: 14px; height: 14px; background: var(--c-red); border: 2px solid var(--ink); display: inline-block; }
.guide-box p { font-weight: 700; font-size: 14px; line-height: 1.7; margin: 8px 0 0; }
.benefit-list { list-style: none; padding: 0; margin: 10px 0 0; }
.benefit-list li { font-weight: 800; font-size: 14px; padding: 8px 0 8px 30px; position: relative; border-bottom: 2px dashed var(--ink); }
.benefit-list li::before { content: '★'; position: absolute; left: 4px; color: var(--c-orange); font-size: 16px; }

.core-loop { background: var(--surface); border: var(--border); box-shadow: var(--shadow); padding: 20px; margin-bottom: 26px; }
.core-loop h3 { font-size: 18px; }
.loop-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 16px; }
.loop-step { border: 3px solid var(--ink); padding: 14px 10px; text-align: center; background: var(--surface-2); }
.loop-step:not(:last-child) { border-right: none; }
.loop-step .num { font-size: 26px; font-weight: 900; color: var(--c-blue); }
.loop-step .lk { font-weight: 900; font-size: 14px; margin: 4px 0; }
.loop-step .lv { font-size: 11px; font-weight: 700; color: var(--ink-soft); line-height: 1.5; }
.loop-step .arrow { font-size: 18px; }

/* 步骤介绍 */
.steps-wrap { margin-bottom: 26px; }
.steps-head { font-size: 22px; font-weight: 900; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.step-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.step-card { background: var(--surface); border: var(--border); box-shadow: var(--shadow); padding: 16px; border-left: 12px solid var(--c-purple); }
.step-card .top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.step-card .sno { width: 40px; height: 40px; background: var(--c-purple); color: #fff; border: 3px solid var(--ink);
  display: grid; place-items: center; font-size: 20px; font-weight: 900; box-shadow: var(--shadow-sm); }
.step-card .sicon { font-size: 24px; }
.step-card .stitle { font-size: 17px; font-weight: 900; }
.step-card .sdesc { font-size: 13px; font-weight: 700; line-height: 1.7; }
.step-card .stip { font-size: 12px; font-weight: 800; margin-top: 10px; background: var(--c-yellow);
  border: 2px solid var(--ink); padding: 7px 10px; }

.win-rule { background: var(--c-green); border: var(--border); box-shadow: var(--shadow);
  padding: 18px 22px; font-size: 16px; font-weight: 900; margin-bottom: 28px; }
.guide-start { text-align: center; }
.btn-start {
  font-size: 22px; font-weight: 900; padding: 18px 56px; border: 4px solid var(--ink);
  background: var(--c-red); color: #fff; cursor: pointer; box-shadow: 8px 8px 0 var(--ink);
  transition: transform .1s, box-shadow .1s;
}
.btn-start:hover { transform: translate(-2px,-2px); box-shadow: 10px 10px 0 var(--ink); }
.btn-start:active { transform: translate(8px,8px); box-shadow: 0 0 0 var(--ink); }

/* ---------- 日志时间线 ---------- */
.log-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.log-toolbar .info { font-weight: 800; font-size: 14px; }
.timeline { position: relative; padding-left: 34px; }
.timeline::before { content: ''; position: absolute; left: 14px; top: 6px; bottom: 6px; width: 4px; background: var(--ink); }
.log-item { position: relative; margin-bottom: 16px; background: var(--surface); border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm); padding: 11px 14px; }
.log-item::before { content: ''; position: absolute; left: -29px; top: 14px; width: 18px; height: 18px;
  border: 3px solid var(--ink); background: var(--c-yellow); }
.log-item .lh { display: flex; gap: 10px; align-items: center; font-weight: 900; font-size: 14px; }
.log-item .lr { font-size: 11px; font-weight: 800; color: var(--ink-soft); background: var(--surface-2);
  border: 2px solid var(--ink); padding: 1px 8px; }
.log-item .ld { font-size: 13px; font-weight: 700; margin-top: 4px; line-height: 1.5; }
.log-item.t-recruit::before { background: var(--c-blue); }
.log-item.t-unlock::before { background: var(--c-green); }
.log-item.t-order::before { background: var(--c-orange); }
.log-item.t-phase::before { background: var(--c-purple); }
.log-item.t-buy::before { background: var(--c-yellow); }
.log-item.t-round::before { background: #fff; }
.log-item.t-end::before { background: var(--c-red); }
.log-empty { text-align: center; color: var(--muted); font-weight: 800; padding: 40px; border: 3px dashed var(--ink); }

/* ---------- 复盘页 ---------- */
#review {
  position: fixed; inset: 0; z-index: 200; overflow: auto;
  background: var(--bg); background-image: radial-gradient(rgba(17,17,17,0.06) 1px, transparent 1px);
  background-size: 24px 24px; padding: 40px 24px 70px;
}
#review.hidden { display: none; }
.review-inner { max-width: 1080px; margin: 0 auto; }
.review-hero { background: var(--c-red); color: #fff; border: var(--border); box-shadow: var(--shadow);
  padding: 26px 30px; margin-bottom: 24px; position: relative; }
.review-hero h1 { font-size: 30px; color: #fff; }
.review-hero .score-big { font-size: 64px; font-weight: 900; line-height: 1; margin: 10px 0; }
.review-hero .score-sub { font-size: 15px; font-weight: 800; opacity: .92; }
.review-hero .rank { position: absolute; top: 22px; right: 28px; background: var(--c-yellow); color: var(--ink);
  border: 3px solid var(--ink); padding: 8px 18px; font-weight: 900; font-size: 18px; transform: rotate(-5deg);
  box-shadow: var(--shadow-sm); }
.review-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
.stat-box { background: var(--surface); border: var(--border); box-shadow: var(--shadow); padding: 14px; text-align: center; }
.stat-box .sv { font-size: 28px; font-weight: 900; }
.stat-box .sl { font-size: 12px; font-weight: 800; color: var(--ink-soft); margin-top: 4px; }
.stat-box:nth-child(1) { border-top: 10px solid var(--c-blue); }
.stat-box:nth-child(2) { border-top: 10px solid var(--c-green); }
.stat-box:nth-child(3) { border-top: 10px solid var(--c-orange); }
.stat-box:nth-child(4) { border-top: 10px solid var(--c-purple); }

.dim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 26px; }
.dim-card { background: var(--surface); border: var(--border); box-shadow: var(--shadow); padding: 16px; }
.dim-card .dh { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 900; }
.dim-card .dh .swatch { width: 18px; height: 18px; border: 3px solid var(--ink); }
.dim-card .dp { font-size: 13px; font-weight: 700; line-height: 1.7; margin: 10px 0; }
.dim-card .dm { display: flex; gap: 6px; flex-wrap: wrap; }
.dim-card .dm .m { font-size: 11px; font-weight: 800; background: var(--surface-2); border: 2px solid var(--ink); padding: 3px 8px; }

.tpl-box { background: var(--surface); border: var(--border); box-shadow: var(--shadow); padding: 18px; margin-bottom: 26px; }
.tpl-box h3 { font-size: 18px; }
.tpl-row { display: grid; grid-template-columns: 160px 1fr; gap: 14px; padding: 12px 0; border-bottom: 2px dashed var(--ink); }
.tpl-row:last-child { border-bottom: none; }
.tpl-row .tk { font-weight: 900; font-size: 14px; background: var(--c-yellow); border: 2px solid var(--ink); padding: 6px 10px; align-self: start; }
.tpl-row .tv { font-size: 13px; font-weight: 700; line-height: 1.7; }
.tpl-row textarea { width: 100%; min-height: 60px; border: 3px solid var(--ink); padding: 9px;
  font-family: var(--font); font-weight: 700; font-size: 13px; background: var(--surface-2); resize: vertical; }

.review-tl-title { font-size: 20px; font-weight: 900; margin-bottom: 14px; }
.review-actions { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; }

/* ---------- Modal / Toast ---------- */
.modal { position: fixed; inset: 0; background: rgba(17,17,17,0.5); display: flex;
  align-items: center; justify-content: center; z-index: 150; }
.modal.hidden { display: none; }
.modal-body { background: var(--surface); border: var(--border); box-shadow: var(--shadow);
  padding: 26px; max-width: 540px; width: 92%; max-height: 84vh; overflow: auto; position: relative; }
.modal-body .close { position: absolute; top: 12px; right: 16px; border: 3px solid var(--ink);
  background: var(--c-red); color: #fff; width: 36px; height: 36px; font-size: 20px; font-weight: 900; cursor: pointer; box-shadow: var(--shadow-sm); }
.modal h3 { margin-top: 0; font-size: 20px; }
.modal .detail { font-size: 13px; font-weight: 700; margin-bottom: 8px; line-height: 1.7; }
.modal .actions { margin-top: 16px; justify-content: flex-end; }

.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(160%);
  background: var(--ink); color: #fff; padding: 12px 22px; border: 3px solid #fff; font-weight: 900; font-size: 14px;
  transition: transform .3s; z-index: 160; box-shadow: var(--shadow); }
.toast.show { transform: translateX(-50%) translateY(0); }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .board-grid, .guide-grid, .step-grid, .dim-grid, .review-stats { grid-template-columns: 1fr; }
  .resource-layout { grid-template-columns: 1fr; }
  .market-cats { grid-template-columns: 1fr; }
  .rules-layout { grid-template-columns: 1fr; }
  .loop-track { grid-template-columns: 1fr 1fr; }
  .loop-step:nth-child(odd) { border-right: 3px solid var(--ink); }
  .tpl-row { grid-template-columns: 1fr; }
}

/* ---------- 通用隐藏 ---------- */
.hidden { display: none !important; }

/* ---------- 登录口令层 ---------- */
#login-gate { position: fixed; inset: 0; z-index: 9999; background: #FFF5E1;
  display: flex; align-items: center; justify-content: center; font-family: var(--font); padding: 20px; }
.login-card { background: #fff; border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  padding: 40px 36px; max-width: 400px; width: 100%; text-align: center; }
.login-card .badge { display: inline-block; background: var(--c-yellow); border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm); padding: 4px 12px; font-weight: 900; font-size: 13px; margin-bottom: 16px; }
.login-card h1 { font-family: var(--font); font-size: 24px; font-weight: 900; color: var(--ink); margin: 0 0 8px; }
.login-card .sub { font-size: 14px; color: var(--ink-soft); margin: 0 0 22px; }
.login-card input { width: 100%; padding: 14px 16px; font-size: 17px; font-weight: 800; text-align: center;
  border: 4px solid var(--ink); box-shadow: var(--shadow-sm); outline: none; margin-bottom: 16px; font-family: var(--font); }
.login-card input:focus { box-shadow: var(--shadow); }
.login-card .btn { width: 100%; padding: 14px; font-size: 17px; }
.login-err { color: var(--c-red); font-weight: 900; font-size: 13px; min-height: 18px; margin-top: 10px; }