/* webe-portal — client panel. Stil „Clean SaaS" (luminos, modern). Self-hosted, CSP-safe. */
@font-face{font-family:'Manrope';src:url(/assets/fonts/manrope.woff2) format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'Space Mono';src:url(/assets/fonts/spacemono.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#f2f4f7; --raise:#eaedf2;
  --ink:#10131a; --ink-2:#454c59; --mut:#79808d; --line:#e6e8ee; --line-2:#dde1e8;
  --accent:#ef5a2a; --accent-2:#d8491c; --accent-soft:#fdeee7; --accent-ink:#bf3f1a;
  --ok:#15803d; --ok-soft:#e9f3ec; --warn:#b5740a; --warn-soft:#f8efdc; --bad:#d33b2a; --bad-soft:#fbeae7; --pend:#6b53e0; --pend-soft:#efecfd;
  --sans:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --mono:'Space Mono',ui-monospace,monospace;
  --r:9px; --r-lg:13px; --r-xl:18px; --sb:248px; --chat:360px;
  --sh-xs:0 1px 2px rgba(15,18,24,.05);
  --sh:0 1px 2px rgba(15,18,24,.04),0 2px 6px rgba(15,18,24,.05);
  --sh-sm:0 1px 2px rgba(15,18,24,.05),0 2px 5px rgba(15,18,24,.05);
  --sh-md:0 6px 18px -4px rgba(15,18,24,.12);
  --sh-lg:0 18px 40px -12px rgba(15,18,24,.22);
}
[data-theme=dark]{
  --bg:#0d0f14; --surface:#15181f; --surface-2:#1b1f28; --raise:#222734;
  --ink:#eef1f6; --ink-2:#b3bcc9; --mut:#7e8796; --line:#262b35; --line-2:#2f3542;
  --accent:#ff6a3d; --accent-2:#ff885c; --accent-soft:#2a1a12; --accent-ink:#ffa07a;
  --ok:#3fbf6c; --ok-soft:#13241a; --warn:#e0a23a; --warn-soft:#2a2110; --bad:#ff5d4d; --bad-soft:#2a1512; --pend:#9d86ff; --pend-soft:#1c1830;
  --sh-xs:0 1px 2px rgba(0,0,0,.4);
  --sh:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
  --sh-md:0 8px 22px -6px rgba(0,0,0,.55);
  --sh-lg:0 20px 44px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:14.5px}
a{color:inherit;text-decoration:none}
svg{display:block}
h1,h2,h3,h4{font-weight:700;line-height:1.18;letter-spacing:-.012em;margin:0;color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;border:2px solid var(--bg)}
.grain{display:none}
.muted{color:var(--mut)}
.mono{font-family:var(--mono)}
.kick{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}

.brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:18px;letter-spacing:-.02em}
.brand__mark{display:grid;place-items:center}
.brand__txt{color:var(--ink)}
.brand--lg{font-size:21px}

/* buttons */
.btn{font-family:var(--sans);font-weight:600;font-size:13.5px;border:1px solid transparent;border-radius:var(--r);padding:9px 15px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:background .14s,border-color .14s,box-shadow .14s,transform .05s;background:var(--surface);color:var(--ink)}
.btn:active{transform:translateY(.5px)}
.btn--primary{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(59,109,255,.35)}
.btn--primary:hover{background:var(--accent-2)}
.btn--pine{background:var(--ok);color:#fff}
.btn--ghost{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{background:var(--surface-2);border-color:var(--mut)}
.btn--soft{background:var(--surface-2);color:var(--ink-2)}
.btn--soft:hover{background:var(--raise)}
.btn--block{width:100%;justify-content:center}
.btn--lg{padding:12px 20px;font-size:14.5px}
.btn--sm{padding:6px 11px;font-size:12.5px}
.btn--danger{color:var(--bad);background:var(--surface-2)}
.btn--danger:hover{background:var(--bad-soft)}
.btn--icon{padding:9px}
.iconbtn{border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r);width:38px;height:38px;display:grid;place-items:center;cursor:pointer;font-size:15px;color:var(--ink-2);transition:.14s;position:relative}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.iconbtn--sm{width:32px;height:32px;font-size:13px}

/* forms */
.form{display:grid;gap:13px;margin-top:16px}
.form label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2)}
.form input,.form select,.form textarea{font-family:var(--sans);font-size:14px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--surface);color:var(--ink);width:100%;transition:border .14s,box-shadow .14s}
.form textarea{resize:vertical;min-height:96px;line-height:1.5}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.form input::placeholder,.form textarea::placeholder{color:var(--mut)}
.form__hint{font-weight:400;font-size:11.5px;color:var(--mut);justify-self:start}
.form__err{background:var(--bad-soft);color:var(--bad);border-radius:var(--r);padding:9px 12px;font-size:13px;font-weight:600}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:13px}

/* ===== LOGIN ===== */
.login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;background:var(--bg)}
.login__card{width:min(400px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-md);padding:clamp(26px,4vw,38px)}
.login__card .kick{margin:18px 0 8px}
.login__card h1{font-size:26px;font-weight:800}
.login__card h1 em{font-style:normal;color:var(--accent)}
.login__sub{color:var(--mut);margin-top:8px;font-size:14px}
.login__foot{margin-top:18px;font-size:13.5px;color:var(--mut);text-align:center}
.login__foot a{color:var(--accent);font-weight:600}
.login__legal{font-size:11.5px;color:var(--mut)}

/* ===== APP SHELL (3 coloane) ===== */
.app{display:grid;grid-template-columns:var(--sb) minmax(0,1fr) var(--chat);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:3px;padding:18px 14px;background:var(--surface);border-right:1px solid var(--line)}
.sidebar>.brand{padding:6px 8px 16px}
.nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
.navgrp{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);padding:14px 11px 6px;display:block}
.nav .navgrp:first-child{padding-top:2px}
.nav a{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:var(--r);color:var(--ink-2);font-weight:600;font-size:14px;transition:background .13s,color .13s}
.nav a .i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;opacity:.85}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a.is-active{background:var(--accent-soft);color:var(--accent-ink)}
.nav a.is-active .i{opacity:1}
.badge{margin-left:auto;background:var(--accent);color:#fff;font-size:11px;font-weight:700;min-width:19px;height:19px;border-radius:999px;display:grid;place-items:center;padding:0 6px}
.nav a.is-active .badge{background:var(--accent-ink)}
.sidebar__foot{display:grid;gap:5px;padding-top:12px;border-top:1px solid var(--line);margin-top:6px}
.newsite{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px;border:1px dashed var(--line-2);border-radius:var(--r);font-weight:600;font-size:13px;color:var(--ink-2);transition:.13s}
.newsite span{font-size:16px;color:var(--accent)}
.newsite:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.logout{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;border:0;background:transparent;color:var(--mut);font-family:var(--sans);font-weight:600;font-size:13px;cursor:pointer;border-radius:var(--r)}
.logout .i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.logout:hover{color:var(--bad);background:var(--bad-soft)}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:11px;padding:13px clamp(16px,2.5vw,28px);background:rgba(246,247,249,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
[data-theme=dark] .topbar{background:rgba(13,15,20,.8)}
.topbar__title{font-size:18px;font-weight:700;flex:1}
.hamb{flex-direction:column;gap:4px;display:none}
.hamb span{width:18px;height:2px;background:var(--ink);border-radius:2px}
.chatbtn{display:none}
.topbar__user{display:flex;align-items:center;gap:9px}
.userChip__name{font-size:13.5px;color:var(--ink-2);font-weight:600}
.userChip__av{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;text-transform:uppercase}
.content{padding:clamp(18px,2.5vw,30px);width:100%;max-width:1200px}

/* cards / panels */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-xs)}
.section-h{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:4px 0 16px;flex-wrap:wrap}
.section-h h3{font-size:18px;font-weight:700}
.section-h p{color:var(--mut);font-size:13.5px;margin-top:3px}

/* welcome */
.welcome{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.welcome__h{font-size:clamp(22px,2.6vw,28px);font-weight:800;margin-top:5px}
.welcome__h .wave{display:inline-block;animation:wave 2.6s ease-in-out 1}
@keyframes wave{0%,55%,100%{transform:rotate(0)}18%{transform:rotate(15deg)}38%{transform:rotate(-8deg)}}
.welcome__sub{color:var(--mut);margin-top:7px;font-size:14px;max-width:54ch}
.welcome__deco{display:none}

/* stat cards */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.stats--4{grid-template-columns:repeat(4,1fr)}
.stat{padding:18px;display:flex;flex-direction:column;gap:3px;transition:box-shadow .15s,transform .15s,border-color .15s}
.stat:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.stat__ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;margin-bottom:8px;background:var(--accent-soft);color:var(--accent-ink)}
.stat__ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.stat--tickets .stat__ic{background:var(--ok-soft);color:var(--ok)}
.stat--domains .stat__ic{background:var(--warn-soft);color:var(--warn)}
.stat__k{font-size:12.5px;color:var(--mut);font-weight:600}
.stat__v{font-size:32px;font-weight:800;line-height:1.05;letter-spacing:-.02em}
.stat__s{font-size:12.5px;color:var(--mut)}
.stat__sub{margin-top:7px;font-size:12.5px;color:var(--mut);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.stat__go{font-size:12px;font-weight:600;color:var(--accent);margin-top:9px;display:inline-flex;align-items:center;gap:5px;opacity:0;transform:translateX(-4px);transition:.16s}
.stat:hover .stat__go{opacity:1;transform:none}
.dotrow{display:inline-flex;gap:4px}
.dotrow i{width:8px;height:8px;border-radius:50%;background:var(--line-2);display:inline-block}
.dotrow i.on{background:var(--ok)}
.segbar{display:flex;height:7px;border-radius:999px;overflow:hidden;width:100%;margin-top:9px;background:var(--surface-2)}
.segbar i{height:100%;display:block}
.seg-deschis{background:var(--warn)} .seg-in_lucru{background:var(--pend)} .seg-raspuns{background:var(--ok)} .seg-inchis{background:var(--mut)}

/* status strip */
.statusbar{display:flex;align-items:center;gap:13px;padding:14px 18px;margin-bottom:20px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh-xs)}
.statusbar.is-ok{background:var(--ok-soft);border-color:transparent}
.statusbar.is-warn{background:var(--warn-soft);border-color:transparent}
.statusbar__ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:18px;background:var(--surface);flex:0 0 auto;box-shadow:var(--sh-xs)}
.statusbar b{font-size:15px;font-weight:700;display:block}
.statusbar p{color:var(--ink-2);font-size:13px;margin-top:1px}

/* quick actions */
.quick{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 24px}
.qchip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:8px 15px;font-weight:600;font-size:13px;cursor:pointer;transition:.13s;color:var(--ink-2);box-shadow:var(--sh-xs)}
.qchip:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.qchip b{color:var(--accent);font-size:15px;line-height:1}

@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.reveal{animation:rise .4s both}
.stats .stat:nth-child(1){animation:rise .4s both .03s}.stats .stat:nth-child(2){animation:rise .4s both .08s}
.stats .stat:nth-child(3){animation:rise .4s both .13s}.stats .stat:nth-child(4){animation:rise .4s both .18s}

/* website cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.wcard{padding:17px;display:flex;flex-direction:column;gap:11px;transition:box-shadow .15s,transform .15s}
.wcard:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.wcard__top{display:flex;align-items:center;gap:11px}
.wcard__ico{width:42px;height:42px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;font-size:20px;flex:0 0 auto}
.wcard__nm{font-size:16px;font-weight:700;line-height:1.15}
.wcard__ty{font-size:11.5px;color:var(--mut);font-weight:500}
.wcard__url{font-family:var(--mono);font-size:12px;color:var(--accent);word-break:break-all;font-weight:700}
.wcard__foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:11px;border-top:1px solid var(--line)}

/* pills */
.pill{font-size:11.5px;font-weight:600;letter-spacing:.01em;padding:3px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--ink-2)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill--ok{color:var(--ok);background:var(--ok-soft)} .pill--pend{color:var(--pend);background:var(--pend-soft)}
.pill--warn{color:var(--warn);background:var(--warn-soft)} .pill--bad{color:var(--bad);background:var(--bad-soft)} .pill--mut{color:var(--mut);background:var(--surface-2)}

/* lists / tables */
.list{display:grid;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--sh-xs)}
.row{display:grid;align-items:center;gap:14px;padding:13px 16px;background:var(--surface);cursor:pointer;transition:background .12s;border-top:1px solid var(--line)}
.row:first-child{border-top:0}.row:hover{background:var(--surface-2)}
.row--ticket{grid-template-columns:1fr auto auto auto}
.row--domain{grid-template-columns:1fr auto auto auto}
.row--invoice{grid-template-columns:1fr auto auto auto}
.row--client{grid-template-columns:1fr auto auto auto}
.row__main{min-width:0}
.row__t{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row__sub{font-size:12px;color:var(--mut);margin-top:2px;font-family:var(--mono)}
.row__meta{font-size:12.5px;color:var(--mut);text-align:right;white-space:nowrap}
.thead{display:grid;gap:14px;padding:0 16px 8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.amount{font-weight:700;font-size:14.5px}
.invstatus{display:flex;align-items:center;gap:9px;justify-content:flex-end}

/* timeline */
.timeline{display:grid;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--sh-xs)}
.tl{display:flex;gap:12px;align-items:center;padding:12px 16px;background:var(--surface);border-top:1px solid var(--line);cursor:pointer;transition:background .12s}
.tl:first-child{border-top:0}.tl:hover{background:var(--surface-2)}
.tl__dot{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;font-size:15px;background:var(--surface-2)}
.tl__main{flex:1;min-width:0}
.tl__t{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl__s{font-size:11.5px;color:var(--mut);font-family:var(--mono);margin-top:1px}

/* ticket thread */
.thread{display:grid;gap:12px;margin:16px 0}
.bubble{padding:13px 15px;border-radius:12px;max-width:84%;border:1px solid var(--line);background:var(--surface-2)}
.bubble__who{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin-bottom:5px}
.bubble--client{background:var(--surface-2);justify-self:end;border:0}
.bubble--suport{background:var(--accent-soft);justify-self:start;border:0}
.bubble p{font-size:14px;white-space:pre-wrap;word-wrap:break-word;line-height:1.5}

/* empty / skeleton */
.empty{text-align:center;padding:48px 20px;color:var(--mut)}
.empty__ic{font-size:38px;margin-bottom:12px;opacity:.85}
.empty h3{color:var(--ink);font-size:18px;margin-bottom:7px}
.skwrap{display:grid;gap:14px}
@keyframes shimmer{0%{background-position:-420px 0}100%{background-position:420px 0}}
.sk{background:linear-gradient(90deg,var(--surface-2) 25%,var(--raise) 50%,var(--surface-2) 75%);background-size:840px 100%;animation:shimmer 1.25s linear infinite;border-radius:var(--r);border:1px solid var(--line)}
.sk-lg{height:44px}.sk-card{height:140px;border-radius:var(--r-lg)}
.skstats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.skcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}

/* profile / account */
.prof{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:22px}
.prof__av{width:64px;height:64px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;font-size:26px;text-transform:uppercase}
.prof__nm{font-size:22px;font-weight:800}
.prof__dl{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;margin-top:18px;font-size:14px}
.prof__dl dt{color:var(--mut);font-size:12.5px;font-weight:600}
.acct{display:grid;gap:16px}
.acct__card{padding:22px}
.acct__card h4{font-size:16px;font-weight:700}
.acct__card .sub{font-size:13px;color:var(--mut);margin-top:3px;margin-bottom:2px}

/* servicii */
.svc{padding:18px;display:flex;flex-direction:column;gap:8px;transition:box-shadow .15s,transform .15s}
.svc:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.svc__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.svc__nm{font-size:17px;font-weight:700;line-height:1.15}
.svc__plan{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;background:var(--accent-soft);color:var(--accent-ink);padding:4px 10px;border-radius:999px;white-space:nowrap}
.svc__price{font-size:24px;font-weight:800}
.svc__price small{font-size:12.5px;color:var(--mut);font-weight:500}
.svc__meta{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink-2);margin-top:auto;padding-top:11px;border-top:1px solid var(--line)}
.svc__meta b{color:var(--ink);font-weight:600}

/* API */
.keylist{display:grid;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);margin-bottom:16px;box-shadow:var(--sh-xs)}
.keyrow{display:flex;align-items:center;gap:14px;padding:13px 16px;background:var(--surface);border-top:1px solid var(--line)}
.keyrow:first-child{border-top:0}
.keyrow__main{flex:1;min-width:0}
.keyrow__nm{font-weight:600;font-size:14px}
.keyrow__k{font-family:var(--mono);font-size:12px;color:var(--mut)}
.keyreveal{background:var(--ok-soft);border:1px solid transparent;border-radius:var(--r-lg);padding:14px 16px;margin:14px 0;box-shadow:var(--sh-xs)}
.keyreveal__k{font-family:var(--mono);font-size:12.5px;word-break:break-all;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:9px 11px;margin-top:8px;display:flex;align-items:center;gap:10px;justify-content:space-between}
.codebox{background:#0f1218;color:#e6e9f0;font-family:var(--mono);font-size:12.5px;padding:16px;border-radius:var(--r-lg);overflow-x:auto;line-height:1.6;white-space:pre;margin-top:10px;border:1px solid var(--line)}
.codebox .k{color:#7aa2ff}.codebox .s{color:#7fd6a8}.codebox .c{color:#6b7280}

/* ajutor / FAQ */
.faq{display:grid;gap:9px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-xs)}
.faq summary{padding:14px 16px;font-weight:600;cursor:pointer;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;color:var(--accent);font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq p{padding:0 16px 15px;color:var(--ink-2);font-size:14px;line-height:1.6}
.helpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(218px,1fr));gap:13px;margin-bottom:22px}
.helpcard{padding:17px;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:box-shadow .15s,transform .15s}
.helpcard:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.helpcard .ic{font-size:24px}.helpcard h4{font-size:15px;font-weight:700}.helpcard p{font-size:12.5px;color:var(--mut)}

/* comandă — alegere plan */
.planpick{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.planopt{border:1px solid var(--line-2);border-radius:var(--r-lg);padding:13px 10px;cursor:pointer;display:flex;flex-direction:column;gap:3px;transition:.13s;text-align:center;align-items:center;background:var(--surface)}
.planopt:hover{border-color:var(--accent)}
.planopt b{font-size:16px;font-weight:700}
.planopt .pp__price{font-family:var(--mono);font-size:11.5px;color:var(--accent);font-weight:700}
.planopt .pp__d{font-size:11px;color:var(--mut)}
.planopt.is-sel{background:var(--accent-soft);border-color:var(--accent)}
.planopt.is-sel b{color:var(--accent-ink)}
@media(max-width:480px){.planpick{grid-template-columns:1fr}}
.ordbar{display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--accent-soft);margin-bottom:8px}
.ordbar__ic{font-size:19px}.ordbar b{font-weight:700;font-size:14px}.ordbar p{font-size:12.5px;color:var(--ink-2)}

/* notificări */
.notifwrap{position:relative}
.notifbadge{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;border-radius:999px;background:var(--bad);color:#fff;border:2px solid var(--bg);font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px}
.notifdrop{position:absolute;top:50px;right:0;width:min(360px,90vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);z-index:30;overflow:hidden;animation:rise .16s}
.notifdrop__head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line)}
.notifdrop__head b{font-size:15px;font-weight:700}
.linkbtn{background:0;border:0;color:var(--accent);font-size:12px;font-weight:600;cursor:pointer}
.notifdrop__body{max-height:400px;overflow-y:auto}
.nitem{display:flex;gap:11px;padding:12px 16px;border-top:1px solid var(--line);cursor:pointer;transition:background .12s}
.nitem:first-child{border-top:0}.nitem:hover{background:var(--surface-2)}
.nitem.unread{background:var(--accent-soft)}
.nitem__ic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:15px;flex:0 0 auto;background:var(--surface)}
.nitem__t{font-weight:600;font-size:13.5px;line-height:1.2}
.nitem__b{font-size:12.5px;color:var(--ink-2);margin-top:2px}
.nitem__w{font-size:10.5px;color:var(--mut);margin-top:3px;font-family:var(--mono)}
.nempty{padding:36px 16px;text-align:center;color:var(--mut);font-size:13.5px}

/* checkout */
.pay__sum{background:var(--surface-2);border-radius:var(--r);padding:13px 15px;display:flex;justify-content:space-between;align-items:center;margin:6px 0 14px}
.pay__sum b{font-size:22px;font-weight:800}
.pay__demo{background:var(--warn-soft);color:var(--warn);border-radius:var(--r);padding:9px 12px;font-size:12px;margin-bottom:14px;text-align:center;font-weight:600}

/* ===== CHAT RAIL ===== */
.chatrail{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--line)}
.chatrail__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.chatrail__id{display:flex;align-items:center;gap:10px}
.chatrail__id b{font-size:15px;font-weight:700;display:block}
.chatrail__id small{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;color:var(--ok);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.chatrail__actions{display:flex;gap:5px;align-items:center}
.cavatar{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;background:var(--accent-soft)}
.dotpulse{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(21,163,74,.4);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(21,163,74,.4)}70%{box-shadow:0 0 0 6px rgba(21,163,74,0)}100%{box-shadow:0 0 0 0 rgba(21,163,74,0)}}
.chat-backdrop{position:fixed;inset:0;z-index:79;background:rgba(15,18,24,.4);animation:rise .2s}
.chatrail.is-expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(760px,94vw);height:min(84vh,800px);z-index:80;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-lg)}
.chatrail.is-expanded .chatrail__body{padding:24px clamp(18px,5vw,56px)}
.chatrail.is-expanded .cmsg-row{max-width:74%}
.chatrail__body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px}
.cintro{text-align:center;color:var(--mut);padding:14px 6px;font-size:13.5px;line-height:1.5}
.cintro .em{font-size:30px;display:block;margin-bottom:8px}
.cmsg-row{display:flex;gap:8px;align-items:flex-end;max-width:92%}
.cmsg-row--assistant{align-self:flex-start}.cmsg-row--user{align-self:flex-end;margin-left:auto}
.cavatar--sm{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto;background:var(--accent-soft)}
.cmsg{padding:10px 13px;border-radius:13px;font-size:14px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.cmsg--assistant{background:var(--surface-2);color:var(--ink);border-bottom-left-radius:4px}
.cmsg--user{background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.cmsg__when{font-size:9.5px;opacity:.6;margin-top:4px;font-family:var(--mono)}
.cmsg strong{font-weight:700}
.cmsg a{color:var(--accent);text-decoration:underline;font-weight:600}
.cmsg--user a{color:#fff}
.cmsg ul{margin:6px 0 4px 18px;padding:0}.cmsg li{margin:3px 0}
.cmsg code{font-family:var(--mono);font-size:12px;background:var(--raise);padding:1px 5px;border-radius:5px}
.cmsg--user code{background:rgba(255,255,255,.2)}
.ctyping{align-self:flex-start;display:flex;gap:4px;padding:12px 15px;border-radius:13px;background:var(--surface-2)}
.ctyping span{width:6px;height:6px;border-radius:50%;background:var(--mut);animation:bob 1.1s infinite}
.ctyping span:nth-child(2){animation-delay:.15s}.ctyping span:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.chatsugg{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px}
.chatsugg button{border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:6px 12px;font-weight:600;font-size:11.5px;cursor:pointer;transition:.12s;color:var(--ink-2)}
.chatsugg button:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.chatrail__form{display:flex;gap:8px;align-items:flex-end;padding:13px;border-top:1px solid var(--line)}
.chatrail__form textarea{flex:1;font-family:var(--sans);font-size:14px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);color:var(--ink);resize:none;max-height:120px;line-height:1.4}
.chatrail__form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* modal */
.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:18px;background:rgba(15,18,24,.42);backdrop-filter:blur(3px);animation:rise .18s;overflow-y:auto}
.modal__card{width:min(500px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-lg);padding:clamp(22px,3vw,32px);position:relative;animation:pop .22s cubic-bezier(.34,1.4,.64,1)}
@keyframes pop{from{transform:scale(.97) translateY(8px);opacity:0}to{transform:none;opacity:1}}
.modal__card h3{font-size:21px;font-weight:700}
.modal__sub{color:var(--mut);margin-top:5px;font-size:13.5px}
.modal__x{position:absolute;top:14px;right:14px;width:34px;height:34px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);cursor:pointer;font-size:14px;color:var(--mut)}
.modal__x:hover{background:var(--surface-2);color:var(--ink)}
.tabs{display:flex;gap:5px;background:var(--surface-2);padding:4px;border-radius:999px;margin-bottom:6px}
.tab{flex:1;border:0;background:transparent;padding:9px;border-radius:999px;font-weight:600;font-size:13.5px;cursor:pointer;color:var(--mut)}
.tab.is-active{background:var(--surface);color:var(--ink);box-shadow:var(--sh-xs)}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(14px);z-index:100;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:10px;box-shadow:var(--sh-lg);font-weight:600;font-size:14px;opacity:0;transition:.26s;pointer-events:none;max-width:92vw}
.toast.is-show{opacity:1;transform:translateX(-50%)}
.toast--ok{background:var(--ok);color:#fff}.toast--err{background:var(--bad);color:#fff}
.scrim{position:fixed;inset:0;z-index:25;background:rgba(15,18,24,.4)}
.back{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--mut);margin-bottom:14px;cursor:pointer}
.back:hover{color:var(--accent)}

/* responsive */
@media(max-width:1200px){
  .app{grid-template-columns:var(--sb) minmax(0,1fr)}
  .chatbtn{display:grid}
  .chatrail{position:fixed;top:0;right:0;bottom:0;width:min(380px,100%);z-index:40;transform:translateX(100%);transition:transform .26s;box-shadow:var(--sh-lg)}
  .chatrail.is-open{transform:none}
}
@media(min-width:1201px){#chatClose{display:none}}
@media(max-width:1100px){.stats--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;z-index:45;width:262px;transform:translateX(-100%);transition:transform .24s}
  .sidebar.is-open{transform:none}
  .hamb{display:flex}
  .stats,.stats--4{grid-template-columns:1fr}
  .row--ticket,.row--domain,.row--invoice,.row--client{grid-template-columns:1fr auto}
  .row__hideS{display:none}
}
@media(min-width:861px){.scrim{display:none!important}}
@media(max-width:560px){.skstats{grid-template-columns:1fr}}
@media(max-width:520px){.content{padding:15px}.form__row{grid-template-columns:1fr}.cmsg-row{max-width:96%}.chatrail.is-expanded{width:100%;height:100%;border-radius:0;top:0;left:0;transform:none}}

/* ===== ELEVATION / POLISH (art-director) ===== */
@font-face{font-family:'Fraunces';src:url(/assets/fonts/fraunces.woff2) format('woff2');font-weight:500 800;font-display:swap}
:root{--disp:'Fraunces',Georgia,serif;--sh-depth:0 16px 34px -10px rgba(15,18,24,.16)}
[data-theme=dark]{--sh-depth:0 18px 42px -10px rgba(0,0,0,.6)}

/* tipografie display cu caracter (serif Fraunces), corp rămâne Manrope */
.login__card h1,.welcome__h,.section-h h3,.modal__card h3,.stat__v,.svc__price,.prof__nm,.wcard__nm,.empty h3,.acct__card h4,.chatrail__id b{font-family:var(--disp);font-weight:600;letter-spacing:-.018em}
.stat__v{letter-spacing:-.022em}
body,p,.row__t,.nitem__t,.tl__t{letter-spacing:-.006em}
.kick,.navgrp,.thead{letter-spacing:.08em}

/* profunzime stratificată */
.welcome,.login__card,.modal__card,.chatrail.is-expanded,.notifdrop{box-shadow:var(--sh-depth)}
.stat,.wcard,.svc,.helpcard{transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s}
.stat:hover,.wcard:hover,.svc:hover,.helpcard:hover{transform:translateY(-3px);box-shadow:var(--sh-md),inset 0 0 0 1px rgba(239,90,42,.08)}

/* buton primar — gradient ember */
.btn--primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 1px 2px rgba(239,90,42,.3),inset 0 1px 0 rgba(255,255,255,.18)}
.btn--primary:hover{background:linear-gradient(135deg,var(--accent-2),#bf3f1a);box-shadow:0 6px 16px -5px rgba(239,90,42,.45)}

/* nav activ — bară ember în stânga, tentă caldă */
.nav a.is-active{background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 2px 0 0 var(--accent)}
.nav a.is-active .i{color:var(--accent);opacity:1}

/* iconuri statistici — radial subtil + glow discret la hover */
.stat__ic{background:radial-gradient(circle at 38% 34%,#fff1ea,var(--accent-soft))}
.stat--tickets .stat__ic{background:radial-gradient(circle at 38% 34%,#eef7f1,var(--ok-soft))}
.stat--domains .stat__ic{background:radial-gradient(circle at 38% 34%,#fbf3e2,var(--warn-soft))}
.stat:hover .stat__ic{box-shadow:0 0 0 4px rgba(239,90,42,.07)}

/* tente ember discrete pe margini */
.topbar{border-bottom-color:rgba(239,90,42,.1)}
.sidebar{box-shadow:inset -1px 0 0 rgba(239,90,42,.06)}

/* focus elegant (inel, fără puls) */
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:linear-gradient(180deg,var(--surface),rgba(253,238,231,.4))}

/* pill-uri rafinate cu bordură fină */
.pill{border:1px solid rgba(15,18,24,.04)}
.pill--ok{border-color:rgba(21,128,61,.18)}.pill--warn{border-color:rgba(181,116,10,.22)}.pill--bad{border-color:rgba(211,59,42,.2)}.pill--pend{border-color:rgba(107,83,224,.2)}

/* linkuri text inline (NU carduri/nav) — subliniere ember slide-in */
.login__foot a,.cmsg--assistant a,.faq p a{background:linear-gradient(90deg,var(--accent),var(--accent-2)) no-repeat 0 100%/0 2px;transition:background-size .28s cubic-bezier(.34,1.4,.64,1)}
.login__foot a:hover,.cmsg--assistant a:hover,.faq p a:hover{background-size:100% 2px}

/* stări goale mai îngrijite */
.empty{position:relative}
.empty::before{content:"";position:absolute;top:14px;left:50%;width:34px;height:2px;border-radius:2px;background:var(--accent);transform:translateX(-50%)}
.empty__ic{font-size:46px}

/* ===== chat: comutator de proiect (context swapabil) ===== */
.chatctx{display:flex;align-items:center;gap:9px;padding:9px 14px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--accent-soft),var(--surface))}
.chatctx__lbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);flex:none}
.chatctx__selwrap{position:relative;flex:1;min-width:0}
.chatctx__selwrap::after{content:"▾";position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--accent-ink);font-size:11px}
.chatctx__sel{appearance:none;-webkit-appearance:none;width:100%;padding:7px 26px 7px 11px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-overflow:ellipsis}
.chatctx__sel:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
.cctxnote{margin:8px auto;text-align:center;font-size:12px;color:var(--accent-ink);background:var(--accent-soft);border-radius:999px;padding:5px 12px;width:fit-content;max-width:90%}
.cctxnote b{font-weight:700}

/* ===== CHAT — redesign live (mod proiect: vezi Claude lucrând) ===== */
.cintro--proj{background:linear-gradient(165deg,var(--accent-soft),var(--surface));border:1px solid var(--line-2)}
.cintro--proj b{color:var(--accent-ink)}

/* mesajul „live" al asistentului care crește pe măsură ce Claude lucrează */
.clive{position:relative;background:linear-gradient(180deg,#fff,var(--surface-2));border:1px solid var(--line-2);box-shadow:var(--sh-sm)}
[data-theme=dark] .clive{background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.clive__act{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:650;color:var(--accent-ink)}
.clive__spin{width:13px;height:13px;border-radius:50%;border:2px solid var(--accent-soft);border-top-color:var(--accent);animation:cspin .7s linear infinite;flex:none}
@keyframes cspin{to{transform:rotate(360deg)}}
.clive--done .clive__spin{display:none}
.clive__done{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--ok)}
.clive__fail{font-size:12.5px;font-weight:700;color:var(--bad)}
.clive__link{margin-left:10px;font-size:12.5px;font-weight:650;color:var(--accent-ink);text-decoration:none;border-bottom:1.5px solid var(--accent-soft)}
.clive__link:hover{border-bottom-color:var(--accent)}
.clive__tools{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 2px}
.clive__tools:empty{display:none}
.clive__tool{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;font-family:var(--mono);color:var(--ink-2);background:var(--raise);border:1px solid var(--line-2);border-radius:7px;padding:3px 8px;animation:ctoolin .25s cubic-bezier(.22,1,.36,1)}
.clive__tool.is-deny{color:var(--bad);background:var(--bad-soft);border-color:transparent}
@keyframes ctoolin{from{opacity:0;transform:translateY(4px)}}
.clive__text{margin-top:8px;line-height:1.55}
.clive__text:empty{display:none}

/* bule de chat mai îngrijite */
.cmsg{border-radius:15px;padding:10px 13px;line-height:1.5;font-size:14px;box-shadow:var(--sh-sm)}
.cmsg--user{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-bottom-right-radius:5px}
.cmsg--assistant{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:5px}
[data-theme=dark] .cmsg--assistant{background:var(--surface-2)}
.cmsg__when{margin-top:5px;font-size:10.5px;opacity:.55}
.cmsg-row{display:flex;gap:8px;align-items:flex-end;margin:10px 0;max-width:90%}
.cmsg-row--user{margin-left:auto;flex-direction:row-reverse}
.cavatar--sm{flex:none;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);align-self:flex-start}
.cintro{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.cintro .em{font-size:20px;display:block;margin-bottom:6px}
.chatsugg{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.chatsugg button{font:inherit;font-size:12.5px;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);border:1px solid transparent;border-radius:999px;padding:6px 12px;cursor:pointer;transition:transform .12s,box-shadow .12s}
.chatsugg button:hover{transform:translateY(-1px);box-shadow:var(--sh-sm)}

/* ===== CHAT — command deck (comenzi /model /efort /plan) ===== */
.chatopts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:7px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.ochip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:650;color:var(--ink-2);background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:3px 9px}
.ochip--on{color:var(--accent-ink);background:var(--accent-soft);border-color:transparent}
.ochip--cmd{margin-left:auto;cursor:pointer;font-family:var(--mono);color:var(--accent-ink)}
.ochip--cmd:hover{background:var(--accent-soft);border-color:transparent}
.chatskills{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.skills__lbl{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);flex:0 0 100%;margin-bottom:1px}
.skillchip{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:11.5px;font-weight:650;color:var(--ink-2);background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:5px 11px;cursor:pointer;transition:.13s;max-width:100%;white-space:nowrap}
.skillchip:hover{color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent)}
.skillchip:active{transform:translateY(1px)}
.cmsg--sys{margin:7px auto;text-align:center;font-size:12px;color:var(--mut);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:5px 12px;width:fit-content;max-width:92%}
.cmsg--sys b{color:var(--accent-ink);font-weight:700}
.cmsg--sys a{color:var(--accent-ink)}
/* plan bifabil (recomandări) */
.planbox{background:var(--surface);border:1px solid var(--accent-soft);border-radius:12px;padding:12px;margin-top:6px}
.planbox__h{font-size:12.5px;font-weight:700;color:var(--accent-ink);margin-bottom:9px}
.planitem{display:flex;gap:9px;align-items:flex-start;padding:6px 4px;font-size:13.5px;line-height:1.45;cursor:pointer;border-radius:7px}
.planitem:hover{background:var(--surface-2)}
.planitem input{margin-top:3px;accent-color:var(--accent);width:15px;height:15px;flex:none;cursor:pointer}
.btn--sm{padding:7px 13px;font-size:13px}
.planapply{margin-top:10px}

/* ===== UTILIZARE — bare de progres (usage) ===== */
.usegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.usebar{padding:18px 20px}
.usebar__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.usebar__head b{font-size:15px}
.usebar__head p{font-size:12.5px;margin-top:2px}
.usebar__count{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--ink);white-space:nowrap;line-height:1}
.usebar__count small{font-size:14px;color:var(--mut);font-weight:700}
.usebar__track{height:11px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.usebar__fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .5s cubic-bezier(.4,0,.2,1);min-width:3px}
.usebar__fill.is-warn{background:linear-gradient(90deg,var(--warn),#d8920a)}
.usebar__fill.is-full{background:linear-gradient(90deg,var(--bad),#b32a1c)}
.usebar__foot{display:flex;justify-content:space-between;font-size:12px;margin-top:8px}
.usenote{display:flex;gap:12px;align-items:flex-start;background:var(--accent-soft);border:1px solid transparent;border-radius:var(--r-lg);padding:14px 16px;margin-top:18px}
.usenote__ic{font-size:18px;line-height:1.4}
.usenote p{font-size:13.5px;color:var(--ink-2);line-height:1.5}

/* ---------- analitice vizitatori ---------- */
.anbar{padding:14px 18px;margin-bottom:18px;display:flex;align-items:center;gap:14px}
.anbar__pick{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mut);font-weight:600}
.anbar__sel{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);padding:9px 12px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);min-width:min(360px,70vw);transition:border .14s,box-shadow .14s}
.anbar__sel:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.anstats{grid-template-columns:repeat(4,1fr)}
.anchart{padding:18px 20px;margin-top:18px}
.anchart__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.anchart__head b{font-size:15px}.anchart__head span{font-size:12px}
.anchart__bars{display:flex;align-items:flex-end;gap:6px;height:170px}
.anbar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;height:100%;justify-content:flex-end}
.anbar-track{width:100%;max-width:30px;flex:1;display:flex;align-items:flex-end;background:var(--surface-2);border-radius:6px 6px 4px 4px;overflow:hidden}
.anbar-fill{display:block;width:100%;border-radius:6px 6px 4px 4px;background:linear-gradient(180deg,var(--accent),var(--accent-2));transition:height .5s cubic-bezier(.4,0,.2,1)}
.anbar-n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink-2);line-height:1;min-height:11px}
.anbar-d{font-size:10px;color:var(--mut);white-space:nowrap;font-family:var(--mono)}
.antopwrap{padding:18px 20px;margin-top:18px}
.antoplist{display:flex;flex-direction:column;gap:10px}
.antop{display:grid;grid-template-columns:minmax(0,1fr) 120px auto;align-items:center;gap:12px}
.antop__lbl{font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.antop__bar{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.antop__bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .5s cubic-bezier(.4,0,.2,1)}
.antop__n{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink-2);min-width:28px;text-align:right}
@media(max-width:1100px){.anstats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.anbar-d{font-size:8.5px}.antop{grid-template-columns:minmax(0,1fr) 70px auto}}

/* ===== Centru de învățare (tutoriale) ===== */
.learnhero{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,var(--accent-soft),var(--surface) 70%);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-xs);padding:22px 24px;margin-bottom:20px}
.learnhero__h{font-family:var(--disp);font-weight:600;letter-spacing:-.018em;font-size:23px;margin-top:5px}
.learnhero__sub{color:var(--ink-2);margin-top:8px;font-size:14px;line-height:1.55;max-width:62ch}
.learnhero__deco{flex:0 0 auto;display:grid;place-items:center}
.learngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;align-items:start}
.learncard{grid-column:span 1;display:flex;flex-direction:column;gap:9px;text-align:left;font-family:var(--sans);cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-xs);padding:18px 18px 16px;
  transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s,border-color .16s}
.learncard:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--sh-md),inset 0 0 0 1px rgba(239,90,42,.08)}
.learncard.is-open{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.learncard__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.learncard__ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:21px;background:var(--accent-soft)}
.learncard__time{font-family:var(--mono);font-size:11px;color:var(--mut);background:var(--surface-2);border-radius:999px;padding:3px 9px;white-space:nowrap}
.learncard__nm{font-family:var(--disp);font-weight:600;letter-spacing:-.014em;font-size:16.5px;color:var(--ink);line-height:1.25}
.learncard__d{font-size:13px;color:var(--mut);line-height:1.5}
.learncard__cta{margin-top:auto;font-size:12.5px;font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:6px}
.learncard__chev{transition:transform .16s}
.learncard:hover .learncard__chev{transform:translateX(3px)}
.learncard.is-open .learncard__chev{transform:rotate(90deg)}
.learnguide{grid-column:1 / -1;background:var(--surface);border:1px solid var(--accent);border-radius:var(--r-lg);box-shadow:var(--sh-md);padding:22px 24px;margin:2px 0 4px}
.learnguide__head{display:flex;align-items:flex-start;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.learnguide__ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:23px;background:var(--accent-soft);flex:0 0 auto}
.learnguide__head h3{font-family:var(--disp);font-weight:600;letter-spacing:-.018em;font-size:19px}
.learnguide__head p{color:var(--mut);font-size:13.5px;margin-top:4px;line-height:1.5;max-width:64ch}
.learnguide__time{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--mut);background:var(--surface-2);border-radius:999px;padding:4px 11px;white-space:nowrap;flex:0 0 auto}
.learnsteps{list-style:none;display:flex;flex-direction:column;gap:13px;margin:0;padding:0;counter-reset:none}
.learnsteps li{display:flex;gap:13px;align-items:flex-start}
.learnstep__n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:12.5px;font-weight:700;background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(239,90,42,.4)}
.learnstep__t{font-size:14px;line-height:1.6;color:var(--ink-2);padding-top:2px}
.learnstep__t b{color:var(--ink);font-weight:700}
.learnstep__t code{font-family:var(--mono);font-size:12.5px;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--accent-ink)}
.learntip{display:flex;gap:11px;align-items:flex-start;margin-top:18px;padding:13px 15px;background:var(--accent-soft);border:1px solid var(--line);border-radius:var(--r);}
.learntip__ic{font-size:17px;flex:0 0 auto;line-height:1.4}
.learntip p{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.learntip p b{color:var(--ink)}
.learnguide__foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
@media(max-width:560px){.learnhero{flex-direction:column;text-align:center}.learnhero__deco{order:-1}.learnhero__sub{margin-inline:auto}.learnguide{padding:18px 16px}.learnguide__time{display:none}}