/* CSS INDEX
  01 Variables & Theme Roots
  02 Base / Reset
  03 Global Layout (wrapper, cards, animations)
  04 Left Column (accordion, profile, avatar, titles, buttons)
  05 Greeting & Date Animations
  06 Search Field (incl. focus glow)
  07 Links Grid
  08 Right Grid (widgets, time-card stacking)
  09 Clock (wrapper, face, glow, TZ, day progress)
  10 Calendar (wrapper, header, grid, cells, states)
  11 Weather
  12 News (tabs, list, meta)
  13 Utilities (grid, pills, palette, swatches)
  14 Theme Toggle Button
  15 Reduced Motion
  16 Footer + Shortcut Overlay
  17 Light Theme Overrides
  18 Responsive Layout Tweaks
  19 Timer Buttons (match theme)
*/

/* 01 Variables & Theme Roots ───────────────────────────────────────────── */
:root{
    --bg:#0b0c0f; --panel:#111318; --ink:#e9eef5; --muted:#9aa3ad; --ring:#1f2834;
    --accent:#67e8f9; --accent-2:#60a5fa; --radius:14px; --shadow:0 10px 40px rgba(0,0,0,.35);
    --maxw:1280px;
}
body.light{ --bg:#f5f7fb; --panel:#fff; --ink:#0b0c0e; --muted:#5b6573; --ring:#e6e9ef; --shadow:0 10px 40px rgba(0,0,0,.08); }

/* 02 Base / Reset ─────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:var(--ink); background:radial-gradient(1200px 800px at 85% -10%, rgba(103,232,249,.08), transparent 50%), radial-gradient(900px 600px at -10% 110%, rgba(96,165,250,.10), transparent 50%), var(--bg); overflow-x:hidden;}
a{color:inherit}

/* 03 Global Layout (wrapper, cards, animations) ───────────────────────── */
.wrap{max-width:var(--maxw); margin:0 auto; padding:36px 20px 64px; display:grid; gap:22px; grid-template-columns:.95fr 1.05fr; align-items:start}
@media (max-width:980px){ .wrap{grid-template-columns:1fr} }
.card{background:var(--panel); border:1px solid var(--ring); border-radius:var(--radius); box-shadow:var(--shadow); opacity:0; transform:translateY(8px); animation:fadeIn .5s ease forwards}
.card h3{margin:0 0 12px; font-size:14px; letter-spacing:.2px}
.pad{padding:18px}
.span-all{grid-column:1/-1}
.section-updated{color:var(--muted); font-size:11px; margin:-6px 0 10px}
.utility-btn{display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:6px 10px; border:1px solid color-mix(in oklab, var(--accent) 35%, var(--ring)); border-radius:8px; background:color-mix(in oklab, var(--accent) 14%, var(--panel)); color:var(--ink); cursor:pointer; font:inherit; font-size:12px; font-weight:700; line-height:1; transition:background .18s ease, border-color .18s ease, transform .18s ease}
.utility-btn:hover{background:color-mix(in oklab, var(--accent) 22%, var(--panel)); border-color:color-mix(in oklab, var(--accent) 55%, var(--ring)); transform:translateY(-1px)}
.utility-btn:disabled{cursor:wait; opacity:.65; transform:none}

/* lightweight spacing helpers (keeps HTML clean without inline styles) */
.mt-6{margin-top:6px}
.mt-8{margin-top:8px}
.mt-10{margin-top:10px}
.mt-12{margin-top:12px}
@keyframes fadeIn{to{opacity:1; transform:none}}

/* 04 Left Column (accordion, profile, avatar, titles, buttons) ───────── */
.section-title{margin:0 0 8px; font-size:14px; color:var(--muted); letter-spacing:.25px}
details.ac{border:1px solid var(--ring); border-radius:14px; padding:10px 12px; background:var(--panel)}
details.ac + details.ac{margin-top:10px}
details.ac>summary{cursor:pointer; list-style:none; font-weight:700}
details.ac>summary::-webkit-details-marker{display:none}
@media (min-width:681px){ details.ac{border:none; padding:0} details.ac>summary{display:none} }
.profile{display:flex; gap:16px; align-items:center}
.avatar{width:84px; height:84px; border-radius:22px; overflow:hidden; border:1px solid var(--ring); box-shadow:0 6px 20px rgba(0,0,0,.25)}
.avatar img{width:100%; height:100%; object-fit:cover}
.title h1{font-size:clamp(20px,2.6vw,28px); margin:0 0 2px}
.title .sub{color:var(--muted); font-weight:600; letter-spacing:.2px}
#downloadVcf,#showVcfQr{background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:var(--panel); border:none; font-weight:600; transition:all .2s ease}
#downloadVcf:hover,#showVcfQr:hover{opacity:.9; transform:translateY(-1px); box-shadow:0 4px 10px color-mix(in oklab, var(--accent) 30%, transparent)}

.contact-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.qr-wrap{margin-top:10px}
.qr-box{border:1px dashed var(--ring); border-radius:12px; padding:12px; display:inline-block}
.timer-actions{display:flex; gap:8px; margin-top:6px; flex-wrap:wrap}

/* Timer layout fix: prevent button text overflow in narrow columns */
.timer-actions .pill{
  flex: 1 1 120px;
  min-width: 0;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}


/* 05 Greeting & Date Animations ───────────────────────────────────────── */
.greeting{margin-top:10px; font-weight:800; font-size:clamp(24px,3.4vw,36px); background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:0; transform:translateY(6px); animation:hello .7s .15s ease forwards}
.date-line{color:var(--muted); font-size:12px; margin-top:6px; opacity:0; transform:translateY(6px); animation:hello .7s .3s ease forwards}
@keyframes hello{to{opacity:1; transform:none}}

/* 06 Search Field (incl. focus glow) ──────────────────────────────────── */
.search{margin-top:12px}
.search input{width:100%; padding:14px 16px; border-radius:14px; border:1px solid var(--ring); background:transparent; color:var(--ink); font-size:16px}
.search input::placeholder{color:var(--muted)}
.search input.active-search{outline:none; border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 60%, transparent),0 0 12px color-mix(in oklab, var(--accent-2) 40%, transparent); transition:box-shadow .25s ease, border-color .25s ease}

/* 07 Links Grid ───────────────────────────────────────────────────────── */
.links{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px}
.link{display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:8px; border:1px solid var(--ring); color:inherit; text-decoration:none; transition:background .18s ease, border-color .18s ease, transform .18s ease}
.link:hover{background:color-mix(in oklab, var(--panel) 70%, var(--ring)); border-color:color-mix(in oklab, var(--accent) 45%, var(--ring)); transform:translateY(-1px)}
.quote-source{margin-top:6px; color:var(--muted); font-size:11px}

/* 08 Right Grid (widgets, time-card stacking) ─────────────────────────── */
.widgets{display:grid; grid-template-columns:1fr 1fr; gap:18px; grid-auto-rows:minmax(240px,auto)}
@media (max-width:980px){.widgets{grid-auto-rows:initial}}
@media (max-width:680px){.widgets{grid-template-columns:1fr}}
.time-card .time-wrap{display:grid!important; grid-template-columns:1fr!important; gap:16px!important; align-items:start; justify-items:stretch}

/* 09 Clock (wrapper, face, glow, TZ, day progress) ───────────────────── */
#clockWrap{position:relative; overflow:hidden; min-width:0; max-width:100%; z-index:2; background:color-mix(in oklab,var(--panel) 92%,transparent); border-radius:18px; padding:18px 20px; border:1px solid color-mix(in oklab,var(--ring) 80%,transparent); backdrop-filter:saturate(1.1) blur(4px); box-shadow:0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04)}
#clockWrap::before{content:""; position:absolute; inset:0; border-radius:inherit; background:conic-gradient(from 0deg,color-mix(in oklab,var(--accent) 75%,transparent),color-mix(in oklab,var(--accent-2) 75%,transparent),color-mix(in oklab,var(--accent) 75%,transparent)); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; -webkit-mask-composite:xor; padding:2px; opacity:.16; pointer-events:none; animation:ringSpin 14s linear infinite}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.clock{display:flex; align-items:flex-end; gap:6px; justify-content:center; text-align:center; white-space:nowrap; max-width:100%; font-variant-numeric:tabular-nums; transform-origin:center center; transition:transform .2s ease}
.clock .big{font-size:clamp(30px,4vw,48px); font-weight:850; line-height:1.05; letter-spacing:.03em; text-shadow:0 0 20px color-mix(in oklab,var(--accent) 35%,transparent)}
.clock .ampm{opacity:.75; font-weight:700; line-height:1; transform:translateY(-1px); letter-spacing:.04em; font-size:clamp(10px,1vw,12px); white-space:nowrap}
.clock::after{content:""; position:absolute; inset:0; border-radius:18px; box-shadow:0 0 20px color-mix(in oklab,var(--accent) 35%,transparent); animation:clockGlow 3s ease-in-out infinite; pointer-events:none; z-index:-1}
@keyframes clockGlow{0%,100%{opacity:.35}50%{opacity:.85}}
.clock-tz{margin-top:8px; min-width:0; overflow:hidden; text-overflow:ellipsis}
.tz{color:var(--muted); font-size:12px}
#dayProgress{position:relative; height:4px; margin-top:10px; border-radius:999px; overflow:hidden; background:color-mix(in oklab,var(--panel) 86%, var(--ring)); border:1px solid var(--ring)}
#dayProgress>.fill{height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .35s ease}

/* 10 Calendar (wrapper, header, grid, cells, states) ─────────────────── */
#cal{position:relative; z-index:0; min-width:0}
.cal{width:min(100%,560px); max-width:560px; justify-self:center}
.cal-head{display:flex; align-items:center; justify-content:space-between; gap:8px}
#calHeadInner{display:flex; align-items:baseline; gap:8px; transform-origin:right center; will-change:transform}
.cal-month{font-weight:700; font-size:14px; cursor:pointer; position:relative}
.cal-month.has-today::after{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-left:6px; box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 40%, transparent); vertical-align:middle}
.cal-nav{display:flex; gap:6px; align-items:center}
.cal-btn{padding:2px 8px; border:1px solid var(--ring); background:transparent; border-radius:8px; font-size:12px; cursor:pointer; color:var(--ink)}
.cal-btn:hover{background:color-mix(in oklab,var(--panel) 85%, var(--ring))}
.cal-grid{margin-top:6px; display:grid; grid-template-columns:repeat(7,1fr); gap:4px; min-width:0}
.cal .dow{font-size:10px; color:var(--muted); text-align:center}
.cell{border:1px dashed var(--ring); border-radius:8px; padding:4px 0; text-align:center; font-variant-numeric:tabular-nums; font-size:12px; opacity:.85; transition:opacity .2s}
.cal:hover .cell{opacity:1}
.dim{opacity:.45}
.today{background:color-mix(in oklab,var(--accent) 22%,transparent); box-shadow:0 0 0 1px var(--accent) inset, 0 0 12px color-mix(in oklab,var(--accent) 25%,transparent); font-weight:800; opacity:1}

/* 11 Weather ──────────────────────────────────────────────────────────── */
.weather-row{display:flex; align-items:center; gap:12px}
.wx-temp{font-size:36px; font-weight:800}
.wx-desc{color:var(--muted)}
.wx-aux{display:flex; gap:12px; color:var(--muted); margin-top:6px; font-size:12px}
.forecast{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px}
.day{border:1px dashed var(--ring); border-radius:12px; padding:10px}
.day .hi{font-weight:800}

/* 12 News (tabs, list, meta) ─────────────────────────────────────────── */
.news-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px}
.news-head h3{margin:0}
.news-actions{display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap}
.tabs{display:flex; flex-wrap:wrap; gap:8px}
.tab{padding:6px 10px; border:1px solid var(--ring); border-radius:999px; font-size:12px; cursor:pointer; background:transparent; color:var(--ink)}
.tab.active{background:color-mix(in oklab, var(--accent) 35%, var(--panel)); color:var(--ink); border-color:color-mix(in oklab, var(--accent) 55%, var(--ring)); font-weight:700}
.news-list{list-style:none; padding:0; margin:4px 0 0}
.news-list li{border-top:1px dashed var(--ring); padding:0}
.news-list li:first-child{border-top:none}
.news-list a{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:8px; margin:0 -12px; padding:11px 12px; border-radius:8px; color:var(--ink); text-decoration:none; font-weight:650; line-height:1.35; transition:background .18s ease, color .18s ease, transform .18s ease}
.news-list a::after{content:"↗"; color:var(--muted); font-size:12px; line-height:1.5; opacity:.65; transition:color .18s ease, opacity .18s ease}
.news-list a:visited{color:color-mix(in oklab, var(--muted) 75%, var(--ink))}
.news-list a:hover{background:color-mix(in oklab, var(--accent) 10%, transparent); color:color-mix(in oklab, var(--accent) 65%, var(--ink)); transform:translateX(2px)}
.news-list a:hover::after{color:var(--accent); opacity:1}
.news-list a:focus-visible{outline:2px solid color-mix(in oklab, var(--accent) 70%, transparent); outline-offset:2px}
.news-title{display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2}
.news-meta{display:flex; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:12px; margin:4px 0 10px}
.news-source{padding:2px 7px; border:1px solid color-mix(in oklab, var(--accent) 30%, var(--ring)); border-radius:999px; color:color-mix(in oklab, var(--accent) 55%, var(--muted)); font-weight:700; line-height:1.2}
.news-status{padding:10px 0!important; color:var(--muted)}

/* 13 Utilities (grid, pills, palette, swatches) ──────────────────────── */
.util-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px}
.util-grid>div{min-width:0}
@media (max-width:680px){ .util-grid{grid-template-columns:1fr} }
.pill{display:inline-block; max-width:100%; padding:6px 10px; border:1px solid var(--ring); border-radius:999px; font-size:12px; overflow-wrap:anywhere}
#netStatus,
#ip,
#lat,
#osInfo,
#browserInfo,
#assetInfo,
#timer{border-radius:8px; margin:0 4px 6px 0; white-space:normal}
.status-pill{display:inline-flex; align-items:center; gap:7px; min-width:0; margin-right:4px}
.status-dot{width:8px; height:8px; border-radius:50%; background:var(--muted); box-shadow:0 0 0 3px color-mix(in oklab, var(--muted) 18%, transparent)}
.status-good .status-dot{background:#34d399; box-shadow:0 0 0 3px color-mix(in oklab, #34d399 20%, transparent)}
.status-slow .status-dot{background:#facc15; box-shadow:0 0 0 3px color-mix(in oklab, #facc15 20%, transparent)}
.status-bad .status-dot{background:#f87171; box-shadow:0 0 0 3px color-mix(in oklab, #f87171 20%, transparent)}
.palette{display:flex; gap:8px; flex-wrap:wrap; max-width:100%; min-width:0}
.swatch{flex:0 0 22px; width:22px; height:22px; border-radius:50%; border:1px solid var(--ring); cursor:pointer}

/* 14 Theme Toggle Button ─────────────────────────────────────────────── */
#themeToggle{background:color-mix(in oklab, var(--accent) 18%, var(--panel)); color:var(--ink); border:1px solid color-mix(in oklab, var(--accent) 35%, var(--ring)); cursor:pointer; padding:6px 12px; border-radius:999px; font-weight:600; transition:background .2s ease, border-color .2s ease, transform .2s ease; margin-bottom:10px}
#themeToggle:hover{background:color-mix(in oklab, var(--accent) 24%, var(--panel)); border-color:color-mix(in oklab, var(--accent) 55%, var(--ring)); transform:translateY(-1px)}
body.light #themeToggle{color:var(--ink)}
body.light #themeToggle:hover{background:color-mix(in oklab, var(--accent-2) 20%, var(--panel))}

/* 15 Reduced Motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){.card,.greeting,.date-line,.clock::after,#clockWrap::before{animation:none!important}}

/* 16 Footer ──────────────────────────────────────────────────────────── */
footer{margin-top:10px; color:var(--muted); font-size:12px; text-align:center}

.shortcut-overlay{position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.55); backdrop-filter:blur(6px)}
.shortcut-overlay[hidden]{display:none}
.shortcut-panel{width:min(420px,100%); padding:16px; border:1px solid var(--ring); border-radius:14px; background:var(--panel); box-shadow:var(--shadow)}
.shortcut-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.shortcut-head h3{margin:0; font-size:14px}
.shortcut-grid{display:grid; grid-template-columns:auto 1fr; gap:9px 14px; color:var(--muted); font-size:13px}
.shortcut-grid span:nth-child(odd){min-width:44px; padding:3px 7px; border:1px solid var(--ring); border-radius:6px; color:var(--ink); text-align:center; font-weight:800}

/* 17 Light Theme Overrides ───────────────────────────────────────────── */
.light .tabs .tab,.light .tabs .tab.active{color:var(--ink)!important; text-shadow:none}
.light .clock .big{text-shadow:0 0 18px color-mix(in oklab, var(--accent) 35%, transparent),0 0 2px rgba(0,0,0,.15)}

/* 18 Responsive Layout Tweaks ────────────────────────────────────────── */
@media (min-width:1100px){.util-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:680px){.wrap{padding:20px 14px 44px}.pad{padding:14px}}

/* 19 Timer Buttons (match theme) ─────────────────────────────────────── */
#startTimer,
#resetTimer {
    background: color-mix(in oklab, var(--accent) 18%, var(--panel));
    color: var(--ink);
    border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--ring));
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#startTimer:hover,
#resetTimer:hover {
    background: color-mix(in oklab, var(--accent) 24%, var(--panel));
    border-color: color-mix(in oklab, var(--accent) 55%, var(--ring));
    transform: translateY(-1px);
}

body.light #startTimer,
body.light #resetTimer {
    color: var(--ink);
}