/* ===== Ubuntu/Yaru design tokens & shared widgets ===== */
:root{
  --accent:#e95420;
  --accent-fg:#ffffff;
  --accent-soft:rgba(233,84,32,.16);
  --aubergine:#77216f;
  --deep-aubergine:#2c001e;
  --topbar-bg:rgba(16,16,16,.88);
  --dock-bg:rgba(24,24,24,.72);
  --win-bg:#f6f5f4;
  --win-bg-2:#efedec;
  --header-bg:#eceae8;
  --header-bg-unfocused:#f2f1f0;
  --win-fg:#1d1d1d;
  --win-fg-dim:#6e6a67;
  --win-border:rgba(0,0,0,.16);
  --card:#ffffff;
  --card-hover:#f0eeed;
  --card-active:#e6e3e2;
  --popover-bg:#f4f2f1;
  --popover-fg:#1d1d1d;
  --menu-sep:rgba(0,0,0,.09);
  --sel-bg:var(--accent);
  --sel-fg:#fff;
  --link:#e95420;
  --switch-on:var(--accent);
  --radius-win:12px;
  --radius-card:8px;
  --radius-btn:6px;
  --shadow-1:0 1px 3px rgba(0,0,0,.18),0 4px 14px rgba(0,0,0,.14);
  --shadow-2:0 3px 9px rgba(0,0,0,.22),0 14px 40px rgba(0,0,0,.32);
  --shadow-menu:0 2px 8px rgba(0,0,0,.16),0 8px 26px rgba(0,0,0,.22);
  --font:"Ubuntu",-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --mono:"Ubuntu Mono","UbuntuMono",ui-monospace,"Cascadia Mono",Menlo,monospace;
}
html.dark{
  --win-bg:#2b2b2b;
  --win-bg-2:#333333;
  --header-bg:#333130;
  --header-bg-unfocused:#383635;
  --win-fg:#f2f0ef;
  --win-fg-dim:#b3aeab;
  --win-border:rgba(0,0,0,.5);
  --card:#3a3a3a;
  --card-hover:#434343;
  --card-active:#4c4c4c;
  --popover-bg:#2e2e2e;
  --popover-fg:#f2f0ef;
  --menu-sep:rgba(255,255,255,.09);
  --link:#ff8c5a;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font);font-size:14px;color:var(--win-fg);background:#000;
  -webkit-font-smoothing:antialiased;user-select:none;cursor:default}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;cursor:default}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
img{-webkit-user-drag:none}
svg{display:block}
.hidden{display:none!important}
::selection{background:var(--accent);color:#fff}

/* scrollbars — Yaru style thin */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(127,123,120,.55);border-radius:8px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(96,93,90,.8);border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-corner{background:transparent}

/* ===== generic widgets ===== */
.btn{display:inline-flex;align-items:center;gap:6px;justify-content:center;
  padding:6px 14px;border-radius:var(--radius-btn);font-weight:500;font-size:14px;
  background:var(--card);color:var(--win-fg);border:1px solid var(--win-border);
  box-shadow:0 1px 1px rgba(0,0,0,.04);transition:background .12s,box-shadow .12s}
.btn:hover{background:var(--card-hover)}
.btn:active{background:var(--card-active)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn.suggested{background:var(--accent);color:var(--accent-fg);border-color:transparent;font-weight:600}
.btn.suggested:hover{background:color-mix(in srgb,var(--accent) 88%,#fff)}
.btn.suggested:active{background:color-mix(in srgb,var(--accent) 78%,#000)}
.btn.destructive{background:#e01b24;color:#fff;border-color:transparent;font-weight:600}
.btn.destructive:hover{background:#c01c28}
.btn.flat{background:transparent;border-color:transparent;box-shadow:none}
.btn.flat:hover{background:rgba(0,0,0,.07)}
html.dark .btn.flat:hover{background:rgba(255,255,255,.09)}
.btn.pill{border-radius:999px}

.icon-btn{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;color:var(--win-fg)}
.icon-btn:hover{background:rgba(0,0,0,.08)}
html.dark .icon-btn:hover{background:rgba(255,255,255,.1)}
.icon-btn:active{background:rgba(0,0,0,.14)}
.icon-btn:disabled{opacity:.4;pointer-events:none}
.icon-btn svg{width:16px;height:16px}
.icon-btn.toggled{background:var(--accent-soft);color:var(--accent)}

.entry{height:34px;padding:0 12px;border-radius:var(--radius-btn);border:1px solid var(--win-border);
  background:var(--card);color:var(--win-fg);outline:none;transition:border .12s,box-shadow .12s}
.entry:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.entry::placeholder{color:var(--win-fg-dim)}
textarea.entry{height:auto;padding:8px 12px;resize:none;line-height:1.5}

/* switch */
.switch{position:relative;width:44px;height:24px;border-radius:999px;background:rgba(0,0,0,.22);
  transition:background .16s;flex:none}
html.dark .switch{background:rgba(255,255,255,.22)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .16s}
.switch.on{background:var(--switch-on)}
.switch.on::after{left:22px}
.switch.disabled{opacity:.45}

/* slider */
input[type=range].slider{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;outline:none}
input[type=range].slider::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--val,50%),rgba(127,123,120,.4) var(--val,50%))}
input[type=range].slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);margin-top:-7px}
input[type=range].slider::-moz-range-track{height:4px;border-radius:2px;background:rgba(127,123,120,.4)}
input[type=range].slider::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}
input[type=range].slider::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}

/* checkbox */
.cbx{width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(127,123,120,.7);display:inline-flex;
  align-items:center;justify-content:center;background:var(--card);flex:none;transition:all .12s}
.cbx.on{background:var(--accent);border-color:var(--accent)}
.cbx.on::after{content:"";width:10px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translate(0.5px,-1px)}

/* radio */
.radio{width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(127,123,120,.7);display:inline-flex;align-items:center;justify-content:center;background:var(--card);flex:none}
.radio.on{border-color:var(--accent)}
.radio.on::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* ===== popover / menu ===== */
.popover{position:fixed;background:var(--popover-bg);color:var(--popover-fg);border-radius:12px;
  box-shadow:var(--shadow-menu);border:1px solid var(--win-border);z-index:9000;overflow:hidden;
  animation:popIn .13s cubic-bezier(.2,.9,.3,1.2)}
.popover.dark{background:#1e1e1e;color:#f2f0ef;border-color:rgba(255,255,255,.08)}
@keyframes popIn{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
.popover.closing{animation:popOut .1s forwards}
@keyframes popOut{to{opacity:0;transform:scale(.97) translateY(-3px)}}

.menu{min-width:190px;padding:6px}
.menu-item{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:7px;font-size:13.5px;white-space:nowrap}
.menu-item svg{width:16px;height:16px;opacity:.85;flex:none}
.menu-item:hover{background:rgba(0,0,0,.07)}
html.dark .menu-item:hover,.popover.dark .menu-item:hover{background:rgba(255,255,255,.09)}
.menu-item.disabled{opacity:.45;pointer-events:none}
.menu-item .grow{flex:1}
.menu-item .kbd{margin-left:auto;font-size:11.5px;color:var(--win-fg-dim)}
.popover.dark .menu-item .kbd{color:#9d9894}
.menu-sep{height:1px;background:var(--menu-sep);margin:5px 8px}
.menu-label{padding:6px 12px 3px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--win-fg-dim)}

/* tooltip */
.tooltip{position:fixed;z-index:12000;background:#1c1c1c;color:#fff;font-size:12px;padding:5px 10px;
  border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.3);pointer-events:none;animation:tipIn .12s;
  max-width:260px;text-align:center}
@keyframes tipIn{from{opacity:0;transform:translateY(3px)}to{opacity:1}}

/* modal dialog (GTK/Yaru) */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.34);z-index:9500;display:flex;
  align-items:center;justify-content:center;animation:fadeIn .14s}
@keyframes fadeIn{from{opacity:0}}
.dialog{background:var(--popover-bg);color:var(--popover-fg);border-radius:14px;min-width:340px;max-width:480px;
  box-shadow:var(--shadow-2);border:1px solid var(--win-border);padding:0;animation:dlgIn .16s cubic-bezier(.2,.9,.3,1.15);
  overflow:hidden}
@keyframes dlgIn{from{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:none}}
.dialog .dlg-body{padding:24px 24px 16px;text-align:center}
.dialog .dlg-title{font-size:16.5px;font-weight:700;margin-bottom:8px}
.dialog .dlg-text{font-size:13.5px;color:var(--win-fg-dim);line-height:1.5}
.dialog .dlg-actions{display:flex;gap:10px;padding:14px 16px;justify-content:flex-end}
.dialog .dlg-actions .btn{min-width:86px;justify-content:center}
.dialog .dlg-icon{width:48px;height:48px;margin:0 auto 14px}
.dialog .dlg-icon svg{width:48px;height:48px}

/* notification banner */
.banner{position:relative;width:400px;max-width:calc(100vw - 40px);background:#1e1e1e;color:#f2f0ef;
  border:1px solid rgba(255,255,255,.09);border-radius:12px;box-shadow:var(--shadow-2);padding:12px 14px;
  display:flex;gap:12px;align-items:flex-start;cursor:default;
  animation:bannerIn .28s cubic-bezier(.2,.85,.3,1.1)}
@keyframes bannerIn{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}
.banner.leaving{animation:bannerOut .2s forwards}
@keyframes bannerOut{to{opacity:0;transform:translateY(-10px) scale(.97)}}
.banner .b-icon{width:32px;height:32px;flex:none}
.banner .b-icon svg{width:32px;height:32px}
.banner .b-title{font-weight:700;font-size:13.5px;margin-bottom:2px}
.banner .b-body{font-size:12.5px;color:#c6c2bf;line-height:1.4}
.banner .b-close{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s;color:#fff}
.banner:hover .b-close{opacity:.8}
.banner .b-close:hover{background:rgba(255,255,255,.14);opacity:1}
.banner .b-actions{display:flex;gap:8px;margin-top:8px}
.banner .b-actions .btn{font-size:12px;padding:4px 12px;background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.12)}
.banner .b-actions .btn:hover{background:rgba(255,255,255,.18)}