:root {
  color-scheme: dark;

  --bg:        #0a0a0c;
  --panel:     #14141a;
  --panel-2:   #1a1a22;
  --line:      rgba(233, 233, 240, .16);
  --line-soft: rgba(233, 233, 240, .085);
  --line-focus: rgba(242, 193, 78, .55);
  --text:      #e9e9f0;
  --muted:     #8b8b9c;
  --dim:       #5f5f70;
  --accent:    #f2c14e;
  --accent-2:  #7ee0c0;
  --accent-glow: rgba(242, 193, 78, .4);
  --danger:    #ff6b6b;

  /* every one of these is rewritten by the appearance panel; this is just the
     TACOT default, used for the first paint */
  --radius: 12px;
  --gaps: 26px;
  --border-w: 1px;
  --blur: 14px;
  --shadow-scale: 1;
  --well: #0a0a0c;
  --well-2: #14141a;
  --panel-glass: rgba(20, 20, 26, .97);
  --titlebar-glass: rgba(26, 26, 34, 1);
  --bar-glass: rgba(20, 20, 26, .88);
  --menu-glass: rgba(20, 20, 26, .97);
  --field: #0a0a0e;
  --chrome: #0e0e13;
  --hover: rgba(255, 255, 255, .07);
  --notice-bg: rgba(242, 193, 78, .13);
  --notice-line: rgba(242, 193, 78, .32);
  --accent-2-soft: rgba(126, 224, 192, .1);
  --accent-2-line: rgba(126, 224, 192, .34);
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }

/* ------------------------------------------------------------------ */
/* boot                                                               */
/* ------------------------------------------------------------------ */

.boot {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 100% at 50% 0%, #14141c 0%, #08080a 70%);
  cursor: pointer;
  transition: opacity .35s ease;
}
.boot.gone { opacity: 0; pointer-events: none; }

.boot-inner { width: min(420px, 84vw); text-align: center; }

.boot-wordmark {
  font-family: var(--mono);
  font-size: 34px;
  letter-spacing: .34em;
  color: var(--text);
  margin-bottom: 26px;
  text-indent: .34em;
}
.boot-wordmark span { color: var(--accent); margin-left: .18em; }

.boot-bar {
  height: 3px;
  border-radius: 99px;
  background: #1d1d26;
  overflow: hidden;
}
.boot-bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), #ffd98a);
  transition: width .4s ease;
}

.boot-log {
  margin-top: 18px;
  min-height: 92px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--dim);
  text-align: left;
  white-space: pre;
}
.boot-log b { color: var(--accent-2); font-weight: 400; }

.boot-hint {
  margin-top: 8px;
  font-size: 11px;
  color: #3d3d49;
  letter-spacing: .04em;
}

/* ------------------------------------------------------------------ */
/* desktop                                                            */
/* ------------------------------------------------------------------ */

.desktop {
  position: fixed;
  inset: 0 0 44px 0;
  padding: var(--gaps);
  background:
    radial-gradient(90% 70% at 20% 0%, #171720 0%, transparent 60%),
    radial-gradient(70% 60% at 100% 100%, #15151d 0%, transparent 55%),
    var(--bg);
  overflow: hidden;
}

/* drifting grid: translated by exactly one cell so the loop is seamless */
.desktop::before {
  content: "";
  position: absolute;
  inset: -160px;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
  animation: grid-drift 96s linear infinite;
  will-change: transform;
  pointer-events: none;
}

/* warm + mint ambient light, the two brand accents, drifting slowly */
.desktop::after {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(34% 30% at 24% 20%, rgba(242, 193, 78, .13), transparent 72%),
    radial-gradient(30% 26% at 80% 76%, rgba(126, 224, 192, .09), transparent 74%),
    radial-gradient(46% 34% at 55% 108%, rgba(242, 193, 78, .05), transparent 70%);
  animation: aura-drift 54s ease-in-out infinite alternate,
             aura-breathe 21s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(44px, 44px, 0); }
}

@keyframes aura-drift {
  from { transform: translate3d(-2%, -1.5%, 0) scale(1); }
  to   { transform: translate3d(2.5%, 2%, 0) scale(1.07); }
}

@keyframes aura-breathe {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}

/* keep the animation off for anyone who asked their OS for less motion */
@media (prefers-reduced-motion: reduce) {
  .desktop::before, .desktop::after { animation: none; }
}

.icons {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 96px;
}

.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 6px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.icon:hover, .icon:focus-visible {
  background: rgba(255,255,255,.04);
  border-color: var(--line-soft);
  outline: none;
}
.icon-glyph {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 15px;
  color: var(--accent);
}
.icon-label { font-size: 11.5px; color: var(--muted); }

/* ------------------------------------------------------------------ */
/* windows                                                            */
/* ------------------------------------------------------------------ */

.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 320px;
  min-height: 180px;
  background: var(--panel-glass);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 calc(24px * var(--shadow-scale)) calc(60px * var(--shadow-scale)) rgba(0,0,0,.55),
              0 2px 0 rgba(255,255,255,.02) inset;
  overflow: hidden;
  animation: pop .16s ease;
}
@keyframes pop {
  from { transform: scale(.98); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.window.focused {
  border-color: var(--line-focus);
  box-shadow: 0 calc(30px * var(--shadow-scale)) calc(80px * var(--shadow-scale)) rgba(0,0,0,.7);
}
.window.minimized { display: none; }

.titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 8px 0 14px;
  background: linear-gradient(var(--panel-2), var(--well));
  border-bottom: 1px solid var(--line-soft);
  cursor: grab;
  user-select: none;
  touch-action: none;
  flex: 0 0 auto;
}
.titlebar:active { cursor: grabbing; }
.title-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .55;
  flex: 0 0 auto;
}
.window.focused .title-dot { opacity: 1; }
.title-text {
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.window.focused .title-text { color: var(--text); }
.title-actions { margin-left: auto; display: flex; gap: 2px; }

.wbtn {
  width: 28px; height: 26px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.wbtn:hover { background: rgba(255,255,255,.06); color: var(--text); }
.wbtn.close:hover { background: rgba(255,107,107,.16); color: var(--danger); }

.window-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* ------------------------------------------------------------------ */
/* taskbar                                                            */
/* ------------------------------------------------------------------ */

.taskbar {
  position: fixed;
  inset: auto 0 0 0;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: var(--bar-glass);
  backdrop-filter: blur(var(--blur));
  border-top: var(--border-w) solid var(--line-soft);
  z-index: 30;
}

.start {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  cursor: pointer;
}
.start:hover { border-color: #3d3d4d; }
.start[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.start-icon {
  width: 16px; height: 16px;
  display: block;
  border-radius: 4px;
}

.tasks { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; }

.task-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 180px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.task-chip:hover { background: rgba(255,255,255,.07); }
.task-chip.active { color: var(--text); border-color: var(--line); background: rgba(255,255,255,.07); }
.task-chip .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .5; flex: 0 0 auto; }
.task-chip.active .pip { opacity: 1; }

.tray { margin-left: auto; display: flex; align-items: center; gap: 12px; padding-right: 4px; }
.tray-clock {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* start menu                                                         */
/* ------------------------------------------------------------------ */

.menu {
  position: fixed;
  left: 10px;
  bottom: 52px;
  width: 262px;
  z-index: 40;
  background: var(--menu-glass);
  border: var(--border-w) solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: 0 26px 70px rgba(0,0,0,.65);
  overflow: hidden;
  animation: rise .14s ease;
}
@keyframes rise {
  from { transform: translateY(6px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

.menu-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 15px;
  border-bottom: 1px solid var(--line-soft);
}
.menu-avatar {
  width: 30px; height: 30px;
  border-radius: 9px;
  overflow: hidden;
  background: linear-gradient(145deg, var(--accent), #b98d21);
}
.menu-avatar img { width: 100%; height: 100%; display: block; }
.menu-head strong { display: block; font-size: 13px; letter-spacing: .01em; }
.menu-head small { color: var(--dim); font-size: 11px; }

.menu-list { padding: 6px; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text);
}
.menu-item:hover, .menu-item:focus-visible { background: rgba(255,255,255,.06); outline: none; }
.menu-item small { display: block; color: var(--dim); font-size: 10.5px; margin-top: 1px; }
.menu-item .icon-glyph { width: 26px; height: 26px; border-radius: 7px; font-size: 12px; }

.menu-foot {
  padding: 10px 15px 12px;
  border-top: 1px solid var(--line-soft);
  color: #46464f;
  font-size: 10.5px;
  letter-spacing: .03em;
}

/* ------------------------------------------------------------------ */
/* terminal                                                           */
/* ------------------------------------------------------------------ */

.term {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--well);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
}

.term-out {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 14px 4px;
  white-space: pre-wrap;
  word-break: break-word;
  color: #c9c9d6;
}
.term-line { min-height: 1.65em; }
.term-line.dim { color: var(--dim); }
.term-line.ok { color: var(--accent-2); }
.term-line.warn { color: var(--accent); }
.term-line.err { color: var(--danger); }
.term-line.head { color: var(--accent); }

.term-in {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 12px;
  flex: 0 0 auto;
}
.term-prompt { color: var(--accent-2); white-space: nowrap; }
.term-prompt em { color: var(--dim); font-style: normal; }
.term-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--text);
  font: inherit;
  caret-color: var(--accent);
}

/* ------------------------------------------------------------------ */
/* browser                                                            */
/* ------------------------------------------------------------------ */

.browser { display: flex; flex-direction: column; height: 100%; background: var(--well); }

.browser-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 8px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line-soft);
  flex: 0 0 auto;
}

.browser-btn {
  display: grid;
  place-items: center;
  width: 27px; height: 26px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.browser-btn:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.browser-btn:disabled { opacity: .28; cursor: default; }
.browser-btn:focus-visible { outline: 1px solid var(--accent); }

/* cleaner toggle: lit when pages are being stripped before display */
.browser-btn.on {
  color: var(--accent-2);
  border-color: var(--accent-2-line);
  background: var(--accent-2-soft);
}
.browser-btn.on:hover:not(:disabled) { color: var(--accent-2); background: var(--accent-2-soft); }

.browser-address {
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--field);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  outline: none;
}
.browser-address:focus { border-color: var(--accent); }
.browser-address::placeholder { color: var(--dim); }

.browser-engine {
  height: 28px;
  max-width: 118px;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--field);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  outline: none;
  cursor: pointer;
}
.browser-engine:hover { color: var(--text); border-color: var(--line-focus); }
.browser-engine:focus { border-color: var(--accent); }

.browser-view { position: relative; flex: 1 1 auto; min-height: 0; }

/* shell browser: a tab strip over real browser views */
.tabstrip {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 5px 6px 0;
  overflow-x: auto;
  background: var(--chrome);
  border-bottom: 1px solid var(--line-soft);
  scrollbar-width: none;
}
.tabstrip::-webkit-scrollbar { height: 0; }

.tab {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 96px;
  max-width: 190px;
  padding: 6px 7px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  color: var(--dim);
  font-size: 11.5px;
  cursor: pointer;
  user-select: none;
}
.tab:hover { background: var(--hover); color: var(--muted); }
.tab.active { background: var(--panel); border-color: var(--line); color: var(--text); }

.tab-favicon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}
.tab-favicon img { width: 14px; height: 14px; border-radius: 3px; }
.tab-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-close {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: .55;
}
.tab-close:hover { background: var(--hover); opacity: 1; }

.tab-new {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-left: 2px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.tab-new:hover { background: var(--hover); color: var(--text); }

.shell-view { background: #fff; }
/* sized only by inset: adding width/height 100% on top overflows the frame
 * and gives every page its own horizontal scrollbar */
.shell-webview {
  position: absolute;
  inset: 0;
  display: flex;
  border: 0;
  background: #fff;
}
.shell-webview[hidden] { display: none !important; }

/* live browser: frames of a real Chrome, drawn onto a canvas */
.live-view {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--well);
}
.live-view[hidden] { display: none !important; }

.live-canvas {
  max-width: 100%;
  max-height: 100%;
  background: #fff;
  cursor: pointer;
  outline: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
}
.live-canvas:focus-visible { box-shadow: 0 0 0 1px var(--accent); }

.live-status {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 82%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--menu-glass);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  text-align: center;
}
.live-status[hidden] { display: none !important; }

.browser-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.browser-home {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: auto;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--panel-2) 0%, var(--bg) 70%);
}

.home-card { max-width: 390px; text-align: center; }
.home-icon { width: 54px; height: 54px; border-radius: 13px; margin-bottom: 14px; }
.home-title {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 10px;
}
.home-copy { font-size: 12px; line-height: 1.75; color: var(--muted); margin-bottom: 16px; }
.home-note {
  margin-top: 18px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--dim);
}
.home-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.home-links button {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11.5px;
  cursor: pointer;
}
.home-links button:hover { border-color: var(--accent); color: var(--accent); }

.browser-blocked {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 26px;
  background: radial-gradient(120% 90% at 50% 0%, var(--panel-2) 0%, var(--bg) 70%);
}

.blocked-card { max-width: 390px; text-align: center; }
.blocked-title { font-size: 14px; color: var(--text); margin-bottom: 10px; }
.blocked-copy { font-size: 12px; line-height: 1.75; color: var(--muted); margin-bottom: 18px; }
.blocked-card button {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.blocked-card button:hover { border-color: var(--accent); color: var(--accent); }
.blocked-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.blocked-card button.primary {
  border-color: var(--accent-2-line);
  color: var(--accent-2);
  background: var(--accent-2-soft);
}
.blocked-card button.primary:hover { border-color: var(--accent-2); background: var(--accent-2-soft); }

.browser-blocked[hidden] { display: none !important; }

.browser-notice {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 12px;
  background: var(--notice-bg);
  border-top: 1px solid var(--notice-line);
  color: var(--accent);
  font-size: 11.5px;
}

/* the hidden attribute has to beat the display rules above */
.browser-frame[hidden],
.browser-home[hidden],
.browser-notice[hidden] { display: none !important; }

/* ------------------------------------------------------------------ */
/* about + notes                                                      */
/* ------------------------------------------------------------------ */

.about { padding: 22px 24px 26px; }
.about-icon {
  width: 64px; height: 64px;
  display: block;
  border-radius: 15px;
  margin-bottom: 18px;
}
.about-mark {
  font-family: var(--mono);
  font-size: 26px;
  letter-spacing: .3em;
  margin-bottom: 4px;
}
.about-mark span { color: var(--accent); }
.about-sub { color: var(--dim); font-size: 11.5px; letter-spacing: .05em; margin-bottom: 20px; }
.about p { font-size: 13px; line-height: 1.7; color: #b9b9c7; margin: 0 0 13px; }
.about h3 {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 22px 0 9px;
  font-weight: 500;
}
.about dl { display: grid; grid-template-columns: 96px 1fr; gap: 7px 14px; margin: 0; font-size: 12.5px; }
.about dt { color: var(--dim); font-family: var(--mono); font-size: 11.5px; }
.about dd { margin: 0; color: #c2c2cf; }
.about-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.about-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 12px;
  text-decoration: none;
}
.about-links a:hover { border-color: var(--accent); color: var(--accent); }
.about-hint { color: #46464f; font-size: 11px; margin-top: 10px; }

.notes { display: flex; flex-direction: column; height: 100%; background: var(--well-2); }
.notes textarea {
  flex: 1 1 auto;
  resize: none;
  border: 0;
  outline: none;
  padding: 16px 18px;
  background: none;
  color: #d7d7e2;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
}
.notes-foot {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  border-top: 1px solid var(--line-soft);
  color: var(--dim);
  font-size: 11px;
}

/* small screens: keep it usable */
@media (max-width: 640px) {
  .icons { width: 100%; flex-direction: row; gap: 2px; }
  .icon-label { font-size: 10.5px; }
  .window { min-width: 0; }
  .desktop { padding: 16px; }
}

/* ------------------------------------------------------------------ */
/* lock screen                                                        */
/* ------------------------------------------------------------------ */

.lock-body {
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 22px;
  background: radial-gradient(120% 90% at 50% 0%, #17171f 0%, #0a0a0c 70%);
}

.lock { width: 100%; max-width: 330px; text-align: center; }
.lock-icon { border-radius: 14px; }

.lock-word {
  font-family: var(--mono);
  letter-spacing: .3em;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 10px 0 26px;
}
.lock-word span { color: var(--accent); margin-left: 6px; }

.lock-title { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.lock-copy { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 0 0 20px; }

.lock-form { text-align: left; }
.lock-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 6px;
}
.lock-input {
  width: 100%;
  height: 36px;
  padding: 0 11px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0a0a0e;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.lock-input:focus { border-color: var(--accent); }

.lock-error { margin: 0 0 12px; font-size: 11.5px; line-height: 1.5; color: var(--danger); }

.lock-submit {
  width: 100%;
  height: 38px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: #191300;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.lock-submit:hover:not(:disabled) { filter: brightness(1.06); }
.lock-submit:disabled { opacity: .55; cursor: default; }

.lock-reset {
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dim);
  font-size: 11.5px;
  line-height: 1.6;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lock-reset:hover { color: var(--muted); }

.lock-note { margin-top: 22px; font-size: 11px; line-height: 1.7; color: #55556a; }

/* shield notices inside the shell browser sit in the layout, not over it */
.shell-browser .browser-notice {
  position: static;
  flex: 0 0 auto;
  border-top: 1px solid var(--notice-line);
  border-bottom: 1px solid var(--notice-line);
}
.shell-browser .browser-notice[data-kind="danger"] {
  background: rgba(255, 107, 107, .14);
  border-top-color: rgba(255, 107, 107, .38);
  color: var(--danger);
}
.shell-browser .browser-notice[data-kind="ok"] {
  background: rgba(126, 224, 192, .12);
  border-top-color: rgba(126, 224, 192, .3);
  color: var(--accent-2);
}

/* ------------------------------------------------------------------ */
/* shield button + popover                                            */
/* ------------------------------------------------------------------ */

.browser-bar { position: relative; }

.shield-btn {
  position: relative;
  gap: 0;
  width: 34px;
}

.shield-btn .shield-count {
  position: absolute;
  right: 1px;
  bottom: 0;
  min-width: 13px;
  padding: 0 3px;
  border-radius: 6px;
  background: var(--field);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 8.5px;
  line-height: 12px;
  text-align: center;
}

.shield-btn.blocking { color: var(--accent-2); }
.shield-btn.blocking .shield-count {
  background: var(--accent-2-soft);
  color: var(--accent-2);
}
.shield-btn.paused { color: var(--accent); }
.shield-btn.paused .shield-count {
  background: var(--notice-bg);
  color: var(--accent);
}

.shield-pop {
  position: absolute;
  top: calc(100% - 2px);
  right: 8px;
  z-index: 40;
  width: 258px;
  padding: 11px 12px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--menu-glass);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  font-size: 11.5px;
}
.shield-pop[hidden] { display: none !important; }

.shield-pop-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 7px;
}
.shield-pop-mark {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--accent);
}
.shield-pop-site {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 10px;
}

.shield-pop-total { color: var(--text); font-size: 12.5px; }

.shield-pop-list {
  margin: 8px 0 2px;
  padding: 6px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--field);
}
.shield-pop-row {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.7;
  color: var(--muted);
}
.shield-pop-host {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shield-pop-hits { color: var(--dim); }

.shield-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 9px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.shield-toggle:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.shield-toggle[aria-checked="true"] { color: var(--accent); border-color: rgba(242, 193, 78, .35); }

.shield-knob {
  flex: 0 0 auto;
  width: 22px;
  height: 12px;
  border-radius: 7px;
  background: #2a2a35;
  position: relative;
}
.shield-knob::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .12s ease;
}
.shield-toggle[aria-checked="true"] .shield-knob { background: rgba(242, 193, 78, .3); }
.shield-toggle[aria-checked="true"] .shield-knob::after { transform: translateX(10px); background: var(--accent); }

.shield-pop-foot {
  margin-top: 9px;
  color: var(--dim);
  font-size: 10px;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ */
/* chat launcher (web build only)                                     */
/* ------------------------------------------------------------------ */

.chat-info { padding: 20px 22px; }
.chat-info h2 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
}
.chat-info p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.chat-info-why { color: var(--dim) !important; }
.chat-info-hint {
  margin-top: 16px !important;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: #0d0d13;
  color: var(--accent) !important;
  font-family: var(--mono);
  font-size: 10.5px !important;
}

/* the shared demo's browser window: an explanation, not a broken toolbar */
.hosted { padding: 22px 24px; }
.hosted h2 {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 600;
}
.hosted p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.hosted-list {
  margin-top: 16px !important;
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: #0d0d13;
  color: var(--accent) !important;
  font-family: var(--mono);
  font-size: 10.5px !important;
}

/* "update ready" pill: a deploy landed while this tab was open */
.update {
  margin-right: 12px;
  padding: 4px 11px;
  border: 1px solid rgba(242, 193, 78, 0.5);
  border-radius: 999px;
  background: rgba(242, 193, 78, 0.08);
  color: var(--accent);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.update:hover {
  background: rgba(242, 193, 78, 0.18);
  border-color: var(--accent);
}

/* settings: the proxy panel */
.settings { padding: 22px 24px; height: 100%; overflow: auto; }
.settings h2 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
}
.settings p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.settings .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 18px 0 12px;
}
.settings .field span {
  color: var(--dim);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.settings input {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #0d0d13;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  outline: none;
}
.settings input:focus { border-color: var(--accent); }
.settings-row { display: flex; gap: 10px; }
.settings button {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 11.5px;
  cursor: pointer;
}
.settings button:hover { border-color: var(--accent); }
.settings .settings-apply {
  border-color: rgba(242, 193, 78, 0.45);
  background: rgba(242, 193, 78, 0.1);
  color: var(--accent);
}
.settings-status {
  margin-top: 16px !important;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: #0d0d13;
  color: var(--muted) !important;
  font-family: var(--mono);
  font-size: 10.5px !important;
}
.settings-status[data-state="proxied"] { color: var(--accent-2) !important; }
.settings-status[data-state="error"] { color: var(--danger) !important; }
/* the reachability line sits directly under the setting it describes */
#settings-route { margin-top: 8px !important; }
#settings-fallback { margin-top: 8px !important; }
.settings-note { color: var(--dim) !important; font-size: 10.5px !important; }

/* ------------------------------------------------------------------ */
/* desktop environments                                               */
/* ------------------------------------------------------------------ */
/* Every rule below is a structural difference between the built-in looks.
   The colours arrive as custom properties from app.js; this is the rest. */

/* translucent windows: the panel colour at partial alpha, blurred behind */
[data-glass="on"] .window {
  background: var(--panel-glass);
  backdrop-filter: blur(var(--blur)) saturate(115%);
}
[data-glass="on"] .titlebar { background: var(--titlebar-glass); }

/* Hyprland-style focus: the accent, drawn as a ring with a halo */
[data-glow="on"] .window.focused {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent),
              0 0 calc(26px * var(--shadow-scale)) var(--accent-glow),
              0 calc(20px * var(--shadow-scale)) calc(60px * var(--shadow-scale)) rgba(0,0,0,.6);
}

/* wallpapers */
[data-wallpaper="plain"] .desktop { background: var(--bg); }
[data-wallpaper="plain"] .desktop::before,
[data-wallpaper="plain"] .desktop::after,
[data-wallpaper="dusk"] .desktop::before { display: none; }

[data-wallpaper="dusk"] .desktop {
  background: linear-gradient(180deg, #12121c 0%, var(--bg) 58%, #1a1420 100%);
}
[data-wallpaper="dusk"] .desktop::after { opacity: .6; }

[data-wallpaper="aurora"] .desktop::after {
  opacity: 1;
  animation-duration: 30s, 14s;
}

/* taskbars */
[data-taskbar="floating"] .taskbar {
  inset: auto 10px 10px 10px;
  height: 42px;
  border: var(--border-w) solid var(--line);
  border-radius: calc(var(--radius) - 2px);
  box-shadow: 0 calc(14px * var(--shadow-scale)) calc(34px * var(--shadow-scale)) rgba(0,0,0,.5);
}
[data-taskbar="floating"] .desktop { inset: 0 0 62px 0; }

[data-taskbar="minimal"] .taskbar {
  background: transparent;
  backdrop-filter: none;
  border-top: 0;
}

/* window buttons on the left, the way Hyprland and macOS-ish rices do it */
[data-buttons="left"] .titlebar { padding: 0 14px 0 8px; }
[data-buttons="left"] .title-actions { order: -1; margin-left: 0; margin-right: auto; }
[data-buttons="left"] .title-text { order: 0; }

/* an explicit switch, separate from the OS-level reduced-motion query */
[data-motion="off"] *,
[data-motion="off"] *::before,
[data-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
}

/* ------------------------------------------------------------------ */
/* appearance panel                                                   */
/* ------------------------------------------------------------------ */

.appearance { padding: 22px 24px 28px; height: 100%; overflow: auto; }
.appearance h2 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.appearance-lede { margin: 0 0 18px; color: var(--muted); font-size: 12px; line-height: 1.7; }

.preset-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }

.preset {
  flex: 1 1 148px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 11px;
  border: var(--border-w) solid var(--line);
  border-radius: calc(var(--radius) - 2px);
  background: var(--panel-2);
  text-align: left;
  cursor: pointer;
}
.preset:hover { border-color: var(--line-focus); }
.preset.active { border-color: var(--accent); }
.preset-swatch { display: block; height: 22px; border-radius: 5px; }
.preset-name { font-size: 12.5px; color: var(--text); }
.preset-blurb { font-size: 10.5px; color: var(--dim); line-height: 1.4; }

.appearance-group { margin-top: 20px; }
.appearance-group h3 {
  margin: 0 0 8px;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 500;
}

.appearance-list {
  border: var(--border-w) solid var(--line-soft);
  border-radius: 9px;
  overflow: hidden;
  background: rgba(0, 0, 0, .18);
}

.appearance-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
}
.appearance-row:last-child { border-bottom: 0; }
.appearance-label { flex: 1 1 auto; color: var(--text); }

.appearance-slider { display: flex; align-items: center; gap: 9px; flex: 0 0 176px; }
.appearance-range { flex: 1 1 auto; min-width: 0; height: 16px; accent-color: var(--accent); }
.appearance-value {
  flex: 0 0 44px;
  text-align: right;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}

.appearance-color {
  width: 38px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: none;
  cursor: pointer;
}

.appearance-select {
  max-width: 152px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 11.5px;
  outline: none;
  cursor: pointer;
}
.appearance-select:focus { border-color: var(--accent); }

.appearance-toggle {
  min-width: 54px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}
.appearance-toggle[aria-checked="true"] { border-color: var(--accent); color: var(--accent); }

.appearance-io {
  display: block;
  width: 100%;
  min-height: 108px;
  padding: 10px 11px;
  border: var(--border-w) solid var(--line-soft);
  border-radius: 9px;
  background: rgba(0, 0, 0, .24);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
}
.appearance-io:focus { border-color: var(--line-focus); }

.appearance-actions { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.appearance-actions button {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 11.5px;
  cursor: pointer;
}
.appearance-actions button:hover { border-color: var(--accent); color: var(--accent); }
.appearance-actions button.primary {
  border-color: var(--line-focus);
  background: rgba(255, 255, 255, .04);
  color: var(--accent);
}
.appearance-actions[data-error]::after {
  content: attr(data-error);
  color: var(--danger);
  font-size: 11px;
}

/* ------------------------------------------------------------------ */
/* file manager                                                       */
/* ------------------------------------------------------------------ */

.files { display: flex; flex-direction: column; height: 100%; background: var(--well); color: var(--text); }

.files-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 8px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line-soft);
  flex: 0 0 auto;
}

.files-btn {
  display: grid;
  place-items: center;
  width: 27px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.files-btn:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.files-btn:disabled { opacity: .28; cursor: default; }
.files-btn:focus-visible { outline: 1px solid var(--accent); }

.files-path {
  flex: 1 1 auto;
  min-width: 0;
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 24px;
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  direction: rtl;
  text-align: left;
}

.files-search {
  flex: 0 0 118px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  color: var(--text);
  font-family: var(--mono);
  font-size: 10.5px;
  outline: none;
}
.files-search:focus { border-color: var(--accent); }

.files-body { flex: 1 1 auto; display: flex; min-height: 0; }
.files-list { flex: 1 1 auto; min-width: 0; overflow: auto; }

.files-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line-soft);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}

.files-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
  cursor: default;
  outline: none;
}
.files-row:hover { background: var(--hover); }
.files-row.selected { background: var(--accent-2-soft); }
.files-row:focus-visible { box-shadow: inset 0 0 0 1px var(--line-focus); }

.files-row .f-kind { flex: 0 0 12px; font-family: var(--mono); font-size: 10px; color: var(--accent); }
.files-row .f-name { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.files-row .f-size { flex: 0 0 76px; text-align: right; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.files-row .f-when { flex: 0 0 120px; text-align: right; font-family: var(--mono); font-size: 10px; color: var(--dim); }
.files-head .f-name { flex: 1 1 auto; }
.files-head .f-size { flex: 0 0 76px; text-align: right; }
.files-head .f-when { flex: 0 0 120px; text-align: right; }

.files-side {
  flex: 0 0 236px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--line-soft);
  background: var(--well-2);
}

.files-preview {
  flex: 1 1 auto;
  overflow: auto;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.65;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
}

.files-storage {
  flex: 0 0 auto;
  padding: 9px 12px 10px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--dim);
}

.files-meter { height: 5px; border-radius: 99px; background: var(--hover); overflow: hidden; margin-bottom: 6px; }
.files-meter i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .3s ease; }

.files-status {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 12px;
  border-top: 1px solid var(--line-soft);
  background: var(--panel);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
}
.files-status span[data-state="error"] { color: var(--danger); }

.files-editor {
  display: flex;
  gap: 5px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel);
}
.files-editor[hidden] { display: none !important; }
.files-editor input {
  flex: 1 1 auto;
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--field);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11.5px;
  outline: none;
}

.files-empty { padding: 28px 16px; text-align: center; color: var(--dim); font-size: 12px; }

.files-notice { padding: 22px 24px; }
.files-notice h2 { margin: 0 0 10px; font-size: 17px; font-weight: 600; }
.files-notice p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }

/* ------------------------------------------------------------------ */
/* system monitor                                                     */
/* ------------------------------------------------------------------ */

.monitor { display: flex; flex-direction: column; height: 100%; background: var(--well); color: var(--text); overflow: auto; }

.mon-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  flex: 0 0 auto;
}
.mon-clock { color: var(--dim); }

.mon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px 4px;
}

.mon-card {
  padding: 11px 12px 12px;
  border: var(--border-w) solid var(--line-soft);
  border-radius: calc(var(--radius) - 2px);
  background: var(--panel);
  min-width: 0;
}
.mon-card.mon-wide { grid-column: 1 / -1; }

.mon-card h3 {
  margin: 0 0 8px;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 500;
}

.mon-big {
  font-family: var(--mono);
  font-size: 26px;
  line-height: 1.1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.mon-sub { margin-top: 4px; font-size: 10px; color: var(--dim); font-family: var(--mono); line-height: 1.5; }

.mon-cores { display: flex; gap: 3px; margin-top: 9px; flex-wrap: wrap; }
.mon-core {
  flex: 1 1 12px;
  min-width: 6px;
  height: 22px;
  border-radius: 3px;
  background: var(--hover);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.mon-core i {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  transition: width .35s ease;
}

.mon-bar { height: 6px; border-radius: 99px; background: var(--hover); overflow: hidden; margin-top: 8px; }
.mon-bar i { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .35s ease; }

.mon-list { display: flex; flex-direction: column; gap: 2px; }
.mon-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
}
.mon-row:last-child { border-bottom: 0; }
.mon-row-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mon-row-value { color: var(--dim); white-space: nowrap; }

.mon-net { display: flex; flex-direction: column; gap: 3px; }
.mon-net-row { font-family: var(--mono); font-size: 13px; color: var(--accent-2); font-variant-numeric: tabular-nums; }

.mon-foot {
  padding: 4px 14px 12px;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--dim);
}

@media (max-width: 560px) {
  .mon-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* text editor                                                        */
/* ------------------------------------------------------------------ */

.editor { display: flex; flex-direction: column; height: 100%; background: var(--well); }

.editor-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line-soft);
  flex: 0 0 auto;
}

.editor-btn {
  height: 26px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font-size: 11.5px;
  cursor: pointer;
}
.editor-btn:hover { border-color: var(--accent); color: var(--accent); }

.editor-path {
  flex: 1 1 auto;
  min-width: 0;
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  color: var(--text);
  font-family: var(--mono);
  font-size: 10.5px;
  outline: none;
}
.editor-path:focus { border-color: var(--accent); }

.editor-area {
  flex: 1 1 auto;
  min-height: 0;
  resize: none;
  border: 0;
  outline: none;
  padding: 14px 16px;
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
}

.editor-status {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px;
  border-top: 1px solid var(--line-soft);
  background: var(--panel);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
}
.editor-status span[data-state="error"] { color: var(--danger); }

/* ------------------------------------------------------------------ */
/* image viewer                                                       */
/* ------------------------------------------------------------------ */

.images { display: flex; flex-direction: column; height: 100%; background: var(--well); }

.image-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  overflow: auto;
  background: repeating-conic-gradient(rgba(255, 255, 255, .025) 0% 25%, transparent 0% 50%) 50% / 18px 18px;
}

.image-shot { max-width: 100%; max-height: 100%; display: block; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.image-shot[hidden] { display: none !important; }
.image-empty { max-width: 360px; text-align: center; color: var(--dim); font-size: 11.5px; line-height: 1.7; }
.image-empty[hidden] { display: none !important; }

.image-meta {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-top: 1px solid var(--line-soft);
  background: var(--panel);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
}
.image-meta[data-state="error"] { color: var(--danger); }

/* ------------------------------------------------------------------ */
/* calculator                                                         */
/* ------------------------------------------------------------------ */

.calc { display: flex; flex-direction: column; height: 100%; padding: 12px; gap: 10px; background: var(--well); outline: none; }

.calc-display {
  flex: 0 0 auto;
  padding: 14px 12px;
  border: 1px solid var(--line-soft);
  border-radius: calc(var(--radius) - 2px);
  background: var(--panel);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 26px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calc-grid { flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 6px; }

.calc-key {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  cursor: pointer;
}
.calc-key:hover { border-color: var(--line-focus); }
.calc-key.num { background: var(--panel); }
.calc-key.eq { border-color: var(--line-focus); color: var(--accent); }

/* --- account chip: only ever visible on a hosted copy ------------------ */
.taskbar .account {
  padding: 3px 9px;
  border: 1px solid #2a2a35;
  border-radius: 6px;
  background: #14141a;
  color: #d8d8e2;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.taskbar .account:hover { border-color: #3a3a48; color: #fff; }
.taskbar .account.signin { border-color: #3b5b3b; color: #9fe0a8; }

.account-panel {
  position: fixed;
  right: 14px;
  bottom: 54px;
  z-index: 60;
  width: 292px;
  padding: 15px 16px 14px;
  border: 1px solid #2a2a35;
  border-radius: 12px;
  background: #14141a;
  color: #e9e9f0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  font: 13px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.account-panel[hidden] { display: none; }
.account-name { margin: 0 0 6px; font-size: 14px; }
.account-note { margin: 0 0 10px; color: #9a9aac; overflow-wrap: anywhere; }
.account-row { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; }
.account-row input { accent-color: #f2c14e; }
.account-fine { margin: 0 0 12px; font-size: 11.5px; line-height: 1.7; color: #6f6f80; }
.account-status { margin: 0 0 10px; min-height: 1em; font-size: 12px; color: #f2c14e; }
.account-btn {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #2a2a35;
  border-radius: 8px;
  background: #1a1a22;
  color: #e9e9f0;
  font: inherit;
  font-size: 12.5px;
  text-decoration: none;
  cursor: pointer;
}
.account-btn.primary { border-color: #f2c14e; color: #f2c14e; }

/* --- mail ------------------------------------------------------------- */
.mail {
  position: relative;
  display: grid;
  grid-template-columns: 132px 250px 1fr;
  height: 100%;
  min-height: 320px;
  font-size: 13px;
}
.mail-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 10px;
  border-right: 1px solid #23232e;
  background: #101015;
}
.mail-who { margin: 0 0 6px; font-size: 11.5px; color: #7d7d90; overflow-wrap: anywhere; }
.mail-folder {
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: #c9c9d6;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mail-folder:hover { background: #191922; }
.mail-folder.active { background: #1d1d27; border-color: #2f2f3d; color: #fff; }
.mail-btn {
  padding: 7px 10px;
  border: 1px solid #2a2a35;
  border-radius: 7px;
  background: #1a1a22;
  color: #e9e9f0;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.mail-btn.primary { border-color: #f2c14e; color: #f2c14e; }
.mail-btn[disabled] { opacity: 0.6; cursor: default; }
.mail-fine { margin: 8px 0 0; font-size: 10.5px; line-height: 1.6; color: #5f5f70; }
.mail-middle { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid #23232e; }
.mail-bar { display: flex; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #23232e; }
.mail-list { flex: 1; overflow: auto; }
.mail-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-bottom: 1px solid #1c1c26;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mail-row:hover { background: #15151d; }
.mail-row.unread .mail-row-subject { color: #fff; font-weight: 600; }
.mail-row-from { font-size: 11.5px; color: #8a8a9c; }
.mail-row-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #c9c9d6; }
.mail-row-when { grid-row: 1 / span 2; grid-column: 2; font-size: 10.5px; color: #5f5f70; }
.mail-empty { margin: 14px; font-size: 12px; color: #6f6f80; }
.mail-read { padding: 14px 16px; overflow: auto; }
.mail-subject { margin: 0 0 4px; font-size: 15px; }
.mail-meta { margin: 0 0 12px; font-size: 11px; color: #7d7d90; }
.mail-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12.5px/1.65 ui-monospace, monospace; color: #d6d6e2; }
.mail-compose { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(8, 8, 11, 0.86); }
.mail-compose form {
  display: grid;
  gap: 8px;
  width: min(520px, 100%);
  padding: 16px;
  border: 1px solid #2a2a35;
  border-radius: 12px;
  background: #12121a;
}
.mail-compose-title { margin: 0 0 4px; font-size: 14px; }
.mail-compose input,
.mail-compose textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #2a2a35;
  border-radius: 7px;
  background: #0c0c11;
  color: #e9e9f0;
  font: inherit;
  font-size: 12.5px;
}
.mail-compose textarea { resize: vertical; }
.mail-compose-row { display: flex; gap: 8px; }
.mail-status { margin: 0; min-height: 1em; font-size: 11.5px; color: #f2c14e; }

.mail-address { display: flex; gap: 6px; margin-top: 8px; }
.mail-address input {
  min-width: 0;
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #2a2a35;
  border-radius: 7px;
  background: #0c0c11;
  color: #e9e9f0;
  font: inherit;
  font-size: 11.5px;
}

/* a desktop key is long and pasted by hand: it must be readable and selectable */
.account-key {
  display: block;
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid #2a2a35;
  border-radius: 6px;
  background: #0a0a0e;
  color: #c9c9d6;
  font: 11px/1.5 ui-monospace, monospace;
  word-break: break-all;
  user-select: all;
}