/* ═══════════════════════════════════════════════════════════
   GLOBAL — 2K Dashboard Style
   背景深藍調，比純黑亮一階，元素明顯凸顯
   ═══════════════════════════════════════════════════════════ */
body {
  background: linear-gradient(160deg, #0a1628 0%, #0d1f3a 40%, #091422 70%, #0c1b33 100%) fixed !important;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Header bar */
header {
  background: #0a1525 !important;
  border-color: #1e3a5f !important;
}

/* Left panel */
section.w-72 {
  background: #0a1525 !important;
  border-color: #1e3a5f !important;
}

/* Tab bar */
.border-b { border-color: #1e3a5f !important; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1e3a5f; border-radius: 3px; }

/* ── Tab buttons ──────────────────────────────────────────── */
.tab-btn {
  font-size: 0.9rem;
  padding: 10px 16px;
  color: #4a6fa5;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: color 0.15s, border-color 0.15s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.tab-btn:hover  { color: #93c5fd; }
.tab-btn.active { color: #fff; border-bottom-color: #3b82f6; }

/* ── Tile buttons (game-card style) ──────────────────────── */
.tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: #112240;
  border: 1px solid #1e3a5f;
  border-radius: 10px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}
.tile:hover {
  background: #1a3356;
  border-color: #3b82f6;
  box-shadow: 0 0 14px rgba(59,130,246,0.2);
  transform: translateY(-1px);
}
.tile.active {
  background: #1a3356;
  border-color: #3b82f6;
  box-shadow: 0 0 18px rgba(59,130,246,0.3);
}
.tile-icon  { font-size: 1.2rem; line-height: 1; }
.tile-label { font-size: 0.92rem; font-weight: 700; color: #e2e8f0; margin-top: 2px; letter-spacing: 0.02em; }
.tile-sub   { font-size: 0.76rem; color: #4a6fa5; }

/* ── Tile group labels (2K category header) ──────────────── */
.tile-group-label {
  font-size: 0.73rem; font-weight: 900;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px;
  margin-top: 2px;
}
.tile-group-label[data-group="mail"] {
  background: linear-gradient(90deg, #1e3a8a, #1e40af55);
  color: #93c5fd; border-left: 3px solid #3b82f6;
}
.tile-group-label[data-group="todo"] {
  background: linear-gradient(90deg, #14532d, #15803d44);
  color: #86efac; border-left: 3px solid #22c55e;
}

/* ── Tile colour variants ─────────────────────────────────── */
.tile[data-color="blue"]    { border-color: #1d4ed8; }
.tile[data-color="cyan"]    { border-color: #0e7490; }
.tile[data-color="purple"]  { border-color: #6d28d9; }
.tile[data-color="orange"]  { border-color: #c2410c; }
.tile[data-color="amber"]   { border-color: #b45309; }
.tile[data-color="green"]   { border-color: #15803d; }
.tile[data-color="emerald"] { border-color: #047857; }

.tile[data-color="blue"]    .tile-icon { filter: drop-shadow(0 0 4px #3b82f6aa); }
.tile[data-color="cyan"]    .tile-icon { filter: drop-shadow(0 0 4px #22d3eeaa); }
.tile[data-color="purple"]  .tile-icon { filter: drop-shadow(0 0 4px #a78bfaaa); }
.tile[data-color="orange"]  .tile-icon { filter: drop-shadow(0 0 4px #fb923caa); }
.tile[data-color="amber"]   .tile-icon { filter: drop-shadow(0 0 4px #fbbf24aa); }
.tile[data-color="green"]   .tile-icon { filter: drop-shadow(0 0 4px #4ade80aa); }
.tile[data-color="emerald"] .tile-icon { filter: drop-shadow(0 0 4px #34d399aa); }

.tile[data-color="blue"]:hover,    .tile[data-color="blue"].active    { background:#0f2050; border-color:#3b82f6; box-shadow:0 0 16px #3b82f633; }
.tile[data-color="cyan"]:hover,    .tile[data-color="cyan"].active    { background:#0a2535; border-color:#22d3ee; box-shadow:0 0 16px #22d3ee33; }
.tile[data-color="purple"]:hover,  .tile[data-color="purple"].active  { background:#1e0a40; border-color:#a78bfa; box-shadow:0 0 16px #a78bfa33; }
.tile[data-color="orange"]:hover,  .tile[data-color="orange"].active  { background:#2a1000; border-color:#fb923c; box-shadow:0 0 16px #fb923c33; }
.tile[data-color="amber"]:hover,   .tile[data-color="amber"].active   { background:#261500; border-color:#fbbf24; box-shadow:0 0 16px #fbbf2433; }
.tile[data-color="green"]:hover,   .tile[data-color="green"].active   { background:#052010; border-color:#4ade80; box-shadow:0 0 16px #4ade8033; }
.tile[data-color="emerald"]:hover, .tile[data-color="emerald"].active { background:#031a10; border-color:#34d399; box-shadow:0 0 16px #34d39933; }

.tile[data-color="blue"]    .tile-label { color: #93c5fd; }
.tile[data-color="cyan"]    .tile-label { color: #67e8f9; }
.tile[data-color="purple"]  .tile-label { color: #c4b5fd; }
.tile[data-color="orange"]  .tile-label { color: #fdba74; }
.tile[data-color="amber"]   .tile-label { color: #fcd34d; }
.tile[data-color="green"]   .tile-label { color: #86efac; }
.tile[data-color="emerald"] .tile-label { color: #6ee7b7; }

/* ── Mode toggle ──────────────────────────────────────────── */
.mode-btn {
  flex: 1;
  font-size: 0.75rem;
  border-radius: 6px;
  padding: 6px 12px;
  background: #112240;
  color: #4a6fa5;
  border: 1px solid #1e3a5f;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.15s;
}
.mode-btn:hover  { background: #1a3356; color: #93c5fd; }
.mode-btn.active { background: #1d4ed8; color: #fff; border-color: #3b82f6; }

/* ── View toggle ──────────────────────────────────────────── */
.view-toggle {
  font-size: 0.8rem; padding: 4px 12px;
  border-radius: 6px; cursor: pointer;
  background: none; color: #4a6fa5;
  border: 1px solid transparent;
  font-weight: 600;
  transition: all 0.15s;
}
.view-toggle:hover  { color: #93c5fd; border-color: #1e3a5f; }
.view-toggle.active { background: #112240; color: #e2e8f0; border-color: #3b82f6; }

/* ── Todo sections ────────────────────────────────────────── */
.todo-section { margin-bottom: 10px; }
.todo-section-body.collapsed { display: none; }

.todo-section-header {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; font-weight: 800; color: #4a6fa5;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 5px 10px; margin-bottom: 5px;
  background: linear-gradient(90deg, rgba(30,58,95,0.6) 0%, transparent 100%);
  border-left: 3px solid #1e3a5f;
  border-radius: 0 4px 4px 0;
}
.todo-section-header.collapsible { cursor: pointer; }
.todo-section-header.collapsible:hover { color: #93c5fd; border-left-color: #3b82f6; }

/* ── Section type colours (like 2K categories) ───────────── */
.todo-section[data-type="alert"]     .todo-section-header { border-left-color:#f97316; color:#fb923c; background:linear-gradient(90deg,rgba(124,45,18,.35) 0%,transparent 100%); }
.todo-section[data-type="overdue"]   .todo-section-header { border-left-color:#ef4444; color:#f87171; background:linear-gradient(90deg,rgba(127,29,29,.35) 0%,transparent 100%); }
.todo-section[data-type="today"]     .todo-section-header { border-left-color:#3b82f6; color:#60a5fa; background:linear-gradient(90deg,rgba(30,58,95,.4)  0%,transparent 100%); }
.todo-section[data-type="tomorrow"]  .todo-section-header { border-left-color:#06b6d4; color:#22d3ee; background:linear-gradient(90deg,rgba(8,51,68,.4)   0%,transparent 100%); }
.todo-section[data-type="week"]      .todo-section-header { border-left-color:#818cf8; color:#a5b4fc; background:linear-gradient(90deg,rgba(49,46,129,.35) 0%,transparent 100%); }
.todo-section[data-type="recurring"] .todo-section-header { border-left-color:#22c55e; color:#4ade80; background:linear-gradient(90deg,rgba(20,83,45,.35)  0%,transparent 100%); }
.todo-section[data-type="other"]     .todo-section-header { border-left-color:#475569; color:#64748b; background:linear-gradient(90deg,rgba(30,41,59,.3)   0%,transparent 100%); }
.todo-section[data-type="later"]     .todo-section-header { border-left-color:#475569; color:#64748b; background:linear-gradient(90deg,rgba(30,41,59,.3)   0%,transparent 100%); }
.todo-section[data-type="nodate"]    .todo-section-header { border-left-color:#334155; color:#4a6fa5; background:linear-gradient(90deg,rgba(15,31,60,.3)   0%,transparent 100%); }
.todo-section[data-type="done"]      .todo-section-header { border-left-color:#334155; color:#334155; background:linear-gradient(90deg,rgba(15,23,42,.3)   0%,transparent 100%); }

.todo-section-count {
  margin-left: auto;
  background: #112240;
  color: #4a6fa5;
  font-size: 0.75rem;
  border-radius: 999px;
  padding: 1px 7px;
  border: 1px solid #1e3a5f;
  font-weight: 700;
}
.sec-arrow { font-size: 0.6rem; }

/* ── Todo items (elevated cards) ─────────────────────────── */
.todo-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: #112240;
  border: 1px solid #1e3a5f;
  border-radius: 10px;
  transition: all 0.15s;
  margin-bottom: 5px;
}
.todo-item:hover {
  border-color: #3b82f6;
  background: #162d4e;
  box-shadow: 0 2px 12px rgba(59,130,246,0.12);
}
.todo-item.done     { opacity: 0.65; }
.todo-item.is-overdue {
  background: #1f0a0a;
  border-color: #7f1d1d;
  border-left: 3px solid #ef4444;
}

/* ── Checkbox ─────────────────────────────────────────────── */
.todo-check {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #1e3a5f; cursor: pointer; flex-shrink: 0;
  margin-top: 2px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; transition: all 0.15s;
}
.todo-check:hover   { border-color: #3b82f6; }
.todo-check.checked { background: #15803d; border-color: #22c55e; color: #fff; }

/* ── Todo text ────────────────────────────────────────────── */
.todo-body  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.todo-text  { font-size: 0.95rem; color: #e2e8f0; line-height: 1.4; word-break: break-word; font-weight: 500; }
.todo-text.done { text-decoration: line-through; color: #94a3b8; }

/* ── Tags ─────────────────────────────────────────────────── */
.todo-tags  { display: flex; flex-wrap: wrap; gap: 4px; }
.todo-tag   { font-size: 0.72rem; border-radius: 4px; padding: 2px 7px; font-weight: 600; letter-spacing: 0.02em; }
.todo-tag.due     { background: #0c2a4a; color: #60a5fa; border: 1px solid #1e3a5f; }
.todo-tag.overdue { background: #450a0a; color: #f87171; border: 1px solid #7f1d1d; }
.todo-tag.rec     { background: #0a2a1a; color: #4ade80; border: 1px solid #14532d; }
.todo-tag.time    { background: #0f1f38; color: #93c5fd; border: 1px solid #1e3a5f; }
.todo-tag.alert   { background: #3a1500; color: #fb923c; border: 1px solid #7c2d12; cursor: help; }

/* ── Priority tags (badge style like 2K) ─────────────────── */
.todo-tag.priority-high   { background: #450a0a; color: #fca5a5; border: 1px solid #991b1b; font-weight: 800; }
.todo-tag.priority-medium { background: #3a2000; color: #fbbf24; border: 1px solid #92400e; font-weight: 700; }
.todo-tag.priority-low    { background: #0f1f38; color: #64748b; border: 1px solid #1e3a5f; }

/* ── Priority dot (glowing) ──────────────────────────────── */
.todo-priority {
  width: 11px; height: 11px; border-radius: 50%;
  cursor: pointer; flex-shrink: 0; margin-top: 4px;
  transition: transform 0.15s, box-shadow 0.15s;
  border: none;
}
.todo-priority:hover { transform: scale(1.5); }
.pri-high   { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.7); }
.pri-medium { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.6); }
.pri-low    { background: #334155; box-shadow: 0 0 4px rgba(51,65,85,0.5); }

/* ── Smart hint ───────────────────────────────────────────── */
.todo-smart-hint {
  font-size: 0.7rem; color: #fb923c; background: #1a0e00;
  border: 1px solid #7c2d12; border-radius: 6px; padding: 5px 10px;
  margin-top: 3px; display: flex; align-items: center; gap: 8px;
}
.hint-btn {
  font-size: 0.65rem; background: #7c2d12; color: #fde68a;
  border: none; border-radius: 4px; padding: 2px 8px;
  cursor: pointer; white-space: nowrap; font-weight: 600;
}
.hint-btn:hover { background: #9a3412; }

/* ── Actions ──────────────────────────────────────────────── */
.todo-actions { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.todo-act {
  font-size: 0.82rem; color: #1e3a5f; background: none; border: none;
  cursor: pointer; padding: 2px 4px; border-radius: 4px; transition: color 0.15s;
}
.todo-act:hover { color: #60a5fa; }

/* ── Inline edit input ────────────────────────────────────── */
.todo-edit-input {
  flex: 1; background: #0f2235; border: 1px solid #3b82f6;
  border-radius: 5px; color: #e2e8f0; font-size: 0.85rem;
  padding: 2px 8px; outline: none; width: 100%;
}

/* ── Category tags ────────────────────────────────────────── */
.todo-tag.cat-none     { background: #0f1f38; color: #334155; border: 1px dashed #1e3a5f; cursor: pointer; opacity: 0.5; }
.todo-tag.cat-none:hover { opacity: 1; color: #60a5fa; border-color: #3b82f6; }
.todo-tag[class*="cat-"]:not(.cat-none) { cursor: pointer; }
.todo-tag.cat-work     { background: #0c1f4a; color: #60a5fa; border: 1px solid #1d4ed8; }
.todo-tag.cat-family   { background: #2a0a1a; color: #fb7185; border: 1px solid #9f1239; }
.todo-tag.cat-travel   { background: #062a35; color: #22d3ee; border: 1px solid #0e7490; }
.todo-tag.cat-finance  { background: #2a1f00; color: #fcd34d; border: 1px solid #92400e; }
.todo-tag.cat-health   { background: #052a10; color: #4ade80; border: 1px solid #15803d; }
.todo-tag.cat-personal { background: #1a0a35; color: #c4b5fd; border: 1px solid #6d28d9; }
.todo-tag.cat-ai       { background: #0f1a35; color: #818cf8; border: 1px solid #4338ca; }
.todo-tag.cat-other    { background: #1a1f2e; color: #94a3b8; border: 1px solid #334155; }

/* Category section header colours (標籤檢視) */
.todo-section[data-category="work"]     .todo-section-header { border-left-color:#3b82f6; color:#60a5fa; background:linear-gradient(90deg,rgba(12,31,74,.5) 0%,transparent 100%); }
.todo-section[data-category="family"]   .todo-section-header { border-left-color:#f43f5e; color:#fb7185; background:linear-gradient(90deg,rgba(42,10,26,.5) 0%,transparent 100%); }
.todo-section[data-category="travel"]   .todo-section-header { border-left-color:#06b6d4; color:#22d3ee; background:linear-gradient(90deg,rgba(6,42,53,.5)  0%,transparent 100%); }
.todo-section[data-category="finance"]  .todo-section-header { border-left-color:#eab308; color:#fcd34d; background:linear-gradient(90deg,rgba(42,31,0,.5)  0%,transparent 100%); }
.todo-section[data-category="health"]   .todo-section-header { border-left-color:#22c55e; color:#4ade80; background:linear-gradient(90deg,rgba(5,42,16,.5)  0%,transparent 100%); }
.todo-section[data-category="personal"] .todo-section-header { border-left-color:#a78bfa; color:#c4b5fd; background:linear-gradient(90deg,rgba(26,10,53,.5) 0%,transparent 100%); }
.todo-section[data-category="ai"]       .todo-section-header { border-left-color:#6366f1; color:#818cf8; background:linear-gradient(90deg,rgba(15,26,53,.5) 0%,transparent 100%); }
.todo-section[data-category="other"]    .todo-section-header { border-left-color:#64748b; color:#94a3b8; background:linear-gradient(90deg,rgba(26,31,46,.5) 0%,transparent 100%); }
.todo-section[data-category="__none__"] .todo-section-header { border-left-color:#334155; color:#4a6fa5; background:linear-gradient(90deg,rgba(15,23,42,.4) 0%,transparent 100%); }

/* ── Due date inline editor ───────────────────────────────── */
.due-inline-editor {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: 6px; padding: 6px 8px;
  background: #0a1628; border: 1px solid #3b82f6;
  border-radius: 7px;
}
.due-inline-date, .due-inline-time {
  background: #112240; border: 1px solid #1e3a5f; border-radius: 5px;
  color: #e2e8f0; font-size: 0.8rem; padding: 3px 8px; outline: none;
}
.due-inline-date { width: 68px; }
.due-inline-date:focus, .due-inline-time:focus { border-color: #3b82f6; }
.due-inline-time::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.7; cursor: pointer; }
.due-inline-time::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.due-inline-cal { background: none; border: none; cursor: pointer; font-size: 0.85rem; padding: 0 2px; opacity: 0.7; }
.due-inline-cal:hover { opacity: 1; }
.due-inline-save  { font-size: 0.75rem; padding: 3px 10px; border-radius: 5px; border: none; cursor: pointer; font-weight: 700; background: #1d4ed8; color: #fff; transition: background 0.15s; }
.due-inline-save:hover { background: #2563eb; }
.due-inline-clear { font-size: 0.75rem; padding: 3px 10px; border-radius: 5px; border: none; cursor: pointer; font-weight: 700; background: #1e3a5f; color: #94a3b8; transition: background 0.15s; }
.due-inline-clear:hover { background: #7f1d1d; color: #fca5a5; }

/* Editable due tag */
.editable-due { cursor: pointer; transition: opacity 0.15s; }
.editable-due:hover { opacity: 0.75; }
.todo-tag.due-empty { background: transparent; color: #334155; border: 1px dashed #1e3a5f; opacity: 0.5; font-size: 0.68rem; }
.todo-tag.due-empty:hover { opacity: 1; color: #60a5fa; border-color: #3b82f6; }

/* ── Category filter bar ──────────────────────────────────── */
#cat-filter-bar { min-height: 36px; }
.cat-filter-btn {
  font-size: 0.72rem; padding: 3px 10px; border-radius: 999px;
  border: 1px solid #1e3a5f; background: none; color: #4a6fa5;
  cursor: pointer; transition: all 0.15s; white-space: nowrap; font-weight: 600;
}
.cat-filter-btn:hover { border-color: #3b82f6; color: #93c5fd; }
.cat-filter-btn.active {
  background: #1e3a5f; color: #e2e8f0;
  border-color: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,0.25);
}
/* Colour each active filter pill to match its category */
.cat-filter-btn[data-cat="work"].active     { background:#0c1f4a; border-color:#3b82f6; color:#93c5fd; }
.cat-filter-btn[data-cat="family"].active   { background:#2a0a1a; border-color:#f43f5e; color:#fb7185; }
.cat-filter-btn[data-cat="travel"].active   { background:#062a35; border-color:#06b6d4; color:#22d3ee; }
.cat-filter-btn[data-cat="finance"].active  { background:#2a1f00; border-color:#eab308; color:#fcd34d; }
.cat-filter-btn[data-cat="health"].active   { background:#052a10; border-color:#22c55e; color:#4ade80; }
.cat-filter-btn[data-cat="personal"].active { background:#1a0a35; border-color:#a78bfa; color:#c4b5fd; }
.cat-filter-btn[data-cat="ai"].active       { background:#0f1a35; border-color:#6366f1; color:#818cf8; }
.cat-filter-btn[data-cat="other"].active    { background:#1a1f2e; border-color:#64748b; color:#94a3b8; }

/* Category picker popup */
.cat-picker-popup {
  background: #0f2235; border: 1px solid #1e3a5f;
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  overflow: hidden; min-width: 130px;
}
.cat-picker-item {
  padding: 8px 14px; font-size: 0.82rem; color: #94a3b8;
  cursor: pointer; transition: background 0.12s;
}
.cat-picker-item:hover { background: #1e3a5f; color: #e2e8f0; }

/* ── Copy ID button ───────────────────────────────────────── */
.copy-id-btn {
  font-size: 0.6rem; padding: 1px 6px;
  background: #112240; border: 1px solid #1e3a5f;
  color: #4a6fa5; border-radius: 3px; cursor: pointer;
  transition: all 0.15s; margin-left: 5px;
  vertical-align: middle; font-weight: 600;
}
.copy-id-btn:hover  { background: #1e3a5f; color: #60a5fa; border-color: #3b82f6; }
.copy-id-btn.copied { background: #14532d; border-color: #22c55e; color: #4ade80; }

/* ── Email cards (今天郵件) ───────────────────────────────── */
.email-card-title {
  font-size: 0.72rem; font-weight: 800; color: #4a6fa5;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 4px 10px 8px; margin-bottom: 4px;
  border-left: 3px solid #3b82f6;
  background: linear-gradient(90deg, rgba(30,58,95,.4) 0%, transparent 100%);
}
.email-card {
  background: #112240; border: 1px solid #1e3a5f;
  border-radius: 7px; padding: 6px 10px; margin-bottom: 3px;
  transition: all 0.15s; display: flex; align-items: center; gap: 8px;
}
.email-card:hover { border-color: #3b82f6; }
.email-card-badge  { flex-shrink: 0; font-size: 0.75rem; }
.email-card-body   { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.email-card-subject { font-size: 0.9rem; font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email-card-from    { font-size: 0.73rem; color: #4a6fa5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Search results ───────────────────────────────────────── */
.search-result-item {
  padding: 10px 12px;
  border-radius: 8px;
  background: #112240;
  border: 1px solid #1e3a5f;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: 6px;
}
.search-result-item:hover {
  border-color: #3b82f6;
  box-shadow: 0 0 10px rgba(59,130,246,0.15);
}
.search-result-title { font-size: 0.9rem; font-weight: 600; color: #e2e8f0; }
.search-result-from  { font-size: 0.8rem; color: #4a6fa5; margin-top: 2px; }
.search-result-id    { font-size: 0.73rem; color: #1e3a5f; margin-top: 2px; font-family: monospace; }