/* public/assets/css/tools/game/schulte-grid.css */
.sg-wrap {
  --bg: transparent;
  --card: var(--bg-surface);
  --text: var(--text-main);
  --muted: var(--text-muted);
  --accent: var(--primary-color);
  --accent2: var(--primary-hover);
  --accent-soft: rgba(var(--primary-rgb), 0.1);
  --border: var(--border-color);
  --shadow: 0 4px 12px rgba(0,0,0,0.05);
  --cell-bg: var(--bg-surface);
  --cell-done: var(--bg-body);
  --overlay: rgba(255,255,255,0.72);
  --radius: 16px;
  width: 100%;
}

[data-theme="dark"] .sg-wrap {
  --shadow: 0 4px 12px rgba(0,0,0,0.4);
  --cell-done: #1e293b;
  --overlay: rgba(15, 23, 42, 0.78);
}

.sg-nav { display:flex; gap:8px; margin-bottom:24px; background:var(--bg-body); padding:6px; border-radius:12px; overflow-x: auto;}
.sg-nav-tab { border:0; background:transparent; padding:8px 16px; border-radius:8px; font-size:0.95rem; color:var(--muted); cursor:pointer; font-weight:500; transition:0.2s; white-space: nowrap;}
.sg-nav-tab:hover { color:var(--text); }
.sg-nav-tab.active { background:var(--card); color:var(--accent); box-shadow:var(--shadow); font-weight:600; border: 1px solid var(--border);}

.sg-main { width: 100%; }
.sg-view { display:none; }
.sg-view.active { display:block; animation:sg-fade 0.25s; }
.sg-hidden { display:none !important; }
@keyframes sg-fade { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

.sg-btn { border:1px solid var(--border); background:var(--card); color:var(--text); padding:10px 20px; border-radius:10px; font-size:0.95rem; cursor:pointer; transition:0.15s; font-weight:600; }
.sg-btn:hover { border-color:var(--accent); color:var(--accent); }
.sg-btn-primary { background:linear-gradient(135deg,var(--accent),var(--accent2)); border:0; color:#fff; }
.sg-btn-primary:hover { filter:brightness(1.08); color:#fff; }
.sg-btn-ghost { background:transparent; }
.sg-btn-sm { padding:6px 14px; font-size:0.85rem; }
.sg-btn-xs { padding:4px 10px; font-size:0.8rem; border-radius:8px; }
.sg-btn-block { width:100%; padding:14px; font-size:1rem; }
.sg-btn.sg-danger, .sg-btn.sg-danger:hover { color:#ef4444; border-color:#ef4444; }

.sg-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; }

.sg-quick-wrap { display:grid; grid-template-columns:320px 1fr; gap:24px; align-items:start; }
@media(max-width:880px){ .sg-quick-wrap { grid-template-columns:1fr; } }
.sg-config-panel h2 { font-size:1.1rem; margin-bottom:20px; color: var(--text);}
.sg-config-panel.locked { opacity:0.8; }
.sg-config-panel.locked .sg-opt-group { pointer-events:none; }
.sg-cfg-row { margin-bottom:20px; }
.sg-cfg-label { font-size:0.9rem; color:var(--muted); margin-bottom:10px; font-weight:600; }
.sg-opt-group { display:flex; flex-wrap:wrap; gap:8px; }
.sg-opt { border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:10px; padding:8px 12px; font-size:0.85rem; cursor:pointer; transition:0.15s; }
.sg-opt:hover { border-color:var(--accent); }
.sg-opt.active { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600; }
.sg-opt.disabled { opacity:0.4; cursor:not-allowed; }
.sg-opt-mode { flex-direction:column; }
.sg-opt-mode .sg-opt { display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; text-align:left; }
.sg-opt-mode .sg-opt small { color:var(--muted); font-size:0.75rem; font-weight:400; }
.sg-opt-mode .sg-opt.active small { color:var(--accent); }
.sg-cfg-inline { display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.sg-cfg-tip { font-size:0.85rem; color:var(--muted); margin-top:16px; line-height: 1.6;}
.sg-switch { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:0.9rem; color:var(--muted); font-weight: 500;}
.sg-switch input { display:none; }
.sg-switch span { width:36px; height:20px; background:var(--border); border-radius:20px; position:relative; transition:0.2s; flex:none; }
.sg-switch span::after { content:''; position:absolute; width:16px; height:16px; background:#fff; border-radius:50%; top:2px; left:2px; transition:0.2s; box-shadow:0 1px 2px rgba(0,0,0,0.25); }
.sg-switch input:checked + span { background:var(--accent); }
.sg-switch input:checked + span::after { left:18px; }

.sg-game-panel { position:relative; min-height:480px; display:flex; flex-direction:column; gap:20px; }
.sg-plan-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--accent-soft); border:1px solid var(--accent); border-radius:12px; padding:12px 16px; font-size:0.9rem; flex-wrap:wrap; color: var(--text);}
.sg-game-status { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.sg-stat { background:var(--bg-body); border-radius:12px; padding:12px; text-align:center; border: 1px solid var(--border);}
.sg-stat span { display:block; font-size:0.8rem; color:var(--muted); margin-bottom:4px;}
.sg-stat b { font-size:1.4rem; font-variant-numeric:tabular-nums; color: var(--accent);}
.sg-grid-area { position:relative; flex:1; display:flex; align-items:center; justify-content:center; min-height:360px; }
.sg-grid { display:grid; grid-template-columns:repeat(var(--n,5),1fr); gap:10px; width:100%; max-width: 500px; margin: 0 auto;}
.sg-cell { aspect-ratio:1; border:1px solid var(--border); background:var(--cell-bg); border-radius:12px; font-weight:700; color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform 0.08s,box-shadow 0.15s,background 0.15s; user-select:none; font-variant-numeric:tabular-nums; box-shadow:0 2px 4px rgba(0,0,0,0.02); }
.sg-cell:hover { transform:scale(1.05); border-color:var(--accent); box-shadow:0 4px 14px rgba(var(--primary-rgb),0.18); z-index: 10;}
.sg-cell:active { transform:scale(0.95); }
.sg-cell.done { background:var(--cell-done); color:var(--muted); opacity:0.3; pointer-events:none; box-shadow:none; transform:none; border-color: transparent;}
.sg-cell.target { outline:3px solid var(--accent); outline-offset:-3px; animation:sg-pulse 1.2s infinite; }
@keyframes sg-pulse { 0%,100%{outline-color:var(--accent)} 50%{outline-color:var(--accent2)} }
.sg-cell.wrong { background:rgba(239, 68, 68, 0.1); border-color:#ef4444; color:#ef4444; animation:sg-shake 0.3s; }
@keyframes sg-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
.sg-countdown { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:6rem; font-weight:800; color:var(--accent); background:var(--overlay); border-radius:var(--radius); z-index:5; }
.sg-game-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--muted); text-align:center; padding: 20px;}
.sg-game-placeholder .sg-ph-sub { font-size:0.85rem; opacity:0.75; }
.sg-game-actions { display:flex; justify-content:center; }

.sg-view-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.sg-view-head h2 { font-size:1.3rem; margin-bottom: 6px; color: var(--text);}
.sg-view-sub { color:var(--muted); font-size:0.9rem; }
.sg-head-actions { display:flex; gap:10px; }
.sg-plan-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.sg-plan-card { cursor:pointer; transition:0.2s; display:flex; flex-direction:column; gap:12px; }
.sg-plan-card:hover { transform:translateY(-4px); border-color:var(--accent); box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.1);}
.sg-plan-card-top { display:flex; align-items:center; gap:10px; }
.sg-plan-card h3 { font-size:1.05rem; color: var(--text);}
.sg-plan-card p { font-size:0.85rem; color:var(--muted); min-height:40px; }
.sg-plan-meta { font-size:0.8rem; color:var(--muted); }
.sg-plan-card-foot { display:flex; align-items:center; justify-content:space-between; font-size:0.85rem; color:var(--muted); }
.sg-plan-card-add { align-items:center; justify-content:center; border-style:dashed; color:var(--muted); min-height:200px; }
.sg-plan-card-add:hover { background: rgba(var(--primary-rgb), 0.05); }
.sg-plan-card-add .sg-plus { font-size:2.5rem; font-weight:300; color:var(--accent); line-height:1; }
.sg-tag { font-size:0.75rem; background:var(--accent-soft); color:var(--accent); padding:2px 10px; border-radius:20px; font-weight:600; white-space:nowrap; }
.sg-progress { height:8px; background:var(--bg-body); border-radius:99px; overflow:hidden; border: 1px solid var(--border);}
.sg-progress>i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:99px; transition:width 0.3s; }
.sg-plan-detail-head { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:24px; flex-wrap:wrap; }
.sg-plan-detail-head h2 { font-size:1.2rem; display:flex; align-items:center; gap:10px; margin-bottom: 6px;}
.sg-pd-progress { display:flex; align-items:center; gap:16px; font-size:0.85rem; color:var(--muted); flex-wrap:wrap; }
.sg-pd-progress .sg-progress { width:180px; }
.sg-days { display:flex; flex-direction:column; gap:16px; }
.sg-day-card.complete { border-color:#10b981; background: rgba(16, 185, 129, 0.02);}
.sg-day-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.sg-day-title { font-weight:700; font-size:1rem; color: var(--text);}
.sg-badge { padding:4px 12px; border-radius:20px; font-size:0.75rem; font-weight:600; white-space:nowrap; }
.sg-day-head .sg-btn { margin-left:auto; }
.sg-task-list { display:flex; flex-direction:column; gap:10px; }
.sg-task-row { display:flex; align-items:center; gap:16px; padding:12px 16px; background:var(--bg-body); border-radius:12px; font-size:0.9rem; flex-wrap:wrap; border: 1px solid var(--border);}
.sg-task-row.done { opacity:0.6; }
.sg-task-name { font-weight:600; min-width:120px; color: var(--text);}
.sg-task-dots { display:flex; gap:6px; }
.sg-dot { width:10px; height:10px; border-radius:50%; background:var(--border); }
.sg-dot.on { background:var(--accent); }
.sg-task-count { font-size:0.8rem; color:var(--muted); margin-left:auto; }
.sg-cp-day { margin-bottom:20px; }
.sg-cp-day-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; color: var(--text);}
.sg-cp-task { display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.sg-cp-task select, .sg-cp-task input { border:1px solid var(--border); background:var(--bg-body); color:var(--text); border-radius:10px; padding:8px 12px; font-size:0.85rem; }
.sg-cp-task input { width:80px; }
.sg-cp-unit { font-size:0.85rem; color:var(--muted); }
.sg-cp-form-actions { display:flex; gap:12px; margin-top:24px; }
.sg-cp-name-row { display:flex; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.sg-cp-name-row input { flex:1; min-width:240px; border:1px solid var(--border); background:var(--bg-body); color:var(--text); border-radius:12px; padding:12px 16px; font-size:0.95rem; }

.sg-guide { max-width:840px; margin:0 auto; padding:32px; }
.sg-guide h2 { font-size:1.1rem; margin:32px 0 16px; padding-left:12px; border-left:4px solid var(--accent); color: var(--text);}
.sg-guide h2:first-child { margin-top:0; }
.sg-guide p { margin-bottom:12px; line-height: 1.7;}
.sg-guide ul, .sg-guide ol { padding-left:24px; margin-bottom:16px; display:flex; flex-direction:column; gap:8px; }
.sg-guide li { font-size:0.95rem; line-height: 1.6;}
.sg-guide b { color:var(--accent); }
.sg-guide-fig { margin:24px 0; display:flex; justify-content:center; }
.sg-guide-fig svg { width:min(400px, 100%); height:auto; }
.sg-gcell { fill:var(--bg-body); stroke:var(--border); }
.sg-gnum { fill:var(--muted); font-size:13px; text-anchor:middle; font-family:sans-serif; }
.sg-gline { stroke:var(--accent); stroke-width:1.5; stroke-dasharray:4 4; opacity:0.7; }
.sg-gaze { fill:none; stroke:var(--accent); stroke-width:1.5; stroke-dasharray:3 4; opacity:0.85; }
.sg-gazedot { fill:var(--accent); }
.sg-gcap { fill:var(--muted); font-size:12px; font-family:sans-serif; }
.sg-tip-box { margin-top:32px; background:var(--accent-soft); border:1px solid var(--accent); border-radius:12px; padding:20px; font-size:0.95rem; display:flex; align-items:center; gap:16px; flex-wrap:wrap; color: var(--text);}

.sg-summary-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:24px; }
.sg-sum-card { display:flex; flex-direction:column; gap:4px; padding:20px; }
.sg-sum-card span { font-size:0.85rem; color:var(--muted); }
.sg-sum-card b { font-size:1.8rem; font-variant-numeric:tabular-nums; color: var(--text);}
.sg-sum-card small { font-size:0.8rem; color:var(--muted); }
.sg-chart-card, .sg-best-card { margin-bottom:24px; }
.sg-card h3 { font-size:1rem; margin-bottom:16px; color: var(--text);}
#sg-chart { width:100%; display:block; }
.sg-chart-legend { display:flex; gap:16px; flex-wrap:wrap; margin-top:16px; font-size:0.8rem; color:var(--muted); }
.sg-chart-legend span { display:flex; align-items:center; gap:6px; }
.sg-chart-legend i { width:10px; height:10px; border-radius:50%; display:inline-block; }
.sg-tbl-wrap { overflow-x:auto; }
table.sg-data { width:100%; border-collapse:collapse; font-size:0.9rem; }
table.sg-data th, table.sg-data td { padding:12px 16px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; color: var(--text);}
table.sg-data th { color:var(--muted); font-weight:600; font-size:0.85rem; }
table.sg-data tbody tr:hover td { background:var(--bg-body); }
.sg-empty { padding:40px; text-align:center; color:var(--muted); font-size:0.95rem; }

.sg-overlay { position:fixed; inset:0; background:rgba(15,20,30,0.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px; }
.sg-modal { background:var(--card); border-radius:24px; box-shadow:0 20px 60px rgba(0,0,0,0.4); padding:32px; width:min(460px,100%); animation:sg-pop 0.25s; border: 1px solid var(--border);}
@keyframes sg-pop { from{opacity:0; transform:scale(0.92) translateY(10px)} to{opacity:1; transform:none} }
.sg-result-hero { text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; }
.sg-rating-badge { color:#fff; font-weight:700; padding:6px 20px; border-radius:999px; font-size:0.95rem; }
.sg-result-time { font-size:3rem; font-weight:800; font-variant-numeric:tabular-nums; color: var(--text);}
.sg-result-time span { font-size:1.2rem; font-weight:600; color:var(--muted); }
.sg-result-sub { font-size:0.9rem; color:var(--muted); }
.sg-result-best { font-size:0.9rem; color:var(--accent); font-weight:600; }
.sg-result-task { margin-top:10px; font-size:0.85rem; background:var(--bg-body); border-radius:12px; padding:10px 16px; border: 1px solid var(--border); color: var(--text);}
.sg-result-task.done { color:#10b981; font-weight:600; border-color: #10b981; background: rgba(16,185,129,0.05);}
.sg-modal-actions { display:flex; gap:12px; justify-content:center; margin-top:24px; flex-wrap:wrap; }

.sg-footer { max-width:1080px; margin:32px auto 0; padding:24px; border-top: 1px dashed var(--border); color:var(--muted); font-size:0.85rem; text-align:center; }