/* ========== קוֹלָן · סטודיו קריינות ל-IVR ========== */ /* ערכת העיצוב נקבעת ע"י המנהל דרך data-look על . ברירת המחדל (night) מוגדרת כאן; שאר הערכות דורסות רק טוקנים. */ :root{ --bg: #08090d; --bg-2: #0d0f16; --surface: rgba(255,255,255,.035); --surface-2: rgba(255,255,255,.055); --line: rgba(255,255,255,.09); --line-strong: rgba(255,255,255,.16); --text: #eef0f6; --text-dim: #9aa0b4; --text-faint: #666d84; --accent: #ffb43c; --accent-rgb: 255,180,60; --accent-2: #ff5f6d; --accent-3: #7c5cff; --on-accent: #1a1206; --ok: #38d39f; --err: #ff6b6b; --ok-text: #9beed3; --err-text: #ffc9c9; --warn-text: #ffd9a0; --inset: rgba(0,0,0,.3); --track: rgba(255,255,255,.12); --card-top: rgba(255,255,255,.05); --card-bot: rgba(255,255,255,.02); --header-bg: rgba(8,9,13,.78); --modal-bg: #12141c; --pop-bg: #191c26; --backdrop: rgba(4,5,8,.72); --toast-ok: #12251f; --toast-err: #2a1618; --grid-line: rgba(255,255,255,.022); --glow-1: rgba(255,180,60,.13); --glow-2: rgba(124,92,255,.15); --glow-3: rgba(255,95,109,.08); --accent-shadow: rgba(255,140,60,.26); --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%239aa0b4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); --radius: 16px; --radius-sm: 11px; --shadow: 0 24px 60px rgba(0,0,0,.55); --grad: linear-gradient(120deg,var(--accent) 0%, var(--accent-2) 52%, var(--accent-3) 100%); color-scheme:dark; } /* ---------- ערכה: יום בהיר ---------- */ html[data-look="day"]{ --bg:#f7f4ee; --bg-2:#efeae1; --surface:rgba(30,25,15,.035); --surface-2:rgba(30,25,15,.07); --line:rgba(30,25,15,.11); --line-strong:rgba(30,25,15,.2); --text:#1f1d1a; --text-dim:#5d5850; --text-faint:#8f897e; --accent:#c77a00; --accent-rgb:199,122,0; --accent-2:#e4546a; --accent-3:#7457e8; --on-accent:#fff; --ok:#14966b; --err:#d64545; --ok-text:#0d6b4c; --err-text:#a82f2f; --warn-text:#8a5a00; --inset:rgba(255,255,255,.75); --track:rgba(30,25,15,.12); --card-top:rgba(255,255,255,.92); --card-bot:rgba(255,255,255,.7); --header-bg:rgba(247,244,238,.85); --modal-bg:#fffdf9; --pop-bg:#ffffff; --backdrop:rgba(40,32,20,.35); --toast-ok:#e3f5ee; --toast-err:#fbe7e7; --grid-line:rgba(30,25,15,.05); --glow-1:rgba(255,180,60,.22); --glow-2:rgba(124,92,255,.1); --glow-3:rgba(255,95,109,.08); --accent-shadow:rgba(199,122,0,.25); --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235d5850' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); --shadow:0 18px 50px rgba(60,45,20,.14); color-scheme:light; } /* ---------- ערכה: משרד תכלת (בהיר, עסקי) ---------- */ html[data-look="office"]{ --bg:#f1f5fb; --bg-2:#e6edf7; --surface:rgba(15,40,80,.035); --surface-2:rgba(15,40,80,.07); --line:rgba(15,40,80,.11); --line-strong:rgba(15,40,80,.2); --text:#14213a; --text-dim:#4d5b75; --text-faint:#8391a8; --accent:#2563eb; --accent-rgb:37,99,235; --accent-2:#0ea5e9; --accent-3:#6366f1; --on-accent:#fff; --ok:#0f9f6e; --err:#dc3d3d; --ok-text:#0b6e4d; --err-text:#a42b2b; --warn-text:#9a5b00; --inset:#ffffff; --track:rgba(15,40,80,.12); --card-top:#ffffff; --card-bot:#fbfcfe; --header-bg:rgba(255,255,255,.88); --modal-bg:#ffffff; --pop-bg:#ffffff; --backdrop:rgba(15,30,60,.35); --toast-ok:#e2f6ef; --toast-err:#fde8e8; --grid-line:rgba(15,40,80,.05); --glow-1:rgba(14,165,233,.12); --glow-2:rgba(99,102,241,.1); --glow-3:rgba(37,99,235,.06); --accent-shadow:rgba(37,99,235,.25); --grad:linear-gradient(120deg,#2563eb 0%,#0ea5e9 100%); --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%234d5b75' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); --shadow:0 16px 44px rgba(20,40,80,.12); color-scheme:light; } /* ---------- ערכה: אוקיינוס (כהה, טורקיז) ---------- */ html[data-look="ocean"]{ --bg:#051118; --bg-2:#081a24; --text:#e6f4f6; --text-dim:#8fb0b8; --text-faint:#5a7a83; --accent:#2ee6c9; --accent-rgb:46,230,201; --accent-2:#38bdf8; --accent-3:#818cf8; --on-accent:#032019; --header-bg:rgba(5,17,24,.8); --modal-bg:#0b1c26; --pop-bg:#0f2430; --backdrop:rgba(2,8,12,.72); --glow-1:rgba(46,230,201,.12); --glow-2:rgba(56,189,248,.13); --glow-3:rgba(129,140,248,.08); --accent-shadow:rgba(46,230,201,.22); } /* צבעי טונים כהים יותר בערכות הבהירות, לניגודיות על רקע לבן */ html[data-look="day"] .tone[data-tone="happy"], html[data-look="office"] .tone[data-tone="happy"] {--t:#c28f00} html[data-look="day"] .tone[data-tone="sad"], html[data-look="office"] .tone[data-tone="sad"] {--t:#2f6fd6} html[data-look="day"] .tone[data-tone="question"],html[data-look="office"] .tone[data-tone="question"]{--t:#8b4fd6} html[data-look="day"] .tone[data-tone="answer"], html[data-look="office"] .tone[data-tone="answer"] {--t:#14966b} html[data-look="day"] .tone[data-tone="sorry"], html[data-look="office"] .tone[data-tone="sorry"] {--t:#d9623a} html[data-look="day"] .tone[data-tone="warm"], html[data-look="office"] .tone[data-tone="warm"] {--t:#d64a8c} html[data-look="day"] .tone[data-tone="energetic"],html[data-look="office"] .tone[data-tone="energetic"]{--t:#d98a00} html[data-look="day"] .tone[data-tone="soft"], html[data-look="office"] .tone[data-tone="soft"] {--t:#2b93c9} html[data-look="day"] .tone[data-tone="festive"], html[data-look="office"] .tone[data-tone="festive"] {--t:#cf3f9f} html[data-look="day"] .tone[data-tone="urgent"], html[data-look="office"] .tone[data-tone="urgent"] {--t:#d63c3c} html[data-look="day"] .tone[data-tone="slow"], html[data-look="office"] .tone[data-tone="slow"] {--t:#3f9a3f} *{box-sizing:border-box} [hidden]{display:none!important} html,body{height:100%} body{ margin:0; background:var(--bg); color:var(--text); font-family:'Heebo',system-ui,'Segoe UI',sans-serif; font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; } body::before{ content:'';position:fixed;inset:0;pointer-events:none;z-index:0; background: radial-gradient(900px 520px at 88% -12%, var(--glow-1), transparent 60%), radial-gradient(760px 480px at 6% 4%, var(--glow-2), transparent 62%), radial-gradient(1000px 700px at 50% 110%, var(--glow-3), transparent 60%); } h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em} a{color:var(--accent)} button{font-family:inherit} /* ---------- מסך טעינה ---------- */ .boot{position:fixed;inset:0;z-index:99;display:grid;place-items:center;background:var(--bg);transition:opacity .4s} .boot.gone{opacity:0;pointer-events:none} .boot-mark{ font-size:38px;font-weight:900;letter-spacing:.08em; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent; animation:pulse 1.4s ease-in-out infinite; } @keyframes pulse{0%,100%{opacity:.35;transform:scale(.97)}50%{opacity:1;transform:scale(1)}} /* ---------- מיתוג ---------- */ .brand{display:flex;align-items:center;gap:12px;position:relative;z-index:1} .brand-mark{ width:42px;height:42px;flex:none;display:grid;place-items:center;font-size:20px; border-radius:13px;background:var(--grad); box-shadow:0 8px 26px var(--accent-shadow); } .brand h1{font-size:20px;font-weight:900;letter-spacing:-.01em} .brand p{margin:0;font-size:12px;color:var(--text-dim);font-weight:400} .brand-lg .brand-mark{width:56px;height:56px;font-size:27px;border-radius:17px} .brand-lg h1{font-size:30px} .brand-lg p{font-size:13px} /* ---------- שער כניסה ---------- */ .gate{position:relative;z-index:1;min-height:100dvh;display:grid;place-items:center;padding:28px 20px} .gate-bg{ position:absolute;inset:0; background-image: linear-gradient(var(--grid-line) 1px,transparent 1px), linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:52px 52px; mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 72%); } .gate-card{ position:relative;width:100%;max-width:430px;padding:34px 30px 26px; background:linear-gradient(180deg,var(--card-top),var(--card-bot)); border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow); backdrop-filter:blur(18px); } .gate-card .brand{margin-bottom:26px} .tabs{display:flex;gap:6px;padding:5px;background:var(--inset);border-radius:13px;margin-bottom:20px} .tab{ flex:1;padding:9px;border:0;border-radius:9px;background:transparent; color:var(--text-dim);font-size:14px;font-weight:500;cursor:pointer;transition:.18s; } .tab.is-active{background:var(--surface-2);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.16)} .gate-form{display:flex;flex-direction:column;gap:14px} .gate-switch{margin:2px 0 0;text-align:center;font-size:13px;color:var(--text-dim)} .gate-error{ margin:14px 0 0;padding:10px 13px;border-radius:11px;font-size:13.5px; background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.3);color:var(--err-text); } .gate-foot{margin:20px 0 0;text-align:center;font-size:11.5px;color:var(--text-faint);line-height:1.5} /* ---------- שדות ---------- */ .field{display:flex;flex-direction:column;gap:7px;margin-bottom:15px} .field>span{font-size:12.5px;color:var(--text-dim);font-weight:500} .field>span b{color:var(--accent);font-weight:700} input[type=text],input[type=email],input[type=password],select,textarea{ width:100%;padding:11px 13px;font-family:inherit;font-size:14.5px;color:var(--text); background:var(--inset);border:1px solid var(--line);border-radius:var(--radius-sm); outline:none;transition:border-color .16s, box-shadow .16s; } textarea{resize:vertical;line-height:1.75} input:focus,select:focus,textarea:focus{border-color:rgba(var(--accent-rgb),.55);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1)} input::placeholder,textarea::placeholder{color:var(--text-faint)} select{appearance:none;cursor:pointer;padding-inline-start:36px; background-image:var(--arrow); background-repeat:no-repeat;background-size:11px;background-position:left 14px center; } select option{background:var(--pop-bg);color:var(--text)} input[type=range]{ -webkit-appearance:none;appearance:none;width:100%;height:5px;padding:0;border:0;border-radius:99px; background:var(--track);cursor:pointer; } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:var(--accent); box-shadow:0 2px 10px rgba(var(--accent-rgb),.5);cursor:pointer; } input[type=range]::-moz-range-thumb{width:17px;height:17px;border:0;border-radius:50%;background:var(--accent);cursor:pointer} .check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-dim);cursor:pointer;margin-bottom:11px} .check input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer;flex:none} /* ---------- כפתורים ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:11px 18px;border:1px solid transparent;border-radius:var(--radius-sm); font-size:14px;font-weight:600;cursor:pointer;transition:.16s;white-space:nowrap; } .btn-primary{background:var(--grad);color:var(--on-accent);box-shadow:0 8px 26px var(--accent-shadow)} .btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)} .btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none} .btn-ghost{background:var(--surface);border-color:var(--line);color:var(--text)} .btn-ghost:hover{background:var(--surface-2);border-color:var(--line-strong)} .btn-block{width:100%} .btn-lg{padding:14px 30px;font-size:15.5px;border-radius:13px} .btn-sm{padding:7px 12px;font-size:12.5px;border-radius:9px} .linkish{background:none;border:0;padding:0;color:var(--accent);font-size:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px} .spinner{ width:15px;height:15px;border:2px solid rgba(0,0,0,.25);border-top-color:var(--on-accent); border-radius:50%;animation:spin .7s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} /* ---------- סרגל עליון ---------- */ .topbar{ position:sticky;top:0;z-index:20; display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; padding:13px 22px;border-bottom:1px solid var(--line); background:var(--header-bg);backdrop-filter:blur(16px); } .topbar-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .user-chip{ display:flex;align-items:center;gap:8px;padding:5px 13px 5px 6px; background:var(--surface);border:1px solid var(--line);border-radius:99px;font-size:13.5px; } .avatar{ width:27px;height:27px;display:grid;place-items:center;border-radius:50%; background:var(--grad);color:var(--on-accent);font-size:12.5px;font-weight:900; } .key-dot{width:8px;height:8px;border-radius:50%;background:var(--err);box-shadow:0 0 8px currentColor} .key-dot.ok{background:var(--ok)} /* ---------- פריסה ---------- */ .layout{ position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:26px 22px 40px; display:grid;grid-template-columns:1fr 330px;gap:20px;align-items:start; } .panel{ background:linear-gradient(180deg,var(--card-top),var(--card-bot)); border:1px solid var(--line);border-radius:var(--radius);padding:22px; } .panel-side{position:sticky;top:82px} .panel h2{font-size:15.5px;margin-bottom:15px} .panel-side h2:not(:first-child){margin-top:24px} .panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:11px} .panel-head h2,.panel-head h3{margin:0;font-size:15.5px} .hint{margin:0 0 15px;font-size:12.5px;color:var(--text-faint)} .muted{color:var(--text-dim);font-size:13.5px;margin:0 0 16px} .small{font-size:12px} /* ---------- מתג מצב ---------- */ .seg{display:flex;gap:4px;padding:4px;background:var(--inset);border-radius:11px} .seg-btn{ padding:7px 14px;border:0;border-radius:8px;background:transparent;color:var(--text-dim); font-size:13px;font-weight:500;cursor:pointer;transition:.16s; } .seg-btn.is-active{background:var(--surface-2);color:var(--text)} /* ---------- תבניות ---------- */ .chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px} .chip{ padding:6px 12px;border:1px solid var(--line);border-radius:99px;background:var(--surface); color:var(--text-dim);font-size:12.5px;cursor:pointer;transition:.16s; } .chip:hover{border-color:var(--accent);color:var(--accent);background:rgba(var(--accent-rgb),.08)} /* ---------- סרגל הטונים ---------- */ .tonebar{ display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:12px; padding:10px 13px;background:var(--inset);border:1px solid var(--line);border-radius:13px; } .tonebar-label{font-size:12px;color:var(--text-dim);flex:none} .tone-btns{display:flex;flex-wrap:wrap;gap:5px} .tone-btn{ display:inline-flex;align-items:center;gap:5px;padding:5px 10px; border:1px solid var(--line);border-radius:99px;background:var(--surface); color:var(--text-dim);font-size:12px;cursor:pointer;transition:.15s; } .tone-btn i{font-style:normal;font-size:13px;line-height:1} .tone-btn:hover{color:var(--text);background:var(--surface-2);border-color:var(--t,var(--line-strong))} .tone-btn-clear:hover{border-color:var(--line-strong)} .tone-pop{ position:fixed;z-index:70;display:flex;gap:3px;padding:6px;max-width:96vw;flex-wrap:wrap; background:var(--pop-bg);border:1px solid var(--line-strong);border-radius:13px;box-shadow:var(--shadow); animation:rise .14s ease both; } .tone-pop .tone-btn{padding:6px 9px;border-radius:9px} /* ---------- עורך ---------- */ .editor-wrap{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--inset)} .editor{ min-height:210px;max-height:44vh;overflow-y:auto;padding:15px; font-size:15.5px;line-height:2.05;white-space:pre-wrap;word-break:break-word;outline:none; } .editor:focus{box-shadow:none} .editor.is-empty::before{ content:attr(data-placeholder);color:var(--text-faint);white-space:pre-wrap; pointer-events:none;display:block; } .editor ::selection{background:rgba(var(--accent-rgb),.3)} .editor::selection{background:rgba(var(--accent-rgb),.3)} /* קטע שסומן לו טון */ .tone{ --t:var(--accent);--tb:rgba(var(--accent-rgb),.14); background:var(--tb);border-bottom:2px solid var(--t); border-radius:4px 4px 0 0;padding:1px 3px; } .tone::after{content:attr(data-emoji);font-size:.72em;margin-inline-start:3px;vertical-align:.35em;opacity:.9} .tone[data-tone="happy"] {--t:#ffd166;--tb:rgba(255,209,102,.15)} .tone[data-tone="sad"] {--t:#6ba8ff;--tb:rgba(107,168,255,.15)} .tone[data-tone="question"] {--t:#c792ff;--tb:rgba(199,146,255,.15)} .tone[data-tone="answer"] {--t:#38d39f;--tb:rgba(56,211,159,.15)} .tone[data-tone="sorry"] {--t:#ff9f7a;--tb:rgba(255,159,122,.15)} .tone[data-tone="warm"] {--t:#ff7eb6;--tb:rgba(255,126,182,.15)} .tone[data-tone="energetic"]{--t:#ffb43c;--tb:rgba(255,180,60,.15)} .tone[data-tone="soft"] {--t:#8fd4ff;--tb:rgba(143,212,255,.15)} .tone[data-tone="festive"] {--t:#ff6ec7;--tb:rgba(255,110,199,.15)} .tone[data-tone="urgent"] {--t:#ff6b6b;--tb:rgba(255,107,107,.15)} .tone[data-tone="slow"] {--t:#a0e7a0;--tb:rgba(160,231,160,.15)} .editor-foot{ display:flex;align-items:center;justify-content:space-between; padding:8px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--text-faint); } /* ---------- הפקה ---------- */ .generate-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px} .progress{flex:1;min-width:180px;display:flex;align-items:center;gap:11px} .progress::before{ content:'';flex:1;height:5px;border-radius:99px;background:var(--track); } .progress-bar{ position:absolute;height:5px;border-radius:99px;background:var(--grad);transition:width .25s; } .progress{position:relative} .progress-bar{inset-inline-start:0;top:50%;transform:translateY(-50%)} .progress-text{font-size:12.5px;color:var(--text-dim);white-space:nowrap} /* ---------- תוצאות ---------- */ .results-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:30px 0 13px} .results-actions{display:flex;gap:7px} .results{display:flex;flex-direction:column;gap:11px} .result{ display:flex;align-items:center;gap:13px;flex-wrap:wrap; padding:13px 15px;background:var(--inset);border:1px solid var(--line);border-radius:13px; animation:rise .3s ease both; } @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .result.is-error{border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.07)} .result-play{ width:40px;height:40px;flex:none;border:0;border-radius:50%;cursor:pointer; background:var(--grad);color:var(--on-accent);font-size:15px;display:grid;place-items:center; transition:.16s; } .result-play:hover{transform:scale(1.07)} .result-body{flex:1;min-width:150px} .result-name{ display:block;width:100%;padding:3px 7px;margin:0 -7px 2px; background:transparent;border:1px solid transparent;border-radius:7px; color:var(--text);font-family:inherit;font-size:13.5px;font-weight:600;direction:ltr;text-align:left; } .result-name:hover{border-color:var(--line)} .result-name:focus{background:var(--inset);border-color:var(--line-strong);box-shadow:none} .result-text{margin:0;font-size:12.5px;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .result-meta{font-size:11.5px;color:var(--text-faint);white-space:nowrap;direction:ltr} .result-actions{display:flex;gap:6px} .icon-btn{ width:34px;height:34px;display:grid;place-items:center;flex:none; background:var(--surface);border:1px solid var(--line);border-radius:9px; color:var(--text-dim);font-size:14px;cursor:pointer;transition:.16s; } .icon-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--line-strong)} .wave{display:flex;align-items:flex-end;gap:2px;height:24px;width:78px;flex:none} .wave i{flex:1;background:var(--line-strong);border-radius:2px;min-height:2px;transition:.2s} .result.is-playing .wave i{background:var(--accent)} /* ---------- הערת צד ---------- */ .side-note{ margin-top:22px;padding:13px 15px;border-radius:13px; background:rgba(var(--accent-rgb),.06);border:1px solid rgba(var(--accent-rgb),.18); } .side-note-title{font-size:12px;font-weight:700;color:var(--accent);margin-bottom:5px} .side-note p{margin:0;font-size:12.5px;color:var(--text-dim);line-height:1.65} .advanced{margin:6px 0 4px;border-top:1px solid var(--line);padding-top:14px} .advanced summary{cursor:pointer;font-size:13px;color:var(--text-dim);margin-bottom:14px;user-select:none} .advanced summary::marker{color:var(--accent)} /* ---------- מודאלים ---------- */ .modal{ position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px; background:var(--backdrop);backdrop-filter:blur(7px);animation:fade .2s;overflow-y:auto; } @keyframes fade{from{opacity:0}to{opacity:1}} .modal-card{ position:relative;width:100%;max-width:460px;padding:28px; background:var(--modal-bg);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow); animation:rise .25s ease both; } .modal-wide{max-width:720px} .modal-card h2{font-size:19px;margin-bottom:9px} .modal-x{ position:absolute;inset-inline-end:16px;top:16px;width:31px;height:31px; background:var(--surface);border:1px solid var(--line);border-radius:9px; color:var(--text-dim);cursor:pointer;font-size:13px; } .modal-x:hover{color:var(--text);background:var(--surface-2)} .modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px} .modal-actions-split{justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px} .io-actions{display:flex;gap:7px} .key-status{margin:14px 0 0;padding:10px 13px;border-radius:11px;font-size:13px} .key-status.ok{background:rgba(56,211,159,.11);border:1px solid rgba(56,211,159,.3);color:var(--ok-text)} .key-status.err{background:rgba(255,107,107,.11);border:1px solid rgba(255,107,107,.3);color:var(--err-text)} /* ---------- בחירת קול (משתמש) ---------- */ .voice-picker{display:flex;flex-direction:column;gap:7px;margin-bottom:4px} .voice-opt{ display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%; padding:9px 13px;text-align:start;color:var(--text);cursor:pointer;transition:.15s; background:var(--surface);border:1px solid var(--line);border-radius:11px; } .voice-opt b{font-size:13.5px;font-weight:600} .voice-opt span{font-size:11.5px;color:var(--text-faint)} .voice-opt:hover{background:var(--surface-2);border-color:var(--line-strong)} .voice-opt.is-active{border-color:var(--accent);background:rgba(var(--accent-rgb),.09)} .voice-opt.is-active b{color:var(--accent)} /* ---------- אדמין ---------- */ .voice-list{display:flex;flex-direction:column;gap:12px;margin:14px 0 12px} .voice-card{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--inset)} .voice-card.is-default{border-color:rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.05)} .voice-card-head{display:flex;align-items:center;gap:9px;margin-bottom:12px} .v-label{flex:1;font-weight:600} .v-default{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-dim);cursor:pointer;white-space:nowrap} .v-default input{accent-color:var(--accent);cursor:pointer} .voice-card.is-default .v-default{color:var(--accent)} .voice-card-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 12px} .tag-ok,.tag-warn{font-style:normal;font-size:10px;padding:1px 6px;border-radius:99px;margin-inline-start:5px} .tag-ok{background:rgba(56,211,159,.16);color:var(--ok-text)} .tag-warn{background:rgba(var(--accent-rgb),.16);color:var(--warn-text)} .try-label{font-size:12px;color:var(--text-dim);margin-bottom:5px} .side-note-tight{margin-top:16px} .admin-try{display:flex;gap:9px;margin-top:16px} .admin-try input{flex:1} #adm-try-player{margin-top:11px} #adm-try-player audio{width:100%;height:38px} /* ---------- בדיקת הקראה ---------- */ .diagnose-out{margin-top:12px} .diagnose-out .accounts td.wrap{white-space:normal;min-width:180px;line-height:1.55} .diagnose-out small{color:var(--text-faint);direction:ltr;unicode-bidi:isolate} /* ---------- חשבונות (אדמין) ---------- */ .check-remember{margin:-2px 0 2px} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 8px} .stat{padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:13px} .stat b{display:block;font-size:24px;font-weight:800;line-height:1.15;color:var(--accent)} .stat span{font-size:12px;color:var(--text-dim)} .table-wrap{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:12px} .accounts{width:100%;border-collapse:collapse;font-size:13px} .accounts th{ position:sticky;top:0;padding:9px 12px;text-align:start;white-space:nowrap; font-size:12px;font-weight:600;color:var(--text-dim); background:var(--modal-bg);border-bottom:1px solid var(--line); } .accounts td{padding:9px 12px;white-space:nowrap;border-bottom:1px solid var(--line)} .accounts tr:last-child td{border-bottom:0} .accounts td.ltr{direction:ltr;text-align:right} .accounts td.empty{text-align:center;color:var(--text-faint);padding:18px} /* ---------- בחירת עיצוב (אדמין) ---------- */ .admin-section-title{font-size:14.5px;font-weight:700;margin:20px 0 4px} .look-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:10px 0 6px} .look-opt{ display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:8px 8px 10px; background:var(--surface);border:1px solid var(--line);border-radius:14px; color:var(--text);text-align:start;cursor:pointer;transition:.16s;font-family:inherit; } .look-opt:hover{border-color:var(--line-strong);transform:translateY(-1px)} .look-opt.is-active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2)} .look-swatch{ display:flex;flex-direction:column;gap:6px;height:64px;padding:10px;margin-bottom:6px; border-radius:10px;background:var(--sw-bg);border:1px solid rgba(128,128,128,.22); } .look-swatch b{display:block;width:46%;height:13px;border-radius:5px;background:var(--sw-grad)} .look-swatch i{display:block;height:6px;border-radius:99px;background:var(--sw-line)} .look-swatch i:last-child{width:70%} .look-name{font-size:13px;font-weight:600;padding:0 2px} .look-opt.is-active .look-name{color:var(--accent)} .look-desc{font-size:11px;color:var(--text-faint);padding:0 2px;line-height:1.4} /* ---------- מוזיקת רקע ---------- */ .mix-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px} .mix-transport{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:12px 0 8px} .mix-sep{width:1px;height:20px;background:var(--line-strong);margin:0 4px} .mix-timeline{ width:100%;height:220px;display:block;border-radius:12px;cursor:grab; background:var(--inset);border:1px solid var(--line);touch-action:none; } .mix-timeline.is-dragging{cursor:grabbing} .mix-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px;margin-top:14px} #mix-file{padding:9px 13px;font-size:13px} #mix-player{margin-top:10px} #mix-player audio{width:100%;height:38px} .foot-danger{color:var(--err)} .accounts tr.is-blocked td{opacity:.55;text-decoration:line-through} .accounts tr.is-blocked td:last-child{opacity:1;text-decoration:none} /* ---------- היסטוריה ---------- */ .hist-list{display:flex;flex-direction:column;gap:9px;max-height:52vh;overflow-y:auto;margin:6px 0 4px} .hist-row{ display:flex;align-items:center;gap:12px;padding:11px 13px; background:var(--inset);border:1px solid var(--line);border-radius:12px; } .hist-body{flex:1;min-width:0} .hist-body b{display:block;font-size:13.5px;font-weight:600;direction:ltr;text-align:left; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hist-body span{font-size:11.5px;color:var(--text-faint)} .hist-row .result-actions{flex:none} /* ---------- טוסט ---------- */ .toast{ position:fixed;inset-inline-start:50%;transform:translateX(50%) translateY(20px);bottom:26px;z-index:90; padding:12px 20px;border-radius:12px;font-size:14px;font-weight:500; background:var(--pop-bg);border:1px solid var(--line-strong);box-shadow:var(--shadow); opacity:0;transition:.25s;pointer-events:none;max-width:90vw;text-align:center; } .toast.show{opacity:1;transform:translateX(50%) translateY(0)} .toast.err{background:var(--toast-err);border-color:rgba(255,107,107,.4);color:var(--err-text)} .toast.ok{background:var(--toast-ok);border-color:rgba(56,211,159,.4);color:var(--ok-text)} .foot{ position:relative;z-index:1;text-align:center;padding:22px; font-size:12px;color:var(--text-faint);border-top:1px solid var(--line); } /* ---------- רספונסיבי ---------- */ @media (max-width:920px){ .layout{grid-template-columns:1fr;padding:18px 15px 34px} .panel-side{position:static} .voice-card-grid{grid-template-columns:1fr} .mix-row,.mix-controls{grid-template-columns:1fr} .look-grid{grid-template-columns:1fr 1fr} .tonebar-label{width:100%} .topbar{padding:11px 15px} .user-chip #user-name{display:none} } @media (max-width:520px){ .topbar-actions .btn span:not(.key-dot){display:none} .btn-lg{width:100%} .modal-card{padding:22px 18px} }