/* KATHANA 0.7 / compact Winamp-era style, high-contrast typography, no external fonts */
:root{
 --bg:#282d41;--panel:#525b78;--edge:#8c94af;--accent:#adff71;--text:#f2f4f9;--muted:#c0c8d4;--screen:#09130e;--button:#767f9c;--top:#373e61;
 font-family:Tahoma,Verdana,'Segoe UI',Arial,sans-serif;
 color:var(--text);background:var(--bg);font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-width:0;overflow-x:hidden;height:100%}
body{background:var(--bg);min-height:0;overflow-y:auto}
button,input,select{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.widget{--w:312px;width:var(--w);max-width:100%;border:2px ridge var(--edge);background:var(--bg);box-shadow:inset 1px 1px #ffffff3b,0 3px 14px #0008;overflow:hidden}
.header{min-height:37px;display:flex;gap:5px;align-items:center;padding:5px 7px;background:linear-gradient(100deg,var(--top),var(--panel) 58%,var(--top));border-bottom:2px ridge var(--edge)}
.led{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.brand{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;letter-spacing:.7px;font-weight:900;color:var(--text);text-shadow:1px 1px #0009}
.subbrand{font-weight:700;opacity:.84;font-size:11px}
.chrome-btn,.smallbtn{border:2px outset var(--edge);background:var(--button);color:var(--text);border-radius:2px;padding:5px 7px;font-size:11px;font-weight:800;white-space:nowrap}
.gear{font-size:17px;padding:0 7px;min-height:28px}
.clockgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--bg);padding:7px 7px 6px}
.clockbox{background:var(--screen);border:3px inset var(--edge);min-width:0;padding:7px 8px 6px;min-height:86px;overflow:hidden}
.clocklabel{color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.3px;white-space:nowrap}
.clockface{font:800 21px/1.2 Consolas,'Lucida Console',monospace;white-space:nowrap;color:var(--accent);letter-spacing:-.6px;font-variant-numeric:tabular-nums;text-shadow:0 0 7px color-mix(in srgb,var(--accent) 36%,transparent);margin-top:4px}
.day{font-size:11px;font-weight:700;color:var(--text);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rows{padding:2px 7px 4px;background:var(--bg)}
.eventrow{display:grid;grid-template-columns:43px minmax(0,1fr);align-items:center;gap:7px;padding:7px 7px;min-height:52px;border-bottom:1px solid var(--edge)}
.tag{font-size:10px;color:var(--muted);font-weight:900;letter-spacing:.4px;align-self:start;padding-top:2px}
.eventcontent{min-width:0}.eventname{color:var(--text);font-size:13px;font-weight:800;line-height:1.25;overflow-wrap:anywhere}.eventtime{font-size:11px;font-weight:700;color:var(--muted);line-height:1.5;margin-top:3px;font-variant-numeric:tabular-nums}
.eventtime .local{color:var(--text)}.eventtime .server{color:var(--muted)}.eventtime .sep{margin:0 4px;opacity:.65}
.upcoming{border:2px inset var(--edge);border-left:3px solid var(--accent);background:var(--screen);border-radius:2px;min-height:96px;grid-template-columns:43px minmax(0,1fr);margin:3px 0}
.upcoming .tag{color:var(--accent)}.upcoming .eventname{font-size:15px;color:var(--accent)}.upcoming .eventtime{color:var(--text)}
.countwrap{grid-column:2;display:flex;align-items:baseline;justify-content:space-between;gap:7px;line-height:1.3}
.counttag{color:var(--muted);font-size:9px;font-weight:900;white-space:nowrap}
.countdown{font:900 24px/1 Consolas,'Lucida Console',monospace;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-1px}
.statusline{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:800;color:var(--muted);padding:6px 8px;background:var(--screen);border-top:1px solid var(--edge);letter-spacing:.15px}
.statusdot{color:var(--accent);font-size:9px}.spacer{flex:1}
.toolbar{display:flex;gap:4px;padding:5px 7px;background:var(--panel);border-top:1px ridge var(--edge)}
.toolbar button{flex:1;min-width:0;padding:6px 2px;white-space:nowrap;font-size:11px;font-weight:900;color:var(--text);background:var(--button);border:2px outset var(--edge);border-radius:2px}
.toolbar button:hover,.chrome-btn:hover{filter:brightness(1.1)}.toolbar button[data-active="true"]{border-style:inset;background:var(--screen);color:var(--accent)}
.drawer{padding:11px;background:var(--bg);border-top:2px ridge var(--edge);max-height:315px;overflow-y:auto;scrollbar-color:var(--edge) var(--screen)}
.drawer[hidden]{display:none!important}.drawerhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.drawer h2{margin:0;font-size:14px;color:var(--accent)}
.drawer h3{margin:13px 0 5px;font-size:12px}.drawer p{margin:5px 0 10px;font-size:11px;color:var(--muted);line-height:1.5}.drawer small{font-size:10px;color:var(--muted)}
.drawer label{font-size:11px;font-weight:bold;display:block;margin:7px 0 5px}.drawer select,.drawer input[type="text"],.drawer input[type="color"]{width:100%;background:var(--screen);border:1px solid var(--edge);border-radius:3px;padding:6px;color:var(--text)}.drawer input[type="color"]{padding:1px;height:31px}
.drawer input[type="file"]{font-size:11px;max-width:100%}.drawer button{border:1px solid var(--edge);background:var(--button);padding:6px 8px;color:var(--text);font-size:11px;font-weight:800;border-radius:3px}
.drawer .btnrow{display:flex;gap:6px;margin:8px 0;flex-wrap:wrap}.drawer .btnrow button{flex:1}
.skinchoices{display:grid;grid-template-columns:1fr 1fr;gap:6px}.skinpick{display:flex;align-items:center;gap:6px;text-align:left;background:var(--panel)!important;border:1px solid var(--edge);padding:7px 6px!important;font-size:11px!important}.skinpick.selected{outline:2px solid var(--accent);outline-offset:-2px}.swatches{flex-shrink:0;display:flex;gap:0;border:1px solid #888;border-radius:3px;overflow:hidden}.swatches i{display:block;width:7px;height:15px}
.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 10px}.formgrid label{margin:0}.boxline{border:1px solid var(--edge);padding:8px;margin:10px 0;background:var(--panel);font-size:11px;line-height:1.4}
.eventlist{display:flex;flex-direction:column;gap:2px}.eventline{display:flex;justify-content:space-between;gap:8px;padding:7px 3px;border-bottom:1px solid var(--edge);font-size:11px}.eventline .eventtxt{font-weight:750}.eventline .eventtime2{color:var(--accent);flex-shrink:0;text-align:right;font-variant-numeric:tabular-nums}
.a-link{color:var(--accent);word-break:break-word}.warning{color:#ffc878!important;font-weight:650}

/* v0.7 REGULAR: replaces previous v0.6 compact; full event rows remain. */
.widget[data-mode="regular"]{--w:312px}
.widget[data-mode="regular"] .header{padding:4px 5px;min-height:32px}
.widget[data-mode="regular"] .brand{font-size:11.5px;letter-spacing:0}
.widget[data-mode="regular"] .subbrand{font-size:9px}
.widget[data-mode="regular"] .chrome-btn{font-size:10px;padding:3px 4px}
.widget[data-mode="regular"] .gear{font-size:15px}
.widget[data-mode="regular"] .clockgrid{gap:3px;padding:4px}
.widget[data-mode="regular"] .clockbox{padding:6px 4px 5px;min-height:71px;border-width:2px}
.widget[data-mode="regular"] .clocklabel{font-size:10px;letter-spacing:-.25px}
.widget[data-mode="regular"] .clockface{font-size:17px;letter-spacing:-.9px;margin-top:3px}
.widget[data-mode="regular"] .day{font-size:10px;margin-top:2px}
.widget[data-mode="regular"] .rows{padding:0 4px 3px}
.widget[data-mode="regular"] .eventrow{padding:6px 4px;grid-template-columns:36px minmax(0,1fr);gap:4px;min-height:46px}
.widget[data-mode="regular"] .tag{font-size:9px}
.widget[data-mode="regular"] .eventname{font-size:12.5px}
.widget[data-mode="regular"] .eventtime{font-size:10px;margin-top:2px}
.widget[data-mode="regular"] .eventtime .sep{margin:0 2px}
.widget[data-mode="regular"] .upcoming{min-height:79px;margin:2px 0}
.widget[data-mode="regular"] .upcoming .eventname{font-size:13px}
.widget[data-mode="regular"] .counttag{font-size:8px}
.widget[data-mode="regular"] .countdown{font-size:21px}
.widget[data-mode="regular"] .statusline{font-size:8.5px;padding:4px 5px}
.widget[data-mode="regular"] .toolbar{padding:3px 4px;gap:3px}
.widget[data-mode="regular"] .toolbar button{font-size:10px;padding:5px 1px}
.widget[data-mode="regular"] .drawer{padding:9px;max-height:230px}
.widget[data-mode="regular"] .skinchoices{grid-template-columns:1fr 1fr}
/* v0.7 MINI: 248px, two stacked wide clocks, only NEXT auto event. */
.widget[data-mode="mini"]{--w:248px}
.widget[data-mode="mini"] .header{padding:3px 4px;gap:3px;min-height:28px}
.widget[data-mode="mini"] .brand{font-size:11px;letter-spacing:0}
.widget[data-mode="mini"] .subbrand{display:none}
.widget[data-mode="mini"] .chrome-btn{font-size:9px;padding:3px}
.widget[data-mode="mini"] .gear{font-size:14px;min-height:22px}
.widget[data-mode="mini"] .clockgrid{grid-template-columns:1fr;gap:3px;padding:3px 4px}
.widget[data-mode="mini"] .clockbox{display:grid;align-items:center;grid-template-columns:1fr auto;gap:1px 5px;min-height:42px;padding:4px 6px;border-width:2px}
.widget[data-mode="mini"] .clocklabel{font-size:10px;letter-spacing:0;align-self:end}
.widget[data-mode="mini"] .clockface{font-size:17px;letter-spacing:-.8px;margin-top:0;grid-column:2;grid-row:1/3;align-self:center}
.widget[data-mode="mini"] .day{grid-column:1;font-size:9px;line-height:1.1;margin-top:0;align-self:start}
.widget[data-mode="mini"] .rows{padding:1px 4px}
.widget[data-mode="mini"] #prevRow,.widget[data-mode="mini"] #afterRow{display:none}
.widget[data-mode="mini"] .eventrow{grid-template-columns:30px minmax(0,1fr);gap:4px;padding:5px;min-height:72px}
.widget[data-mode="mini"] .tag{font-size:9px}
.widget[data-mode="mini"] .upcoming{margin:0;min-height:77px}
.widget[data-mode="mini"] .eventname{font-size:12.5px}
.widget[data-mode="mini"] .eventtime{font-size:10px;line-height:1.3;margin-top:2px}
.widget[data-mode="mini"] .eventtime .local,.widget[data-mode="mini"] .eventtime .server{display:block}
.widget[data-mode="mini"] .eventtime .sep{display:none}
.widget[data-mode="mini"] .countwrap{gap:4px}
.widget[data-mode="mini"] .counttag{font-size:8px}
.widget[data-mode="mini"] .countdown{font-size:20px;letter-spacing:-1.3px}
.widget[data-mode="mini"] .statusline{padding:3px 5px;font-size:8px;gap:3px}
.widget[data-mode="mini"] .statusline #sourceStatus{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:138px}
.widget[data-mode="mini"] .toolbar{padding:3px 4px;gap:2px}
.widget[data-mode="mini"] .toolbar button{font-size:9px;padding:5px 0}
.widget[data-mode="mini"] .drawer{padding:8px;max-height:215px}
.widget[data-mode="mini"] .skinchoices{grid-template-columns:1fr}
.widget[data-mode="mini"] .drawer p{font-size:11px}
@media(max-width:260px){.widget{width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.statusline #sourceStatus{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.widget[data-mode="mini"] .clocklabel{min-width:0;overflow:hidden;text-overflow:ellipsis}