/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=DM+Sans:wght@300;400;500;600;700&family=Nunito:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

[data-theme="dark"] {
  --bg:#0c0b1d; --card:rgba(255,255,255,0.055); --card-hi:rgba(255,255,255,0.09);
  --border:rgba(255,255,255,0.11); --border-hi:rgba(255,255,255,0.22);
  --text:rgba(255,255,255,0.92); --text-dim:rgba(255,255,255,0.62); --text-muted:rgba(255,255,255,0.40);
  --divider:rgba(255,255,255,0.06); --surface:rgba(255,255,255,0.04);
  --shadow:0 2px 16px rgba(0,0,0,0.35); --shadow-xl:0 12px 40px rgba(0,0,0,0.6);
  --topbar-bg:rgba(12,11,29,0.88); --sidebar-bg:rgba(255,255,255,0.04); --sidebar-border:rgba(255,255,255,0.13);
  --input-bg:rgba(255,255,255,0.06); --panel-bg:#13112a;
  --orb-a:#4f2bab1a; --orb-b:#0369a11a; --blur:blur(18px); color-scheme:dark;
}
[data-theme="light"] {
  --bg:#eaecf7; --card:rgba(255,255,255,0.68); --card-hi:rgba(255,255,255,0.88);
  --border:rgba(0,0,0,0.07); --border-hi:rgba(0,0,0,0.14);
  --text:rgba(12,12,28,0.90); --text-dim:rgba(12,12,28,0.62); --text-muted:rgba(12,12,28,0.44);
  --divider:rgba(0,0,0,0.06); --surface:rgba(0,0,0,0.03);
  --shadow:0 2px 12px rgba(0,0,0,0.09); --shadow-xl:0 12px 40px rgba(0,0,0,0.18);
  --topbar-bg:rgba(234,236,247,0.88); --sidebar-bg:rgba(255,255,255,0.55); --sidebar-border:rgba(0,0,0,0.09);
  --input-bg:rgba(0,0,0,0.04); --panel-bg:#f0f2fc;
  --orb-a:#7c3aed20; --orb-b:#0369a120; --blur:blur(18px); color-scheme:light;
}
[data-theme="prodeta"] {
  --bg:#050e1d; --card:rgba(20,50,90,0.45); --card-hi:rgba(20,50,90,0.65);
  --border:rgba(0,200,150,0.14); --border-hi:rgba(0,200,150,0.28);
  --text:rgba(255,255,255,0.93); --text-dim:rgba(255,255,255,0.62); --text-muted:rgba(255,255,255,0.40);
  --divider:rgba(255,255,255,0.07); --surface:rgba(20,50,90,0.30);
  --shadow:0 2px 16px rgba(0,0,0,0.55); --shadow-xl:0 12px 40px rgba(0,0,0,0.75);
  --topbar-bg:rgba(5,14,29,0.92); --sidebar-bg:rgba(10,30,60,0.60); --sidebar-border:rgba(0,200,150,0.18);
  --input-bg:rgba(20,50,90,0.35); --panel-bg:#081524;
  --orb-a:rgba(0,200,150,0.10); --orb-b:rgba(6,95,173,0.14); --blur:blur(18px); color-scheme:dark;
}
:root {
  --accent:#38bdf8; --accent-dim:rgba(56,189,248,0.15); --accent-glow:rgba(56,189,248,0.28);
  --green:#4ade80; --red:#f87171; --orange:#fb923c; --purple:#a78bfa;
}

html, body { width:100%; height:100%; overflow:hidden; color:var(--text); background:var(--bg); }
body { font-family:var(--font-family,'Inter',sans-serif); font-size:1rem; }

.bg-scene { position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 80% 80% at 15% 10%, var(--orb-a) 0%, transparent 60%),
             radial-gradient(ellipse 60% 60% at 85% 85%, var(--orb-b) 0%, transparent 55%), var(--bg); }
.orb { position:fixed; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0; }
.orb-1 { width:480px; height:480px; top:-100px; left:-80px; background:radial-gradient(circle,var(--orb-a),transparent 70%); }
.orb-2 { width:560px; height:560px; bottom:-140px; right:-100px; background:radial-gradient(circle,var(--orb-b),transparent 70%); }

/* ── Layout ── */
.shell { position:relative; z-index:1; display:flex; flex-direction:column; height:100vh; padding:10px; gap:8px; }
.main  { flex:1 1; display:flex; gap:8px; overflow:hidden; min-height:0; }

/* ── Topbar ── */
.topbar { display:flex; align-items:center; gap:8px; height:42px; flex-shrink:0; padding:0 10px;
  background:var(--topbar-bg); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border); border-radius:8px; }
.logo-mark { width:24px; height:24px; border-radius:5px; background:linear-gradient(135deg,var(--accent),#06d6c7);
  display:flex; align-items:center; justify-content:center; font-size:0.857rem; color:#fff; box-shadow:0 0 10px var(--accent-dim); }
.topbar-custom-logo { height:24px; width:auto; border-radius:4px; object-fit:contain; flex-shrink:0; }
.topbar-logo { display:flex; align-items:center; gap:7px; font-size:1rem; font-weight:700; letter-spacing:-0.3px; flex-shrink:0; }
.topbar-div  { width:1px; height:20px; background:var(--border); flex-shrink:0; }
.pin-area    { display:flex; align-items:center; gap:5px; flex:1 1; overflow:hidden; }
.pin-chip    { display:flex; align-items:center; gap:5px; height:26px; padding:0 8px; border-radius:5px;
  background:var(--surface); border:1px solid var(--border); font-size:0.786rem; color:var(--text-dim); cursor:pointer; flex-shrink:0; white-space:nowrap; }
.pin-chip:hover { background:var(--card-hi); border-color:var(--border-hi); color:var(--text); }
.chip-val { font-family:'JetBrains Mono',monospace; font-size:0.714rem; color:var(--accent); }
.chip-x   { opacity:0; font-size:0.714rem; }
.pin-chip:hover .chip-x { opacity:1; }
.spacer { flex:1 1; }
.clock  { font-family:'JetBrains Mono',monospace; font-size:0.786rem; color:var(--text-dim); flex-shrink:0; }
.iBtn { width:30px; height:30px; border-radius:6px; border:1px solid var(--border); background:var(--surface);
  cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0.929rem; color:var(--text-dim); }
.iBtn:hover { background:var(--card-hi); border-color:var(--border-hi); color:var(--text); }
.iBtn.on { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }

/* ── Grid (react-grid-layout) ── */
.grid-wrap { flex:1 1; overflow-y:auto; scrollbar-width:none; }
.grid-wrap::-webkit-scrollbar { display:none; }

/* RGL item wrapper fills its slot */
.react-grid-item > div { height:100%; }

/* Drag ghost: faded card */
.react-grid-item.react-draggable-dragging .card { opacity:.35; }

/* Drop placeholder */
.react-grid-item.react-grid-placeholder {
  background:var(--accent-dim) !important;
  border:1.5px dashed var(--accent);
  border-radius:8px;
  opacity:0.5;
}

/* RGL resize handles — override library defaults */
.react-resizable-handle {
  position:absolute; z-index:10;
  background:none;
}
.react-resizable-handle::after { display:none; } /* remove default arrow */
.react-resizable-handle-e  { right:0; top:0; bottom:0; width:8px; cursor:col-resize; }
.react-resizable-handle-s  { bottom:0; left:0; right:0; height:8px; cursor:row-resize; }
.react-resizable-handle-se { bottom:0; right:0; width:14px; height:14px; cursor:se-resize; }

/* visual indicator lines */
.react-resizable-handle-e::before,
.react-resizable-handle-s::before,
.react-resizable-handle-se::before {
  content:''; position:absolute; opacity:0; transition:opacity .15s;
  border-radius:2px; background:var(--border-hi);
}
.react-resizable-handle-e::before  { right:2px; top:25%; bottom:25%; width:3px; }
.react-resizable-handle-s::before  { bottom:2px; left:25%; right:25%; height:3px; }
.react-resizable-handle-se::before {
  bottom:3px; right:3px; width:7px; height:7px; background:transparent;
  border-right:2px solid var(--border-hi); border-bottom:2px solid var(--border-hi);
  border-radius:0 0 2px 0;
}
.react-grid-item:hover .react-resizable-handle-e::before,
.react-grid-item:hover .react-resizable-handle-s::before,
.react-grid-item:hover .react-resizable-handle-se::before { opacity:1; }
.react-resizable-handle-e:hover::before,
.react-resizable-handle-s:hover::before { background:var(--accent); opacity:1; }
.react-resizable-handle-se:hover::before { border-color:var(--accent); opacity:1; }

/* ── Card ── */
.card {
  background:var(--card); border:1px solid var(--border); border-radius:8px;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  overflow:hidden; position:relative; min-width:0;
  display:flex; flex-direction:column;
  transition:opacity .2s,box-shadow .2s,border-color .2s;
}
.card::before { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,0.07) 0%,transparent 55%); }
[data-theme="light"] .card::before { background:linear-gradient(140deg,rgba(255,255,255,0.5) 0%,transparent 55%); }
.card-scroll { flex:1 1; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent; min-height:0; position:relative; z-index:1; }
.card-scroll::-webkit-scrollbar { width:3px; }
.card-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

/* ── Card header ── */
.card-head { display:flex; align-items:center; gap:6px; padding:10px 13px 7px; cursor:-webkit-grab; cursor:grab; -webkit-user-select:none; -moz-user-select:none; user-select:none; flex-shrink:0; position:relative; z-index:1; }
.card-head:active { cursor:-webkit-grabbing; cursor:grabbing; }
.ci { font-size:0.857rem; opacity:.7; flex-shrink:0; }
.ct { font-size:0.714rem; font-weight:600; text-transform:uppercase; letter-spacing:.7px; color:var(--text-dim); flex:1 1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ca { display:flex; gap:3px; opacity:0; transition:opacity .15s; }
.card:hover .ca { opacity:1; }
.cb { width:22px; height:22px; border-radius:4px; border:none; background:transparent; cursor:pointer;
  color:var(--text-dim); font-size:0.786rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:inherit; }
.cb:hover { background:var(--surface); color:var(--text); }
.cb.on { color:var(--accent); }
.cb[disabled] { opacity:.3; pointer-events:none; }
.ca-sep { width:1px; height:14px; background:var(--divider); margin:0 2px; align-self:center; }
.cdiv { height:1px; background:var(--divider); flex-shrink:0; }

/* color picker popover */
.cpicker {
  position:fixed; z-index:300; background:var(--panel-bg);
  border:1px solid var(--border-hi); border-radius:8px; padding:10px;
  box-shadow:var(--shadow-xl); display:flex; flex-wrap:wrap; gap:6px; width:152px;
}
.cpicker-swatch {
  width:26px; height:26px; border-radius:6px; cursor:pointer;
  border:2px solid transparent; transition:transform .12s, border-color .12s;
}
.cpicker-swatch:hover { transform:scale(1.15); }
.cpicker-swatch.on { border-color:#fff; }
.cpicker-none {
  width:26px; height:26px; border-radius:6px; cursor:pointer; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1.5px dashed var(--border-hi); color:var(--text-dim);
}
.cpicker-none:hover { background:var(--card-hi); }

/* ── Resize badge ── */
.resize-badge {
  position:absolute; bottom:6px; right:20px; font-family:'JetBrains Mono',monospace;
  font-size:0.643rem; color:var(--text-muted); opacity:0; transition:opacity .15s;
  pointer-events:none; -webkit-user-select:none; -moz-user-select:none; user-select:none; z-index:2;
}
.card:hover .resize-badge { opacity:1; }


/* ── Weather ── */
.weather-big { font-size:3.143rem; font-weight:300; line-height:1; letter-spacing:-2px; }
.forecast { display:flex; gap:2px; padding:8px 13px 10px; border-top:1px solid var(--divider); }
.fd { flex:1 1; text-align:center; }
.fd .fi { font-size:1rem; display:block; margin:2px 0; }
.fd .fl { font-size:0.643rem; color:var(--text-dim); }
.fd .ft { font-size:0.786rem; font-weight:500; }

/* ── Events ── */
.event { display:flex; gap:8px; padding:6px 13px; }
.event+.event { border-top:1px solid var(--divider); }
.ebar  { width:3px; border-radius:2px; flex-shrink:0; align-self:stretch; min-height:26px; }
.etime { font-family:'JetBrains Mono',monospace; font-size:0.714rem; color:var(--text-dim); width:34px; flex-shrink:0; padding-top:2px; }
.ename { font-size:0.857rem; font-weight:500; }
.eloc  { font-size:0.714rem; color:var(--text-dim); margin-top:1px; }

/* ── Todo ── */
.row { display:flex; align-items:center; gap:8px; padding:6px 13px; }
.row+.row { border-top:1px solid var(--divider); }
.row.clickable:hover { background:var(--surface); cursor:pointer; }
.todo-row { cursor:default; }
.todo-row:hover { background:var(--surface); }
.todo-del { font-size:1rem; line-height:1; color:var(--text-muted); padding:0 4px; cursor:pointer; opacity:0; transition:opacity .15s, color .15s; flex-shrink:0; }
.todo-row:hover .todo-del { opacity:1; }
.todo-del:hover { color:var(--red); }
.chk { width:15px; height:15px; border-radius:4px; border:1.5px solid var(--border-hi); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:all .2s; }
.chk.done { background:var(--accent); border-color:var(--accent); box-shadow:0 0 8px var(--accent-glow); }
.chk.done::after { content:'✓'; font-size:0.643rem; color:#fff; }
.rt { font-size:0.786rem; flex:1 1; }
.rt.done { color:var(--text-dim); text-decoration:line-through; }
.add-row   { padding:6px 13px; border-top:1px solid var(--divider); }
.add-input { width:100%; background:transparent; border:none; font-size:0.786rem; color:var(--text); font-family:inherit; outline:none; }
.add-input::placeholder { color:var(--text-muted); }

/* ── Countdown ── */
.cd-item { padding:7px 13px; display:flex; justify-content:space-between; align-items:center; }
.cd-item+.cd-item { border-top:1px solid var(--divider); }
.cd-label { font-size:0.786rem; color:var(--text-dim); }
.cd-num   { font-family:'JetBrains Mono',monospace; font-size:1.571rem; font-weight:500; line-height:1; }
.cd-unit  { font-size:0.643rem; color:var(--text-dim); margin-left:2px; }
.cd-past  { font-size:0.714rem; color:var(--text-muted); font-style:italic; }

/* ── RSS Widget ── */
.rss-wrap   { display:flex; flex-direction:column; height:100%; }
.rss-scroll { flex:1 1; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.rss-scroll::-webkit-scrollbar { width:3px; }
.rss-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

/* Tab bar */
.rss-tabs { display:flex; align-items:center; gap:2px; padding:5px 8px; border-bottom:1px solid var(--divider); flex-shrink:0; }
.rss-tab { background:none; border:none; font-family:inherit; font-size:0.714rem; font-weight:500; color:var(--text-muted); cursor:pointer; padding:3px 7px; border-radius:5px; white-space:nowrap; }
.rss-tab:hover { color:var(--text-dim); background:var(--surface); }
.rss-tab.on { color:var(--accent); background:var(--accent-dim); }
.rss-tab-sep { width:1px; height:12px; background:var(--divider); margin:0 2px; }
.rss-badge { display:inline-flex; align-items:center; justify-content:center; min-width:15px; height:15px; padding:0 3px; border-radius:8px; background:var(--accent); color:#fff; font-size:0.571rem; font-weight:700; margin-left:3px; line-height:1; }
.rss-badge-dim { background:var(--surface); color:var(--text-dim); }
.rss-action-btn { background:none; border:none; font-size:0.786rem; color:var(--text-muted); cursor:pointer; padding:2px 6px; border-radius:4px; font-family:inherit; white-space:nowrap; }
.rss-action-btn:hover { color:var(--accent); background:var(--accent-dim); }

/* Empty / loading */
.rss-empty { padding:24px 13px; font-size:0.857rem; color:var(--text-muted); text-align:center; }

/* Single-column article list */
.rss-item { display:flex; align-items:flex-start; gap:9px; padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--divider); }
.rss-item:hover { background:var(--surface); }

/* Small left thumbnail — only rendered when feed provides one */
.rss-thumb { width:58px; height:44px; object-fit:cover; border-radius:4px; flex-shrink:0; margin-top:1px; }

/* Text area */
.rss-body { flex:1 1; min-width:0; }
.rss-meta  { display:flex; align-items:center; gap:5px; margin-bottom:3px; }
.rss-dot   { width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; box-shadow:0 0 4px var(--accent-glow); }
.rss-title { font-size:0.857rem; line-height:1.4; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rss-item.read .rss-title { color:var(--text-dim); }

/* Save button — visible on hover or when active */
.rss-save-btn { background:none; border:none; cursor:pointer; font-size:0.857rem; padding:0 2px; border-radius:3px; opacity:0; transition:opacity .12s; flex-shrink:0; line-height:1; }
.rss-item:hover .rss-save-btn { opacity:.5; }
.rss-save-btn:hover,
.rss-save-btn.on { opacity:1 !important; filter:sepia(1) saturate(4) hue-rotate(5deg); }

/* nsrc / nago shared labels */
.nsrc { font-size:0.643rem; font-family:'JetBrains Mono',monospace; color:var(--accent); background:var(--accent-dim); padding:1px 5px; border-radius:3px; border:1px solid rgba(56,189,248,0.2); flex-shrink:0; }
.nago { font-size:0.643rem; color:var(--text-muted); flex-shrink:0; }

/* Saved-articles list */
.rss-saved-item  { display:flex; align-items:flex-start; gap:8px; padding:8px 13px; border-bottom:1px solid var(--divider); }
.rss-saved-src   { font-size:0.643rem; color:var(--text-muted); font-family:'JetBrains Mono',monospace; margin-bottom:3px; }
.rss-saved-title { font-size:0.857rem; color:var(--text); text-decoration:none; line-height:1.4; display:block; }
.rss-saved-title:hover { color:var(--accent); }
.rss-unsave { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:0.857rem; padding:2px 5px; border-radius:4px; flex-shrink:0; margin-top:1px; }
.rss-unsave:hover { color:var(--red); background:rgba(248,113,113,0.1); }

/* ── API Widget ── */
.api-wrap    { display:flex; flex-direction:column; height:100%; }
.api-toolbar { display:flex; align-items:center; gap:6px; padding:5px 10px 4px; border-bottom:1px solid var(--divider); flex-shrink:0; }
.api-label   { font-size:0.714rem; font-weight:600; color:var(--text-dim); letter-spacing:.3px; text-transform:uppercase; }
.api-spinner { font-size:0.571rem; color:var(--accent); animation:api-pulse 1s infinite; }
@keyframes api-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.api-body    { flex:1 1; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.api-body::-webkit-scrollbar { width:3px; }
.api-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

/* Number mode */
.api-number-wrap { display:flex; align-items:baseline; gap:8px; padding:18px 16px 14px; }
.api-number { font-size:2.857rem; font-weight:700; letter-spacing:-1px; color:var(--text); line-height:1; font-family:'JetBrains Mono',monospace; }
.api-unit   { font-size:1.143rem; font-weight:500; color:var(--text-dim); }

/* Text mode */
.api-text { padding:14px 16px; font-size:0.929rem; color:var(--text); line-height:1.5; word-break:break-word; }

/* List mode */
.api-list      { padding:4px 0; }
.api-list-item { display:flex; flex-wrap:wrap; gap:4px 8px; padding:6px 12px; border-bottom:1px solid var(--divider); font-size:0.786rem; }
.api-list-item:last-child { border-bottom:none; }
.api-list-kv   { display:flex; gap:4px; align-items:baseline; }
.api-list-key  { font-size:0.643rem; font-family:'JetBrains Mono',monospace; color:var(--text-muted); flex-shrink:0; }
.api-list-val  { color:var(--text); }

/* Chart mode */
.api-chart      { padding:10px 12px 8px; }
.api-spark-empty { font-size:0.786rem; color:var(--text-muted); }
.api-chart-meta { display:flex; justify-content:space-between; align-items:baseline; margin-top:6px; }
.api-chart-last  { font-size:1.143rem; font-weight:600; color:var(--text); font-family:'JetBrains Mono',monospace; }
.api-chart-range { font-size:0.643rem; color:var(--text-muted); }

/* Empty / error / loading */
.api-empty   { padding:24px 16px; font-size:0.857rem; color:var(--text-muted); text-align:center; }
.api-loading { padding:24px 16px; font-size:0.857rem; color:var(--text-muted); text-align:center; }
.api-error   { padding:14px 16px; font-size:0.786rem; color:var(--red); background:rgba(248,113,113,.08); border-radius:6px; margin:8px; line-height:1.4; word-break:break-word; }

/* ── UptimeRobot Widget ── */
.ur-wrap   { display:flex; flex-direction:column; height:100%; }
.ur-head   { display:flex; align-items:center; gap:8px; padding:5px 10px; border-bottom:1px solid var(--divider); flex-shrink:0; flex-wrap:wrap; }
.ur-counter { font-size:0.786rem; font-weight:600; }
.ur-counter-up  { color:var(--green); }
.ur-counter-ok  { color:var(--green); opacity:.7; }
.ur-counter-down { color:var(--red); }
.ur-spin   { font-size:0.786rem; color:var(--accent); animation:api-pulse 1s infinite; }

.ur-tabs   { display:flex; gap:2px; padding:4px 8px; border-bottom:1px solid var(--divider); flex-shrink:0; }
.ur-tab    { background:none; border:none; font-family:inherit; font-size:0.714rem; color:var(--text-muted); cursor:pointer; padding:3px 9px; border-radius:5px; white-space:nowrap; }
.ur-tab:hover { background:var(--surface); color:var(--text-dim); }
.ur-tab.on { background:var(--accent-dim); color:var(--accent); font-weight:500; }

.ur-list   { flex:1 1; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.ur-list::-webkit-scrollbar { width:3px; }
.ur-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.ur-row    { display:flex; align-items:center; gap:8px; padding:7px 10px; border-bottom:1px solid var(--divider); }
.ur-row:hover { background:var(--surface); }
.ur-dot    { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.ur-dot-up     { background:var(--green); box-shadow:0 0 5px var(--green); }
.ur-dot-down   { background:var(--red); box-shadow:0 0 5px rgba(248,113,113,0.5); }
.ur-dot-warn   { background:var(--orange); }
.ur-dot-paused { background:var(--text-muted); opacity:.5; }
.ur-name   { flex:1 1; min-width:0; font-size:0.857rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ur-uptime { width:52px; text-align:right; flex-shrink:0; font-size:0.714rem; font-family:'JetBrains Mono',monospace; color:var(--text-dim); }
.ur-rt     { width:54px; text-align:right; flex-shrink:0; font-size:0.714rem; font-family:'JetBrains Mono',monospace; color:var(--text-muted); }
.ur-empty  { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:8px; text-align:center; padding:20px; }
.ur-empty-icon { font-size:28px; }
.ur-empty  { font-size:0.857rem; color:var(--text-muted); }
.ur-msg    { padding:20px; text-align:center; font-size:0.857rem; color:var(--text-muted); }
.ur-error  { padding:10px 12px; margin:6px; font-size:0.786rem; color:var(--red); background:rgba(248,113,113,.08); border-radius:6px; }

/* ── Pulseway Widget ── */
.pw-wrap   { display:flex; flex-direction:column; height:100%; }
.pw-head   { display:flex; align-items:center; gap:6px; padding:5px 10px; border-bottom:1px solid var(--divider); flex-shrink:0; }
.pw-counter { font-size:0.786rem; font-weight:600; }
.pw-counter-on  { color:var(--green); }
.pw-counter-off { color:var(--red); }
.pw-counter-dim { color:var(--text-muted); }
.pw-counter-sep { color:var(--text-muted); font-size:0.714rem; }
.pw-badge-alert { background:rgba(251,146,60,.15); color:var(--orange); border:1px solid rgba(251,146,60,.3); border-radius:10px; padding:1px 7px; font-size:0.643rem; font-weight:700; }
.pw-spin   { font-size:0.786rem; color:var(--accent); animation:api-pulse 1s infinite; }

.pw-list   { flex:1 1; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.pw-list::-webkit-scrollbar { width:3px; }
.pw-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.pw-row    { padding:7px 10px 6px; border-bottom:1px solid var(--divider); transition:background .1s; }
.pw-row:hover { background:var(--surface); }
.pw-offline { opacity:.6; }
.pw-row-top { display:flex; align-items:center; gap:7px; }
.pw-status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.pw-sysname { font-size:0.857rem; font-weight:500; color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pw-group   { font-size:0.643rem; color:var(--text-muted); background:var(--surface); border:1px solid var(--border); border-radius:3px; padding:1px 5px; flex-shrink:0; white-space:nowrap; max-width:80px; overflow:hidden; text-overflow:ellipsis; }
.pw-alert-count { font-size:0.714rem; font-weight:700; flex-shrink:0; }

.pw-alerts  { display:flex; flex-wrap:wrap; gap:3px; margin-top:4px; padding-left:15px; }
.pw-alert-chip { font-size:0.643rem; border:1px solid; border-radius:3px; padding:1px 6px; line-height:1.5; white-space:nowrap; overflow:hidden; max-width:100%; text-overflow:ellipsis; }
.pw-alert-more { font-size:0.643rem; color:var(--text-muted); padding:2px 4px; }

.pw-empty  { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:8px; padding:20px; text-align:center; }
.pw-empty-icon { font-size:28px; }
.pw-empty  { font-size:0.857rem; color:var(--text-muted); }
.pw-msg    { padding:20px; text-align:center; font-size:0.857rem; color:var(--text-muted); }
.pw-error  { padding:10px 12px; margin:6px; font-size:0.786rem; color:var(--red); background:rgba(248,113,113,.08); border-radius:6px; }

/* ── Maps Widget ── */
.maps-wrap  { display:flex; flex-direction:column; height:100%; }
.maps-bar   {
  display:flex; align-items:center; gap:8px; padding:5px 10px 5px;
  border-bottom:1px solid var(--divider); flex-shrink:0; min-width:0;
}
.maps-mode-badge {
  font-size:0.714rem; font-weight:600; color:var(--accent);
  background:var(--accent-dim); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  padding:2px 8px; border-radius:10px; flex-shrink:0; white-space:nowrap;
}
.maps-route  { display:flex; align-items:center; gap:5px; min-width:0; flex:1 1; overflow:hidden; }
.maps-place  { font-size:0.714rem; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100px; }
.maps-arr    { font-size:0.714rem; color:var(--text-muted); flex-shrink:0; }
.maps-frame  { flex:1 1; border:none; width:100%; display:block; min-height:0; }
.maps-empty  {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; gap:8px; padding:24px; text-align:center;
}
.maps-empty-icon  { font-size:32px; line-height:1; }
.maps-empty-title { font-size:0.929rem; font-weight:600; color:var(--text); }
.maps-empty-sub   { font-size:0.786rem; color:var(--text-muted); line-height:1.5; }
.maps-mode-traffic { color:var(--orange); }
.maps-center-label { font-size:0.714rem; color:var(--text-dim); font-family:'JetBrains Mono',monospace; }

/* ── Spotify Widget ── */
.spw-wrap    { display:flex; flex-direction:column; height:100%; position:relative; overflow:hidden; background:transparent; }
.spw-center  { align-items:center; justify-content:center; gap:10px; padding:16px; text-align:center; }

/* Blurred album-art background */
.spw-bg {
  position:absolute; inset:-30px;
  background:var(--spw-art) center/cover no-repeat;
  filter:blur(24px) brightness(0.25) saturate(1.5);
  pointer-events:none; z-index:0;
}

/* Main inner layout */
.spw-inner { position:relative; z-index:1; display:flex; flex-direction:column; height:100%; padding:10px 12px 8px; gap:8px; }

/* ── Connect / idle states ── */
.spw-logo   { line-height:1; }
.spw-connect-label { font-size:0.929rem; font-weight:600; color:var(--text); }
.spw-connect-btn {
  display:inline-block; padding:8px 20px; border-radius:24px;
  background:#1DB954; color:#fff; font-size:0.857rem; font-weight:700;
  text-decoration:none; letter-spacing:.3px; transition:opacity .15s; border:none; cursor:pointer;
}
.spw-connect-btn:hover { opacity:.85; }
.spw-note { font-size:0.714rem; color:var(--text-muted); max-width:200px; }
.spw-idle  { font-size:0.857rem; color:var(--text-muted); }
.spw-refresh-btn {
  background:none; border:1px solid var(--border); border-radius:6px;
  color:var(--text-dim); font-size:0.786rem; padding:4px 12px; cursor:pointer; font-family:inherit;
}
.spw-refresh-btn:hover { background:var(--surface); }

/* ── Now playing ── */
.spw-top  { display:flex; align-items:flex-start; gap:10px; }

/* Art with like button overlay */
.spw-art-wrap { position:relative; flex-shrink:0; }
.spw-art  { width:72px; height:72px; border-radius:8px; display:block; box-shadow:0 4px 16px rgba(0,0,0,0.5); }
.spw-art-placeholder { width:72px; height:72px; border-radius:8px; flex-shrink:0; background:var(--surface); display:flex; align-items:center; justify-content:center; font-size:28px; }
.spw-like-btn {
  position:absolute; bottom:3px; right:3px;
  background:rgba(0,0,0,0.55); border:none; border-radius:50%;
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  font-size:0.857rem; cursor:pointer; color:rgba(255,255,255,0.6);
  transition:color .15s, background .15s;
}
.spw-like-btn:hover  { background:rgba(0,0,0,0.75); color:#fff; }
.spw-like-btn.liked  { color:#1DB954; }

.spw-info { flex:1 1; min-width:0; padding-top:2px; }
.spw-track { font-size:0.929rem; font-weight:600; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spw-track-link { color:inherit; text-decoration:none; }
.spw-track-link:hover { color:#1DB954; }
.spw-artist { font-size:0.786rem; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.spw-album  { font-size:0.714rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.spw-icon-btn { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:0.929rem; padding:3px 5px; border-radius:4px; transition:color .12s, background .12s; flex-shrink:0; }
.spw-icon-btn:hover { color:var(--text); background:rgba(255,255,255,0.08); }

/* Progress */
.spw-prog-wrap { display:flex; flex-direction:column; gap:3px; }
.spw-prog { height:3px; background:rgba(255,255,255,0.12); border-radius:2px; overflow:hidden; }
.spw-prog-fill { height:100%; background:#1DB954; border-radius:2px; transition:width 1s linear; }
.spw-times { display:flex; justify-content:space-between; font-size:0.643rem; color:var(--text-muted); font-family:'JetBrains Mono',monospace; }

/* Controls */
.spw-controls { display:flex; align-items:center; justify-content:center; gap:14px; }
.spw-ctrl-sm  { font-size:1.143rem; }
.spw-play-btn {
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:#1DB954; color:#fff; font-size:1.143rem;
  display:flex; align-items:center; justify-content:center;
  transition:transform .1s, opacity .15s; flex-shrink:0;
}
.spw-play-btn:hover  { opacity:.88; }
.spw-play-btn:active { transform:scale(.93); }

/* Volume */
.spw-vol-wrap { display:flex; align-items:center; gap:6px; padding:0 2px; }
.spw-vol-icon { font-size:0.929rem; flex-shrink:0; line-height:1; }
.spw-vol-num  { font-size:0.643rem; color:var(--text-muted); font-family:'JetBrains Mono',monospace; min-width:26px; text-align:right; flex-shrink:0; }
.spw-vol-slider {
  flex:1 1; height:3px; cursor:pointer;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background:rgba(255,255,255,0.15); border-radius:2px; outline:none;
}
.spw-vol-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:10px; height:10px;
  border-radius:50%; background:#1DB954; cursor:pointer;
}
.spw-vol-slider::-moz-range-thumb {
  width:10px; height:10px; border:none;
  border-radius:50%; background:#1DB954; cursor:pointer;
}

/* Queue */
.spw-queue { border-top:1px solid rgba(255,255,255,0.07); padding-top:6px; display:flex; flex-direction:column; gap:4px; min-height:0; overflow:hidden; }
.spw-queue-label { font-size:0.643rem; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); margin-bottom:2px; }
.spw-queue-item  { display:flex; align-items:center; gap:7px; }
.spw-queue-art   { width:24px; height:24px; border-radius:3px; flex-shrink:0; object-fit:cover; }
.spw-queue-art-ph { width:24px; height:24px; border-radius:3px; flex-shrink:0; background:var(--surface); display:flex; align-items:center; justify-content:center; font-size:0.714rem; }
.spw-queue-info  { min-width:0; flex:1 1; }
.spw-queue-name  { font-size:0.786rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spw-queue-artist { font-size:0.714rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Stocks ── */
.srow { display:flex; align-items:center; gap:8px; padding:6px 13px; cursor:pointer; }
.srow+.srow { border-top:1px solid var(--divider); }
.srow:hover { background:var(--surface); }
.sname { font-family:'JetBrains Mono',monospace; font-size:0.857rem; font-weight:500; width:42px; flex-shrink:0; }
.stock-spark { flex:1 1; height:26px; }
.sval  { font-family:'JetBrains Mono',monospace; font-size:0.786rem; width:54px; text-align:right; flex-shrink:0; }
.schg  { font-size:0.786rem; font-weight:500; width:46px; text-align:right; flex-shrink:0; }

/* ── GitHub ── */
.gh-grid { display:flex; gap:2px; padding:5px 13px; }
.gh-col  { display:flex; flex-direction:column; gap:2px; }
.gh-cell { width:9px; height:9px; border-radius:2px; }
.gh-log  { padding:4px 0 8px; }
.gh-e    { display:flex; gap:6px; align-items:baseline; padding:3px 13px; font-size:0.786rem; color:var(--text-dim); }
.gh-t    { font-family:'JetBrains Mono',monospace; font-size:0.643rem; color:var(--text-muted); width:22px; flex-shrink:0; }

/* ── Notes ── */
.notes-wrap { display:grid; grid-template-columns:1fr 1fr; grid-gap:6px; gap:6px; padding:6px 13px 12px; }
.sticky     { border-radius:5px; padding:9px 11px; font-size:0.786rem; line-height:1.5; color:rgba(0,0,0,.65); font-weight:500; box-shadow:0 3px 10px rgba(0,0,0,.15); }
.sticky h5  { font-size:0.643rem; text-transform:uppercase; letter-spacing:.5px; opacity:.5; margin-bottom:4px; font-weight:700; }

/* ── Settings side panel ── */
.sp-overlay { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,0); pointer-events:none; transition:background .25s; }
.sp-overlay.open { background:rgba(0,0,0,0.45); pointer-events:all; }
.sp { position:fixed; top:0; right:0; bottom:0; width:340px; z-index:101;
  background:var(--panel-bg); border-left:1px solid var(--border);
  display:flex; flex-direction:column; transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1); overflow:hidden; }
.sp.open { transform:translateX(0); }
.sp-head  { display:flex; align-items:center; gap:8px; padding:16px 18px; border-bottom:1px solid var(--divider); flex-shrink:0; }
.sp-title { font-size:1rem; font-weight:600; flex:1 1; }
.sp-close { width:28px; height:28px; border-radius:6px; border:none; background:transparent; cursor:pointer; color:var(--text-dim); font-size:1.143rem; display:flex; align-items:center; justify-content:center; }
.sp-close:hover { background:var(--surface); color:var(--text); }
.sp-body   { flex:1 1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:14px; }
.sp-body::-webkit-scrollbar { display:none; }
.sp-footer { padding:14px 18px; border-top:1px solid var(--divider); flex-shrink:0; }
.sp-save   { width:100%; height:38px; border-radius:6px; border:none; background:var(--accent); color:#fff; font-size:0.929rem; font-weight:600; cursor:pointer; font-family:inherit; }
.sp-save:hover { opacity:.88; }
.field-label { font-size:0.786rem; color:var(--text-dim); margin-bottom:5px; display:block; font-weight:500; text-transform:uppercase; letter-spacing:.5px; }
.field-input { width:100%; height:36px; background:var(--input-bg); border:1px solid var(--border); border-radius:6px;
  padding:0 10px; font-size:0.929rem; color:var(--text); font-family:inherit; outline:none; }
.field-input:focus { border-color:var(--accent); }
.sp-list { display:flex; flex-direction:column; gap:4px; }
.sp-list-item { display:flex; align-items:center; gap:8px; padding:7px 10px; background:var(--input-bg); border:1px solid var(--border); border-radius:6px; }
.sp-li-text { flex:1 1; font-size:0.857rem; }
.sp-li-del  { cursor:pointer; color:var(--text-muted); font-size:0.929rem; padding:2px 5px; border-radius:4px; }
.sp-li-del:hover { color:var(--red); background:rgba(248,113,113,0.1); }
.sp-add-row   { display:flex; gap:6px; }
.sp-add-input { flex:1 1; height:34px; background:var(--input-bg); border:1px solid var(--border); border-radius:6px; padding:0 10px; font-size:0.857rem; color:var(--text); font-family:inherit; outline:none; }
.sp-add-input:focus { border-color:var(--accent); }
.sp-add-btn { height:34px; padding:0 12px; background:var(--accent-dim); border:1px solid var(--accent); border-radius:6px; color:var(--accent); font-size:0.857rem; cursor:pointer; font-family:inherit; }
.seg { display:flex; background:var(--input-bg); border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.seg-opt { flex:1 1; height:32px; border:none; background:transparent; color:var(--text-dim); font-size:0.857rem; cursor:pointer; font-family:inherit; }
.seg-opt.on { background:var(--accent); color:#fff; }
.sp-note { font-size:0.786rem; color:var(--text-dim); line-height:1.5; padding:8px 10px; background:var(--input-bg); border-radius:6px; border:1px solid var(--border); }

/* ── Add widget button + picker ── */
.add-widget-btn {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  z-index:150; display:flex; align-items:center; gap:7px;
  height:38px; padding:0 18px; border-radius:19px;
  background:var(--card-hi); border:1px solid var(--border-hi);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  color:var(--text-dim); font-size:0.857rem; font-weight:500; cursor:pointer;
  box-shadow:var(--shadow-xl); font-family:inherit;
  transition:background .15s, color .15s, border-color .15s;
}
.add-widget-btn:hover { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
.add-widget-btn .plus { font-size:1.286rem; line-height:1; }

.wp-overlay { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0); pointer-events:none; transition:background .2s; }
.wp-overlay.open { background:rgba(0,0,0,0.5); pointer-events:all; }
.wp-panel {
  position:fixed; bottom:-100%; left:50%; transform:translateX(-50%);
  z-index:201; width:min(520px,92vw);
  background:var(--panel-bg); border:1px solid var(--border-hi);
  border-radius:12px 12px 0 0; padding:20px 20px 32px;
  transition:bottom .3s cubic-bezier(.4,0,.2,1);
  box-shadow:var(--shadow-xl);
}
.wp-panel.open { bottom:0; }
.wp-head { display:flex; align-items:center; margin-bottom:16px; }
.wp-title { font-size:1rem; font-weight:600; flex:1 1; }
.wp-close { width:28px; height:28px; border-radius:6px; border:none; background:transparent; cursor:pointer; color:var(--text-dim); font-size:1.143rem; display:flex; align-items:center; justify-content:center; }
.wp-close:hover { background:var(--surface); color:var(--text); }
.wp-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-gap:10px; gap:10px; }
.wp-item {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:14px 10px 12px; border-radius:8px; cursor:pointer;
  border:1.5px solid var(--border); background:var(--surface);
  transition:background .15s, border-color .15s;
  position:relative;
}
.wp-item:hover { background:var(--card-hi); border-color:var(--border-hi); }
.wp-item.active { border-color:var(--accent); background:var(--accent-dim); }
.wp-item.active .wp-check { opacity:1; }
.wp-icon { font-size:1.571rem; }
.wp-name { font-size:0.786rem; font-weight:500; color:var(--text-dim); text-align:center; }
.wp-check {
  position:absolute; top:6px; right:6px; width:16px; height:16px;
  border-radius:50%; background:var(--accent); color:#fff;
  font-size:0.643rem; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s;
}

.card-remove { opacity:0 !important; }
.card:hover .card-remove { opacity:1 !important; }

/* ── Tweaks ── */
.tweaks-panel {
  position:fixed; bottom:16px; right:16px; z-index:200;
  background:var(--card-hi); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border-hi); border-radius:8px; padding:16px 18px; width:230px;
  box-shadow:var(--shadow-xl);
}
.tweaks-panel h4 { font-size:0.786rem; text-transform:uppercase; letter-spacing:.7px; color:var(--text-dim); margin-bottom:12px; }
.tw-row    { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.tw-label  { font-size:0.786rem; color:var(--text-dim); }
.swatches  { display:flex; gap:5px; }
.sw { width:22px; height:22px; border-radius:50%; cursor:pointer; border:2px solid transparent; }
.sw:hover  { transform:scale(1.15); }
.sw.on     { border-color:#fff; }
.tog { width:38px; height:22px; border-radius:11px; cursor:pointer; position:relative; flex-shrink:0; }
.tog .knob { position:absolute; top:3px; width:16px; height:16px; border-radius:8px; background:#fff; transition:left .2s; }

@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── Login page ── */
.login-wrap {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  height: 100vh;
}
.login-card {
  width: min(360px, 92vw);
  background: var(--card); border: 1px solid var(--border-hi);
  border-radius: 14px; padding: 36px 32px 28px;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.login-logo  { margin-bottom: 16px; }
.login-title { font-size: 1.429rem; font-weight: 700; letter-spacing: -.4px; margin-bottom: 6px; }
.login-sub   { font-size: 0.857rem; color: var(--text-dim); margin-bottom: 24px; text-align: center; }
.login-field { width: 100%; margin-bottom: 10px; }
.login-input {
  width: 100%; height: 44px; background: var(--input-bg);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0 14px; font-size: 1rem; color: var(--text);
  font-family: inherit; outline: none; letter-spacing: .08em;
}
.login-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.login-error {
  width: 100%; font-size: 0.857rem; color: var(--red);
  background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.25);
  border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; line-height: 1.4;
}
.login-btn {
  width: 100%; height: 44px; border-radius: 8px; border: none;
  background: var(--accent); color: #fff; font-size: 1rem; font-weight: 600;
  cursor: pointer; font-family: inherit; margin-top: 4px;
  transition: opacity .15s;
}
.login-btn:hover:not(:disabled) { opacity: .88; }
.login-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Settings page ── */
.stg-shell { position:relative; z-index:1; display:flex; flex-direction:column; height:100vh; overflow:hidden; }

.stg-topbar {
  display:flex; align-items:center; gap:12px; height:48px; flex-shrink:0;
  padding:0 20px; background:var(--topbar-bg);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--border);
}
.stg-back {
  font-size:0.929rem; color:var(--text-dim); text-decoration:none; display:flex; align-items:center; gap:5px;
  padding:5px 10px; border-radius:6px; border:1px solid var(--border); background:var(--surface);
  transition:color .15s, background .15s; flex-shrink:0;
}
.stg-back:hover { color:var(--text); background:var(--card-hi); }
.stg-heading { font-size:1rem; font-weight:600; flex:1 1; }
.stg-saved {
  font-size:0.857rem; color:var(--accent); background:var(--accent-dim);
  border:1px solid var(--accent); border-radius:6px; padding:3px 10px;
  opacity:0; transition:opacity .2s; pointer-events:none;
}
.stg-saved.show { opacity:1; }

.stg-main { flex:1 1; display:flex; overflow:hidden; min-height:0; }

.stg-sidebar {
  width:180px; flex-shrink:0; display:flex; flex-direction:column; gap:2px;
  padding:14px 10px; background:var(--sidebar-bg); border-right:1px solid var(--sidebar-border);
  overflow-y:auto; scrollbar-width:none;
}
.stg-sidebar::-webkit-scrollbar { display:none; }
.stg-tab {
  display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:7px;
  border:none; background:transparent; color:var(--text-dim); font-size:0.929rem;
  cursor:pointer; text-align:left; font-family:inherit; transition:background .12s, color .12s;
}
.stg-tab:hover { background:var(--surface); color:var(--text); }
.stg-tab.on { background:var(--accent-dim); color:var(--accent); font-weight:500; }
.stg-tab-icon { font-size:1.071rem; width:18px; text-align:center; flex-shrink:0; }

.stg-content { flex:1 1; overflow-y:auto; padding:28px 36px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.stg-content::-webkit-scrollbar { width:4px; }
.stg-content::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.stg-section { max-width:600px; display:flex; flex-direction:column; gap:16px; }

.stg-sec-head { margin-bottom:4px; }
.stg-sec-title { font-size:1.286rem; font-weight:600; margin-bottom:5px; }
.stg-sec-desc { font-size:0.857rem; color:var(--text-dim); line-height:1.5; }

.stg-save-btn {
  height:38px; padding:0 20px; border-radius:7px; border:none;
  background:var(--accent); color:#fff; font-size:0.929rem; font-weight:600;
  cursor:pointer; font-family:inherit; align-self:flex-start;
}
.stg-save-btn:hover { opacity:.88; }

/* widget grid */
.stg-widget-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-gap:10px; gap:10px; }
.stg-widget-card {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:16px 10px 12px; border-radius:9px; cursor:pointer;
  border:1.5px solid var(--border); background:var(--surface);
  transition:background .15s, border-color .15s; position:relative;
}
.stg-widget-card:hover { background:var(--card-hi); border-color:var(--border-hi); }
.stg-widget-card.on { border-color:var(--accent); background:var(--accent-dim); }
.stg-widget-icon { font-size:1.571rem; }
.stg-widget-name { font-size:0.714rem; font-weight:500; color:var(--text-dim); text-align:center; line-height:1.3; }
.stg-widget-badge {
  font-size:0.643rem; padding:2px 7px; border-radius:4px; font-weight:600;
  background:var(--surface); border:1px solid var(--border); color:var(--text-muted);
}
.stg-widget-badge.on { background:var(--accent); border-color:var(--accent); color:#fff; }

/* rss list */
.stg-rss-item { align-items:flex-start !important; }

/* inline inputs (inside list items) */
.stg-inline-input {
  width:100%; background:transparent; border:none; outline:none;
  color:var(--text); font-family:inherit; font-size:0.857rem;
  padding:0;
}
.stg-inline-input:focus { color:var(--text); }
.stg-bold { font-weight:600; }
.stg-mono { font-family:'JetBrains Mono',monospace; font-size:0.786rem; }

/* date input in countdown */
.stg-date-input {
  background:var(--input-bg); border:1px solid var(--border); border-radius:5px;
  padding:3px 8px; font-size:0.786rem; color:var(--text); font-family:inherit; outline:none;
}
.stg-date-input:focus { border-color:var(--accent); }
.stg-days-badge {
  font-size:0.714rem; color:var(--accent); background:var(--accent-dim);
  border:1px solid rgba(56,189,248,.2); border-radius:4px; padding:2px 7px;
  font-family:'JetBrains Mono',monospace; white-space:nowrap; flex-shrink:0;
}

/* add block (RSS) */
.stg-add-block {
  display:flex; flex-direction:column;
  padding:14px; background:var(--input-bg); border:1px solid var(--border); border-radius:8px;
}

/* api groups */
.stg-api-group {
  padding:18px; background:var(--input-bg); border:1px solid var(--border);
  border-radius:10px; display:flex; flex-direction:column;
}
.stg-group-title { font-size:0.929rem; font-weight:600; margin-bottom:12px; }
.stg-hint { font-size:0.786rem; color:var(--text-dim); }
.stg-link { color:var(--accent); }

/* accent swatches */
.stg-accents { display:flex; gap:10px; flex-wrap:wrap; }
.stg-accent-swatch {
  width:32px; height:32px; border-radius:50%; cursor:pointer;
  border:2.5px solid transparent; transition:transform .12s, border-color .12s;
}
.stg-accent-swatch:hover { transform:scale(1.15); }
.stg-accent-swatch.on { border-color:#fff; box-shadow:0 0 0 2px rgba(0,0,0,.25); }

/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./node_modules/react-grid-layout/css/styles.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
.react-grid-layout {
  position: relative;
  transition: height 200ms ease;
}
.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top, width, height;
}
.react-grid-item img {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-grid-item.cssTransforms {
  transition-property: transform, width, height;
}
.react-grid-item.resizing {
  transition: none;
  z-index: 1;
  will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}

.react-grid-item.dropping {
  visibility: hidden;
}

.react-grid-item.react-grid-placeholder {
  background: red;
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.react-grid-item.react-grid-placeholder.placeholder-resizing {
  transition: none;
}

.react-grid-item > .react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  opacity: 0;
}

.react-grid-item:hover > .react-resizable-handle {
  opacity: 1;
}

.react-grid-item > .react-resizable-handle::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}

.react-resizable-hide > .react-resizable-handle {
  display: none;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./node_modules/react-resizable/css/styles.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
.react-resizable {
  position: relative;
}
.react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
  background-position: bottom right;
  padding: 0 3px 3px 0;
}
.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-resizable-handle-w,
.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-resizable-handle-n,
.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}