/* Unimar Appstore — base: design tokens, wallpaper, typography.
   Visual language: EtherdeckOS 2.0 "Morphia" skeuomorphic glass (docs/design.md). */

:root {
  color-scheme: light;

  /* Palette from docs/design.md */
  --glass-tint: rgba(46, 110, 170, 0.42);
  --glass-tint-dark: rgba(16, 28, 44, 0.62);
  --glass-highlight: linear-gradient(to bottom, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0) 50.5%);
  --glass-border-in: rgba(255, 255, 255, 0.45);
  --caption-gloss: linear-gradient(to bottom, rgba(255,255,255,.55) 0, rgba(255,255,255,.14) 18px, rgba(255,255,255,0) 19px);
  --glass-border-out: rgba(0, 0, 0, 0.35);
  --accent: #2a8ad4;
  --accent-glow: #7fd0ff;
  --accent-2: #1fb5a6;
  --surface: #f3f6fa;
  --surface-2: #e6edf5;
  --text: #1a2330;
  --text-dim: #5a6878;
  --danger: #d64545;
  --warn: #e0a020;

  --r-win: 8px;
  --r-card: 6px;
  --r-btn: 4px;
  --r-input: 3px;

  --font: "Noto Sans", system-ui, sans-serif;
  --mono: "Noto Sans Mono", ui-monospace, "DejaVu Sans Mono", monospace;

  --topbar-h: 58px;
  --gutter: 20px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Semantic tokens — light */
  --wall:
    radial-gradient(1100px 620px at 8% -8%, rgba(127, 208, 255, .70), transparent 62%),
    radial-gradient(900px 640px at 104% 4%, rgba(31, 181, 166, .32), transparent 60%),
    radial-gradient(1000px 700px at 55% 118%, rgba(42, 138, 212, .55), transparent 62%),
    linear-gradient(162deg, #e2f1fc 0%, #b4dbf5 42%, #78b7e4 100%);
  --wall-base: #9fcbec;
  --panel: rgba(255, 255, 255, .55);
  --panel-strong: rgba(255, 255, 255, .80);
  --panel-edge-in: rgba(255, 255, 255, .70);
  --panel-edge-out: rgba(18, 52, 92, .24);
  --panel-shadow: 0 14px 34px -16px rgba(8, 40, 78, .50), 0 2px 6px rgba(8, 40, 78, .10);
  --panel-gloss: linear-gradient(to bottom, rgba(255,255,255,.42) 0%, rgba(255,255,255,.08) 120px, rgba(255,255,255,0) 121px);
  --tile: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(246,250,253,.88) 50%, rgba(234,242,249,.86) 100%);
  --tile-edge: rgba(110, 145, 180, .34);
  --tile-hover-edge: rgba(52, 140, 214, .70);
  --bar: var(--glass-tint);
  --bar-text: #0b1f33;
  --bar-glow: 0 0 9px rgba(255,255,255,.95), 0 0 2px rgba(255,255,255,.9);
  --btn-bg: linear-gradient(#fdfefe, #e3ebf3);
  --btn-edge: #8fa3b8;
  --btn-text: var(--text);
  --btn-hover-bg: linear-gradient(#eaf6fd, #bfe4fb);
  --btn-hover-edge: #3c7fb1;
  --btn-active-bg: linear-gradient(#c4e5f6, #98d1ef);
  --input-bg: rgba(255, 255, 255, .94);
  --input-edge: #93a8bd;
  --sel-bg: linear-gradient(#eaf6fd, #c9e8fb);
  --sel-edge: #7dbfe9;
  --hover-bg: linear-gradient(rgba(240,249,255,.85), rgba(218,239,252,.85));
  --hover-edge: #b4d5ee;
  --link: #1767ad;
  --chip-bg: rgba(42, 138, 212, .10);
  --chip-edge: rgba(42, 138, 212, .28);
  --divider: rgba(30, 60, 95, .13);
  --skeleton: rgba(140, 168, 196, .26);
  --skeleton-shine: rgba(255, 255, 255, .65);
  --overlay: rgba(8, 22, 40, .45);
  --star: #f2a516;
}

/* Dark: same glass language, deep "ether" night wallpaper.
   (Duplicated for the explicit override because light-dark() is too new for Qt WebEngine.) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --text: #e8f1fa;
    --text-dim: #9cb0c6;
    --wall:
      radial-gradient(1100px 620px at 8% -8%, rgba(42, 138, 212, .45), transparent 62%),
      radial-gradient(900px 640px at 104% 4%, rgba(31, 181, 166, .28), transparent 60%),
      radial-gradient(1000px 700px at 55% 120%, rgba(36, 110, 190, .50), transparent 62%),
      linear-gradient(162deg, #0a1626 0%, #0d2440 48%, #10385c 100%);
    --wall-base: #0c1f36;
    --panel: rgba(14, 28, 46, .58);
    --panel-strong: rgba(16, 32, 52, .86);
    --panel-edge-in: rgba(255, 255, 255, .13);
    --panel-edge-out: rgba(0, 0, 0, .55);
    --panel-shadow: 0 16px 38px -14px rgba(0, 0, 0, .75), 0 2px 6px rgba(0, 0, 0, .35);
    --panel-gloss: linear-gradient(to bottom, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 120px, rgba(255,255,255,0) 121px);
    --tile: linear-gradient(180deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.04) 100%);
    --tile-edge: rgba(255, 255, 255, .12);
    --tile-hover-edge: rgba(127, 208, 255, .65);
    --bar: var(--glass-tint-dark);
    --bar-text: #f1f7ff;
    --bar-glow: 0 1px 2px rgba(0,0,0,.65), 0 0 12px rgba(0,0,0,.35);
    --btn-bg: linear-gradient(rgba(255,255,255,.17), rgba(255,255,255,.05));
    --btn-edge: rgba(255, 255, 255, .26);
    --btn-text: #eef5fc;
    --btn-hover-bg: linear-gradient(rgba(127,208,255,.34), rgba(42,138,212,.22));
    --btn-hover-edge: rgba(127, 208, 255, .75);
    --btn-active-bg: linear-gradient(rgba(42,138,212,.38), rgba(42,138,212,.55));
    --input-bg: rgba(4, 12, 24, .55);
    --input-edge: rgba(255, 255, 255, .22);
    --sel-bg: linear-gradient(rgba(127,208,255,.30), rgba(42,138,212,.26));
    --sel-edge: rgba(127, 208, 255, .55);
    --hover-bg: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.05));
    --hover-edge: rgba(255, 255, 255, .16);
    --link: #8ccfff;
    --chip-bg: rgba(127, 208, 255, .12);
    --chip-edge: rgba(127, 208, 255, .30);
    --divider: rgba(255, 255, 255, .10);
    --skeleton: rgba(255, 255, 255, .08);
    --skeleton-shine: rgba(255, 255, 255, .16);
    --overlay: rgba(0, 6, 14, .60);
    --star: #ffc23d;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --text: #e8f1fa;
  --text-dim: #9cb0c6;
  --wall:
    radial-gradient(1100px 620px at 8% -8%, rgba(42, 138, 212, .45), transparent 62%),
    radial-gradient(900px 640px at 104% 4%, rgba(31, 181, 166, .28), transparent 60%),
    radial-gradient(1000px 700px at 55% 120%, rgba(36, 110, 190, .50), transparent 62%),
    linear-gradient(162deg, #0a1626 0%, #0d2440 48%, #10385c 100%);
  --wall-base: #0c1f36;
  --panel: rgba(14, 28, 46, .58);
  --panel-strong: rgba(16, 32, 52, .86);
  --panel-edge-in: rgba(255, 255, 255, .13);
  --panel-edge-out: rgba(0, 0, 0, .55);
  --panel-shadow: 0 16px 38px -14px rgba(0, 0, 0, .75), 0 2px 6px rgba(0, 0, 0, .35);
  --panel-gloss: linear-gradient(to bottom, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 120px, rgba(255,255,255,0) 121px);
  --tile: linear-gradient(180deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.04) 100%);
  --tile-edge: rgba(255, 255, 255, .12);
  --tile-hover-edge: rgba(127, 208, 255, .65);
  --bar: var(--glass-tint-dark);
  --bar-text: #f1f7ff;
  --bar-glow: 0 1px 2px rgba(0,0,0,.65), 0 0 12px rgba(0,0,0,.35);
  --btn-bg: linear-gradient(rgba(255,255,255,.17), rgba(255,255,255,.05));
  --btn-edge: rgba(255, 255, 255, .26);
  --btn-text: #eef5fc;
  --btn-hover-bg: linear-gradient(rgba(127,208,255,.34), rgba(42,138,212,.22));
  --btn-hover-edge: rgba(127, 208, 255, .75);
  --btn-active-bg: linear-gradient(rgba(42,138,212,.38), rgba(42,138,212,.55));
  --input-bg: rgba(4, 12, 24, .55);
  --input-edge: rgba(255, 255, 255, .22);
  --sel-bg: linear-gradient(rgba(127,208,255,.30), rgba(42,138,212,.26));
  --sel-edge: rgba(127, 208, 255, .55);
  --hover-bg: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.05));
  --hover-edge: rgba(255, 255, 255, .16);
  --link: #8ccfff;
  --chip-bg: rgba(127, 208, 255, .12);
  --chip-edge: rgba(127, 208, 255, .30);
  --divider: rgba(255, 255, 255, .10);
  --skeleton: rgba(255, 255, 255, .08);
  --skeleton-shine: rgba(255, 255, 255, .16);
  --overlay: rgba(0, 6, 14, .60);
  --star: #ffc23d;
}

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

html {
  background: var(--wall-base);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-h) + 12px);
}

body {
  margin: 0;
  min-height: 100vh;
  font: 13px/1.5 var(--font);
  color: var(--text);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Wallpaper lives in a fixed layer so it never repaints on scroll. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("../img/backdrop.svg"), var(--wall);
  background-size: cover;
  background-position: center 70%;
  background-repeat: no-repeat;
  pointer-events: none;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; }
h1 { font-size: 26px; letter-spacing: -.01em; }
h2 { font-size: 17px; }
h3 { font-size: 14px; }
p { margin: 0 0 .8em; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
code, kbd, .mono { font-family: var(--mono); font-size: 12px; }
hr { border: 0; border-top: 1px solid var(--divider); margin: 16px 0; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent-glow);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(127, 208, 255, .35);
  border-radius: 3px;
}

::selection { background: rgba(42, 138, 212, .35); }

[hidden] { display: none !important; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 100;
  padding: 8px 14px;
  border-radius: var(--r-btn);
  background: var(--accent);
  color: #fff;
}
.skip-link:focus { top: 10px; }

.dim { color: var(--text-dim); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }
.row { display: flex; align-items: center; gap: 8px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.stack > * + * { margin-top: var(--gutter); }

/* Icons */
.i {
  width: 16px; height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -3px;
}
.i-fill { fill: currentColor; stroke: none; }
.i-lg { width: 20px; height: 20px; }
.i-xl { width: 28px; height: 28px; }

/* Desktop-only / browser-only blocks */
html:not(.is-desktop) .desktop-only { display: none !important; }
html.is-desktop .browser-only { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}