/* ==========================================================================
   DaCoViRe Utilitare — dcv.css
   Stilul comun al suitei (preluat din identitatea vizuală www.dacovire.ro).
   1. Tokens  2. Base  3. Header & footer  4. Buttons  5. Hub
   6. App page  7. Form controls  8. Results  9. Embed  10. Responsive
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root{
  --brandGreen:#00B050;
  --accentBlue:#2E6EAA;
  --accentBlue2:#3A80C0;
  --gearBlue:#4472C4;
  --cyan:#52D3FF;
  --greenSoft:#2BD982;
  --danger:#FF6B6B;
  --warn:#F5B942;

  --bg:#060D14;
  --bg2:#0A1622;
  --bg3:#0E1C2B;
  --text:#EAF2FB;
  --muted:#A3B5CB;
  --faint:#6F8399;
  --line:rgba(255,255,255,.10);
  --lineStrong:rgba(255,255,255,.18);
  --cardTop:rgba(255,255,255,.060);
  --cardBot:rgba(255,255,255,.025);
  --field:rgba(255,255,255,.035);
  --navBg:rgba(6,13,20,.78);
  --shadow:0 24px 60px rgba(0,0,0,.45);
  /* adâncime 3D: fața cardului + umbre stratificate (contact, apropiere, ambient) */
  --cardFace:linear-gradient(165deg, #13253B 0%, #0D1B2C 52%, #09141F 100%);
  --cardFoot:rgba(0,0,0,.20);
  --edgeHi:rgba(255,255,255,.09);
  --edgeLo:rgba(0,0,0,.45);
  --depth:inset 0 1px 0 var(--edgeHi), inset 0 -1px 0 var(--edgeLo),
    0 1px 1px rgba(0,0,0,.35), 0 4px 10px -2px rgba(0,0,0,.40),
    0 18px 36px -14px rgba(0,0,0,.60), 0 40px 70px -40px rgba(0,0,0,.70);
  --depthHover:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 var(--edgeLo),
    0 2px 2px rgba(0,0,0,.30), 0 14px 26px -8px rgba(0,0,0,.50),
    0 38px 70px -24px rgba(0,0,0,.75);
  --depthSoft:inset 0 1px 0 var(--edgeHi), 0 1px 1px rgba(0,0,0,.30), 0 10px 24px -12px rgba(0,0,0,.55);

  --radius:18px;
  --max:1180px;
  --sans:"Segoe UI Variable Text","Segoe UI",ui-sans-serif,system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --display:"Segoe UI Variable Display","Segoe UI",ui-sans-serif,system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"Liberation Mono",monospace;

  --accent:var(--brandGreen);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --greenSoft:#008A3E;
  --cyan:#1C7FB8;
  --danger:#D64545;
  --warn:#B7791F;
  --bg:#F4F8FC;
  --bg2:#FFFFFF;
  --bg3:#EEF3F9;
  --text:#0B1220;
  --muted:#465A73;
  --faint:#7A8BA0;
  --line:rgba(11,18,32,.10);
  --lineStrong:rgba(11,18,32,.18);
  --cardTop:rgba(255,255,255,.96);
  --cardBot:rgba(255,255,255,.88);
  --field:#FFFFFF;
  --navBg:rgba(244,248,252,.84);
  --shadow:0 18px 44px rgba(15,35,60,.10);
  --cardFace:linear-gradient(165deg, #FFFFFF 0%, #F8FBFE 58%, #EFF4FA 100%);
  --cardFoot:rgba(46,110,170,.045);
  --edgeHi:#FFFFFF;
  --edgeLo:rgba(15,35,60,.08);
  --depth:inset 0 1px 0 var(--edgeHi), inset 0 -1px 0 var(--edgeLo),
    0 1px 2px rgba(15,35,60,.08), 0 6px 14px -4px rgba(15,35,60,.12),
    0 22px 40px -18px rgba(15,35,60,.22), 0 44px 70px -44px rgba(15,35,60,.30);
  --depthHover:inset 0 1px 0 var(--edgeHi), inset 0 -1px 0 var(--edgeLo),
    0 2px 3px rgba(15,35,60,.08), 0 16px 28px -10px rgba(15,35,60,.18),
    0 40px 70px -26px rgba(15,35,60,.32);
  --depthSoft:inset 0 1px 0 var(--edgeHi), 0 1px 2px rgba(15,35,60,.07), 0 12px 26px -14px rgba(15,35,60,.20);
  color-scheme:light;
}

/* 2. Base ------------------------------------------------------------------ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0; padding:0}
body{
  min-height:100vh; display:flex; flex-direction:column;
  font-family:var(--sans); color:var(--text); background:var(--bg);
  line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 620px at 12% -8%, rgba(0,176,80,.14), transparent 60%),
    radial-gradient(1000px 700px at 96% 2%, rgba(58,128,192,.24), transparent 58%),
    radial-gradient(900px 700px at 50% 118%, rgba(82,211,255,.08), transparent 55%);
}
:root[data-theme="light"] body::before{
  background:
    radial-gradient(900px 620px at 12% -8%, rgba(0,176,80,.09), transparent 60%),
    radial-gradient(1000px 700px at 96% 2%, rgba(58,128,192,.14), transparent 58%);
}
main{flex:1 0 auto}
a{color:var(--accentBlue2); text-decoration:none}
a:hover{color:var(--cyan)}
h1,h2,h3{font-family:var(--display); letter-spacing:-.02em; text-wrap:pretty; overflow-wrap:break-word; margin:0}
p, li{overflow-wrap:break-word}
p{margin:0}
.container{width:100%; max-width:var(--max); margin:0 auto; padding:0 22px}
.muted{color:var(--muted)}
.small{font-size:12.5px; color:var(--muted)}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px}
[hidden]{display:none !important}
.grad{
  background:linear-gradient(92deg, var(--greenSoft) 0%, var(--cyan) 55%, var(--accentBlue2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 14px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--greenSoft);
}
.eyebrow::before{content:""; width:22px; height:2px; border-radius:2px; background:currentColor}

/* 3. Header & footer ------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:50; background:var(--navBg);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex; align-items:center; gap:16px; min-height:64px}
.brand{display:flex; align-items:center; gap:14px; flex:0 0 auto; color:var(--text)}
.brand:hover{color:var(--text)}
.brand img{display:block; height:34px; width:auto}
.brand-sep{width:1px; height:26px; background:var(--lineStrong)}
.brand-suite{font:650 15px/1 var(--display); letter-spacing:.01em}
.brand-suite small{display:block; margin-top:4px; font:500 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.crumbs{display:flex; align-items:center; gap:8px; min-width:0; color:var(--muted); font-size:14px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--text)}
.crumbs b{color:var(--text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.crumbs svg{width:14px; height:14px; flex:0 0 auto; opacity:.6}
.nav-actions{display:flex; align-items:center; gap:10px; margin-left:auto}
.icon-btn{
  display:inline-grid; place-items:center; width:40px; height:40px; padding:0; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--text); cursor:pointer;
  transition:border-color .15s ease, transform .15s ease;
}
.icon-btn:hover{border-color:var(--lineStrong)}
.icon-btn svg{width:18px; height:18px}
.theme-toggle:hover{transform:rotate(18deg)}
.theme-toggle .i-sun{display:none}
:root[data-theme="light"] .theme-toggle .i-sun{display:block}
:root[data-theme="light"] .theme-toggle .i-moon{display:none}
/* comutatorul de limbă RO / EN */
.lang-toggle{
  display:inline-flex; align-items:center; height:40px; padding:4px; gap:2px; border-radius:999px;
  border:1px solid var(--line); background:transparent; cursor:pointer; font:700 12px/1 var(--sans); letter-spacing:.06em;
}
.lang-toggle:hover{border-color:var(--lineStrong)}
.lang-toggle span{display:grid; place-items:center; height:30px; min-width:34px; padding:0 8px; border-radius:999px; color:var(--faint); transition:background .15s ease, color .15s ease}
:root[lang="ro"] .lang-toggle [data-l="ro"], :root[lang="en"] .lang-toggle [data-l="en"]{background:var(--accent); color:#fff}

.foot{margin-top:56px; border-top:1px solid var(--line); background:linear-gradient(180deg, transparent, rgba(0,0,0,.12))}
:root[data-theme="light"] .foot{background:linear-gradient(180deg, transparent, rgba(46,110,170,.04))}
.foot-inner{display:flex; align-items:center; justify-content:space-between; gap:12px 18px; flex-wrap:wrap; padding-top:24px; padding-bottom:30px; color:var(--muted); font-size:13px}
.foot-brand{display:flex; align-items:center; gap:12px}
.foot-brand img{height:26px; width:auto}
.foot-links{display:flex; gap:18px; flex-wrap:wrap}
.foot-links a{color:var(--muted)}
.foot-links a:hover{color:var(--text)}
.privacy-dot{display:inline-flex; align-items:center; gap:8px}
.privacy-dot::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--brandGreen); box-shadow:0 0 0 4px rgba(0,176,80,.18)}

/* 4. Buttons --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 18px; border-radius:12px; border:1px solid var(--line);
  background:rgba(127,160,200,.06); color:var(--text);
  font:600 14.5px/1.2 var(--sans); text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover{color:var(--text); transform:translateY(-1px); border-color:rgba(82,211,255,.40)}
.btn.primary{
  border-color:transparent; color:#fff;
  background:linear-gradient(180deg, var(--accentBlue2), var(--accentBlue));
  box-shadow:0 10px 26px rgba(46,110,170,.35);
}
.btn.primary:hover{color:#fff; box-shadow:0 14px 32px rgba(46,110,170,.50)}
.btn.green{
  border-color:transparent; color:#fff;
  background:linear-gradient(180deg, #12C267, #00994A);
  box-shadow:0 10px 26px rgba(0,176,80,.30);
}
.btn.green:hover{color:#fff; box-shadow:0 14px 32px rgba(0,176,80,.45)}
.btn.ghost{background:transparent}
.btn.sm{padding:7px 12px; font-size:13px; border-radius:10px; gap:7px}
.btn.lg{padding:14px 24px; font-size:15.5px; border-radius:14px}
.btn:disabled, .btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}
.btn svg{width:17px; height:17px; flex:0 0 auto}
.btn.sm svg{width:15px; height:15px}
.btn .spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 5. Hub ------------------------------------------------------------------- */
.hub-hero{position:relative; padding:64px 0 34px}
.hub-hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 80% at 50% 0%, #000 0%, transparent 75%);
          mask-image:radial-gradient(70% 80% at 50% 0%, #000 0%, transparent 75%);
}
.hub-hero h1{font-size:clamp(34px,5vw,56px); line-height:1.05; font-weight:750; letter-spacing:-.035em; margin-bottom:16px}
.hub-hero .lead{color:var(--muted); font-size:clamp(16px,1.5vw,18.5px); line-height:1.6}
.hub-hero .hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.points{display:flex; flex-wrap:wrap; gap:10px 22px; margin:26px 0 0; padding:0; list-style:none; color:var(--muted); font-size:14px}
.points li{display:flex; align-items:center; gap:8px}
.points svg{width:16px; height:16px; color:var(--greenSoft)}

.filters{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px}
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px;
  border:1px solid var(--line); background:rgba(127,160,200,.06); color:var(--muted);
  font:600 13px/1 var(--sans); cursor:pointer; transition:all .15s ease;
}
.chip:hover{color:var(--text); border-color:var(--lineStrong)}
.chip[aria-pressed="true"]{color:var(--text); background:rgba(0,176,80,.12); border-color:rgba(0,176,80,.4)}
.chip .n{font-weight:500; color:var(--faint)}

.app-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.app-grid{perspective:1400px}
.app-card{
  --rx:0deg; --ry:0deg; --ty:0px; --mx:50%; --my:0%;
  position:relative; display:flex; flex-direction:column; gap:14px; padding:26px 26px 0; overflow:hidden;
  border:1px solid var(--line); border-radius:20px;
  background:
    radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%),
    var(--cardFace);
  box-shadow:var(--depth);
  color:var(--text);
  transform:perspective(1100px) translateY(var(--ty)) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d; will-change:transform;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
/* bara de accent de sus, cu strălucire */
.app-card::before{
  content:""; position:absolute; z-index:1; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent) 70%, transparent);
  box-shadow:0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* reflexia care urmărește mouse-ul */
.app-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:0;
  background:radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.07), transparent 45%);
  transition:opacity .3s ease;
}
:root[data-theme="light"] .app-card::after{background:radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.30), transparent 42%)}
.app-card:hover{
  --ty:-6px; color:var(--text);
  border-color:color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow:var(--depthHover), 0 30px 60px -34px color-mix(in srgb, var(--accent) 65%, transparent);
}
.app-card:hover::after{opacity:1}
.app-card:focus-visible{outline-offset:4px}
.app-card .top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.app-card h3{font-size:20px; line-height:1.2; letter-spacing:-.02em}
.app-card p{color:var(--muted); font-size:14.5px}
.app-card ul{margin:0; padding:0; list-style:none; color:var(--muted); font-size:13.5px}
.app-card li{position:relative; padding:6px 0 6px 20px; border-top:1px solid var(--line)}
.app-card li::before{
  content:""; position:absolute; left:2px; top:13px; width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--accent) 55%, #fff), var(--accent) 70%);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
/* subsolul cardului: bandă separată, ca un „raft” */
.app-card .foot-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:auto -26px 0; padding:14px 26px; border-top:1px solid var(--line); background:var(--cardFoot);
}
.app-card .open{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:10px;
  font-weight:650; font-size:13.5px; color:var(--text);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.app-card .open svg{width:16px; height:16px; transition:transform .2s ease}
.app-card:hover .open{color:#fff; background:var(--accent); box-shadow:0 8px 18px -8px var(--accent)}
.app-card:hover .open svg{transform:translateX(3px)}
.tag{
  display:inline-flex; align-items:center; padding:4px 10px; border-radius:99px;
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
}
.ver{font:500 12px/1 var(--mono); color:var(--faint)}

.app-icon{
  display:grid; place-items:center; flex:0 0 auto; width:50px; height:50px; border-radius:14px;
  color:var(--accent);
  background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -3px 6px color-mix(in srgb, var(--accent) 14%, transparent),
    0 8px 18px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.app-icon svg{width:24px; height:24px}
.app-icon.lg{width:64px; height:64px; border-radius:18px}
.app-icon.lg svg{width:30px; height:30px}

.info-band{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:42px; overflow:hidden;
  border:1px solid var(--line); border-radius:20px; background:var(--line); box-shadow:var(--depth);
}
.info-band > div{padding:24px; background:var(--cardFace)}
.info-band h3{font-size:16px; margin-bottom:6px; display:flex; align-items:center; gap:10px}
.info-band h3 svg{width:18px; height:18px; color:var(--greenSoft)}
.info-band p{color:var(--muted); font-size:14px}

/* 6. App page -------------------------------------------------------------- */
.app-hero{padding:40px 0 26px}
.app-head{display:flex; align-items:center; gap:20px}
.app-head .kicker{display:block; margin-bottom:6px; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.app-head h1{font-size:clamp(28px,3.6vw,40px); line-height:1.08; font-weight:750; letter-spacing:-.03em}
.app-head > div{flex:1; min-width:0}
.app-head p{margin-top:8px; color:var(--muted); font-size:16.5px}
.trust{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; padding:0; list-style:none}
.trust li{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); background:rgba(127,160,200,.05); color:var(--muted); font-size:12.5px; font-weight:500;
}
.trust svg{width:14px; height:14px; color:var(--greenSoft)}
.trust .trust-link{padding:0; border-color:color-mix(in srgb, var(--accent) 45%, transparent)}
.trust .trust-link a{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; color:var(--text); font-weight:600}
.trust .trust-link a:hover{color:var(--accent)}
.trust .trust-link svg{color:var(--accent)}

.workspace{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:22px; align-items:start}
.stack{display:flex; flex-direction:column; gap:18px; min-width:0}
.panel{
  border:1px solid var(--line); border-radius:20px;
  background:var(--cardFace); box-shadow:var(--depthSoft);
  padding:22px 24px; min-width:0;
}
.panel-head{display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:18px}
.panel-head h2{font-size:17px; font-weight:680; letter-spacing:-.01em}
.panel-head .aside{margin-left:auto}
.step-n{
  display:grid; place-items:center; flex:0 0 auto; width:28px; height:28px; border-radius:9px;
  font:700 13px/1 var(--sans); color:var(--accent);
  background:color-mix(in srgb, var(--accent) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.side{position:sticky; top:84px; display:flex; flex-direction:column; gap:18px}
.side .panel{padding:20px}
.side h3{font-size:14.5px; margin-bottom:10px}
.side ol, .side ul{margin:0; padding-left:18px; color:var(--muted); font-size:13.5px}
.side li{margin:5px 0}
.side li::marker{color:var(--accent)}
.side p{color:var(--muted); font-size:13.5px}
.side code{font:12.5px var(--mono); padding:1px 6px; border-radius:6px; background:rgba(127,160,200,.12); color:var(--text)}
.note{
  display:flex; gap:10px; padding:12px 14px; border-radius:12px; font-size:13.5px; color:var(--muted);
  border:1px solid var(--line); background:rgba(127,160,200,.05);
}
.note svg{width:17px; height:17px; flex:0 0 auto; margin-top:2px; color:var(--accentBlue2)}
.note.warn{border-color:color-mix(in srgb, var(--warn) 40%, transparent); background:color-mix(in srgb, var(--warn) 8%, transparent)}
.note.warn svg{color:var(--warn)}
.note.err{border-color:color-mix(in srgb, var(--danger) 40%, transparent); background:color-mix(in srgb, var(--danger) 8%, transparent)}
.note.err svg{color:var(--danger)}

/* Drop zone */
.drop{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:34px 20px; text-align:center; border-radius:16px; cursor:pointer;
  border:1.5px dashed var(--lineStrong); background:rgba(127,160,200,.04);
  transition:border-color .15s ease, background .15s ease;
}
.drop:hover, .drop.over{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent)}
.drop .drop-ic{
  display:grid; place-items:center; width:52px; height:52px; border-radius:16px; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
}
.drop .drop-ic svg{width:26px; height:26px}
.drop strong{font-size:15.5px}
.drop span{color:var(--muted); font-size:13.5px}
.drop .drop-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:4px}
.drop input[type=file]{display:none}
.drop.compact{flex-direction:row; padding:16px 18px; gap:14px; text-align:left; justify-content:flex-start}
.drop.compact .drop-ic{width:42px; height:42px; border-radius:12px}

/* File list */
.files{display:flex; flex-direction:column; gap:8px; margin:14px 0 0; padding:0; list-style:none}
.file{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px;
  border:1px solid var(--line); background:rgba(127,160,200,.04);
}
.file .ext{
  display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px; border-radius:10px;
  font:750 10.5px/1 var(--sans); letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent);
}
.file .meta{min-width:0; flex:1}
.file .name{font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.file .sub{font-size:12.5px; color:var(--muted)}
.file .state{font-size:12.5px; color:var(--muted); white-space:nowrap}
.file .state.ok{color:var(--greenSoft)}
.file .state.err{color:var(--danger)}
.file .x{
  display:grid; place-items:center; width:30px; height:30px; flex:0 0 auto; border:0; border-radius:8px;
  background:transparent; color:var(--muted); cursor:pointer;
}
.file .x:hover{background:rgba(127,160,200,.12); color:var(--text)}
.file .x svg{width:15px; height:15px}
.files-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; font-size:13px; color:var(--muted)}

/* 7. Form controls --------------------------------------------------------- */
.fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 18px}
.fields.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.field{display:flex; flex-direction:column; gap:7px; min-width:0}
.field.full{grid-column:1 / -1}
.field > label, .field > .label{font-size:13px; font-weight:600; color:var(--text)}
.field .hint{font-size:12.5px; color:var(--muted)}
.input, .select{
  width:100%; padding:10px 12px; border-radius:11px; border:1px solid var(--line);
  background:var(--field); color:var(--text); font:14px/1.3 var(--sans); outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.select{
  appearance:none; padding-right:34px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3B5CB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:16px;
}
.select option{background:var(--bg2); color:var(--text)}
.input:focus, .select:focus{border-color:var(--accentBlue2); box-shadow:0 0 0 3px rgba(58,128,192,.22)}

.seg{display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:12px; border:1px solid var(--line); background:rgba(127,160,200,.05)}
.seg label{position:relative; cursor:pointer}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg span{display:block; padding:7px 14px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--muted); transition:all .15s ease}
.seg label:hover span{color:var(--text)}
.seg input:checked + span{color:var(--text); background:var(--bg3); box-shadow:0 1px 0 var(--lineStrong), 0 4px 14px rgba(0,0,0,.18)}
:root[data-theme="light"] .seg input:checked + span{background:#fff}
.seg input:focus-visible + span{outline:2px solid var(--cyan)}

.choices{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.choices.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.choices.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.choice{position:relative; cursor:pointer}
.choice input{position:absolute; opacity:0; pointer-events:none}
.choice .box{
  display:flex; gap:12px; height:100%; padding:14px; border-radius:14px;
  border:1px solid var(--line); background:rgba(127,160,200,.04); transition:all .15s ease;
}
.choice .box::before{
  content:""; flex:0 0 auto; width:16px; height:16px; margin-top:2px; border-radius:50%;
  border:1.5px solid var(--lineStrong); transition:all .15s ease;
}
.choice input:checked + .box{border-color:color-mix(in srgb, var(--accent) 55%, transparent); background:color-mix(in srgb, var(--accent) 8%, transparent)}
.choice input:checked + .box::before{border:5px solid var(--accent)}
.choice input:focus-visible + .box{outline:2px solid var(--cyan); outline-offset:2px}
.choice strong{display:block; font-size:14px}
.choice small{display:block; margin-top:2px; color:var(--muted); font-size:12.5px; line-height:1.45}

.check{display:flex; align-items:flex-start; gap:11px; cursor:pointer; font-size:14px}
.check input{position:absolute; opacity:0; pointer-events:none}
.check .tick{
  position:relative; flex:0 0 auto; width:38px; height:22px; margin-top:1px; border-radius:99px;
  background:rgba(127,160,200,.22); transition:background .15s ease;
}
.check .tick::after{
  content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .15s ease;
}
.check input:checked + .tick{background:var(--accent)}
.check input:checked + .tick::after{transform:translateX(16px)}
.check input:focus-visible + .tick{outline:2px solid var(--cyan); outline-offset:2px}
.check small{display:block; color:var(--muted); font-size:12.5px}
.checks{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px}

.range{display:flex; align-items:center; gap:12px}
.range input[type=range]{flex:1; accent-color:var(--accent)}
.range output{min-width:46px; padding:5px 8px; border-radius:8px; text-align:center; font:600 13px/1 var(--mono); background:rgba(127,160,200,.10)}

details.more{border-top:1px solid var(--line); margin-top:18px; padding-top:14px}
details.more summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--muted)}
details.more summary::-webkit-details-marker{display:none}
details.more summary svg{width:15px; height:15px; transition:transform .15s ease}
details.more[open] summary svg{transform:rotate(90deg)}
details.more summary:hover{color:var(--text)}
details.more .fields, details.more .checks{margin-top:16px}

/* 8. Results --------------------------------------------------------------- */
.run-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.run-row .grow{flex:1}
.progress{margin-top:18px}
.progress-top{display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--muted); margin-bottom:8px}
.progress-top b{color:var(--text); font-weight:600}
.bar{height:8px; border-radius:99px; background:rgba(127,160,200,.14); overflow:hidden}
.bar > i{
  display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--brandGreen), var(--cyan), var(--accentBlue2));
  transition:width .25s ease;
}
.bar.indet > i{width:35% !important; animation:indet 1.2s ease-in-out infinite}
@keyframes indet{0%{transform:translateX(-100%)} 100%{transform:translateX(290%)}}

.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-top:18px; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--line); box-shadow:var(--depthSoft)}
.stat{padding:14px 16px; background:var(--bg2)}
.stat b{display:block; font:720 22px/1.1 var(--display); letter-spacing:-.02em}
.stat span{display:block; margin-top:4px; color:var(--muted); font-size:12.5px}
.stat.good b{color:var(--greenSoft)}

.downloads{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}

.log{
  margin-top:16px; max-height:220px; overflow:auto; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line); background:rgba(0,0,0,.18);
  font:12.5px/1.65 var(--mono); color:var(--muted);
}
:root[data-theme="light"] .log{background:var(--bg3)}
.log div{white-space:pre-wrap; word-break:break-word}
.log .ok{color:var(--greenSoft)}
.log .warn{color:var(--warn)}
.log .err{color:var(--danger)}
.log time{color:var(--faint); margin-right:8px}

.table-wrap{margin-top:16px; max-height:420px; overflow:auto; border:1px solid var(--line); border-radius:12px}
table.data{width:100%; border-collapse:collapse; font-size:13px}
table.data th, table.data td{padding:8px 12px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; max-width:340px; overflow:hidden; text-overflow:ellipsis}
table.data th{position:sticky; top:0; z-index:1; background:var(--bg3); font-weight:650; color:var(--text)}
table.data td{color:var(--muted)}
table.data tr:hover td{background:rgba(127,160,200,.05); color:var(--text)}
table.data td.num{font-family:var(--mono); text-align:right}
.score{display:inline-block; min-width:42px; padding:3px 8px; border-radius:8px; text-align:center; font:650 12px/1.2 var(--mono)}
.score.hi{color:var(--greenSoft); background:rgba(0,176,80,.12)}
.score.mid{color:var(--warn); background:color-mix(in srgb, var(--warn) 14%, transparent)}
.score.lo{color:var(--danger); background:color-mix(in srgb, var(--danger) 12%, transparent)}

.toast-host{position:fixed; z-index:200; right:18px; bottom:18px; display:flex; flex-direction:column; gap:10px; pointer-events:none}
.toast{
  max-width:380px; padding:12px 16px; border-radius:12px; pointer-events:auto;
  background:var(--bg2); border:1px solid var(--lineStrong); box-shadow:var(--shadow);
  font-size:14px; animation:toast-in .2s ease;
}
.toast.ok{border-left:3px solid var(--brandGreen)}
.toast.err{border-left:3px solid var(--danger)}
.toast.warn{border-left:3px solid var(--warn)}
@keyframes toast-in{from{opacity:0; transform:translateY(8px)}}

/* 9. Embed (iframe în alte platforme: ?embed=1) ---------------------------- */
html.embed body::before{display:none}
html.embed body{background:transparent}
html.embed .nav, html.embed .foot{display:none}
html.embed .app-hero{padding-top:18px}
html.embed .side{top:16px}

/* 10. Responsive ----------------------------------------------------------
   laptop mic ≤1180 · tabletă ≤1020 · tabletă portret ≤820 · telefon ≤600 · telefon mic ≤380 */
@media (max-width:1180px){
  .workspace{grid-template-columns:minmax(0,1fr) 280px}
  .choices.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1020px){
  .app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workspace{grid-template-columns:1fr}
  .side{position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start}
  .side .note{grid-column:1 / -1}
  .hub-hero{padding:48px 0 28px}
}
@media (max-width:820px){
  .info-band{grid-template-columns:1fr}
  .choices.c3{grid-template-columns:1fr}
  .fields.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand-suite small{display:none}
}
@media (max-width:600px){
  .container{padding:0 16px}
  .nav-inner{min-height:58px; gap:10px}
  .brand img{height:30px}
  .brand-sep, .brand-suite{display:none}
  [data-install]{padding:7px 10px; font-size:0; gap:0}
  [data-install] svg{width:17px; height:17px}

  .hub-hero{padding:32px 0 22px}
  .hub-hero h1{font-size:clamp(28px,8.4vw,36px)}
  .hub-hero .lead{font-size:15.5px}
  .hub-hero .hero-actions{flex-direction:column}
  .hub-hero .hero-actions .btn{width:100%}
  .points{gap:8px 16px; font-size:13.5px}
  .filters{flex-wrap:nowrap; overflow-x:auto; margin-left:-16px; margin-right:-16px; padding:2px 16px 6px; scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto}

  .app-grid, .side, .fields, .fields.three, .checks, .choices, .choices.c3, .choices.c4{grid-template-columns:1fr}
  .app-card{padding:22px 20px 0}
  .app-card .foot-row{margin:auto -20px 0; padding:13px 20px}
  .info-band > div{padding:20px}

  .app-hero{padding:24px 0 18px}
  .app-head{align-items:flex-start; gap:14px}
  .app-icon.lg{width:52px; height:52px; border-radius:15px}
  .app-icon.lg svg{width:25px; height:25px}
  .app-head h1{font-size:clamp(25px,7.4vw,32px)}
  .app-head p{font-size:15px}
  .trust{gap:6px; margin-top:16px}
  .trust li{font-size:12px; padding:5px 10px}

  .workspace, .stack, .side{gap:14px}
  .panel{padding:18px 16px; border-radius:16px}
  .panel-head{margin-bottom:14px}
  .panel-head .aside{margin-left:0}
  .drop{padding:24px 14px}
  .drop .drop-actions{width:100%}
  .drop .drop-actions .btn{flex:1}
  .file{padding:9px 10px; gap:10px}
  .file .state{max-width:38%; overflow:hidden; text-overflow:ellipsis}

  .btn{white-space:normal; text-align:center}
  .run-row{flex-direction:column; align-items:stretch}
  .run-row .btn{width:100%}
  .run-row .small{text-align:center}
  .downloads{flex-direction:column}
  .downloads .btn{width:100%}
  .stat{padding:12px}
  .stat b{font-size:18px}
  table.data{font-size:12px}
  table.data th, table.data td{padding:7px 9px; max-width:220px}
  .log{font-size:11.5px}

  .foot{margin-top:36px}
  .foot-inner{flex-direction:column; align-items:flex-start; gap:12px}
  .toast-host{left:12px; right:12px; bottom:12px}
  .toast{max-width:none}
}
@media (max-width:380px){
  .stats{grid-template-columns:1fr}
  .seg{display:flex; width:100%}
  .seg label{flex:1}
  .seg span{text-align:center; padding:7px 8px}
}
@media (hover:none){
  .btn:hover{transform:none}
  .app-card{transform:none}
  .app-card:hover{--ty:0px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}

/* Hub: grupurile „gratuite” / „cu abonament” */
.group-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 24px; margin:6px 0 18px}
.group-head h2{font-size:24px; line-height:1.2; letter-spacing:-.02em}
.group-head p{margin-top:6px; color:var(--muted); font-size:14.5px; max-width:720px}
.group-head.pro{margin-top:44px}
.group-actions{display:flex; flex-wrap:wrap; gap:8px}
.app-card .tags{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px}
.tag.pro{gap:6px; color:var(--greenSoft); border-color:rgba(0,176,80,.4); background:rgba(0,176,80,.10)}
.tag.pro svg{width:12px; height:12px}
.app-card .price{margin-top:-4px; font-size:13.5px; font-weight:600; color:var(--greenSoft)}
.account{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted)}
.account b{color:var(--text); font-weight:600; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.account svg{width:16px; height:16px; color:var(--greenSoft)}
@media (max-width:640px){ .account b{display:none} }