/* ============================================================
   ECHO OS — Design tokens
   Schimbă aici culorile / fonturile / colțurile și tot OS-ul
   se schimbă instant. Asta e "panoul tău de design".
   ============================================================ */
:root{
  /* Identitate Echo */
  --accent-1:#2DE2E6;          /* cyan */
  --accent-2:#7C5CFF;          /* violet */
  --accent: var(--accent-1);

  /* Fundal */
  --bg-0:#0B1022;              /* cel mai închis */
  --bg-1:#161F3D;
  --bg-2:#1E2A52;

  /* Suprafețe (ferestre, dock) */
  --surface: rgba(20,28,56,.72);
  --surface-solid:#141C38;
  --surface-border: rgba(45,226,230,.18);
  --surface-blur: 22px;

  /* Text */
  --text:#EAF1FF;
  --text-dim:#9BA8CC;

  /* Formă */
  --radius: 16px;
  --radius-sm: 10px;
  --dock-radius: 22px;

  /* Font */
  --font: 'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --mono: ui-monospace,'Cascadia Code','Consolas',monospace;

  /* Umbre / glow */
  --shadow: 0 24px 60px rgba(0,0,0,.55);
  --glow: 0 0 22px rgba(45,226,230,.45);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg-0);
  font-family:var(--font);color:var(--text);user-select:none;-webkit-user-select:none}
.accent{color:var(--accent-1)}
.hidden{display:none!important}

/* ================= Desktop ================= */
#desktop{position:fixed;inset:0}
#wallpaper{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ================= Top bar ================= */
#topbar{position:absolute;top:0;left:0;right:0;height:34px;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;font-size:13px;
  background:linear-gradient(to bottom,rgba(11,16,34,.55),transparent);
  backdrop-filter:blur(8px)}
.tb-logo{font-weight:700;letter-spacing:-.5px}
.tb-right{display:flex;align-items:center;gap:14px;color:var(--text-dim)}
#tb-net{color:var(--accent-1)}
#tb-clock{color:var(--text);font-variant-numeric:tabular-nums}

/* ================= Dock ================= */
#dock{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  z-index:60;display:flex;gap:10px;padding:10px 14px;
  background:var(--surface);border:1px solid var(--surface-border);
  border-radius:var(--dock-radius);backdrop-filter:blur(var(--surface-blur));
  box-shadow:var(--shadow)}
.dock-icon{width:52px;height:52px;border-radius:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:26px;
  background:linear-gradient(145deg,var(--bg-2),var(--bg-1));
  border:1px solid rgba(255,255,255,.06);
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s}
.dock-icon:hover{transform:translateY(-8px) scale(1.06);box-shadow:var(--glow)}
.dock-icon.active::after{content:"";position:absolute;margin-top:44px;
  width:5px;height:5px;border-radius:50%;background:var(--accent-1);box-shadow:var(--glow)}
.dock-icon svg{width:30px;height:30px}

/* ================= Windows ================= */
.win{position:absolute;min-width:340px;min-height:220px;
  background:var(--surface);border:1px solid var(--surface-border);
  border-radius:var(--radius);backdrop-filter:blur(var(--surface-blur));
  box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;
  animation:winIn .18s cubic-bezier(.2,.8,.2,1)}
@keyframes winIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.win.closing{animation:winOut .14s ease forwards}
@keyframes winOut{to{opacity:0;transform:scale(.96)}}
.win-titlebar{height:38px;flex:0 0 38px;display:flex;align-items:center;
  padding:0 12px;cursor:grab;
  background:linear-gradient(to bottom,rgba(255,255,255,.05),transparent);
  border-bottom:1px solid rgba(255,255,255,.05)}
.win-titlebar:active{cursor:grabbing}
.traffic{display:flex;gap:8px;margin-right:12px}
.traffic i{width:12px;height:12px;border-radius:50%;cursor:pointer;display:block}
.traffic .c{background:#ff5f57}.traffic .m{background:#febc2e}.traffic .g{background:#28c840}
.win-title{font-size:13px;font-weight:600;color:var(--text-dim)}
.win-body{flex:1;overflow:auto;padding:16px}

/* Scrollbars discrete */
.win-body::-webkit-scrollbar{width:10px;height:10px}
.win-body::-webkit-scrollbar-thumb{background:rgba(45,226,230,.25);border-radius:6px}

/* ================= App: Terminal ================= */
.term{font-family:var(--mono);font-size:13px;line-height:1.5;color:#cfeffd;
  background:rgba(0,0,0,.35);height:100%;border-radius:var(--radius-sm);padding:12px;overflow:auto}
.term .prompt{color:var(--accent-1)}
.term input{background:transparent;border:none;color:#cfeffd;font-family:var(--mono);
  font-size:13px;outline:none;width:70%}

/* ================= App: generic list / settings ================= */
.row{display:flex;align-items:center;justify-content:space-between;
  padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
.row:last-child{border-bottom:none}
.row .k{color:var(--text)}
.row .v{color:var(--text-dim)}
.btn{background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  color:#04121f;font-weight:700;border:none;border-radius:10px;
  padding:9px 16px;cursor:pointer;font-size:13px}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border:1px solid var(--surface-border);color:var(--text)}
.swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent}
.swatch.sel{border-color:#fff}

/* Toggle */
.toggle{width:44px;height:26px;border-radius:14px;background:rgba(255,255,255,.14);
  position:relative;cursor:pointer;transition:background .16s}
.toggle.on{background:linear-gradient(135deg,var(--accent-1),var(--accent-2))}
.toggle i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:left .16s}
.toggle.on i{left:21px}

/* ================= Overlays (boot / lock / setup) ================= */
.overlay{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 40%,var(--bg-1),var(--bg-0))}

/* Boot */
.boot-mark{width:120px;height:120px;margin-bottom:22px}
.boot-name{font-size:40px;font-weight:700;letter-spacing:-1px}
.boot-bar{margin-top:26px;width:180px;height:4px;border-radius:3px;
  background:rgba(255,255,255,.1);overflow:hidden}
.boot-bar i{display:block;height:100%;width:40%;border-radius:3px;
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
  animation:bootload 1.1s ease-in-out infinite}
@keyframes bootload{0%{margin-left:-40%}100%{margin-left:100%}}

/* Lock */
.lock-clock{font-size:88px;font-weight:200;letter-spacing:-2px;font-variant-numeric:tabular-nums}
.lock-date{color:var(--text-dim);font-size:18px;margin-bottom:60px}
.lock-user{display:flex;flex-direction:column;align-items:center;gap:12px}
.lock-avatar{width:76px;height:76px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:700;color:#04121f}
.lock-name{font-size:18px;font-weight:600}
#lock-pw{background:rgba(255,255,255,.08);border:1px solid var(--surface-border);
  border-radius:12px;padding:10px 16px;color:var(--text);text-align:center;
  outline:none;width:220px}
#lock-pw:focus{border-color:var(--accent-1);box-shadow:var(--glow)}
.lock-hint{font-size:12px;color:#ff8080;height:16px}

/* Setup */
.setup-card{width:min(560px,92vw);background:var(--surface);
  border:1px solid var(--surface-border);border-radius:24px;
  backdrop-filter:blur(var(--surface-blur));box-shadow:var(--shadow);
  padding:40px;text-align:center}
.setup-card h1{font-size:26px;margin-bottom:8px}
.setup-card p{color:var(--text-dim);margin-bottom:26px;font-size:14px}
.setup-card input{width:100%;background:rgba(255,255,255,.08);
  border:1px solid var(--surface-border);border-radius:12px;padding:12px 16px;
  color:var(--text);outline:none;font-size:15px;margin-bottom:16px}
.setup-card input:focus{border-color:var(--accent-1)}
.setup-swatches{display:flex;gap:14px;justify-content:center;margin:20px 0}
.setup-swatches .swatch{width:40px;height:40px}
.setup-nav{display:flex;gap:12px;justify-content:center;margin-top:20px}
.setup-dots{display:flex;gap:8px;justify-content:center;margin-top:24px}
.setup-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2)}
.setup-dots i.on{background:var(--accent-1);width:22px;border-radius:4px}