/* קראנץ' - מחולל שמות לעטיפות - דמו */
:root{
  --bg:#0b0b0e;
  --surface:#15161c;
  --surface2:#1d1e26;
  --border:#2a2c38;
  --text:#f4f4f7;
  --muted:#a0a3b3;
  --dim:#6c6f80;
  --ok:#4ac6ad;
  --err:#ff6b6b;
  --rainbow:linear-gradient(90deg,#f2e455,#bdd96a,#7ecfcf,#4870b7,#b291c3,#ef5396,#ef3e3e,#f89b50);
  --display:'Heebo','Segoe UI',Arial,sans-serif;
  --body:'Assistant','Segoe UI',Arial,sans-serif;
  --r:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.6;direction:rtl;text-align:right;min-height:100vh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(900px 500px at 85% -10%,rgba(239,83,150,.14),transparent 60%),
             radial-gradient(800px 500px at 5% 10%,rgba(126,207,207,.12),transparent 60%),
             radial-gradient(700px 400px at 50% 110%,rgba(242,228,85,.08),transparent 60%)}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.2}
a{color:inherit}
button{font-family:inherit;font-size:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:15px;color:var(--text);background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:9px 12px;direction:rtl}
input[type=number]{direction:ltr;text-align:left}
input:focus,select:focus,textarea:focus{outline:2px solid #7ecfcf;outline-offset:1px;border-color:#7ecfcf}
::selection{background:#ef5396;color:#fff}

/* ===== כותרת עליונה ===== */
.top{position:sticky;top:0;z-index:20;background:rgba(11,11,14,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.top .in{max-width:1240px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.brand svg{width:44px;height:44px;flex:0 0 auto}
.brand .name{font-family:var(--display);font-weight:900;font-size:22px;line-height:1.05}
.brand .sub{font-size:12.5px;color:var(--muted)}
.tabs{display:flex;gap:4px;flex:1 1 auto;overflow-x:auto;scrollbar-width:none;padding:2px}
.tabs::-webkit-scrollbar{display:none}
.tab{background:transparent;color:var(--muted);border:1px solid transparent;border-radius:999px;padding:8px 16px;white-space:nowrap;font-weight:600;transition:.15s}
.tab:hover{color:var(--text);background:var(--surface2)}
.tab.active{color:#0b0b0e;background:#fff}
.tab .n{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:#ef5396;color:#fff;font-size:12px;text-align:center;margin-inline-start:6px;line-height:20px}
.tab.active .n{background:#0b0b0e;color:#fff}
.badge{border:1px solid var(--border);border-radius:999px;padding:4px 12px;font-size:13px;color:var(--muted);background:var(--surface);white-space:nowrap}
.badge b{color:var(--text)}

main{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:22px 16px 60px}
.screen{display:none;animation:fade .25s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ===== כלים כלליים ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:999px;padding:10px 20px;font-weight:700;text-decoration:none;transition:.15s;line-height:1.2}
.btn:hover{border-color:#555a70;transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.btn.primary{background:#fff;color:#0b0b0e;border-color:#fff}
.btn.primary:hover{background:#f0f0f4}
.btn.rainbow{background:var(--rainbow);color:#0b0b0e;border:none;position:relative}
.btn.sm{padding:6px 14px;font-size:14px}
.btn.ghost{background:transparent}
.msg{margin:10px 0 0;font-size:14.5px;padding:8px 12px;border-radius:10px;display:inline-block;max-width:100%}
.msg.ok{background:rgba(74,198,173,.14);color:#8fe6d2;border:1px solid rgba(74,198,173,.35)}
.msg.err{background:rgba(255,107,107,.12);color:#ff9b9b;border:1px solid rgba(255,107,107,.35)}
.msg[hidden]{display:none}
.eyebrow{font-size:13px;letter-spacing:.5px;color:var(--muted);font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--rainbow)}
.grad{background:var(--rainbow);-webkit-background-clip:text;background-clip:text;color:transparent}
.sect-title{font-size:28px;font-weight:900;margin-bottom:6px}
.sect-sub{color:var(--muted);margin:0 0 20px;max-width:720px}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12.5px;font-weight:700;border:1px solid var(--border);background:var(--surface2);color:var(--muted)}
.pill.ok{color:#8fe6d2;border-color:rgba(74,198,173,.4);background:rgba(74,198,173,.1)}
.pill.warn{color:#f2e455;border-color:rgba(242,228,85,.35);background:rgba(242,228,85,.08)}
.pill.busy{color:#7ecfcf;border-color:rgba(126,207,207,.4);background:rgba(126,207,207,.1)}
.pill.pink{color:#ff8ec0;border-color:rgba(239,83,150,.4);background:rgba(239,83,150,.1)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(74,198,173,.18);margin-inline-end:6px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(74,198,173,.15)}50%{box-shadow:0 0 0 7px rgba(74,198,173,.05)}}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.note{border:1px solid var(--border);border-inline-start:4px solid #7ecfcf;background:var(--surface);border-radius:12px;padding:12px 16px;color:var(--muted);font-size:14.5px}
.note b{color:var(--text)}

/* ===== מסך הבית ===== */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:center;padding:26px 0 10px}
.hero h1{font-size:46px;font-weight:900;letter-spacing:-.5px;margin:10px 0 14px}
.hero p.lead{font-size:18px;color:var(--muted);margin:0 0 22px;max-width:520px}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-visual{position:relative;min-width:0}
.hero>div{min-width:0}
canvas{max-width:100%}
.wcard,.fcard,.stage,.panel{min-width:0}
.hero-visual .frame{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--border);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03) inset;background:#000;transform:perspective(1400px) rotateY(-8deg) rotateX(3deg)}
.hero-visual canvas{display:block;width:100%;height:auto}
.hero-visual .cap{position:absolute;bottom:-14px;inset-inline-start:18px;background:#fff;color:#0b0b0e;border-radius:999px;padding:6px 14px;font-weight:700;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.hero-visual .cap span{font-family:var(--display)}
.hero-visual .names{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-bottom:12px}
.hero-visual .names span{background:rgba(21,22,28,.9);border:1px solid var(--border);border-radius:999px;padding:3px 10px;font-size:13px;color:var(--muted);transition:.3s}
.hero-visual .names span.on{background:#fff;color:#0b0b0e;border-color:#fff;transform:scale(1.06)}
.demo-note{margin-top:34px;padding:20px 24px;border-radius:var(--r);background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--rainbow) border-box;border:1px solid transparent;position:relative}
.demo-note .ttl{font-family:var(--display);font-weight:900;font-size:18px;margin-bottom:6px}
.demo-note p{margin:0;color:var(--muted);font-size:15.5px;max-width:960px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:38px 0 10px}
.stat{padding:18px 20px;position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--rainbow)}
.stat .v{font-family:var(--display);font-size:34px;font-weight:900;line-height:1.1}
.stat .k{color:var(--muted);font-size:14px;margin-top:4px}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.feat{display:flex;flex-direction:column;gap:10px;position:relative;transition:.2s}
.feat:hover{transform:translateY(-3px);border-color:#4a4d60}
.feat .num{font-family:var(--display);font-size:13px;font-weight:900;color:#0b0b0e;background:var(--rainbow);width:30px;height:30px;border-radius:9px;display:grid;place-items:center}
.feat h3{font-size:19px}
.feat p{margin:0;color:var(--muted);font-size:14.5px;flex:1}
.feat .btn{align-self:flex-start}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:26px;counter-reset:s}
.step{padding:16px 18px;border-inline-start:1px dashed var(--border);position:relative}
.step:first-child{border:none}
.step b{display:block;font-family:var(--display);font-size:16px;margin-bottom:4px}
.step span{color:var(--muted);font-size:14px}
.step::before{counter-increment:s;content:counter(s);font-family:var(--display);font-weight:900;font-size:40px;line-height:1;color:var(--border);display:block;margin-bottom:6px}

/* ===== העטיפות ===== */
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.wcard{padding:0;overflow:hidden;cursor:pointer;transition:.2s;display:flex;flex-direction:column}
.wcard:hover{transform:translateY(-3px);border-color:#4a4d60;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.wcard canvas{display:block;width:100%;height:auto;background:#000}
.wcard .body{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.wcard h3{font-size:17px}
.wcard .meta{font-size:13px;color:var(--muted);margin-top:2px}
.wcard.add{border-style:dashed;align-items:center;justify-content:center;min-height:260px;color:var(--muted);gap:8px;text-align:center;padding:24px}
.wcard.add .plus{width:56px;height:56px;border-radius:50%;border:2px dashed var(--border);display:grid;place-items:center;font-size:28px;color:var(--dim)}
.wcard.add:hover .plus{border-color:#7ecfcf;color:#7ecfcf}

/* ===== העורך ===== */
.ed-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.ed-head .back{color:var(--muted);text-decoration:none;font-weight:600}
.ed-head .back:hover{color:var(--text)}
.editor{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,380px);gap:18px;align-items:start}
.stage{padding:14px;position:sticky;top:78px}
.stage .cv{position:relative;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.stage canvas{display:block;width:100%;height:auto;touch-action:none;cursor:grab}
.stage canvas.dragging{cursor:grabbing}
.stage .hint{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:13px;margin-top:10px;flex-wrap:wrap}
.preview-names{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.preview-names label{font-size:12.5px;color:var(--muted);display:block}
.preview-names input{width:100%}
.panel{display:flex;flex-direction:column;gap:14px}
.fields{display:flex;flex-direction:column;gap:6px}
.fieldbtn{display:flex;align-items:center;gap:10px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:10px 12px;color:var(--text);text-align:right;width:100%}
.fieldbtn .sw{width:14px;height:14px;border-radius:4px;flex:0 0 auto;border:1px solid rgba(255,255,255,.2)}
.fieldbtn.active{border-color:#fff;background:#23242e}
.fieldbtn small{color:var(--muted);margin-inline-start:auto;font-size:12px}
.ctl{display:grid;grid-template-columns:96px 1fr;gap:8px 10px;align-items:center;font-size:14px}
.ctl label{color:var(--muted)}
.ctl .row{display:flex;gap:8px;align-items:center}
.ctl input[type=range]{flex:1;accent-color:#ef5396}
.ctl input[type=number]{width:74px;padding:6px 8px}
.ctl select{width:100%}
.ctl .full{grid-column:1/-1}
.swatches{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sw-btn{width:26px;height:26px;border-radius:8px;border:2px solid transparent;cursor:pointer;padding:0}
.sw-btn.on{border-color:#fff}
.sw-btn.rb{background:var(--rainbow)}
input[type=color]{width:34px;height:28px;padding:2px;border-radius:8px}
.chk{display:flex;align-items:center;gap:8px;color:var(--text);cursor:pointer}
.chk input{accent-color:#ef5396;width:16px;height:16px}
.font-note{font-size:12.5px;color:var(--muted);grid-column:1/-1;margin-top:-4px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ===== ההזמנות ===== */
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.sheet-head .title{display:flex;align-items:center;gap:10px}
.sheet-head .gs{width:34px;height:34px;border-radius:8px;background:#1e8e3e;display:grid;place-items:center;font-family:var(--display);font-weight:900;color:#fff;font-size:15px}
.sheet{overflow:auto;padding:0}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:820px}
th{font-family:var(--display);font-weight:700;color:var(--muted);font-size:13px;text-align:right;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--surface2);white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
tr.order:hover td{background:rgba(255,255,255,.02)}
tr.expand td{background:var(--surface2);padding:12px 18px 16px}
tr.expand[hidden]{display:none}
.names-chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px 10px;font-size:13px}
.chip small{color:var(--muted)}
td select{padding:6px 10px;font-size:14px;border-radius:8px}
td select.s-pending{border-color:rgba(242,228,85,.5);color:#f2e455}
td select.s-approved,td select.s-working{border-color:rgba(126,207,207,.5);color:#7ecfcf}
td select.s-done{border-color:rgba(74,198,173,.5);color:#8fe6d2}
.prog{height:6px;border-radius:6px;background:var(--border);overflow:hidden;margin-top:8px;width:200px;max-width:100%}
.prog i{display:block;height:100%;background:var(--rainbow);width:0;transition:width .12s linear}
.row-msg{font-size:13px;color:var(--muted);margin-top:6px}
.row-msg.ok{color:#8fe6d2}
.tog{background:none;border:none;color:var(--muted);padding:0;font-weight:600}
.tog:hover{color:var(--text)}
.manual{margin-top:22px}
.manual .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.manual .grid label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.manual .grid input,.manual .grid select,.manual textarea{width:100%}
.manual textarea{min-height:120px;resize:vertical;line-height:1.6}
.manual .full{grid-column:1/-1}

/* ===== קבצים מוכנים ===== */
.fgroup{margin-bottom:22px}
.fgroup .head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.fgroup .head h3{font-size:19px}
.fgroup .head .meta{color:var(--muted);font-size:14px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.fcard{padding:0;overflow:hidden;transition:.2s}
.fcard:hover{border-color:#4a4d60;transform:translateY(-2px)}
.fcard canvas{display:block;width:100%;height:auto;background:#000}
.fcard .body{padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.fcard .nm{font-weight:700;font-size:15px}
.fcard .fn{font-size:12px;color:var(--muted);direction:ltr;text-align:right}
.empty{text-align:center;color:var(--muted);padding:50px 20px}
.empty .big{font-size:44px;margin-bottom:8px}

footer{position:relative;z-index:1;border-top:1px solid var(--border);color:var(--muted);font-size:13.5px;padding:18px 16px;max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
footer .reset{background:none;border:none;color:var(--dim);text-decoration:underline;padding:0}

@media(max-width:960px){
  .hero{grid-template-columns:1fr;gap:40px}
  .hero h1{font-size:36px}
  .hero-visual .frame{transform:none}
  .hero-visual .names{justify-content:flex-start}
  .stats,.feats{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .editor{grid-template-columns:1fr}
  .stage{position:static}
  .manual .grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .hero h1{font-size:30px}
  .steps{grid-template-columns:1fr}
  .preview-names{grid-template-columns:1fr}
  .brand .sub{display:none}
}

/* ===== הסוכן הבודק ===== */
.qa-box{margin-top:12px;font-size:14px;padding:9px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface2);color:var(--muted)}
.qa-box:empty{display:none}
.qa-box b{color:var(--text)}
.qa-box.ok{border-color:rgba(74,198,173,.35);background:rgba(74,198,173,.08);color:#8fe6d2}
.qa-box.warn{border-color:rgba(242,228,85,.35);background:rgba(242,228,85,.06);color:#f2e455}
.qa-box.err{border-color:rgba(255,107,107,.4);background:rgba(255,107,107,.08);color:#ff9b9b}
.fgroup .qa-box{margin:0 0 12px}
.fcard.qa-err{border-color:rgba(255,107,107,.55)}
.fcard.qa-warn{border-color:rgba(242,228,85,.35)}
.fqa{font-size:12.5px;padding:0 12px 10px;line-height:1.45}
.fqa.err{color:#ff9b9b}
.fqa.warn{color:#e8db6a}

/* ===== דוגמאות מרובות בעורך ===== */
.samples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sample{margin:0;background:var(--surface2);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.sample canvas{display:block;width:100%;height:auto;background:#000}
.sample figcaption{padding:6px 10px;font-size:13px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.sample small{color:var(--muted)}
.sample .qa{font-size:12px;width:100%}
.sample .qa.ok{color:#8fe6d2}
.sample .qa.warn{color:#e8db6a}
.sample .qa.err{color:#ff9b9b}
.notes{margin-top:16px}
.notes label{display:block;font-size:13px;color:var(--muted);font-weight:700;margin-bottom:4px}
.notes textarea{width:100%;resize:vertical;line-height:1.6}
.notes small{color:var(--dim);font-size:12.5px}

/* ===== כללים לפי מספר אותיות ===== */
.rule{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13.5px;color:var(--muted);padding:6px 0;border-bottom:1px dashed var(--border)}
.rule input{width:58px;padding:5px 6px}
.rule .x{margin-inline-start:auto;background:none;border:1px solid var(--border);color:var(--muted);border-radius:8px;width:28px;height:28px;line-height:1}
.rule .x:hover{color:var(--err);border-color:var(--err)}

/* ===== הגדרות כלליות ===== */
.set-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card-h{font-size:18px;margin-bottom:4px}
.muted{color:var(--muted)}
.small{font-size:13.5px}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.slots label{display:block;font-size:13px;color:var(--muted)}
.slots select{width:100%}
.set-grid .ctl input:not([type=number]){width:100%}
.ex{font-size:13px;color:var(--muted);direction:rtl}
.ex b{color:var(--text);font-weight:600}
code{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:0 5px;font-size:12.5px;direction:ltr;unicode-bidi:isolate}
.fonts-t{min-width:640px}
.fonts-t td .row{display:flex;align-items:center;gap:6px}
.fonts-t input{width:76px;padding:5px 8px}
.fsample{display:block;width:300px;height:56px;max-width:100%}

@media(max-width:960px){
  .set-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .samples{grid-template-columns:1fr}
}

/* ===== הקטלוג המלא ===== */
.cat-head{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between}
.cat-title{font-size:22px;margin:0 0 4px}
.cat-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cat-tools input{min-width:220px;padding:9px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface2);color:inherit;font:inherit}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.seg button{background:none;border:0;color:var(--muted);padding:8px 12px;font:inherit;font-size:14px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface2);color:inherit;font-weight:600}
.cat-count{color:var(--muted);font-size:14px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:16px}
.ccard{cursor:pointer;overflow:hidden;transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.ccard:hover{transform:translateY(-2px)}
.ccard img{display:block;width:100%;height:auto;background:var(--surface2)}
.ccard .cbody{padding:10px 12px 12px;display:grid;gap:3px}
.ccard .cbody span{color:var(--muted);font-size:14px}
.ctags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tag{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}
.tag.integ{border-color:#7ecfcf;color:#7ecfcf}
.tag.ok{border-color:#6fcf8f;color:#6fcf8f}
.ccard .msg{margin:6px 0 0;font-size:13px}
.cgrid .empty{color:var(--muted)}
@media (prefers-reduced-motion:reduce){.ccard{transition:none}.ccard:hover{transform:none}}
@media (max-width:600px){.cat-tools input{min-width:0;width:100%}.cgrid{grid-template-columns:1fr 1fr;gap:10px}}

/* =====================================================================
   עיצוב 2 (21.10.2026) - בהיר, שמח וזורם, בצבעי קראנץ׳
   שכבה מעל הבסיס: מחליפה את הטוקנים ואת הצבעים הכהים שהיו קבועים בקוד
   ===================================================================== */
:root{
  --bg:#fff7fa; --surface:#ffffff; --surface2:#fdf0f5; --border:#f3dbe6;
  --text:#201e1f; --muted:#6b5f66; --dim:#a3949c;
  --pink:#e5388a; --pink-d:#c42672; --teal:#34bfa3; --teal-d:#1f9b83; --sun:#f7c948;
  --ok:#1f9b83; --err:#d93a3a;
  --r:20px; --r-sm:12px;
  --shadow:0 10px 30px rgba(229,56,138,.10),0 2px 6px rgba(32,30,31,.04);
  --shadow-up:0 22px 48px rgba(229,56,138,.18),0 4px 10px rgba(32,30,31,.06);
  --out:cubic-bezier(.16,1,.3,1); --in:cubic-bezier(.4,0,1,1); --inout:cubic-bezier(.65,0,.35,1); --spring:cubic-bezier(.34,1.56,.64,1);
}
body{background:var(--bg);color:var(--text);line-height:1.7}
body::before{background:none}
/* כתמי צבע רכים שנעים לאט ברקע - רק transform */
.blobs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blobs i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform;animation:drift 22s var(--inout) infinite alternate}
.blobs i:nth-child(1){width:520px;height:520px;background:#ffd1e6;top:-160px;inset-inline-start:-120px}
.blobs i:nth-child(2){width:460px;height:460px;background:#c9f2e8;top:30%;inset-inline-end:-160px;animation-duration:28s;animation-delay:-6s}
.blobs i:nth-child(3){width:380px;height:380px;background:#ffeeb8;bottom:-140px;inset-inline-start:30%;animation-duration:25s;animation-delay:-12s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(60px,40px,0) scale(1.12)}}

input,select,textarea{background:#fff;border-color:var(--border);color:var(--text);border-radius:var(--r-sm);transition:border-color .14s var(--out),box-shadow .14s var(--out)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px rgba(229,56,138,.15)}
::selection{background:var(--pink);color:#fff}

/* כותרת עליונה */
.top{background:rgba(255,247,250,.86);border-bottom:1px solid var(--border)}
.tabs{position:relative}
.tab{color:var(--muted);transition:color .14s var(--out),transform .18s var(--spring);position:relative;z-index:1}
.tab:hover{background:transparent;color:var(--text);transform:translateY(-1px)}
.tab.active{background:transparent;color:#fff}
.tab .n{background:var(--sun);color:#201e1f}
.tab.active .n{background:#fff;color:var(--pink)}
.tab-ink{position:absolute;top:2px;bottom:2px;left:0;width:0;border-radius:999px;background:var(--pink);box-shadow:0 6px 16px rgba(229,56,138,.35);transition:transform .32s var(--out),width .32s var(--out);z-index:0;pointer-events:none}
.badge{background:#fff;border-color:var(--border)}

/* מעבר בין מסכים */
.screen{animation:screenIn .38s var(--out) both}
@keyframes screenIn{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

/* כרטיסים וכפתורים */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.btn{background:#fff;border-color:var(--border);color:var(--text);transition:transform .18s var(--spring),box-shadow .16s var(--out),background-color .14s var(--out)}
.btn:hover{border-color:var(--pink);transform:translateY(-2px) scale(1.02);box-shadow:0 8px 18px rgba(229,56,138,.16)}
.btn:active{transform:scale(.97);transition-duration:.08s}
.btn.primary{background:var(--pink);color:#fff;border-color:var(--pink);box-shadow:0 8px 20px rgba(229,56,138,.30)}
.btn.primary:hover{background:var(--pink-d);border-color:var(--pink-d)}
.btn.rainbow{color:#201e1f;box-shadow:0 8px 20px rgba(247,201,72,.35)}
.msg.ok{background:#e4f7f2;color:var(--teal-d);border-color:#b9e9dd;animation:pop .2s var(--spring)}
.msg.err{background:#fdeaea;color:var(--err);border-color:#f5c4c4;animation:pop .15s var(--out)}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.pill{background:var(--surface2);border-color:var(--border)}
.pill.ok{color:var(--teal-d);border-color:#b9e9dd;background:#e4f7f2}
.pill.warn{color:#9a6b00;border-color:#f6dd95;background:#fff6dc}
.pill.busy{color:#1b7f9c;border-color:#bfe3ee;background:#e8f6fa}
.pill.pink{color:var(--pink-d);border-color:#f7c2da;background:#fde8f2}
.note{background:#fff;border-color:var(--border);border-inline-start-color:var(--teal)}
.note b{color:var(--text)}
.demo-note{background:linear-gradient(#fff,#fff) padding-box,var(--rainbow) border-box;box-shadow:var(--shadow)}
.feat .num{color:#201e1f}
.feat,.wcard,.fcard,.ccard{transition:transform .26s var(--spring),box-shadow .22s var(--out),border-color .16s var(--out)}
.feat:hover,.wcard:hover,.fcard:hover,.ccard:hover{transform:translateY(-4px) rotate(-.3deg);border-color:#f0bcd4;box-shadow:var(--shadow-up)}
.step::before{color:#f7c2da}
.stat .v{color:var(--pink)}

/* מסך הבית */
.hero h1{letter-spacing:-.6px}
.hero-visual .frame{border-color:var(--border);box-shadow:0 34px 80px rgba(229,56,138,.22),0 8px 20px rgba(32,30,31,.10);animation:floaty 7s var(--inout) infinite alternate}
@keyframes floaty{from{transform:perspective(1400px) rotateY(-8deg) rotateX(3deg) translate3d(0,0,0)}to{transform:perspective(1400px) rotateY(-5deg) rotateX(2deg) translate3d(0,-10px,0)}}
.hero-visual .cap{background:var(--pink);color:#fff;box-shadow:0 10px 24px rgba(229,56,138,.35)}
.hero-visual .names span{background:#fff;border-color:var(--border);color:var(--muted);transition:transform .22s var(--spring),background-color .16s var(--out),color .16s var(--out)}
.hero-visual .names span.on{background:var(--teal);color:#fff;border-color:var(--teal);transform:scale(1.08)}

/* כניסה מדורגת של כרטיסים (עד 6, 40ms) */
.wgrid>*,.cgrid>*,.fgrid>*,.feats>*,.stats>*,.samples>*,.lgrid>*{animation:rise .42s var(--out) both}
.wgrid>:nth-child(2),.cgrid>:nth-child(2),.fgrid>:nth-child(2),.feats>:nth-child(2),.stats>:nth-child(2),.samples>:nth-child(2),.lgrid>:nth-child(2){animation-delay:40ms}
.wgrid>:nth-child(3),.cgrid>:nth-child(3),.fgrid>:nth-child(3),.feats>:nth-child(3),.stats>:nth-child(3),.samples>:nth-child(3),.lgrid>:nth-child(3){animation-delay:80ms}
.wgrid>:nth-child(4),.cgrid>:nth-child(4),.fgrid>:nth-child(4),.samples>:nth-child(4),.lgrid>:nth-child(4){animation-delay:120ms}
.wgrid>:nth-child(5),.cgrid>:nth-child(5),.fgrid>:nth-child(5),.lgrid>:nth-child(5){animation-delay:160ms}
.wgrid>:nth-child(n+6),.cgrid>:nth-child(n+6),.fgrid>:nth-child(n+6),.lgrid>:nth-child(n+6){animation-delay:200ms}
@keyframes rise{from{opacity:0;transform:translate3d(0,12px,0) scale(.98)}to{opacity:1;transform:none}}

/* עורך, טבלאות ושאר הרכיבים בגוונים בהירים */
.wcard canvas,.fcard canvas,.sample canvas{background:#f4e8ee}
.stage .cv{box-shadow:0 20px 50px rgba(229,56,138,.16)}
.fieldbtn{background:#fff;border-color:var(--border);color:var(--text);transition:transform .18s var(--spring),border-color .14s var(--out)}
.fieldbtn:hover{transform:translateX(-3px)}
.fieldbtn.active{border-color:var(--pink);background:#fde8f2}
.fieldbtn .sw{border-color:rgba(32,30,31,.15)}
.ctl input[type=range],.chk input{accent-color:var(--pink)}
.sw-btn.on{border-color:var(--pink)}
th{background:var(--surface2);color:var(--muted)}
tr.order td{transition:background-color .14s var(--out)}
tr.order:hover td{background:#fff3f8}
tr.expand td{background:#fffafc}
.chip{background:#fff;border-color:var(--border)}
td select.s-pending{border-color:#f6dd95;color:#9a6b00}
td select.s-approved,td select.s-working{border-color:#bfe3ee;color:#1b7f9c}
td select.s-done{border-color:#b9e9dd;color:var(--teal-d)}
.prog{background:var(--surface2)}
.row-msg.ok{color:var(--teal-d)}
.qa-box{background:#fff}
.qa-box.ok{background:#e4f7f2;color:var(--teal-d);border-color:#b9e9dd}
.qa-box.warn{background:#fff6dc;color:#9a6b00;border-color:#f6dd95}
.qa-box.err{background:#fdeaea;color:var(--err);border-color:#f5c4c4}
.fqa.err,.sample .qa.err{color:var(--err)}
.fqa.warn,.sample .qa.warn{color:#9a6b00}
.sample .qa.ok{color:var(--teal-d)}
.sample{background:#fff}
.fcard.qa-err{border-color:#f0a3a3}
.fcard.qa-warn{border-color:#f6dd95}
code{background:var(--surface2)}
.tag.integ{border-color:var(--teal);color:var(--teal-d);background:#e4f7f2}
.tag.ok{border-color:#b9e9dd;color:var(--teal-d)}
.tag.wait{background:#fff}
.seg{background:#fff}
.seg button{transition:color .14s var(--out),background-color .14s var(--out)}
.seg button[aria-pressed="true"]{background:var(--pink);color:#fff}
.wcard.add .plus{transition:transform .3s var(--spring)}
.wcard.add:hover .plus{border-color:var(--pink);color:var(--pink);transform:rotate(90deg)}
footer{border-top-color:var(--border)}
.bg-sign a{color:var(--pink-d)!important}

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

/* ===== מעבדת הלמידה ===== */
.lab-run{margin-top:18px}
.lab-run .actions{gap:10px}
.lab-run input[type=number]{width:84px}
.lab-sum{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lab-sum:empty{display:none}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:16px}
.lcard{padding:0;overflow:hidden;margin:0}
.lcard canvas{display:block;width:100%;height:auto;background:#f4e8ee}
.lcard figcaption{padding:10px 12px 12px;display:grid;gap:3px;font-size:14px}
.lcard small{color:var(--muted)}
.lcard .qa{font-size:12.5px}
.lcard .qa.ok{color:var(--teal-d)}.lcard .qa.warn{color:#9a6b00}.lcard .qa.err{color:var(--err)}
.lcard.err{border-color:#f0a3a3}
.lcard.fb-good{box-shadow:0 0 0 3px rgba(52,191,163,.45),var(--shadow)}
.lcard.fb-bad{box-shadow:0 0 0 3px rgba(217,58,58,.35),var(--shadow)}
.lcard .fb{display:flex;gap:6px;margin-top:6px}
.lcard .fb button{flex:1;border:1px solid var(--border);background:#fff;border-radius:999px;padding:5px 8px;font-size:13px;color:var(--muted);transition:transform .18s var(--spring),background-color .14s var(--out),color .14s var(--out)}
.lcard .fb button:hover{transform:translateY(-1px)}
.lcard .fb button[data-fb=good][aria-pressed=true]{background:var(--teal);color:#fff;border-color:var(--teal)}
.lcard .fb button[data-fb=bad][aria-pressed=true]{background:var(--err);color:#fff;border-color:var(--err)}

/* ניגודיות (נמדד 21.10.2026): גוונים כהים יותר לטקסט קטן על רקע בהיר */
:root{ --teal-d:#137261; --dim:#7d6e76 }
.tab.active .n{color:var(--pink-d)}
.seg button[aria-pressed="true"]{background:var(--pink-d)}
.hero-visual .names span.on{background:var(--teal-d);border-color:var(--teal-d)}
.pill.busy{color:#11627a}
.lcard .fb button[data-fb=good][aria-pressed=true]{background:var(--teal-d);border-color:var(--teal-d)}

:root{ --err:#b42a2a }

/* ===== התוכנה: שער כניסה והודעה צפה ===== */
.gate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(255,247,250,.92)}
.gate[hidden]{display:none}
.gate-card{width:min(420px,100%);display:grid;gap:8px;animation:pop .28s var(--spring)}
.gate-card input{width:100%}
.toast{position:fixed;bottom:18px;inset-inline-start:18px;z-index:60;max-width:min(420px,calc(100% - 36px));margin:0;padding:12px 16px;border-radius:14px;background:#201e1f;color:#fff;box-shadow:var(--shadow-up);animation:pop .2s var(--out)}
.toast[hidden]{display:none}