:root {
    --primary: #5B8CFF;
    --primary-700: #2C63E6;
    --primary-300: #84A9FF;
    --primary-50: rgba(91,140,255,.12);
    --primary-100: rgba(91,140,255,.20);
    --success: #4FD1B5;
    --success-100: rgba(79,209,181,.14);
    --warning: #F5B544;
    --warning-100: rgba(245,181,68,.14);
    --warning-fg: #F5B544;          /* text pe fond --warning-100 (în light e nevoie de o nuanță mai închisă) */
    --danger: #FF6B6B;
    --ink: #EAEEFA;
    --muted: #98A2BE;
    --line: rgba(255,255,255,.10);
    --bg: #0A0E1A;
    --card: #151C33;
    --card-2: #0E1424;
    --radius: 12px;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    /* suprafețe (comută cu tema) */
    --ghost-bg: rgba(255,255,255,.05); --ghost-bg-h: rgba(255,255,255,.11);
    --input-bg: rgba(255,255,255,.04); --overlay: rgba(4,7,14,.66); --track: rgba(255,255,255,.09);
    --chip-blue-bg: rgba(91,140,255,.15); --chip-blue-fg: var(--primary-300);
    --chip-gray-bg: rgba(255,255,255,.07); --chip-gray-fg: var(--muted);
    --err-bg: rgba(255,107,107,.12); --err-fg: #FF9B9B;
    --btn-grad: linear-gradient(180deg, #5B8CFF, #2C63E6); --btn-shadow: 0 4px 16px rgba(44,99,230,.35);
    --card-grad: linear-gradient(180deg, #151C33, #10162A); --hover-row: rgba(255,255,255,.035);
}

/* ---- tema light (aplicată în app după autentificare; landing rămâne dark) ---- */
:root[data-theme="light"] {
    --primary: #0058D2; --primary-700: #0046A8; --primary-300: #0058D2;
    --primary-50: #F1F6FD; --primary-100: #E8F0FB;
    --success: #039855; --success-100: #E6F5EE; --warning: #F79009; --warning-100: #FEF0C7; --danger: #D92D20;
    --warning-fg: #B54708;   /* #F79009 pe #FEF0C7 avea ~2.2:1 — prea slab pentru text */
    --ink: #101828; --muted: #667085; --line: #E4E7EC; --bg: #F7F8FA; --card: #FFFFFF; --card-2: #F7F8FA;
    --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1);
    --ghost-bg: #fff; --ghost-bg-h: #F2F4F7; --input-bg: #fff; --overlay: rgba(16,24,40,.45); --track: #EAECF0;
    --chip-blue-bg: #E8F0FB; --chip-blue-fg: #0046A8; --chip-gray-bg: #F2F4F7; --chip-gray-fg: #475467;
    --err-bg: #FEF3F2; --err-fg: #B42318;
    --btn-grad: linear-gradient(180deg, #0A63E4, #0046A8); --btn-shadow: 0 4px 14px rgba(0,88,210,.25);
    --card-grad: #FFFFFF; --hover-row: #F7F9FC;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
}
a { color: var(--primary); text-decoration: none; }
h1, h2, h3 { margin: 0 0 .4em; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* ---- boot loader ---- */
.boot { position: fixed; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 18px; background: var(--bg); }
.boot-brand { font-size: 30px; font-weight: 700; color: var(--primary); letter-spacing: -.02em; }
.boot-spinner { width: 34px; height: 34px; border: 3px solid var(--primary-100);
    border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- topbar ---- */
.topbar { position: sticky; top: 0; z-index: 30; background: var(--card); border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: 1180px; margin: 0 auto; height: 58px; display: flex; align-items: center;
    gap: 22px; padding: 0 22px; }
.brand { font-weight: 800; font-size: 19px; color: var(--ink); cursor: pointer; letter-spacing: -.03em;
    display: inline-flex; align-items: center; gap: 9px; }
.brand-mark { width: 27px; height: 27px; border-radius: 9px; box-shadow: 0 3px 12px rgba(91,140,255,.4); }
.brand-mark rect { fill: var(--primary); }
.topnav { display: flex; gap: 4px; }
.topnav a { padding: 7px 12px; border-radius: 8px; color: var(--muted); font-weight: 500; }
.topnav a:hover { background: var(--primary-50); color: var(--ink); }
.topnav a.active { background: var(--primary-100); color: var(--primary-300); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.org-chip { font-size: 12px; background: var(--primary-50); color: var(--primary-300);
    padding: 4px 10px; border-radius: 20px; font-weight: 600; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primary);
    color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.uname { font-size: 13px; }

.appmain { max-width: 1180px; margin: 0 auto; padding: 26px 22px 60px; }

/* bară „confirmă-ți emailul" (sub topbar, cât timp adresa nu e confirmată) */
.verifybar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    max-width: 1180px; margin: 14px auto -8px; padding: 10px 14px; border-radius: 10px;
    background: var(--warning-100); color: var(--warning-fg); font-size: 13px;
    border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); }
.verifybar b { color: inherit; }
.verifybar .btn { margin-left: auto; }
.verifybar .vb-ok { margin-left: auto; color: var(--success); font-weight: 600; }

/* ---- buttons ---- */
.btn { border: 1px solid transparent; background: var(--btn-grad); color: #fff; font-weight: 600;
    height: 40px; padding: 0 16px; border-radius: 10px; cursor: pointer; font-size: 14px; transition: .14s;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box;
    white-space: nowrap; box-shadow: var(--btn-shadow), inset 0 1px 0 rgba(255,255,255,.18); }
.btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.ghost { background: var(--ghost-bg); color: var(--ink); border-color: var(--line); box-shadow: none; }
.btn.ghost:hover { background: var(--ghost-bg-h); }
.btn.sm { height: 34px; padding: 0 12px; font-size: 13px; }
.btn.lg { height: 46px; padding: 0 22px; font-size: 15px; }
.btn.danger { background: #D92D20; border-color: #D92D20; box-shadow: none; }
.btn.danger:hover { background: #B42318; border-color: #B42318; }
.btn.icon-only { width: 40px; padding: 0; }
.btn.sm.icon-only { width: 34px; }

/* iconițe SVG */
.ico { display: inline-block; vertical-align: -.15em; flex: 0 0 auto; }
.landing .lcard .ic { color: var(--acc2); }
.landing .pico { color: var(--acc2); }
.lang-btn .ico { vertical-align: -.2em; }

/* ---- cards / grid ---- */
.card { background: var(--card-grad); border: 1px solid var(--line); border-radius: 14px;
    padding: 20px; box-shadow: var(--shadow); }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.stat-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.stat .num { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.stat .lbl { color: var(--muted); font-size: 13px; margin-top: 2px; }

.row { display: flex; align-items: center; gap: 10px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wrap-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }

/* clickable card */
.card.link { cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.card.link:hover { border-color: var(--primary); transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0,0,0,.28); }

/* ---- badges / chips ---- */
.chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 16px;
    font-size: 12px; font-weight: 600; background: var(--bg); color: var(--muted); }
.chip.blue { background: var(--chip-blue-bg); color: var(--chip-blue-fg); }
.chip-x { margin-left: 6px; border: none; background: none; padding: 0; cursor: pointer;
    color: inherit; opacity: .55; font-size: 12px; line-height: 1; }
.chip-x:hover { opacity: 1; color: var(--danger, #D92D20); }
.quota-bar { height: 6px; border-radius: 4px; background: var(--track); margin-top: 10px; overflow: hidden; }
.quota-bar > div { height: 100%; background: var(--primary, #6941C6); border-radius: 4px; transition: width .2s; }

/* ---- carduri de pricing ---- */
.plan-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted, #667085); margin-bottom: 10px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.plan-card { position: relative; border: 1px solid var(--line, #EAECF0); border-radius: 12px; padding: 18px 16px;
    background: var(--card, #fff); transition: border-color .15s, box-shadow .15s; }
.plan-card:hover { border-color: var(--primary, #6941C6); box-shadow: 0 4px 14px rgba(16,24,40,.06); }
.plan-card.current { border-color: var(--primary, #6941C6); border-width: 2px; padding: 17px 15px;
    box-shadow: 0 4px 14px rgba(105,65,198,.12); }
.plan-badge { position: absolute; top: -10px; right: 12px; background: var(--primary, #6941C6); color: #fff;
    font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 10px; }
.plan-name { font-size: 15px; font-weight: 700; color: var(--ink, #101828); }
.plan-price { font-size: 30px; font-weight: 800; color: var(--ink, #101828); margin: 6px 0 4px; }
.plan-price span { font-size: 13px; font-weight: 500; color: var(--muted, #667085); }
.plan-quota { font-size: 13px; color: var(--muted, #667085); }
.plan-btn { margin-top: 12px; width: 100%; }

/* ---- dashboard: rând de metrici (stat cards) ---- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.stat { border: 1px solid var(--line, #EAECF0); border-radius: 12px; padding: 14px 16px; background: var(--card, #fff); }
.stat-num { font-size: 26px; font-weight: 800; color: var(--ink, #101828); line-height: 1.1; }
.stat-label { font-size: 12px; color: var(--muted, #667085); margin-top: 3px; }

/* ---- back office: carduri organizații ---- */
.org-card .org-metrics { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.org-card .org-metrics > div { display: flex; flex-direction: column; }
.org-card .org-metrics b { font-size: 18px; font-weight: 800; color: var(--ink, #101828); line-height: 1.1; }
.org-card .org-metrics span { font-size: 11px; color: var(--muted, #667085); }

/* ---- switch simplu (toggle) ---- */
.switch-row { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; cursor: pointer;
    font-size: 13px; font-weight: 600; }
.switch-row input { width: auto; }

/* ---- bară super-admin ---- */
.super-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    border-left: 3px solid var(--warning, #F79009); }
.chip.green { background: var(--success-100); color: var(--success); }
.chip.amber { background: var(--warning-100); color: var(--warning-fg); }
.row-expired td { opacity: .6; }
.chip.gray { background: var(--chip-gray-bg); color: var(--chip-gray-fg); }
.badge-role { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }

/* ---- progress bar ---- */
.bar { height: 8px; border-radius: 6px; background: var(--track); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--success); }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: .05em; padding: 10px 12px; border-bottom: 1px solid var(--line); }
td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr { transition: background .12s; }
tbody tr:hover td { background: var(--hover-row); }
tr:last-child td { border-bottom: none; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.tablewrap table { font-size: 14px; }
.tablewrap th { background: var(--card-2); }

/* ---- forms ---- */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
input[type=text], input[type=password], input[type=email], select, textarea {
    width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
    font-size: 14px; font-family: inherit; background: var(--input-bg); color: var(--ink); box-sizing: border-box; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type=text], input[type=password], input[type=email], select { height: 40px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-100); }

/* select stilizat: săgeată custom + hover */
select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding-right: 34px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398A2BE' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center; background-size: 12px;
    transition: border-color .12s, box-shadow .12s; }
select:hover { border-color: var(--primary); }
select option { color: var(--ink); background: var(--card-2); }
.err { background: var(--err-bg); color: var(--err-fg); padding: 9px 12px; border-radius: 8px;
    font-size: 13px; margin-bottom: 12px; }
.ok-note { background: var(--success-100); color: var(--success); padding: 9px 12px;
    border-radius: 8px; font-size: 13px; margin-bottom: 12px; }
.actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* ---- modal ---- */
.modal-overlay { position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px;
    width: 100%; box-shadow: 0 30px 60px rgba(0,0,0,.5); max-height: 90vh; overflow-y: auto; }
.modal-x { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border: none;
    background: var(--track); border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--muted);
    display: flex; align-items: center; justify-content: center; }
.modal-x:hover { background: var(--ghost-bg-h); color: var(--ink); }
.modal-title { padding-right: 34px; }

/* ---- drawer (istoric) ---- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(16,24,40,.4); z-index: 110; }
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: 440px; max-width: 92vw;
    background: var(--card); border-left: 1px solid var(--line); box-shadow: -10px 0 40px rgba(0,0,0,.5); z-index: 111;
    display: flex; flex-direction: column; }
.drawer-head { padding: 18px 20px; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; }
.drawer-body { padding: 16px 20px; overflow-y: auto; }
.timeline { display: flex; flex-direction: column; gap: 14px; }
.tl-item { border-left: 2px solid var(--line); padding: 0 0 4px 14px; position: relative; }
.tl-item::before { content: ""; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px;
    border-radius: 50%; background: var(--primary); }
.tl-old { text-decoration: line-through; color: var(--muted); }
.tl-new { color: var(--ink); font-weight: 500; }

.empty { text-align: center; color: var(--muted); padding: 50px 20px; }

/* ---- landing / login ---- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
    background: linear-gradient(135deg, var(--primary-50), #fff); }
.auth-card { background: var(--input-bg); border: 1px solid var(--line); border-radius: 16px; padding: 34px;
    width: 100%; max-width: 400px; box-shadow: var(--shadow); }
.auth-brand { font-size: 30px; font-weight: 700; color: var(--primary); text-align: center; margin-bottom: 4px; }
.auth-sub { text-align: center; color: var(--muted); margin-bottom: 22px; }
.link-btn { background: none; border: none; color: var(--primary); cursor: pointer; font-size: 13px; padding: 0; }

/* currentColor: rămâne alb pe butoanele primary, dar se vede și pe butoane ghost în tema light */
.spinner-sm { width: 16px; height: 16px; border: 2px solid color-mix(in srgb, currentColor 40%, transparent);
    border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }

/* ---- landing (dark) ---- */
.landing{
    --ground:#0A0E1A; --ground-2:#0E1424; --surface:#151C33; --surface-2:#1B2440;
    --dl:rgba(255,255,255,.09); --dl2:rgba(255,255,255,.16);
    --acc:#5B8CFF; --acc2:#84A9FF; --accd:#2C63E6; --mint:#4FD1B5; --amber:#F5B544; --violet:#9B8CFF;
    --dt:#EAEEFA; --dtm:#98A2BE; --dtd:#6B7590;
    --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
    min-height:100vh; background:var(--ground); color:var(--dt);
    font-size:16px; line-height:1.55; }
.landing a{color:inherit}
.landing h1,.landing h2,.landing h3{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
.landing p{margin:0}
.lwrap{max-width:1140px;margin:0 auto;padding:0 24px}
.landing .eyebrow{display:inline-block;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;
    letter-spacing:.16em;color:var(--acc2)}

.landing .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;
    border-radius:11px;font-weight:650;font-size:.95rem;cursor:pointer;border:1px solid transparent;
    transition:transform .15s ease,box-shadow .15s ease,background .15s ease;white-space:nowrap;text-decoration:none}
.landing .btn.lg{height:50px;padding:0 24px;font-size:1rem}
.landing .btn.sm{height:38px;padding:0 15px;font-size:.88rem}
.landing .btn-primary{background:linear-gradient(180deg,var(--acc),var(--accd));color:#fff;
    box-shadow:0 6px 20px rgba(44,99,230,.4),inset 0 1px 0 rgba(255,255,255,.25)}
.landing .btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(44,99,230,.55),inset 0 1px 0 rgba(255,255,255,.25)}
.landing .btn-ghost{background:rgba(255,255,255,.05);color:var(--dt);border-color:var(--dl2)}
.landing .btn-ghost:hover{background:rgba(255,255,255,.1)}

.ltop{position:sticky;top:0;z-index:40;background:rgba(10,14,26,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--dl)}
.ltop .lwrap{display:flex;align-items:center;gap:24px;height:66px}
.llogo{font-weight:800;font-size:1.3rem;letter-spacing:-.03em;display:flex;align-items:center;gap:10px;color:var(--dt)}
.lmark{width:28px;height:28px;border-radius:9px;box-shadow:0 3px 12px rgba(91,140,255,.5)}
.lnavlinks{margin-left:auto;display:flex;align-items:center;gap:22px}
.lnavlinks>a{color:var(--dtm);font-size:.92rem;font-weight:500}
.lnavlinks>a:hover{color:var(--dt)}
@media(max-width:860px){.lnavlinks a.hide-sm{display:none}}
.llang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;border-radius:9px;
    background:rgba(255,255,255,.05);border:1px solid var(--dl2);color:var(--dt);font-size:.85rem;font-weight:600;cursor:pointer}
.lang-btn:hover{background:rgba(255,255,255,.1)}
.lang-menu{position:absolute;right:0;top:46px;background:var(--surface);border:1px solid var(--dl2);border-radius:11px;
    padding:6px;min-width:170px;box-shadow:0 20px 44px rgba(0,0,0,.5);z-index:60;max-height:min(66vh,420px);overflow-y:auto}
.lang-menu button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;color:var(--dt);
    padding:9px 11px;border-radius:8px;font-size:.88rem;cursor:pointer;text-align:left}
.lang-menu button:hover{background:rgba(255,255,255,.06)}
.lang-menu button.sel{color:var(--acc2);font-weight:600}
.lang-menu .flag{font-size:1.05rem}

.lhero{position:relative;padding:76px 0 44px;overflow:hidden}
.lhero::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:640px;pointer-events:none;
    background:radial-gradient(60% 60% at 72% 12%,rgba(91,140,255,.28),transparent 70%),radial-gradient(46% 46% at 12% 4%,rgba(155,140,255,.18),transparent 70%)}
.lhero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:linear-gradient(var(--dl) 1px,transparent 1px),linear-gradient(90deg,var(--dl) 1px,transparent 1px);
    background-size:52px 52px;mask-image:radial-gradient(80% 55% at 50% 0%,#000,transparent 75%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:38px}}
.lhero h1{font-size:clamp(2.5rem,6vw,4.2rem);margin:20px 0 0}
.lhero h1 .grad{background:linear-gradient(100deg,var(--acc2),var(--violet));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lhero .lede{margin:22px 0 30px;color:var(--dtm);font-size:1.14rem;max-width:36ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.landing .micro{margin-top:26px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-family:var(--mono);font-size:.76rem;color:var(--dtd)}
.dotsep{width:3px;height:3px;border-radius:50%;background:var(--dtd)}

.mock{background:linear-gradient(180deg,var(--surface),var(--ground-2));border:1px solid var(--dl2);border-radius:16px;
    box-shadow:0 40px 90px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.05) inset;overflow:hidden;
    transform:perspective(1500px) rotateY(-8deg) rotateX(3deg);transform-origin:right center}
@media(max-width:900px){.mock{transform:none}}
.mock-bar{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--dl);background:rgba(255,255,255,.02)}
.mock .tl{width:11px;height:11px;border-radius:50%}
.mock .tl.r{background:#ff5f57}.mock .tl.y{background:#febc2e}.mock .tl.g{background:#28c840}
.mock-key{margin-left:8px;font-family:var(--mono);font-size:.78rem;color:var(--dtm)}
.mock-key b{color:var(--acc2);font-weight:600}
.ai-btn{margin-left:auto;font-size:.72rem;font-weight:600;color:var(--acc2);background:rgba(91,140,255,.12);
    border:1px solid rgba(91,140,255,.32);border-radius:8px;padding:6px 11px}
.kcard{padding:6px 0}
.klang{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:14px 16px}
.klang+.klang{border-top:1px solid var(--dl)}
.klang .lc{font-family:var(--mono);font-size:.72rem;color:var(--dtd);text-transform:uppercase;letter-spacing:.1em}
.klang .lv{font-size:.98rem;color:var(--dt)}
.klang.ai .lv{color:var(--amber)}
.caret{display:inline-block;width:2px;height:1.05em;background:var(--amber);vertical-align:-.18em;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ls{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;padding:4px 9px;border-radius:20px;font-weight:600;white-space:nowrap}
.ls.ok{color:var(--mint);background:rgba(79,209,181,.13);border:1px solid rgba(79,209,181,.28)}
.ls.ai{color:var(--amber);background:rgba(245,181,68,.13);border:1px solid rgba(245,181,68,.3)}
.mock-foot{display:flex;align-items:center;gap:10px;padding:13px 16px;border-top:1px solid var(--dl);background:rgba(255,255,255,.02);font-size:.8rem;color:var(--dtm)}
.mock-foot .spark2{color:var(--amber);font-weight:600;font-family:var(--mono);font-size:.72rem}
.mock-foot .spark{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--acc2)}

.lstrip{border-top:1px solid var(--dl);border-bottom:1px solid var(--dl);background:linear-gradient(180deg,var(--ground-2),rgba(21,28,51,.4))}
.lstrip .lwrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding:24px}
.strip-label{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--dtd);white-space:nowrap}
.strip-items{display:flex;gap:12px;flex-wrap:wrap;flex:1}
.pitem{display:inline-flex;align-items:center;gap:10px;padding:9px 15px 9px 10px;border:1px solid var(--dl);border-radius:13px;
    background:var(--surface);font-weight:650;font-size:.9rem;color:var(--dt);transition:transform .15s,border-color .15s}
.pitem:hover{border-color:var(--acc);transform:translateY(-2px)}
.pico{width:28px;height:28px;border-radius:9px;background:rgba(91,140,255,.12);border:1px solid rgba(91,140,255,.2);display:grid;place-items:center;font-size:15px}
.pitem em{font-style:normal;font-family:var(--mono);font-size:.7rem;color:var(--dtd);background:rgba(255,255,255,.05);padding:3px 8px;border-radius:7px}

.lsec{padding:92px 0}
.lsec.alt{background:var(--ground-2);border-top:1px solid var(--dl);border-bottom:1px solid var(--dl)}
.lsec-head{max-width:660px;margin-bottom:44px}
.lsec-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-top:12px}
.lsec-head p{color:var(--dtm);margin-top:14px;font-size:1.08rem}
.landing .bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.landing .bento{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.landing .bento{grid-template-columns:1fr}}
.lcard{background:linear-gradient(180deg,var(--surface),var(--ground-2));border:1px solid var(--dl);border-radius:16px;padding:26px;transition:border-color .18s,transform .18s}
.lcard:hover{border-color:var(--dl2);transform:translateY(-3px)}
.lcard.span2{grid-column:span 2}
@media(max-width:600px){.lcard.span2{grid-column:span 1}}
.lcard .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:20px;margin-bottom:16px;background:rgba(91,140,255,.12);border:1px solid rgba(91,140,255,.22)}
.lcard h3{font-size:1.16rem}
.lcard p{color:var(--dtm);margin-top:9px;font-size:.96rem}

.lsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:760px){.lsteps{grid-template-columns:1fr}}
.lstep{padding-top:22px;border-top:2px solid var(--dl2)}
.lstep .n{font-family:var(--mono);font-size:.8rem;color:var(--acc2);letter-spacing:.1em}
.lstep h3{font-size:1.15rem;margin-top:10px}
.lstep p{color:var(--dtm);margin-top:8px;font-size:.95rem}

.pricewrap{text-align:center}
.pricewrap h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:12px 0 8px}
.price-sub{color:var(--dtm);max-width:520px;margin:0 auto 30px}
.landing .toggle{display:inline-flex;gap:4px;padding:5px;background:var(--surface);border:1px solid var(--dl);border-radius:13px;margin:0 auto 40px}
.landing .toggle button{border:0;background:none;color:var(--dtm);font-weight:600;font-size:.88rem;padding:10px 18px;border-radius:9px;cursor:pointer;transition:.15s}
.landing .toggle button.active{background:linear-gradient(180deg,var(--acc),var(--accd));color:#fff;box-shadow:0 4px 14px rgba(44,99,230,.4)}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:left}
@media(max-width:940px){.plans{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.plans{grid-template-columns:1fr}}
.landing .plan{position:relative;background:linear-gradient(180deg,var(--surface),var(--ground-2));border:1px solid var(--dl);border-radius:16px;padding:26px 22px;display:flex;flex-direction:column}
.landing .plan.hot{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 24px 50px rgba(44,99,230,.22)}
.landing .plan .pop{position:absolute;top:-11px;left:22px;font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.12em;background:linear-gradient(180deg,var(--acc),var(--accd));color:#fff;padding:5px 11px;border-radius:20px;font-weight:700}
.landing .plan .pn{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--dtm)}
.landing .plan .pp{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;margin:12px 0 2px;font-variant-numeric:tabular-nums}
.landing .plan .pp small{font-size:.9rem;font-weight:500;color:var(--dtd)}
.landing .plan ul{list-style:none;padding:0;margin:18px 0 22px;display:flex;flex-direction:column;gap:11px;flex:1}
.landing .plan li{position:relative;padding-left:24px;font-size:.9rem;color:var(--dt)}
.landing .plan li::before{content:"✓";position:absolute;left:0;top:-1px;color:var(--mint);font-weight:700}
.landing .plan li b{font-variant-numeric:tabular-nums}
.landing .plan li.dim{color:var(--dtd)}.landing .plan li.dim::before{content:"–";color:var(--dtd)}
.pricenote{margin:26px auto 0;color:var(--dtd);font-size:.86rem;max-width:640px}

.band{background:linear-gradient(120deg,var(--surface-2),var(--ground-2));border:1px solid var(--dl);border-radius:22px;padding:44px;display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;text-align:left}
@media(max-width:760px){.band{grid-template-columns:1fr;padding:32px}}
.band h2{font-size:1.9rem;margin-top:12px}
.band p{color:var(--dtm);margin-top:12px}
.opts{display:flex;flex-direction:column;gap:12px}
.opt{background:var(--surface);border:1px solid var(--dl);border-radius:13px;padding:16px 18px}
.opt .ot{font-weight:700;font-size:.98rem}
.opt .op{font-family:var(--mono);color:var(--acc2);font-size:.86rem;margin-top:3px}

.lfinal{padding:96px 0;text-align:center;position:relative;overflow:hidden}
.lfinal::before{content:"";position:absolute;inset:auto 0 -40% 0;height:520px;pointer-events:none;background:radial-gradient(50% 60% at 50% 100%,rgba(91,140,255,.3),transparent 70%)}
.lfinal .lwrap{position:relative}
.lfinal h2{font-size:clamp(2rem,4.5vw,3.2rem)}
.lfinal p{color:var(--dtm);margin:16px auto 30px;max-width:46ch;font-size:1.1rem}

.lfoot{border-top:1px solid var(--dl);padding:34px 0;color:var(--dtd)}
.lfoot .lwrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:.86rem}
.lfoot .sp{margin-left:auto}
@media(prefers-reduced-motion:reduce){.landing *{animation:none!important;transition:none!important}}

/* feature list bife — folosit în OrgDetail (carduri de plan) */
.plan-feats { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.plan-feats li { position: relative; padding-left: 22px; font-size: 13px; color: var(--ink); }
.plan-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 700; }

/* ---- pagina proiect ---- */
.proj-head { margin-bottom: 20px; }
.proj-head-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.proj-title h1 { margin: 0 0 4px; }
.proj-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.tab { border: none; background: none; padding: 10px 16px; cursor: pointer; font-weight: 600;
    color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 14px; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin-bottom: 16px; }

/* tabel chei aerisit + inputuri stilizate */
table.keys th { background: var(--card); }
table.keys th:first-child { min-width: 200px; }
table.keys th.loc-col { min-width: 200px; }        /* coloanele de limbă nu se mai strâng */
table.keys td { padding: 6px 8px; }
.keys .cell input { min-width: 160px; }
.keys .key-name { font-weight: 600; }
.keys .cell { position: relative; }
.keys .cell input { width: 100%; border: 1px solid transparent; background: transparent;
    border-radius: 7px; padding: 8px 9px; font-size: 14px; transition: .1s; }
.keys .cell input:hover:not(:disabled) { border-color: var(--line); background: var(--input-bg); }
.keys .cell input:focus { border-color: var(--primary); background: var(--input-bg); box-shadow: 0 0 0 3px var(--primary-100); }
.keys .cell input:disabled { color: var(--ink); }
.keys .cell.missing input { background: var(--warning-100); }
.keys .cell.missing input:hover:not(:disabled) { background: var(--input-bg); }
.keys .ai-dot { position: absolute; top: 3px; right: 5px; font-size: 9px; color: var(--warning);
    font-weight: 700; letter-spacing: .02em; pointer-events: none; }
.icon-btn { border: 1px solid var(--line); background: var(--input-bg); width: 32px; height: 32px; border-radius: 8px;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.icon-btn:hover { background: var(--bg); border-color: var(--evo-blue-300, #99BCED); }
.settings-card h3 { margin-bottom: 4px; }
.settings-card .hint { color: var(--muted); font-size: 13px; margin-bottom: 12px; }

/* toolbar chei (Traduceri) */
.tbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin-bottom: 16px; }
.tbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tbar .btn { height: 40px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px; }
.tbar select { height: 40px; }
.search-wrap { position: relative; }
.search-wrap input { padding-left: 34px; width: 280px; height: 40px; }
.search-wrap .mag { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--muted); pointer-events: none; font-size: 14px; }
.toggle-pill { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; height: 40px;
    border: 1px solid var(--line); border-radius: 20px; cursor: pointer; font-size: 13px;
    user-select: none; background: var(--input-bg); white-space: nowrap; }
.toggle-pill:hover { border-color: var(--evo-blue-300, #99BCED); }
.toggle-pill.on { background: var(--primary-50); border-color: var(--primary);
    color: var(--primary-300); font-weight: 600; }
.toggle-pill input { display: none; }
.vsep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px; }
/* Export „segmentat”: select lipit de buton */
.seg { display: inline-flex; }
.seg > select { border-radius: 8px 0 0 8px; width: auto; background-color: var(--bg); font-weight: 600; }
.seg > .btn { border-radius: 0 8px 8px 0; border-left: none; }
.import-lbl { margin: 0; cursor: pointer; }
.import-loc { width: auto !important; }
/* export/import mutate jos, sub tabel */
.io-footer { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 12px; }
.io-row { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
.io-block { display: flex; flex-direction: column; gap: 7px; }
.io-block .io-label { font-size: 12px; color: var(--muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: .03em; }

/* paginare tabel chei */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.pager-ctrls { display: flex; align-items: center; gap: 8px; }
.page-size { width: auto !important; height: 34px !important; padding: 0 30px 0 10px !important; }
.pager .icon-btn { width: 34px; height: 34px; font-size: 16px; }
.pager .icon-btn:disabled { opacity: .45; cursor: default; }

/* analitică dashboard: blocuri per organizație + tabel compact de tokeni */
.org-block { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.org-block + .org-block { margin-top: 0; }
table.mini { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 13px; }
table.mini th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
    color: var(--muted); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--line); }
table.mini td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
table.mini tr:last-child td { border-bottom: none; }
table.mini tr.zero td { color: var(--muted); }

/* progres pe proiecte (dashboard): bară albastră în lucru, verde la 100% */
.prog-row { padding: 8px 10px; margin: 0 -10px; border-radius: 8px; transition: background .12s; }
.prog-row:hover { background: var(--primary-50); }
.prog-row .bar > span { background: var(--primary); }
.prog-row .bar.done > span { background: var(--success); }

/* banner de eroare Blazor: ASCUNS implicit; Blazor îl face display:block DOAR la o excepție netratată */
#blazor-error-ui {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
    padding: 13px 48px 13px 20px;
    background: var(--evo-apricot-100, #FEEFC6);
    color: var(--evo-apricot-700, #B54708);
    border-top: 1px solid var(--evo-apricot-300, #FEC84B);
    box-shadow: 0 -2px 12px rgba(16,24,40,.14);
    font-size: 14px; font-weight: 500;
}
#blazor-error-ui .reload { color: inherit; text-decoration: underline; font-weight: 700; margin-left: 8px; }
#blazor-error-ui .dismiss { position: absolute; right: 16px; top: 11px; cursor: pointer; font-size: 16px; opacity: .8; }
#blazor-error-ui .dismiss:hover { opacity: 1; }

/* carduri proiecte (dashboard translator) */
.proj-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-top: 12px; }
.proj-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; cursor: pointer;
    box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s, border-color .12s; }
.proj-card:hover { border-color: var(--evo-blue-300, #99BCED); box-shadow: 0 6px 16px rgba(16,24,40,.08); transform: translateY(-2px); }
.proj-card .pc-name { font-weight: 700; font-size: 15px; }

/* pagina de integrare: blocuri de cod + pași */
.step-h { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.codeblock { position: relative; }
.codeblock pre { background: #0F172A; color: #E2E8F0; border-radius: 10px; padding: 14px 16px;
    overflow-x: auto; font-size: 13px; line-height: 1.5; margin: 0; }
.codeblock pre code { font-family: ui-monospace, "SF Mono", Menlo, monospace; white-space: pre; }
.cb-copy { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 7px;
    border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); color: #E2E8F0;
    cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.cb-copy:hover { background: rgba(255,255,255,.18); }

/* card call-to-action „conectează aplicația" pe dashboard */
.connect-card { display: flex; align-items: center; gap: 14px; }
.connect-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--primary-100);
    display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.connect-arrow { margin-left: auto; font-size: 22px; color: var(--muted); }
.stat.link { cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.stat.link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,24,40,.08); border-color: var(--evo-blue-300, #99BCED); }

/* reordonare coloane limbi în tabelul de traduceri */
.loc-head { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.loc-move { border: none; background: transparent; color: var(--muted); cursor: pointer;
    font-size: 10px; padding: 2px 4px; border-radius: 4px; line-height: 1; }
.loc-move:hover:not(:disabled) { background: var(--primary-50); color: var(--primary); }
.loc-move:disabled { opacity: .25; cursor: default; }

/* real-time: prezență „X editează" + flash la schimbare live */
.cell.peer-editing input { border-color: var(--warning); box-shadow: 0 0 0 2px var(--warning-100); }
.peer-badge { display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 600;
    background: var(--warning-100); color: #B54708; padding: 1px 8px; border-radius: 10px; white-space: nowrap; }
.flash-badge { display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 600;
    background: var(--success-100); color: var(--success); padding: 1px 8px; border-radius: 10px;
    white-space: nowrap; animation: flashfade 4s ease-out forwards; }
@keyframes flashfade { 0%,70% { opacity: 1; } 100% { opacity: 0; } }

/* roster prezență: cine e acum pe pagina proiectului */
.presence-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 2px; }
.presence-bar .chip.green { display: inline-flex; align-items: center; gap: 6px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success);
    box-shadow: 0 0 0 0 var(--success); animation: livepulse 1.8s ease-out infinite; }
@keyframes livepulse {
    0% { box-shadow: 0 0 0 0 rgba(18,183,106,.5); }
    70% { box-shadow: 0 0 0 5px rgba(18,183,106,0); }
    100% { box-shadow: 0 0 0 0 rgba(18,183,106,0); }
}