:root{ --bg:#11141a; --surface:#181c23; --surface-2:#1f242c; --border:#2b313b; --border-soft:rgba(255,255,255,0.06); --text:#eceae4; --muted:#8a90a0; --faint:#5b6270; --accent:#d6a345; --accent-soft:rgba(214,163,69,0.14); --warn:#b96a44; --warn-soft:rgba(185,106,68,0.12); --danger:#e2574c; --danger-soft:rgba(226,87,76,0.14); --font-ui:'Manrope', system-ui, sans-serif; --font-mono:'IBM Plex Mono', monospace; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; }*{ box-sizing:border-box; }html,body{ margin:0; padding:0; }body{ background:var(--bg); color:var(--text); font-family:var(--font-ui); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; }body.no-scroll{ overflow:hidden; }:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }#configNote{ color:var(--danger); font-size:12.5px; padding:var(--sp-3) var(--sp-6); line-height:1.6; }#configNote:empty{ display:none; }#configNote code{ background:var(--surface); padding:1px 5px; border:1px solid var(--border); border-radius:3px; }.page{ max-width:1180px; margin:0 auto; padding:var(--sp-7) var(--sp-6) var(--sp-8); }.page-header{ display:flex; align-items:baseline; gap:var(--sp-3); margin-bottom:var(--sp-6); }.page-header h1{ font-size:21px; font-weight:800; margin:0; letter-spacing:-0.01em; }.page-header p{ margin:0; font-size:13px; color:var(--muted); }.page-header-actions{ margin-left:auto; display:flex; }.layout{ display:grid; grid-template-columns:1fr; align-items:start; }.sidebar{ position:fixed; top:0; left:0; width:280px; height:100vh; background:var(--surface); border-right:1px solid var(--border); z-index:100; transform:translateX(-100%); transition:transform 0.25s ease-out; overflow-y:auto; padding:var(--sp-6); scrollbar-width:thin; scrollbar-color: var(--border) var(--surface); }.sidebar::-webkit-scrollbar{ width:6px; }.sidebar::-webkit-scrollbar-track{ background:var(--surface); border-radius:3px; }.sidebar::-webkit-scrollbar-thumb{ background:var(--border); border-radius:3px; }.sidebar::-webkit-scrollbar-thumb:hover{ background:var(--accent); }.sidebar.open{ transform:translateX(0); }.sidebar-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:99; opacity:0; pointer-events:none; transition:opacity 0.25s ease-out; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }.sidebar-backdrop.visible{ opacity:1; pointer-events:auto; }.sidebar-head{ display:flex; justify-content:flex-end; align-items:center; margin-bottom:var(--sp-4); }.sidebar-section{ margin-bottom:var(--sp-5); }.sidebar-section:last-child{ margin-bottom:0; }.sidebar-title{ font-size:11.5px; color:var(--muted); font-weight:700; padding-bottom:var(--sp-1); margin-bottom:var(--sp-2); border-bottom:1px solid var(--border-soft); }.chk-list{ display:flex; flex-direction:column; gap:1px; max-height:calc(100vh - 180px); overflow-y:auto; padding-right:var(--sp-2); scrollbar-width:thin; scrollbar-color: var(--border) var(--surface); scrollbar-gutter:stable; }.chk-list::-webkit-scrollbar{ width:5px; }.chk-list::-webkit-scrollbar-track{ background:transparent; border-radius:3px; }.chk-list::-webkit-scrollbar-thumb{ background:var(--border); border-radius:3px; }.chk-list::-webkit-scrollbar-thumb:hover{ background:var(--accent); }.chk-row{ display:flex; align-items:center; gap:var(--sp-2); padding:4px 6px; font-size:12.5px; cursor:pointer; border-radius:5px; }.chk-row:hover{ background:var(--surface-2); }.chk-row input{ accent-color:var(--accent); margin:0; }.switch-row{ justify-content:space-between; }.switch-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.icon-btn{ background:var(--surface); border:1px solid var(--border); color:var(--muted); padding:4px 8px; font-size:12.5px; cursor:pointer; border-radius:6px; line-height:1.4; font-family:var(--font-ui); }.icon-btn:hover{ border-color:var(--accent); }.sidebar-open-btn{ margin-bottom:var(--sp-5); }.sidebar-open-btn.hidden{ display:none; }.main{ min-width:0; }.server-panel{ margin-bottom:var(--sp-7); }.server-head h2{ font-size:14px; }.panel{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:var(--sp-4) var(--sp-5); }.panel.flash{ border-color:var(--danger); }.panel-head{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-2); flex-wrap:wrap; }.panel-head h2{ font-size:12.5px; margin:0; color:var(--muted); font-weight:700; }.panel-head span{ font-size:10.5px; color:var(--faint); font-family:var(--font-mono); }.readout{ font-family:var(--font-mono); font-weight:700; font-size:26px; color:var(--accent); margin-top:var(--sp-2); line-height:1.1; }.readout.idle{ color:var(--muted); font-size:13px; font-weight:600; }.sub{ color:var(--muted); font-size:11px; margin-top:var(--sp-1); font-family:var(--font-mono); }.divider{ height:1px; background:var(--border-soft); margin:var(--sp-3) 0; }.mini-form{ display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; }.mini-form input[type=number]{ width:44px; background:var(--bg); border:1px solid var(--border); color:var(--text); font-family:var(--font-mono); font-size:13px; padding:6px 4px; text-align:center; border-radius:6px; }.mini-form select{ background:var(--bg); border:1px solid var(--border); color:var(--text); font-family:var(--font-ui); font-size:12.5px; padding:6px 8px; flex:1; min-width:0; border-radius:6px; }.mini-form input:focus, .mini-form select:focus{ outline:1px solid var(--accent); border-color:var(--accent); }button{ font-family:var(--font-ui); font-size:12.5px; font-weight:700; cursor:pointer; border:1px solid var(--accent); background:var(--accent); color:#1a1300; padding:6px 14px; border-radius:6px; }button:hover{ border-color:#f2cd86; box-shadow:0 0 0 2px var(--accent-soft); }button.link{ background:none; border:1px solid transparent; color:var(--muted); padding:2px 6px; font-size:11.5px; font-weight:600; border-radius:4px; }button.link:hover{ border-color:var(--accent); }.preset-row{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }.timers-section .preset-row{ margin-top:var(--sp-2); }.preset-btn{ display:flex; align-items:center; gap:var(--sp-2); background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:6px 10px; font-weight:600; font-size:12px; cursor:pointer; border-radius:6px; }.preset-btn:hover{ border-color:var(--accent); }.preset-btn .dur{ font-family:var(--font-mono); font-size:10.5px; color:var(--muted); }.manual-list{ display:flex; flex-direction:column; gap:var(--sp-1); margin-top:var(--sp-3); background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:var(--sp-2); }.active-section .manual-list{ margin-top:0; }.manual-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); background:var(--surface-2); border:1px solid var(--border); padding:6px 10px; font-size:12.5px; border-radius:6px; }.manual-row.done{ border-color:var(--danger); }.manual-row .count{ font-family:var(--font-mono); color:var(--accent); font-size:13px; }.manual-row.done .count{ color:var(--danger); }.manual-row.soon{ background:var(--warn-soft); border-color:var(--warn); }.manual-row.soon .count{ color:var(--warn); }.manual-row.focus{ background:var(--danger-soft); border-color:var(--danger); }.manual-row.focus .count{ color:var(--danger); }.mines-section, .active-section{ margin-bottom:var(--sp-6); }.section-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--sp-2); flex-wrap:wrap; gap:var(--sp-2); }.section-head h2{ font-size:14px; margin:0; font-weight:700; }.legend{ font-size:11px; color:var(--muted); display:flex; align-items:center; gap:var(--sp-2); }.dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:3px; }.dot-soon{ background:var(--warn); }.dot-focus{ background:var(--danger); }.mines-list{ background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }.mine-row{ display:flex; align-items:center; gap:var(--sp-3); padding:9px var(--sp-4); border-bottom:1px solid var(--border-soft); transition:background-color 0.4s ease; }.mine-row:last-child{ border-bottom:none; }.mine-row.flash{ background:var(--danger-soft); }.mine-row.soon{ background:var(--warn-soft); }.mine-row.focus{ background:var(--danger-soft); }.mine-row.focus .count{ color:var(--danger); }.mine-row.starred{ box-shadow:inset 0 0 0 1px var(--accent); background:var(--accent-soft); border-radius:10px; }.mine-row .name{ width:140px; font-weight:600; font-size:13px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.mine-row .interval{ flex:1; min-width:0; text-align:center; color:var(--muted); font-size:11px; font-family:var(--font-mono); }.mine-row .count{ width:84px; font-family:var(--font-mono); font-size:17px; font-weight:700; text-align:right; flex-shrink:0; }.mine-row .predict-count{ width:auto; min-width:56px; max-width:150px; font-size:11px; color:var(--muted); text-align:right; flex-shrink:0; }.mine-row .predict-count.muted{ color:var(--faint); }.star-btn{ background:var(--bg); border:1px solid var(--border); color:var(--faint); padding:3px 8px; font-size:13px; line-height:1; cursor:pointer; flex-shrink:0; border-radius:6px; }.star-btn:hover{ border-color:var(--accent); }.star-btn.on{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }.empty{ color:var(--muted); font-size:12.5px; padding:var(--sp-4); }.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:199; opacity:0; pointer-events:none; transition:opacity 0.2s ease-out; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }.modal-backdrop.visible{ opacity:1; pointer-events:auto; }.modal{ position:fixed; top:50%; left:50%; transform:translate(-50%, -48%); width:min(420px, calc(100vw - var(--sp-6) * 2)); background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:var(--sp-5); z-index:200; opacity:0; pointer-events:none; transition:opacity 0.2s ease-out, transform 0.2s ease-out; box-shadow:0 12px 40px rgba(0,0,0,0.45); }.modal.open{ opacity:1; pointer-events:auto; transform:translate(-50%, -50%); }.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--sp-3); }.modal-head h2{ font-size:15px; margin:0; font-weight:700; }.modal-body .mini-form{ margin-top:var(--sp-2); }.xp-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:199; opacity:0; pointer-events:none; transition:opacity 0.22s ease-out; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }.xp-backdrop.visible{ opacity:1; pointer-events:auto; }.xp-panel{ position:fixed; top:0; right:0; height:100dvh; width:min(340px, 100vw - 48px); z-index:200; background:var(--surface); border-left:1px solid var(--border); box-shadow:-12px 0 40px rgba(0,0,0,0.45); transform:translateX(105%); transition:transform 0.28s cubic-bezier(0.22,1,0.36,1); display:flex; flex-direction:column; }.xp-panel.open{ transform:translateX(0); }.xp-head{ display:flex; justify-content:space-between; align-items:center; padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border); }.xp-head h2{ font-size:15px; margin:0; font-weight:700; }.xp-body{ padding:var(--sp-5); overflow-y:auto; display:flex; flex-direction:column; gap:var(--sp-4); }.xp-field{ display:flex; flex-direction:column; gap:var(--sp-2); }.xp-field-label{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; }.xp-field input{ background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font-family:var(--font-mono); font-size:22px; font-weight:700; padding:10px 12px; width:100%; transition:border-color 0.15s ease, box-shadow 0.15s ease; }.xp-field input::placeholder{ color:var(--faint); font-weight:600; }.xp-field input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }.xp-field input::-webkit-outer-spin-button, .xp-field input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }.xp-field input[type=number]{ -moz-appearance:textfield; appearance:textfield; }.xp-mutual{ font-family:var(--font-mono); font-size:10.5px; color:var(--faint); text-align:center; margin:0; }.xp-result{ background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:var(--sp-4); min-height:88px; }.xp-rows{ display:flex; flex-direction:column; gap:var(--sp-3); }.xp-row{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-3); font-size:12px; color:var(--muted); }.xp-row b{ font-family:var(--font-mono); font-weight:700; font-size:13.5px; color:var(--text); white-space:nowrap; }.xp-row b.gold{ color:var(--accent); font-size:15px; }.xp-empty{ color:var(--faint); font-size:12px; line-height:1.6; margin:0; }.site-footer{ margin-top:var(--sp-7); padding-top:var(--sp-4); border-top:1px solid var(--border-soft); font-family:var(--font-mono); font-size:11px; color:var(--faint); text-align:center; }.site-footer b{ color:var(--muted); font-weight:600; }.site-footer a{ color:var(--accent); text-decoration:none; }.site-footer a:hover{ text-decoration:underline; }

@media (prefers-reduced-motion: reduce){
  .mine-row{ transition:none; }
  .sidebar{ transition:none; }
  .sidebar-backdrop{ transition:none; }
  .modal{ transition:none; }
  .modal-backdrop{ transition:none; }
  .xp-backdrop{ transition:none; }
  .xp-panel{ transition:none; }
}.switch{ position: relative; display: inline-block; width: 38px; height: 20px; flex-shrink: 0; }.switch input{ opacity: 0; width: 0; height: 0; }.switch .slider{ position: absolute; inset: 0; cursor: pointer; border-radius: 999px; background: #2a2e36; transition: background 0.2s ease; }.switch .slider::before{ content: ""; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; border-radius: 50%; background: #c8c6c0; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.2s ease, background 0.2s ease; }.switch input:checked + .slider{ background: var(--accent); }.switch input:checked + .slider::before{ transform: translateX(18px); background: #1a1300; }.switch input:focus-visible + .slider{ outline: 2px solid var(--accent); outline-offset: 2px; }