:root{
  --bg: #0b1120;
  --text: #e6edff;
  --muted: #9eb3da;
  --panel: #0f1a33;
  --panel2: #0d1527;
  --cardBorder: rgba(255,255,255,.1);
  --cardText: #2b0b0b;
  --accent: #a78bfa;
  --accent2: #60a5fa;
  --glassBg: rgba(15,26,51,0.6);
  --glassBorder: rgba(255,255,255,.12);
  --ringWidth: 12;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;}
body::before{content:"";position:fixed;inset:0;background: radial-gradient(1200px 800px at 10% 20%, rgba(167,139,250,.25), transparent 55%), radial-gradient(1200px 800px at 90% 80%, rgba(56,189,248,.18), transparent 55%), var(--bg) url('') center/cover no-repeat;filter:saturate(120%) contrast(105%);z-index:-2}
.backdrop{position:fixed;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6));z-index:-1}
.container{max-width:1200px;margin:0 auto;padding:20px}
.hidden{display:none}
.mode{padding:10px 16px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:transparent;color:#fff;opacity:.9;cursor:pointer}
.mode.active{background:#fff;color:#0b1120;border-color:transparent}
.time{font-size:clamp(48px, 16vw, 160px);font-weight:800;letter-spacing:2px;text-shadow:0 6px 30px rgba(0,0,0,.45)}
.timer-visual{position:relative;display:grid;place-items:center;margin:16px 0}
.ring{width:min(70vw, 380px);height:auto;transform:rotate(-90deg);}
.ring-bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:var(--ringWidth)}
.ring-progress{fill:none;stroke:var(--accent);stroke-width:var(--ringWidth);stroke-linecap:round;stroke-dasharray:0 999;transition:stroke-dasharray .2s ease, stroke .2s ease;filter: drop-shadow(0 0 12px rgba(216,180,254,.4))}
.timer-actions{display:flex;gap:8px;justify-content:center;margin-top:8px}
.bg-presets{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);color:#e6edff;border-radius:999px;padding:4px 10px;cursor:pointer;font-size:.85rem}
.chip:hover{background:rgba(255,255,255,.18)}
.timer-visual .time{position:absolute;inset:0;display:grid;place-items:center}
.controls{display:flex;gap:10px;align-items:center}
.btn{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;padding:12px 16px;border-radius:14px;cursor:pointer}
.btn.main{background:var(--accent);border-color:transparent;color:#091122;padding:14px 26px;border-radius:999px}
.btn.round{border-radius:50%}
.btn.danger{background:#ff7d7d;border-color:#ff7d7d;color:#140000}
.btn.ghost{background:transparent}
.btn.small{padding:8px 10px}
.btn.mini{padding:6px 10px}
.hint{opacity:.7}

.grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.card{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px}
.card.glass{background:var(--glassBg);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border:1px solid var(--glassBorder)}
.title{margin:0 0 6px 0}
.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}
.input{background:#0d1527;border:1px solid rgba(255,255,255,.1);color:#e6edff;padding:10px 12px;border-radius:10px}
.stopwatch{font-size:36px;font-weight:800}
.linked{padding:10px;border:1px dashed rgba(255,255,255,.2);border-radius:10px;min-height:46px}

/* Tasks */
.tasks{list-style:none;margin:10px 0;padding:0}
.task{display:grid;grid-template-columns:1fr auto auto auto auto;gap:8px;align-items:center;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:12px;margin-bottom:8px;background:var(--panel2)}
.task.done{opacity:.6;text-decoration:line-through}
.task .badge{padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);font-size:.8rem}
.task .title-btn{background:transparent;border:none;color:var(--text);text-align:left;font:inherit;cursor:text}
.task .title-input{width:100%;background:#0d1527;border:1px solid rgba(255,255,255,.25);color:#e6edff;padding:6px 8px;border-radius:8px}

/* History */
.tabs{display:flex;gap:10px;margin-bottom:12px}
.tab{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#e6edff;cursor:pointer}
.tab.active{background:#fff;color:#0b1120;border-color:transparent}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat{background:#fdeceb;border:1px solid var(--cardBorder);border-radius:16px;padding:16px;color:var(--cardText)}
.stat-title{font-weight:600}
.stat-value{font-size:40px;font-weight:800}
.chart-box{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:12px;margin-top:12px}
.chart-top{display:flex;align-items:center;justify-content:space-between}
.seg{display:flex;gap:6px}
.seg-btn{padding:6px 10px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:transparent;color:#e6edff;opacity:.8;cursor:pointer}
.seg-btn.active{opacity:1;background:#fff;color:#0b1120;border-color:transparent}
.chart-foot{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:10px}

.table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden}
.table th,.table td{padding:10px;border-bottom:1px solid rgba(255,255,255,.06)}

/* Focused time widget */
#focused-widget{margin-bottom:14px}
.fw-head{display:flex;align-items:center;justify-content:space-between}
.fw-title{font-weight:700}
.fw-sub{opacity:.8}
.fw-tabs{margin:10px 0}
.fw-nav{display:flex;gap:10px;justify-content:center;align-items:center;margin:6px 0 12px}
.fw-list{display:grid;gap:8px}
.fw-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.fw-bar{height:8px;background:rgba(255,255,255,.14);border-radius:999px;position:relative;overflow:hidden}
.fw-bar > span{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg, var(--accent), var(--accent2));border-radius:999px;min-width:4px}
.fw-name{opacity:.95}
.fw-min{opacity:.85}

/* Modal */
.modal{border:none;border-radius:16px;padding:0;background:transparent}
.modal::backdrop{background:rgba(0,0,0,.55)}
.modal-card{background:#0b142a;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;color:#e6edff;min-width:320px}
.grid.two > label{display:grid;gap:6px}
.right{display:flex;justify-content:flex-end}
.gap{gap:8px}

.site-footer{text-align:center;color:#9eb3da;margin:26px 0}

/* Floating dashboard button */
#btn-dashboard.fab{position:fixed;top:16px;right:16px;z-index:10;text-decoration:none;font-size:20px;line-height:1}
#btn-dashboard.fab{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);box-shadow:0 6px 20px rgba(0,0,0,.35)}
#btn-dashboard.fab:hover{background:rgba(255,255,255,.2)}

/* Goal focus card: red outline */
.goal-outline{
  border:2px solid #ef4444 !important; /* red */
  box-shadow:0 0 0 1px rgba(239,68,68,.35) inset; /* subtle inner edge */
}

@media (max-width:860px){
  .grid.two{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .task{grid-template-columns:1fr auto auto auto}
}