/* ===================== NF-Dbase Console ===================== */
/* Inter כפונט מארח-עצמי. עד עכשיו הייתה כאן רק ערימת פונטי-מערכת, כלומר הקונסולה
נראתה שונה לגמרי ב-Windows (Segoe UI) מול macOS (SF Pro) - גובה-x, רוחב אותיות
ומשקלים. פונט אחד קבוע הוא מה שנותן את התחושה המלוטשת בכלים כמו Supabase/Linear.
הקובץ יושב אצלנו (fonts/) ולא ב-CDN חיצוני: קונסולה לניהול מסד נתונים לא צריכה
לדלוף בקשת-רשת לצד שלישי בכל טעינה, וגם עובדת ברשת סגורה. */
@font-face{
font-family:"InterVariable";
font-style:normal;
font-weight:100 900; /* פונט משתנה - קובץ אחד לכל המשקלים */
font-display:swap;
src:url("../fonts/InterVariable.woff2") format("woff2");
}
:root{
--bg:#eef2f4; --surface:#ffffff; --surface-2:#f4f7f8; --surface-3:#e9eef0;
/* --faint היה #8695a0: 3.08:1 על לבן, הרבה מתחת ל-4.5 של WCAG AA - ודווקא הוא
נושא את הטקסט הקטן ביותר בממשק (תוויות מדדים 11px, גודל קובץ, שם עמודה).
#626f79 נותן 5.16:1 על --surface ו-4.58:1 גם על --bg, כלומר עובר בכל משטח.
הוא אכן קרוב עכשיו ל---muted, וזה מכוון: ההיררכיה בין השניים נשענת ממילא על
גודל, אותיות גדולות ומשקל - לא על צבע. תווית שלא נקראת אינה היררכיה, היא רעש. */
--ink:#15202a; --muted:#5c6b76; --faint:#626f79;
--border:#dbe3e7; --border-strong:#c6d1d6;
--accent:#0f6e64; --accent-ink:#0b5049; --accent-soft:rgba(15,110,100,.10); --accent-contrast:#ffffff;
--ok:#2e8a60; --ok-soft:rgba(46,138,96,.12);
--warn:#b0741a; --warn-soft:rgba(176,116,26,.14);
--stop:#b23a2c; --stop-soft:rgba(178,58,44,.12);
--shadow-sm:0 1px 2px rgba(20,40,50,.06);
--shadow:0 2px 6px rgba(20,40,50,.06), 0 10px 30px rgba(20,40,50,.07);
--shadow-lg:0 12px 40px rgba(20,40,50,.16);
--radius:12px; --radius-sm:9px;
--sans:"InterVariable","Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
--mono:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
--topbar-h:58px; --sidebar-w:248px;
}
/* ============================================================
כהה היא ברירת המחדל, ובהיר הוא בחירה מפורשת
קודם הפאנל ציית ל-prefers-color-scheme, ולכן אותו משתמש ראה צבעים שונים בין
פרופיל כרום אחד לשני ובין המחשב לטלפון - בלי שום דרך להחליט.
:root:not([data-theme="light"]) ולא :root[data-theme="dark"]: כך כהה חלה גם
כשאין תכונה בכלל, כלומר לפני שה-JS רץ ואפילו אם הוא נכשל לגמרי. הסלקטור
ספציפי יותר מ-:root שמעליו (0,2,0 מול 0,1,0) ולכן גובר עליו, ובוחר בבהיר
הוא היחיד שמחזיר את הפלטה שלמעלה.
============================================================ */
:root:not([data-theme="light"]){
--bg:#0c1116; --surface:#141b22; --surface-2:#1a232b; --surface-3:#222d36;
--ink:#e7edf1; --muted:#93a2ad; --faint:#8a99a4; /* 4.79:1 גם על surface-3 */
--border:#26323b; --border-strong:#33424c;
--accent:#3fb4a6; --accent-ink:#5ecabd; --accent-soft:rgba(63,180,166,.14); --accent-contrast:#04211d;
--ok:#4fbb86; --ok-soft:rgba(79,187,134,.15);
--warn:#d69a3b; --warn-soft:rgba(214,154,59,.16);
--stop:#e06a5a; --stop-soft:rgba(224,106,90,.16);
--shadow-sm:0 1px 2px rgba(0,0,0,.3);
--shadow:0 2px 6px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.32);
--shadow-lg:0 14px 44px rgba(0,0,0,.5);
}
/* שני הבלוקים הבאים קדמו לשינוי ונשארים: אותה ספציפיות, והם מופיעים אחרי - ולכן
בחירה מפורשת של המשתמש גוברת. הם מכסים תת-קבוצה של המשתנים, והשאר נופל
לפלטה שמעליהם. */
:root[data-theme="light"]{ --bg:#eef2f4; --surface:#fff; --surface-2:#f4f7f8; --surface-3:#e9eef0; --ink:#15202a; --muted:#5c6b76; --faint:#626f79; --border:#dbe3e7; --border-strong:#c6d1d6; --accent:#0f6e64; --accent-ink:#0b5049; --accent-soft:rgba(15,110,100,.10); --accent-contrast:#fff; --shadow:0 2px 6px rgba(20,40,50,.06),0 10px 30px rgba(20,40,50,.07); }
:root[data-theme="dark"]{ --bg:#0c1116; --surface:#141b22; --surface-2:#1a232b; --surface-3:#222d36; --ink:#e7edf1; --muted:#93a2ad; --faint:#8a99a4; --border:#26323b; --border-strong:#33424c; --accent:#3fb4a6; --accent-ink:#5ecabd; --accent-soft:rgba(63,180,166,.14); --accent-contrast:#04211d; --shadow:0 2px 6px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.32); }
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans); color:var(--ink); background:var(--bg); line-height:1.55; -webkit-font-smoothing:antialiased; font-size:15px}
h1,h2,h3{margin:0; letter-spacing:-.01em}
code{font-family:var(--mono); font-size:.86em; color:var(--muted)}
em{font-style:normal}
.en{font-family:var(--mono); font-size:.82em; color:var(--muted); font-weight:400}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.pad{padding:14px}
[hidden]{display:none !important}
/* ---------- Buttons ---------- */
.btn{font-family:inherit; font-size:14px; font-weight:600; border:1px solid transparent; border-radius:var(--radius-sm); padding:9px 15px; cursor:pointer; transition:background .15s,border-color .15s,transform .05s; white-space:nowrap; display:inline-flex; align-items:center; gap:7px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--accent-contrast)}
.btn-primary:hover{background:var(--accent-ink)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-danger{background:var(--stop-soft); color:var(--stop); border-color:transparent}
.btn-danger:hover{background:var(--stop); color:#fff}
.btn-block{width:100%; justify-content:center; padding:11px}
.btn-sm{padding:6px 11px; font-size:13px}
.btn:disabled{opacity:.5; cursor:not-allowed}
.icon-btn{background:transparent; border:none; color:var(--muted); cursor:pointer; padding:6px; border-radius:8px; display:inline-flex; align-items:center; line-height:0}
.icon-btn:hover{background:var(--surface-2); color:var(--ink)}
/* ---------- Fields ---------- */
.field{display:flex; flex-direction:column; gap:6px; font-size:13.5px}
.field > span{color:var(--muted); font-weight:600}
.field > span em{color:var(--faint); font-weight:400; font-size:.9em}
.field input,.field select,.field textarea{font-family:inherit; font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:10px 12px; width:100%; transition:border-color .15s, box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.field.inline{flex-direction:row; align-items:center; gap:10px}
.field.inline > span{white-space:nowrap}
textarea{resize:vertical; min-height:120px; font-family:var(--mono); line-height:1.5}
.form-error{color:var(--stop); font-size:13.5px; margin:4px 0 0; min-height:1.2em}
.hint{color:var(--muted); font-size:13px; margin:8px 0 0}
/* ===================== AUTH ===================== */
.auth-view{min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:24px; position:relative; overflow:hidden}
.auth-bg{position:absolute; inset:0; z-index:0; background:
radial-gradient(1100px 520px at 85% -10%, var(--accent-soft), transparent 60%),
radial-gradient(900px 500px at 5% 110%, var(--accent-soft), transparent 55%); }
.auth-card{position:relative; z-index:1; width:100%; max-width:410px; background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-lg); padding:30px 28px}
.brand{display:flex; align-items:center; gap:10px; justify-content:center}
.brand-mark{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--accent); color:var(--accent-contrast); font-family:var(--mono); font-weight:700; font-size:15px; box-shadow:var(--shadow-sm)}
.brand-name{font-size:21px; font-weight:800; letter-spacing:-.02em}
.auth-sub{text-align:center; color:var(--muted); font-size:14px; margin:8px 0 22px}
.tabs{display:flex; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:4px; margin-bottom:20px}
.tab{flex:1; padding:8px; border:none; background:transparent; border-radius:7px; font-family:inherit; font-size:14px; font-weight:600; color:var(--muted); cursor:pointer; transition:.15s}
.tab.is-active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm)}
.auth-form{display:flex; flex-direction:column; gap:15px}
.auth-foot{text-align:center; color:var(--faint); font-size:12px; margin:20px 0 0; line-height:1.6}
/* קישור-בתוך-טופס: כפתור אמיתי (נגיש למקלדת ולקורא מסך) שנראה כמו קישור.
היה משנה את הכתובת ומפעיל את הניתוב, וזה בדיוק מה שאסור כאן. */
.link-btn{background:none; border:none; padding:0; font-family:inherit; font-size:13.5px;
color:var(--accent-ink); font-weight:600; cursor:pointer; text-align:center; align-self:center}
.link-btn:hover{text-decoration:underline}
.auth-note{color:var(--muted); font-size:13.5px; line-height:1.6; margin:0 0 2px}
/* מסך "נשלח / הוחלף / אושר" - אותו כרטיס, בלי טופס */
.auth-done{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px}
.auth-done-ic{inline-size:46px; block-size:46px; border-radius:50%; display:grid; place-items:center;
background:var(--ok-soft); color:var(--ok); margin-block-end:2px}
.auth-done-ic svg{inline-size:24px; block-size:24px}
.auth-done h2{font-size:17px; font-weight:700}
.auth-done p{color:var(--muted); font-size:13.5px; line-height:1.6; margin:0}
.auth-done .btn{margin-block-start:8px}
/* שני כפתורים במסך אחד (פעולה + חזרה): ה-gap של הקונטיינר כבר מפריד ביניהם,
וה-margin הנוסף היה מרחיק את השני מהראשון יותר מאשר את הראשון מהטקסט. */
.auth-done .btn + .btn{margin-block-start:0}
/* לשונית Account במסך הפרויקטים. עמודה אחת וברוחב קריא - טפסים רחבים מדי קשים
למילוי, וזו אותה מגבלה שכבר חלה על .settings-pane .card. */
.account-section{display:flex; flex-direction:column; gap:16px; max-inline-size:720px}
/* ---------- בורר ערכת הנושא ---------- */
.theme-picker{display:flex; gap:10px; margin-block-start:14px; flex-wrap:wrap}
.theme-opt{
display:flex; align-items:center; gap:9px; padding:9px 14px 9px 10px;
background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
font-family:inherit; font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer;
transition:border-color .15s, color .15s;
}
.theme-opt:hover{border-color:var(--accent); color:var(--ink)}
.theme-opt[aria-checked="true"]{border-color:var(--accent); color:var(--ink); box-shadow:0 0 0 3px var(--accent-soft)}
/* דוגמית צבע אמיתית ולא אייקון: היא מראה את הפלטה עצמה, ולכן אינה תלויה בערכה
שפעילה כרגע - שתי האפשרויות נראות נכון בשני המצבים. */
.theme-swatch{inline-size:22px; block-size:22px; border-radius:6px; flex:none; border:1px solid var(--border-strong)}
.theme-swatch-dark{background:linear-gradient(135deg,#0c1116 50%,#3fb4a6 50%)}
.theme-swatch-light{background:linear-gradient(135deg,#eef2f4 50%,#0f6e64 50%)}
/* ---------- נעילת שינוי הסיסמה ---------- */
.pw-locked{
border:1px solid var(--border-strong); border-radius:var(--radius-sm);
background:var(--surface-2); padding:14px 16px; margin-block-start:10px;
}
.pw-locked .sec-title{color:var(--ink)}
.pw-locked .sec-title .ic{color:var(--muted)}
.pw-locked p{margin:6px 0 12px}
.pw-unlocked{display:flex; align-items:center; gap:6px; margin:10px 0 0; font-size:13.5px; color:var(--muted)}
/* tabular-nums כדי שהספרות לא "ירקדו" בכל שנייה שחולפת */
.pw-countdown{font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink)}
/* ---------- אבטחת החשבון במסך Account ---------- */
.acc-pw-form{display:flex; flex-direction:column; gap:12px; margin-block-start:14px}
.acc-pw-form .section-h{margin-block-end:2px}
.acc-confirmed{display:flex; align-items:center; gap:6px; color:var(--muted); font-size:13.5px; margin:0}
/* פס "הכתובת לא אושרה" - כרטיס בתוך כרטיס, ולכן בלי צל ועם רקע מובחן */
.warn-card{border-color:var(--warn); background:var(--warn-soft); box-shadow:none}
.acc-unconfirmed{padding:12px 14px; margin:0 0 4px}
.acc-unconfirmed .sec-title{color:var(--warn)}
.acc-unconfirmed p{margin:6px 0 10px}
/* ---------- Projects picker (חשבון עם כמה פרויקטים) ---------- */
.projects-view{min-height:100vh; min-height:100dvh; background:var(--bg)}
.projects-head{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; border-block-end:1px solid var(--border); background:var(--surface)}
.projects-main{max-inline-size:1100px; margin:0 auto; padding:32px 24px}
.projects-titlebar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-block-end:22px; flex-wrap:wrap}
.projects-titlebar h1{font-size:24px; font-weight:800; letter-spacing:-.02em}
.projects-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px}
.project-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); transition:border-color .15s, transform .1s; position:relative}
.project-card:hover{border-color:var(--accent); transform:translateY(-1px)}
.project-card-main{cursor:pointer; padding-inline-end:56px}
.project-card-name{font-weight:700; font-size:15.5px; margin-block-end:8px; word-break:break-word}
.project-card-ref{font-size:11.5px; color:var(--faint); margin-block-end:4px}
.project-card-date{margin-block-start:2px}
.project-card-actions{position:absolute; inset-block-start:12px; inset-inline-end:12px; display:flex; gap:2px}
.projects-tabs{max-inline-size:280px; margin-block-end:20px}
.usage-wrap{display:flex; flex-direction:column; gap:16px}
/* ===================== APP SHELL ===================== */
.app-view{min-height:100vh; min-height:100dvh}
.topbar{position:fixed; inset-block-start:0; inset-inline:0; height:var(--topbar-h); z-index:40; display:flex; align-items:center; gap:12px; padding-inline:16px; background:var(--surface); border-block-end:1px solid var(--border)}
.brand-sm .brand-mark{width:30px; height:30px; font-size:12px; border-radius:8px}
.brand-sm .brand-name{font-size:16px}
.topbar-spacer{flex:1}
.menu-toggle{display:none}
.user-chip{display:flex; align-items:center; gap:12px}
.user-meta{display:flex; flex-direction:column; align-items:flex-end; line-height:1.25}
.user-email{font-size:13px; font-weight:600; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.user-tenant{font-size:11px; color:var(--faint); font-family:var(--mono)}
/* התפריט יושב בצד ההתחלה של הכיווניות - בעברית זהו צד ימין, שם העין מתחילה לקרוא. */
.sidebar{position:fixed; inset-block-start:var(--topbar-h); inset-inline-start:0; inline-size:var(--sidebar-w); block-size:calc(100vh - var(--topbar-h)); background:var(--surface); border-inline-end:1px solid var(--border); padding:16px 12px; display:flex; flex-direction:column; z-index:35}
.nav{display:flex; flex-direction:column; gap:3px; flex:1}
.nav-item{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--radius-sm); color:var(--ink); text-decoration:none; font-size:14.5px; font-weight:600; transition:background .13s, color .13s}
.nav-item em{display:block; font-family:var(--mono); font-size:11px; color:var(--faint); font-weight:400; margin-top:1px}
.nav-item:hover{background:var(--surface-2)}
.nav-item.is-active{background:var(--accent-soft); color:var(--accent-ink)}
.nav-item.is-active .nav-ic{color:var(--accent)}
.nav-item.is-active em{color:var(--accent-ink); opacity:.75}
.nav-ic{inline-size:20px; block-size:20px; color:var(--muted); flex-shrink:0}
.sidebar-foot{font-size:12px; color:var(--muted); padding:10px 12px; display:flex; align-items:center; gap:8px; border-block-start:1px solid var(--border)}
.status-dot{inline-size:8px; block-size:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft)}
.content{margin-block-start:var(--topbar-h); margin-inline-start:var(--sidebar-w); padding:clamp(16px,3vw,32px); min-block-size:calc(100vh - var(--topbar-h))}
.scrim{position:fixed; inset:0; background:rgba(6,12,16,.45); z-index:34; backdrop-filter:blur(1px)}
/* ---------- View header ---------- */
.view-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-block-end:22px; flex-wrap:wrap}
.view-head-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.view-head h1{font-size:23px; font-weight:800}
.view-head h1 .en{font-size:15px}
.view-sub{color:var(--muted); font-size:13.5px; margin:4px 0 0; max-width:60ch}
/* ---------- Split (list + data) ---------- */
/* min-inline-size:0 חיוני: פריט grid לא מתכווץ מתחת לתוכנו כברירת מחדל, ולכן טבלה רחבה
הייתה דוחפת את כל הדף וגורמת לגלילה אופקית (נמדד: scrollWidth 1474 מול viewport 1446).
עם 0 הטבלה גוללת בתוך .table-scroll שלה, כמו ב-Supabase. */
.split{display:grid; grid-template-columns:260px minmax(0, 1fr); gap:18px; align-items:start}
.data-pane, .list-pane{min-inline-size:0}
.list-pane{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm)}
.list-title{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); padding:12px 14px; border-block-end:1px solid var(--border)}
.pane-list{list-style:none; margin:0; padding:6px; display:flex; flex-direction:column; gap:2px; max-block-size:70vh; overflow:auto}
.pane-list li.pane-item{padding:9px 12px; border-radius:var(--radius-sm); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:space-between; gap:8px; transition:background .12s}
.pane-list li.pane-item:hover{background:var(--surface-2)}
.pane-list li.pane-item.is-active{background:var(--accent-soft); color:var(--accent-ink); font-weight:600}
.pane-list li.pane-item .tag{font-family:var(--mono); font-size:11px; color:var(--faint)}
.pane-list li.muted{font-size:13px}
.pane-item-main{display:flex; align-items:center; gap:8px; flex:1; min-inline-size:0; cursor:pointer; overflow:hidden}
.pane-item-main .bucket-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pane-item-actions{display:flex; align-items:center; gap:2px; flex-shrink:0}
.pane-item-actions .icon-btn{padding:4px; font-size:13px}
.data-pane{min-block-size:200px}
/* ---------- Cards ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm)}
.card h2{font-size:16px; font-weight:700; margin-block-end:12px}
.cards-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
.card-wide{grid-column:1 / -1}
/* ---------- Data table ---------- */
.table-wrap{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm)}
.table-toolbar{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-block-end:1px solid var(--border); flex-wrap:wrap}
.table-toolbar .t-name{font-weight:700; font-size:15px}
.table-toolbar .t-name code{color:var(--accent-ink)}
.table-scroll{overflow-x:auto}
table.grid{border-collapse:collapse; inline-size:100%; font-size:13.5px}
table.grid th,table.grid td{text-align:start; padding:9px 13px; border-block-end:1px solid var(--border); white-space:nowrap; max-inline-size:320px; overflow:hidden; text-overflow:ellipsis}
table.grid th{background:var(--surface-2); font-weight:700; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.03em; position:sticky; inset-block-start:0}
table.grid td{font-family:var(--mono); font-size:12.5px}
table.grid tr:hover td{background:var(--surface-2)}
/* ---------- קווי הפרדה בין עמודות ----------
בטבלה עם עמודות צפופות - uuid, timestamp וטקסט חופשי זה לצד זה - קשה לראות איפה
נגמר ערך ומתחיל הבא, במיוחד כשהערך נחתך ב-ellipsis. קו אנכי פותר את זה.
הקו על **גבול ההתחלה** ומדולג בעמודה הראשונה (th + th), כך שאין קו כפול בגבול
הטבלה ואין קו מיותר בקצה. inline-start ולא left - הקונסולה עובדת גם ב-RTL.
הצבע הוא --border ולא --border-strong במכוון: להנחות את העין, לא להפוך את המסך
לגיליון אלקטרוני. */
table.grid th + th,
table.grid td + td{border-inline-start:1px solid var(--border)}
/* עמודת הפעולות היא כפתורים ולא נתונים - הגבול בין "מה יש בשורה" ל"מה אפשר לעשות
איתה" מודגש מעט יותר. */
table.grid td.cell-actions{border-inline-start-color:var(--border-strong)}
/* display:flex על | מבטל את display:table-cell - התא מפסיק להיות תא בטבלה.
התוצאה: הוא לא נמתח לגובה השורה (נמדד: 47px מול שורה של 56px), לא מתיישר אנכית,
ולא משתתף במודל הגבולות/הרקע של הטבלה - כך שהשורה נראתה כאילו נגמרת לפני עמודת
הפעולות והכפתורים ריחפו בקופסה משלהם. התא נשאר תא, והריווח עובר למרווח בין
הכפתורים. */
table.grid td.cell-actions{
font-family:var(--sans); vertical-align:middle; text-align:end;
white-space:nowrap; max-inline-size:none; overflow:visible;
}
table.grid td.cell-actions .btn + .btn{margin-inline-start:6px}
table.grid th:last-child{text-align:end}
/* ---------- עמודת הפעולות נשארת גלויה ----------
בטבלה רחבה (uuid, timestamp, jsonb...) הגלילה האופקית דוחפת את עמודת הפעולות
מחוץ למסך, והמשתמש רואה שורות שאי אפשר לעשות איתן כלום בלי לגלול עד הסוף.
sticky מצמיד אותה לקצה.
**הרקע חייב להיות אטום.** בלעדיו תוכן העמודות שנגללות מתחתיה נראה דרכה, וזה
נראה כמו תקלת רינדור. לכן גם מצב ה-hover משוכפל לכאן - אחרת השורה תואר והתא
הדביק יישאר בצבע אחר.
z-index גבוה יותר לכותרת: היא כבר sticky אנכית (inset-block-start), והפינה
הזו דביקה בשני הצירים - היא צריכה להישאר מעל שתיהן. */
table.grid td.cell-actions,
table.grid th:last-child{position:sticky; inset-inline-end:0}
table.grid td.cell-actions{background:var(--surface); z-index:2}
table.grid th:last-child{background:var(--surface-2); z-index:3}
table.grid tr:hover td.cell-actions{background:var(--surface-2)}
.cell-null{color:var(--faint); font-style:italic}
.table-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; border-block-start:1px solid var(--border); font-size:13px; color:var(--muted)}
.pager{display:flex; gap:6px; align-items:center}
/* ---------- Badges / state ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:999px}
.badge.on{background:var(--ok-soft); color:var(--ok)} .badge.off{background:var(--stop-soft); color:var(--stop)}
.conn-badge{font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:999px; background:var(--surface-3); color:var(--muted)}
.conn-badge.live{background:var(--ok-soft); color:var(--ok)}
.conn-badge.connecting{background:var(--warn-soft); color:var(--warn)}
.empty-state{display:grid; place-items:center; gap:10px; text-align:center; padding:56px 20px; color:var(--muted); background:var(--surface); border:1px dashed var(--border-strong); border-radius:var(--radius)}
.empty-state.small{padding:30px}
/* ---------- Realtime feed ---------- */
.rt-controls{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap}
.rt-controls .field{min-inline-size:180px}
.rt-feed{margin-block-start:16px; display:flex; flex-direction:column; gap:8px}
.rt-event{background:var(--surface); border:1px solid var(--border); border-inline-start:3px solid var(--accent); border-radius:var(--radius-sm); padding:10px 14px; box-shadow:var(--shadow-sm); animation:slideIn .25s ease}
.rt-event .rt-op{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:1px 7px; border-radius:5px; background:var(--accent-soft); color:var(--accent-ink)}
.rt-event .rt-op.INSERT{background:var(--ok-soft); color:var(--ok)} .rt-event .rt-op.UPDATE{background:var(--warn-soft); color:var(--warn)} .rt-event .rt-op.DELETE{background:var(--stop-soft); color:var(--stop)}
.rt-event pre{margin:8px 0 0; font-family:var(--mono); font-size:12px; color:var(--muted); overflow-x:auto; white-space:pre-wrap; word-break:break-word}
.rt-event .rt-meta{display:flex; align-items:center; gap:9px; font-size:13px}
@keyframes slideIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
/* ---------- key/value ---------- */
.kv{display:grid; grid-template-columns:auto 1fr; gap:9px 16px; margin:0; font-size:14px}
.kv dt{color:var(--muted); font-weight:600}
.kv dd{margin:0; word-break:break-all}
.token-row{display:flex; gap:8px; align-items:center}
.token-row input{flex:1; font-size:12px; padding:8px 10px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface-2); color:var(--ink)}
pre.code{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px; overflow-x:auto; font-family:var(--mono); font-size:12.5px; color:var(--ink); margin:0; line-height:1.6}
/* pre.code הוא margin:0 בכוונה - כדי שהוא יישב צמוד במקומות שבהם הוא ממלא כרטיס
שלם. המחיר היה שכל כפתור או טקסט שבא **אחריו** נדבק לתחתית הבלוק ונראה שבור.
הכלל כללי ולא נקודתי: הוא מתקן את תשעת המופעים בקונסולה ואת לוח הבקרה, שחולק
את אותו קובץ - ומכסה מראש כל בלוק קוד שיתווסף בעתיד. */
pre.code + *{margin-block-start:var(--s3)}
/* גם הכיוון ההפוך: פסקת הסבר שקדמה לבלוק נגעה בו מלמעלה. */
p + pre.code,
.hint + pre.code{margin-block-start:var(--s3)}
/* ---------- File list ---------- */
.file-list{list-style:none; margin:0; padding:0}
.file-list li{display:flex; align-items:center; gap:12px; padding:9px 14px; border-block-end:1px solid var(--border)}
.file-list li:last-child{border-block-end:none}
.file-name{flex:1; font-family:var(--mono); font-size:13px; word-break:break-all}
.file-size{font-size:12px; color:var(--faint); white-space:nowrap}
.file-date{white-space:nowrap; min-inline-size:110px}
.file-actions{display:flex; align-items:center; gap:2px; flex-shrink:0}
.folder-row{justify-content:space-between}
.folder-row:hover{background:var(--surface-2)}
.folder-row-main{display:flex; align-items:center; gap:12px; flex:1; min-inline-size:0; cursor:pointer}
.file-thumb{inline-size:34px; block-size:34px; border-radius:7px; overflow:hidden; background:var(--surface-2); display:flex; align-items:center; justify-content:center; flex-shrink:0}
.file-thumb img{inline-size:100%; block-size:100%; object-fit:cover}
.uploader{display:flex; align-items:center; gap:10px; padding:14px; border-block-end:1px solid var(--border); flex-wrap:wrap}
.drop-hint{color:var(--faint)}
.storage-wrap.drag-over{outline:2px dashed var(--accent); outline-offset:-4px; background:var(--accent-soft)}
.storage-crumb{margin-block-end:0; flex:1}
/* ---------- Storage: quota, search/sort, bulk actions, upload queue ---------- */
.quota-box{padding:10px 14px 12px; border-block-end:1px solid var(--border)}
.quota-label{font-size:11.5px; color:var(--muted); margin-block-end:6px; font-variant-numeric:tabular-nums}
.quota-track{block-size:6px; border-radius:4px; background:var(--surface-3); overflow:hidden}
.quota-fill{block-size:100%; background:var(--accent); border-radius:4px; transition:inline-size .2s}
.quota-fill.warn{background:var(--stop)}
.file-controls{display:flex; align-items:center; gap:12px; padding:10px 14px; border-block-end:1px solid var(--border); flex-wrap:wrap}
.file-controls input{flex:1; min-inline-size:180px; font-size:13.5px; padding:8px 10px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink)}
.sort-label{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); white-space:nowrap}
.sort-label select{font-family:inherit; font-size:13px; padding:6px 8px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink)}
.bulk-bar{display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--accent-soft); border-block-end:1px solid var(--border); font-size:13.5px; font-weight:600}
.upload-queue{list-style:none; margin:0; padding:0 14px 10px}
.upload-queue li{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 0; font-size:12.5px}
.upload-status{color:var(--faint); white-space:nowrap}
.upload-status.ok{color:var(--ok)}
.upload-status.err{color:var(--stop)}
/* ---------- Modal ---------- */
.modal-root{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px}
.modal-scrim{position:absolute; inset:0; background:rgba(6,12,16,.5)}
.modal{position:relative; width:100%; max-width:540px; max-height:88vh; overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-lg)}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-block-end:1px solid var(--border); position:sticky; inset-block-start:0; background:var(--surface)}
.modal-head h3{font-size:17px; font-weight:700}
.modal-body{padding:20px; display:flex; flex-direction:column; gap:15px}
.modal-actions{display:flex; gap:10px; justify-content:flex-start; margin-block-start:6px}
/* ---------- Toasts ---------- */
/* ההודעות עברו לקצה הסופי (שמאל בעברית) - הצד שבו התפריט כבר לא יושב. */
.toasts{position:fixed; inset-block-end:20px; inset-inline-end:20px; z-index:80; display:flex; flex-direction:column; gap:10px}
.toast{background:var(--surface); border:1px solid var(--border); border-inline-start:3px solid var(--accent); border-radius:var(--radius-sm); padding:12px 16px; box-shadow:var(--shadow-lg); font-size:14px; max-width:340px; animation:toastIn .2s ease}
.toast.ok{border-inline-start-color:var(--ok)} .toast.err{border-inline-start-color:var(--stop)}
@keyframes toastIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.spinner{display:inline-block; inline-size:16px; block-size:16px; border:2px solid var(--border-strong); border-block-start-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
/* ===================== FUNCTIONS DETAIL (Supabase-style) ===================== */
.fn-detail{display:flex; flex-direction:column}
.fn-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block-end:16px}
.fn-title{font-size:21px; font-weight:800; letter-spacing:-.02em}
.fn-url{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-block-start:6px; font-size:12.5px; color:var(--muted)}
.fn-url .mono{font-size:12px; word-break:break-all}
.fn-actions{display:flex; gap:8px; flex-shrink:0}
.fn-tabs-row{display:flex; align-items:center; justify-content:space-between; gap:12px; border-block-end:1px solid var(--border); flex-wrap:wrap}
.fn-tabs{display:flex; gap:2px; overflow-x:auto}
.fn-tab{background:none; border:none; border-block-end:2px solid transparent; padding:11px 15px; font-family:inherit; font-size:14px; font-weight:600; color:var(--muted); cursor:pointer; white-space:nowrap; margin-block-end:-1px}
.fn-tab:hover{color:var(--ink)}
.fn-tab.is-active{color:var(--accent-ink); border-block-end-color:var(--accent)}
.date-filter-btn{flex-shrink:0; margin-block-end:6px; font-family:var(--mono); font-size:12.5px}
/* ---------- פילטר תאריך+זמן (מודל, בהשראת Log Explorer של Supabase) ---------- */
.date-filter{display:grid; grid-template-columns:160px 1fr; gap:18px}
.date-filter-presets{display:flex; flex-direction:column; gap:2px; border-inline-end:1px solid var(--border); padding-inline-end:16px}
.date-filter-presets input{margin-block-end:10px; font-size:13px; padding:8px 10px}
.date-filter-preset{background:none; border:none; text-align:start; padding:8px 10px; border-radius:var(--radius-sm); font-family:inherit; font-size:13px; color:var(--ink); cursor:pointer}
.date-filter-preset:hover{background:var(--surface-2)}
.date-filter-preset.is-active{background:var(--accent-soft); color:var(--accent-ink); font-weight:700}
.date-filter-preset.muted{color:var(--muted); margin-block-start:8px; border-block-start:1px solid var(--border); padding-block-start:12px}
.date-filter-custom{display:flex; flex-direction:column; gap:14px}
.date-filter-actions{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-block-start:4px}
@media (max-width:520px){.date-filter{grid-template-columns:1fr} .date-filter-presets{border-inline-end:none; border-block-end:1px solid var(--border); padding-inline-end:0; padding-block-end:12px}}
.load-more-row{display:flex; justify-content:center; padding:16px 0 4px}
.fn-tabbody{padding-block-start:20px}
.tab-pane{display:flex; flex-direction:column; gap:18px}
.metric-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px}
.metric{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow-sm)}
.metric-label{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--faint)}
.metric-val{font-size:24px; font-weight:800; margin-block-start:4px; font-variant-numeric:tabular-nums}
.section-h{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin:0}
.chart{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-sm)}
.bars{display:flex; align-items:flex-end; gap:3px; block-size:150px}
.bar{flex:1 1 0; min-inline-size:3px; background:var(--accent-soft); border-start-start-radius:3px; border-start-end-radius:3px; transition:background .15s}
.bar:hover{background:var(--accent)}
.bar.err{background:var(--stop-soft)} .bar.err:hover{background:var(--stop)}
.chart-empty{display:grid; place-items:center; text-align:center; block-size:160px; background:var(--surface); border:1px dashed var(--border-strong); border-radius:var(--radius)}
.chart-empty-t{font-weight:600; color:var(--muted)}
.small{font-size:12px}
.logs{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm)}
.log-row{display:flex; align-items:baseline; gap:12px; padding:8px 14px; border-block-end:1px solid var(--border); font-family:var(--mono); font-size:12.5px}
.log-row:last-child{border-block-end:none}
.log-time{color:var(--faint); white-space:nowrap; flex-shrink:0}
.log-msg{flex:1; word-break:break-word; color:var(--ink)}
.sev{font-size:10.5px; font-weight:700; letter-spacing:.04em; padding:1px 7px; border-radius:5px; flex-shrink:0; min-inline-size:44px; text-align:center}
.sev.info{background:var(--accent-soft); color:var(--accent-ink)}
.sev.log{background:var(--mute-soft,rgba(120,130,140,.14)); color:var(--muted)}
.sev.err{background:var(--stop-soft); color:var(--stop)}
.sev.ok{background:var(--ok-soft); color:var(--ok)}
.nowrap-sans{font-family:var(--sans); white-space:nowrap}
.code-layout{display:grid; grid-template-columns:180px 1fr; gap:14px; min-block-size:440px}
.code-files{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:10px; box-shadow:var(--shadow-sm)}
.code-files-h{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); padding:6px 8px}
.code-file{font-family:var(--mono); font-size:13px; padding:8px 10px; border-radius:var(--radius-sm); cursor:default; color:var(--muted)}
.code-file.is-active{background:var(--accent-soft); color:var(--accent-ink)}
.code-main{display:flex; flex-direction:column; gap:10px}
/* עורך עם מספרי שורות */
.editor-wrap{display:flex; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-sm); overflow:hidden; transition:border-color .15s, box-shadow .15s}
.editor-wrap:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.editor-gutter{flex-shrink:0; inline-size:52px; padding:14px 8px; overflow:hidden; text-align:end; font-family:var(--mono); font-size:13px; line-height:1.6; color:var(--faint); background:var(--surface-3); border-inline-end:1px solid var(--border); user-select:none; direction:ltr}
.code-editor{flex:1; min-block-size:400px; background:transparent; border:none; padding:14px; font-family:var(--mono); font-size:13px; line-height:1.6; color:var(--ink); resize:vertical; tab-size:2; white-space:pre; overflow-wrap:normal; overflow-x:auto}
.code-editor:focus{outline:none}
.code-bar{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
/* עמוד יצירה */
.split.is-full{grid-template-columns:1fr}
.split.is-full .list-pane{display:none}
.crumb{font-size:12px; color:var(--faint); margin-block-end:4px}
.create-name{max-inline-size:520px; margin-block-end:18px}
.tpl-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin-block:10px 18px}
.tpl{text-align:start; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; cursor:pointer; font-family:inherit; transition:border-color .15s, background .15s}
.tpl:hover{border-color:var(--border-strong); background:var(--surface-2)}
.tpl.is-active{border-color:var(--accent); background:var(--accent-soft)}
.tpl-label{font-size:14px; font-weight:700; color:var(--ink)}
.tpl.is-active .tpl-label{color:var(--accent-ink)}
.tpl-desc{font-size:12px; color:var(--muted); margin-block-start:3px}
.settings-pane .card{max-inline-size:720px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.danger-zone{border-color:var(--stop); background:var(--stop-soft)}
.danger-zone .section-h{color:var(--stop)}
.snip-tabs{display:flex; gap:2px; border-block-end:1px solid var(--border); margin-block-end:12px}
.snip-tab{background:none; border:none; border-block-end:2px solid transparent; padding:7px 12px; font-family:inherit; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; margin-block-end:-1px}
.snip-tab.is-active{color:var(--accent-ink); border-block-end-color:var(--accent)}
@media (max-width:640px){
.code-layout{grid-template-columns:1fr}
.field-row{grid-template-columns:1fr}
.fn-head{flex-direction:column}
}
/* ===================== OVERVIEW ===================== */
.ov-wrap{display:flex; flex-direction:column; gap:18px}
.ov-wrap .card{max-inline-size:920px}
.link{color:var(--accent-ink); text-decoration:none; font-weight:600}
.link:hover{text-decoration:underline}
/* ===================== SQL EDITOR ===================== */
/* .sql-layout / .sql-side הוסרו: הסכמה עברה לפאנל-ההקשר המשותף (.split .list-pane). */
.sql-main{display:flex; flex-direction:column; gap:10px; min-inline-size:0}
.sql-main .editor-wrap{min-block-size:200px}
.sql-main .code-editor{min-block-size:190px}
.sql-bar{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.schema-item{display:block !important; cursor:default}
.schema-t{font-family:var(--mono); font-size:13px; font-weight:700; cursor:pointer; color:var(--accent-ink)}
.schema-cols{display:flex; flex-wrap:wrap; gap:4px; margin-block-start:5px}
.schema-col{font-family:var(--mono); font-size:11px; padding:1px 6px; border-radius:5px; background:var(--surface-3); color:var(--muted); cursor:pointer}
.schema-col:hover{background:var(--accent-soft); color:var(--accent-ink)}
.schema-col.is-managed{opacity:.55}
kbd{font-family:var(--mono); font-size:10px; padding:1px 5px; border:1px solid currentColor; border-radius:4px; opacity:.75; margin-inline-start:4px}
.ok-card{border-inline-start:3px solid var(--ok)}
.err-card{border-inline-start:3px solid var(--stop)}
.err-card .sec-title{color:var(--stop)}
.err-card .code{white-space:pre-wrap; word-break:break-word}
.tpl-col{display:flex; flex-direction:column; gap:10px}
.tpl-sql{font-family:var(--mono); font-size:11.5px; color:var(--muted); margin:6px 0 0; white-space:pre-wrap; line-height:1.5}
/* בעיית BiDi: "16.0 KB" הוצג כ-"KB 16.0" כי כל התא עבר סידור מחדש בהקשר RTL.
unicode-bidi:plaintext קובע את כיוון כל אלמנט לפי התוכן שלו (כמו dir="auto"),
כך שערך לטיני/מספרי נשאר LTR וערך עברי נשאר RTL — בלי לסמן כל תא ידנית. */
td, .metric-val, .kv dd, .file-size, .tpl-desc{unicode-bidi:plaintext}
/* כותרת עמודה: שם + סוג לצידו, כמו ב-Table Editor של Supabase */
.th-name{font-weight:700; text-transform:none; letter-spacing:0; font-size:12.5px; color:var(--ink)}
.th-type{font-family:var(--mono); font-size:10.5px; font-weight:400; color:var(--faint); text-transform:none; letter-spacing:0; margin-inline-start:6px}
.crumb-link{color:var(--muted); text-decoration:none; font-weight:600}
.crumb-link:hover{color:var(--accent-ink); text-decoration:underline}
.empty-row{text-align:center !important; color:var(--muted); font-family:var(--sans) !important; padding:28px 14px !important; white-space:normal !important}
.req-star{color:var(--stop); font-size:11px; font-weight:600}
.field > span code{margin-inline-start:6px}
/* ===================== TABLE BUILDER ===================== */
.table-builder{display:flex; flex-direction:column; gap:16px}
.table-builder .card{max-inline-size:920px}
.sec-card{background:var(--accent-soft); border-color:var(--accent)}
.sec-row{display:flex; align-items:flex-start; gap:12px}
.sec-title{font-weight:700; font-size:14.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.cols-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-block-end:12px}
.cols-grid{display:flex; flex-direction:column; gap:8px}
.col-row{display:grid; grid-template-columns:1.4fr 1.5fr 1fr 62px 62px 34px; gap:8px; align-items:center}
.col-row-head{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); padding-inline:2px}
.col-row input[type=text],.col-row input:not([type]),.col-row select{font-family:var(--mono); font-size:13px; padding:8px 10px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); inline-size:100%}
.col-row select{font-family:var(--sans)}
.col-row input:focus,.col-row select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.col-row .chk{display:grid; place-items:center}
.col-row.is-managed{opacity:.62}
.col-row.is-managed input,.col-row.is-managed select{background:var(--surface-3); cursor:not-allowed}
.cols-foot{margin-block-start:14px; display:flex; justify-content:center; border-block-start:1px dashed var(--border-strong); padding-block-start:14px}
@media (max-width:760px){
.col-row{grid-template-columns:1fr 1fr; gap:6px}
.col-row-head{display:none}
.col-row{border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px; background:var(--surface-2)}
.col-row .chk{justify-content:start; place-items:center start}
}
/* ===================== RESPONSIVE ===================== */
@media (max-width:860px){
.menu-toggle{display:inline-flex}
/* התנהגות המגירה (transform/transition/צל) מוגדרת במלואה בשכבת הליטוש
בסוף הקובץ - מקור אמת אחד. כאן נשאר רק ביטול השוליים של התוכן. */
.content{margin-inline-start:0}
.user-email{max-width:120px}
.split{grid-template-columns:1fr}
.list-pane .pane-list{max-block-size:none}
}
@media (max-width:520px){
body{font-size:14.5px}
.content{padding:14px}
.user-tenant{display:none}
.view-head h1{font-size:20px}
.auth-card{padding:24px 20px}
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }
/* =====================================================================
DESIGN REFINEMENT — 2026-07-28
שכבת ליטוש שמונחת מעל הבסיס. הפלטה לא משתנה (בקשת בעל הפרויקט), רק
המבנה, הצפיפות, ההיררכיה והתנועה. הדפוסים הם המוסכמות המשותפות
ל-Supabase/Vercel/Linear: תווית-מיקרו מעל ערך גדול, כותרת-עמוד עם
תת-כותרת ופעולות בצד, שורת-כלים נפרדת, וטבלאות צפופות עם כותרת דביקה.
===================================================================== */
:root{
/* סקאלת מרווחים. קודם היו מספרים חופשיים בכל מקום, וזה בדיוק מה שיוצר
תחושת "לא מקצועי" - מרווחים שלא מתיישרים זה עם זה. */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
--radius-lg:14px;
--ease:cubic-bezier(.2,.7,.3,1);
--t-fast:120ms; --t-med:200ms; --t-drawer:280ms;
--tabbar-h:0px;
--content-max:1400px;
--topbar-h:56px;
}
/* ---------- Topbar: דק יותר, עם טשטוש עדין ---------- */
.topbar{
height:56px; padding-inline:var(--s4);
background:color-mix(in srgb, var(--surface) 88%, transparent);
backdrop-filter:saturate(1.4) blur(10px);
-webkit-backdrop-filter:saturate(1.4) blur(10px);
}
/* ---------- Sidebar: פריטים נמוכים יותר, מחוון פעיל, גלילה מוכלת ---------- */
.sidebar{padding:var(--s3) var(--s2); overflow-y:auto; overscroll-behavior:contain}
.nav{gap:1px}
.nav-item{
position:relative; padding:8px var(--s3); font-size:14px; font-weight:500;
border-radius:8px; min-height:38px;
transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-item.is-active{font-weight:600}
/* פס-מחוון בצד ההתחלה במקום רקע בלבד - נקרא מהר יותר במבט חטוף */
.nav-item.is-active::before{
content:""; position:absolute; inset-inline-start:0; inset-block:6px;
inline-size:3px; border-radius:0 3px 3px 0; background:var(--accent);
}
.nav-ic{inline-size:18px; block-size:18px}
.sidebar-foot{font-size:11.5px; padding:var(--s3)}
/* ---------- תוכן: רוחב מרבי לקריאוּת ---------- */
.content{
padding:var(--s5) clamp(16px,3vw,32px);
padding-block-end:calc(var(--s6) + var(--tabbar-h));
}
.content > .view{max-inline-size:var(--content-max); margin-inline:auto}
/* ---------- כותרת עמוד ---------- */
.view-head{
align-items:flex-start; margin-block-end:var(--s5);
padding-block-end:var(--s4); border-block-end:1px solid var(--border);
}
.view-head h1{font-size:22px; font-weight:700; letter-spacing:-.02em}
.view-sub{font-size:13px; margin-block-start:var(--s1); line-height:1.5}
/* ---------- כרטיסים ואריחי-מדד ---------- */
.card{border-radius:var(--radius-lg); padding:var(--s5)}
.card h2{font-size:14px; font-weight:600; color:var(--muted); margin-block-end:var(--s4)}
.cards-grid{gap:var(--s4)}
.metric{
background:var(--surface); border:1px solid var(--border);
border-radius:var(--radius); padding:var(--s4);
transition:border-color var(--t-fast) var(--ease);
}
.metric:hover{border-color:var(--border-strong)}
.metric-label{
font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
color:var(--faint);
}
.metric-val{font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.15; margin-block-start:var(--s2)}
.metric-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--s3)}
/* ---------- טבלת נתונים ---------- */
.table-wrap{border-radius:var(--radius-lg)}
.table-toolbar{padding:var(--s3) var(--s4); background:var(--surface)}
table.grid th{
font-size:11px; letter-spacing:.05em; padding:var(--s2) var(--s3);
z-index:2; box-shadow:inset 0 -1px 0 var(--border); border-block-end:none;
}
table.grid td{padding:var(--s2) var(--s3)}
table.grid tr:hover td{background:var(--accent-soft)}
.table-foot{padding:var(--s3) var(--s4)}
.table-scroll{-webkit-overflow-scrolling:touch; scrollbar-width:thin}
/* ---------- מצבים ריקים ---------- */
.empty-state{padding:var(--s7) var(--s4); text-align:center; color:var(--muted)}
/* ---------- תנועה אחידה ---------- */
.btn{transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform 60ms var(--ease)}
.card,.metric,.list-pane,.table-wrap{transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease)}
/* =====================================================================
MOBILE — הדגש של הבקשה: מגירה חלקה, סרגל תחתון קבוע, ומטרות-מגע
בגודל אמיתי. כולל safe-area למכשירים עם notch.
===================================================================== */
.tabbar{display:none}
@media (max-width:860px){
:root{--tabbar-h:calc(56px + env(safe-area-inset-bottom,0px))}
.topbar{padding-inline:var(--s3)}
.user-meta{display:none} /* המייל זמין בתפריט; בטופבר הצר הוא רק גוזל מקום */
/* מגירה: תנועה על transform בלבד (מואצת חומרה) ו-scrim שדוהה.
ה-transform מוצהר כאן מפורשות ולא נשען על הבלוק הקודם בקובץ - שני
בלוקי @media לאותו סלקטור הם בדיוק המקום שבו קסקייד נשבר בשקט. */
.sidebar{
inline-size:min(300px,84vw); padding-block:var(--s4);
box-shadow:none; will-change:transform;
transform:translateX(-100%);
transition:transform var(--t-drawer) var(--ease), box-shadow var(--t-drawer) var(--ease);
}
.sidebar.open{transform:translateX(0); box-shadow:var(--shadow-lg)}
.scrim{opacity:0; transition:opacity var(--t-drawer) var(--ease); pointer-events:none}
.scrim:not([hidden]){opacity:1; pointer-events:auto}
/* מטרות מגע - 44px הוא המינימום שאפשר להקיש עליו בביטחון */
.nav-item{min-height:46px; font-size:15px; padding-inline:var(--s4)}
.icon-btn{padding:10px}
.btn{padding:11px 16px; min-height:42px}
.btn-sm{padding:8px 12px; min-height:36px}
/* סרגל תחתון - ניווט ראשי בהישג אגודל */
.tabbar{
display:flex; position:fixed; inset-inline:0; inset-block-end:0; z-index:38;
background:color-mix(in srgb, var(--surface) 94%, transparent);
backdrop-filter:saturate(1.4) blur(12px);
-webkit-backdrop-filter:saturate(1.4) blur(12px);
border-block-start:1px solid var(--border);
padding-block-end:env(safe-area-inset-bottom,0px);
}
.tab-item{
flex:1; flex-direction:column; gap:3px; min-height:56px; padding:var(--s2) 2px;
justify-content:center; font-size:10.5px; font-weight:600; border-radius:0;
color:var(--muted); text-align:center;
}
.tab-item .nav-ic{inline-size:21px; block-size:21px}
.tab-item.is-active{background:transparent; color:var(--accent)}
.tab-item.is-active .nav-ic{color:var(--accent)}
/* בסיידבר המחוון הוא פס אנכי בצד; בסרגל התחתון - פס אופקי למעלה */
.tab-item.is-active::before{
inset-inline:22%; inset-block-start:0; inset-block-end:auto;
inline-size:auto; block-size:2px; border-radius:0 0 3px 3px;
}
.view-head{margin-block-end:var(--s4); padding-block-end:var(--s3)}
.view-head h1{font-size:19px}
/* הריפוד התחתון חייב לפנות מקום לסרגל התחתון, אחרת הוא מסתיר את סוף
התוכן. קיצור padding היה דורס את ה-padding-block-end שנקבע למעלה. */
.content{padding:var(--s4) var(--s3); padding-block-end:calc(var(--s5) + var(--tabbar-h))}
.card{padding:var(--s4)}
.metric-val{font-size:22px}
.metric-row{grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:var(--s2)}
.table-wrap{border-radius:var(--radius)}
table.grid th,table.grid td{max-inline-size:200px}
}
@media (max-width:520px){
/* .btn הוא white-space:nowrap, ותווית ארוכה ("Connect to Cursor / Claude Code",
256px) דחפה את כל הדף ל-412px במסך של 375. עד שהוסר overflow-x:hidden זה פשוט
הוסתר. בטלפון עדיפה שורה שנייה על גלילה אופקית של הדף כולו. */
.btn{white-space:normal; text-align:center; max-inline-size:100%}
.view-head{flex-direction:column; align-items:stretch; gap:var(--s3)}
.view-head-actions{inline-size:100%}
.view-head-actions .btn{flex:1; justify-content:center}
.brand-sm .brand-name{display:none}
.tab-item{font-size:10px}
/* גיליון תחתון במקום חלון באמצע - נוח בהרבה לאגודל */
.modal-root{align-items:flex-end}
.modal{inline-size:100%; max-inline-size:none; border-radius:var(--radius-lg) var(--radius-lg) 0 0}
}
/* =====================================================================
TYPOGRAPHY & ICON SYSTEM — 2026-07-28
שתי בעיות שנשארו פתוחות אחרי שכבת הליטוש הקודמת:
1. גדלי גופן חופשיים (15 / 14.5 / 13.5 / 12.5 / 11.5 / 10.5 ...) - עשרה גדלים
בלי סקאלה. זו בדיוק אותה בעיה ש---s1..--s7 פתרו למרווחים, והעין קולטת אותה
כ"לא מסודר" בלי לדעת להצביע על הסיבה.
2. אימוג'י כאייקונים. אימוג'י מגיע מפונט המערכת: צבע קבוע שלא מגיב ל-accent או
ל-dark mode, משקל שלא מתיישר עם קווי ה-SVG של הניווט, וצורה שונה לגמרי בכל
מערכת הפעלה (🗑 ב-Windows מול macOS). כאן הכל עבר ל-SVG בקו אחיד.
===================================================================== */
:root{
/* סקאלת טיפוגרפיה - שבעה גדלים, מכאן ואילך אין מספר קשיח בקובץ */
--fs-2xs:11px; /* תוויות-מיקרו באותיות גדולות */
--fs-xs:12px; /* מטא: תאריכים, גדלי קבצים, כותרות טבלה */
--fs-sm:13px; /* טקסט משני, תאי טבלה, קוד */
--fs-md:14px; /* גוף הממשק: כפתורים, ניווט, שדות */
--fs-lg:16px; /* כותרות כרטיס */
--fs-xl:20px; /* כותרות משנה */
--fs-2xl:26px; /* ערכי מדדים, כותרת עמוד */
--lh-tight:1.25; --lh-snug:1.4; --lh-normal:1.5;
--tracking-caps:.06em; /* ערך אחד לכל האותיות-הגדולות, במקום .03/.05/.06/.07 */
--tracking-tight:-.02em;
}
body{
font-size:var(--fs-md); line-height:var(--lh-normal);
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
/* cv05: אות l עם זנב, כדי שלא תתבלבל עם 1 ו-I בשמות טבלאות ועמודות.
ss03: אַמפרסנד רגיל. tnum: מספרים ברוחב אחיד בכל הממשק. */
font-feature-settings:"cv05" 1,"ss03" 1;
font-variant-numeric:tabular-nums;
}
h1,h2,h3{line-height:var(--lh-tight); letter-spacing:var(--tracking-tight)}
/* משקלים: רק 500 / 600 / 700. 800 עם פונט משתנה נראה כבד מדי לקונסולה. */
.brand-name,.projects-titlebar h1,.view-head h1,.fn-title,.metric-val{font-weight:700}
/* ---------- החלת הסקאלה ---------- */
.btn{font-size:var(--fs-md); font-weight:600}
.btn-sm{font-size:var(--fs-sm)}
.field{font-size:var(--fs-sm)}
.field > span{font-weight:600}
.field input,.field select,.field textarea{font-size:var(--fs-md)}
.form-error,.hint,.view-sub,.muted.small,.small{font-size:var(--fs-sm)}
.auth-sub{font-size:var(--fs-md)}
.auth-foot{font-size:var(--fs-xs)}
.brand-name{font-size:var(--fs-xl)}
.brand-sm .brand-name{font-size:var(--fs-lg)}
.projects-titlebar h1{font-size:var(--fs-2xl)}
.project-card-name{font-size:var(--fs-md); font-weight:600}
.project-card-ref{font-size:var(--fs-xs)}
.tab,.fn-tab{font-size:var(--fs-md)}
.snip-tab{font-size:var(--fs-sm)}
.user-email{font-size:var(--fs-sm)}
.user-tenant{font-size:var(--fs-2xs)}
.nav-item{font-size:var(--fs-md)}
.sidebar-foot{font-size:var(--fs-xs)}
.view-head h1{font-size:var(--fs-2xl)}
.view-sub{font-size:var(--fs-sm); line-height:var(--lh-snug)}
.card h2{font-size:var(--fs-sm); font-weight:600}
.metric-val{font-size:var(--fs-2xl)}
.pane-list li.pane-item{font-size:var(--fs-sm)}
.table-toolbar .t-name{font-size:var(--fs-md); font-weight:600}
table.grid{font-size:var(--fs-sm)}
table.grid td{font-size:var(--fs-sm)}
.table-foot{font-size:var(--fs-sm)}
.badge{font-size:var(--fs-2xs)}
.conn-badge{font-size:var(--fs-xs)}
.file-name{font-size:var(--fs-sm)}
.file-size,.crumb,.quota-label{font-size:var(--fs-xs)}
.log-row{font-size:var(--fs-sm)}
.code-editor,.editor-gutter,.code-file,pre.code{font-size:var(--fs-sm)}
.toast{font-size:var(--fs-md)}
.modal-head h3{font-size:var(--fs-lg); font-weight:600}
.kv{font-size:var(--fs-md)}
.tpl-label{font-size:var(--fs-md); font-weight:600}
.tpl-desc,.tpl-sql{font-size:var(--fs-sm)}
.sec-title{font-size:var(--fs-md)}
/* תוויות-מיקרו: ערך מרווח-אותיות אחד לכולן */
.metric-label,.section-h,.list-title,.col-row-head,.code-files-h,table.grid th{
font-size:var(--fs-2xs); font-weight:600; text-transform:uppercase;
letter-spacing:var(--tracking-caps);
}
/* כותרת עמודה עם שם-שדה אמיתי נשארת בלי אותיות גדולות - זה מזהה, לא תווית */
.th-name{font-size:var(--fs-xs); font-weight:600; text-transform:none; letter-spacing:0}
.th-type{font-size:var(--fs-2xs)}
/* מספרים ברוחב אחיד גם היכן שהם עמודה שלמה - בלעדי זה הספרות "רוקדות" בין שורות */
table.grid td,.log-time,.file-size,.table-foot,.metric-val,.quota-label,.upload-queue li{
font-variant-numeric:tabular-nums;
}
/* קוד שהמשתמש כותב: ליגטורות כבויות, כי != שנראה כמו ≠ מבלבל בעריכת SQL */
.code-editor,pre.code,.mono,code{font-variant-ligatures:none; font-feature-settings:normal}
/* =====================================================================
ICONS — סט אחד, קו בלבד, יורש currentColor מהאלמנט שמכיל אותו
===================================================================== */
.ic{inline-size:16px; block-size:16px; flex:none; vertical-align:-3px}
.ic-lg{inline-size:20px; block-size:20px; vertical-align:-4px}
.icon-btn .ic{inline-size:15px; block-size:15px; vertical-align:0}
.empty-ic{inline-size:30px; block-size:30px; color:var(--faint); opacity:.9; margin-block-end:var(--s2)}
/* אייקון בתוך תא/שורה: מיושר לטקסט וכהה פחות ממנו */
.tbl-ic,.folder-ic,.file-thumb-ic,.pk-ic{color:var(--faint)}
.tbl-ic{margin-inline-end:8px}
.pk-ic{margin-inline-end:5px; inline-size:13px; block-size:13px}
.file-thumb-ic{inline-size:17px; block-size:17px}
.sec-row .lock{color:var(--accent); inline-size:20px; block-size:20px; flex:none}
.kv dt .ic{margin-inline-end:6px}
.ic-ok{color:var(--ok)} .ic-stop{color:var(--stop)} .ic-warn{color:var(--warn)}
/* אייקון בתוך תווית טקסט: מיושר למרכז השורה במקום להישען על vertical-align,
שמתנהג שונה בכל גודל גופן. */
.section-h,.kv dt,.date-filter-preset,.upload-queue li .upload-status{
display:flex; align-items:center; gap:6px;
}
.section-h .ic,.sec-title .ic{inline-size:14px; block-size:14px; vertical-align:0}
.section-h .ic{color:currentColor}
.danger-zone .section-h .ic{color:var(--stop)}
.kv dt .ic{inline-size:15px; block-size:15px; vertical-align:0; margin-inline-end:0}
.upload-status .ic{inline-size:14px; block-size:14px; vertical-align:0}
.pk-ic{vertical-align:-2px}
/* =====================================================================
WORKSPACE — פריסת שני-פאנלים (Table Editor / Storage / Functions)
הדפוס של Supabase: ניווט ראשי → פאנל הקשר → תוכן. עד עכשיו היה כאן דפוס-דף
רגיל: כותרת ענקית עם תת-כותרת ופעולות מעליהם, ורק מתחתיהם הרשימה והתוכן.
התוצאה הייתה שכשליש מגובה המסך הלך על כותרת שקוראים פעם אחת בחיים, והרשימה
והנתונים נדחקו למטה. כאן הכותרת, הפעולה הראשית והחיפוש יושבים **בתוך** הפאנל,
והתוכן מתחיל בקצה העליון של המסך.
===================================================================== */
:root{--panel-w:264px}
/* הפריסה הזו נצמדת לקצוות, ולכן מבטלים את הריפוד של .content ואת תקרת הרוחב
שלו - אבל **רק** במסכים שמשתמשים בה. */
.content:has(> .view[data-view="tables"]:not([hidden])),
.content:has(> .view[data-view="storage"]:not([hidden])),
.content:has(> .view[data-view="functions"]:not([hidden])),
.content:has(> .view[data-view="cron"]:not([hidden])){ padding:0 }
.content > .view:is([data-view="tables"],[data-view="storage"],[data-view="functions"],[data-view="cron"]){ max-inline-size:none }
.split{
grid-template-columns:var(--panel-w) minmax(0,1fr);
gap:0; align-items:stretch;
block-size:calc(100dvh - var(--topbar-h));
}
.list-pane{
border:none; border-inline-end:1px solid var(--border); border-radius:0;
box-shadow:none; display:flex; flex-direction:column; min-block-size:0;
}
/* min-block-size:0 חיוני גם כאן: בלעדיו פריט flex לא מתכווץ מתחת לתוכנו,
והרשימה הייתה גולשת מהפאנל במקום לגלול בתוכו. */
.pane-list{flex:1 1 auto; max-block-size:none; min-block-size:0; overflow-y:auto; padding:var(--s2)}
.data-pane{min-block-size:0; overflow:auto; padding:var(--s5) clamp(16px,3vw,32px)}
.panel-head{
display:flex; flex-direction:column; gap:var(--s2);
padding:var(--s4) var(--s3) var(--s3);
border-block-end:1px solid var(--border);
}
.panel-title-row{display:flex; align-items:center; justify-content:space-between; gap:var(--s2)}
.panel-title{font-size:var(--fs-lg); font-weight:600; letter-spacing:var(--tracking-tight)}
.panel-head .btn-block{justify-content:center}
.panel-search{
display:flex; align-items:center; gap:var(--s2);
background:var(--surface-2); border:1px solid var(--border);
border-radius:var(--radius-sm); padding-inline:10px;
transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.panel-search:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.panel-search .ic{color:var(--faint); inline-size:15px; block-size:15px}
.panel-search input{
flex:1; min-inline-size:0; background:none; border:none; padding:8px 0;
font-family:inherit; font-size:var(--fs-sm); color:var(--ink);
}
.panel-search input:focus{outline:none}
/* ה-x של type=search מגיע מהעיצוב של מערכת ההפעלה ולא מתיישב עם השאר */
.panel-search input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none}
.pane-empty{padding:var(--s5) var(--s3); text-align:center; color:var(--faint); font-size:var(--fs-sm)}
/* ---------- מובייל: הפאנל הופך לרצועת שבבים אופקית ----------
רשימה אנכית מעל התוכן הייתה דוחפת את הנתונים אל מתחת לקיפול בכל כניסה למסך.
רצועה נדבקת למעלה שומרת על הניווט בהישג יד ומשאירה את התוכן בראש המסך.
פעולות הפריט (שינוי שם/מחיקה) לא נעלמות - הן מוצגות עבור השבב הפעיל, כך
שאפשר לבצע אותן גם בטלפון. */
@media (max-width:860px){
.split{grid-template-columns:1fr; block-size:auto}
/* לא נדבק בכוונה: הפאנל תופס ~139px מתוך 812, וזה מחיר קבוע גבוה מדי בטלפון
עבור רכיב שמשמש להחלפת טבלה. הוא נגלל החוצה עם התוכן, וחזרה אליו היא תנועת
גלילה אחת למעלה. */
.list-pane{
border-inline-end:none; border-block-end:1px solid var(--border);
background:var(--surface);
}
.panel-head{
flex-direction:row; align-items:center; flex-wrap:wrap;
padding:var(--s2) var(--s3); gap:var(--s2); border-block-end:none;
}
.panel-title-row{flex:1 1 auto; min-inline-size:0}
.panel-title{font-size:var(--fs-md)}
.panel-head .btn-block{inline-size:auto; flex:none; padding-inline:12px}
.panel-search{flex:1 1 100%; order:3}
.quota-box{flex:1 1 100%; order:4; border-block-end:none; padding-inline:0}
.pane-list{
flex-direction:row; overflow-x:auto; overflow-y:hidden;
padding:0 var(--s3) var(--s2); gap:var(--s2);
scrollbar-width:none; -ms-overflow-style:none;
}
.pane-list::-webkit-scrollbar{display:none}
.pane-list li.pane-item{
flex:none; white-space:nowrap; border:1px solid var(--border);
border-radius:999px; padding:7px 13px; min-block-size:36px;
}
.pane-list li.pane-item.is-active{border-color:var(--accent)}
/* פעולות רק לשבב הפעיל - אחרת כל שבב היה נושא שני כפתורים והרצועה מתפוצצת */
.pane-item:not(.is-active) .pane-item-actions{display:none}
.pane-list li.muted{flex:none}
/* ריפוד תחתון חייב לחזור כאן: ביטלנו את הריפוד של .content עבור המסכים האלה,
ואיתו נעלם גם המרווח שמפנה מקום לסרגל הניווט התחתון הקבוע - סוף התוכן היה
מסתתר מאחוריו. */
.data-pane{padding:var(--s4) var(--s3); padding-block-end:calc(var(--s5) + var(--tabbar-h)); overflow:visible}
}
/* ---------- SQL Editor ----------
הסכמה עברה מימין לשמאל, לאותו פאנל-הקשר כמו שאר המסכים. קודם היא ישבה בצד
הסופי, כלומר בקצה שהעין מגיעה אליו אחרון - בעוד שהיא בדיוק מה שמסתכלים עליו
*לפני* שכותבים שאילתה. */
.content:has(> .view[data-view="sql"]:not([hidden])){ padding:0 }
.content > .view[data-view="sql"]{ max-inline-size:none }
.sql-main{display:flex; flex-direction:column; gap:var(--s3)}
.sql-toolbar{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap}
.sql-main .editor-wrap{min-block-size:200px}
.sql-main .code-editor{min-block-size:190px}
/* פריטי הסכמה הם רב-שורתיים (שם + עמודות) ולכן לא הופכים לשבבים במובייל */
.split.is-stack .pane-list{padding:var(--s2)}
@media (max-width:860px){
.split.is-stack .pane-list{
flex-direction:column; overflow-x:hidden; overflow-y:auto;
max-block-size:34vh; padding:var(--s2) var(--s3);
}
.split.is-stack .pane-list li.pane-item{
inline-size:100%; white-space:normal; border-radius:var(--radius-sm);
}
.split.is-stack .pane-item .pane-item-actions{display:flex}
}
/* =====================================================================
FUNCTION TABS — הסרת סרגל הגלילה האנכי
.fn-tabs הוגדר overflow-x:auto בלבד. לפי מפרט CSS, כש-overflow-x אינו
visible וה-overflow-y הוא visible, האחרון **מחושב** ל-auto. ול-.fn-tab יש
margin-block-end:-1px (כדי שהקו התחתון של הלשונית הפעילה יכסה את גבול השורה),
כלומר התוכן גבוה בפיקסל אחד מהמכל - ומספיק פיקסל אחד כדי שהדפדפן יצייר סרגל
גלילה אנכי מלא, עם חיצים, בקצה שורת הלשוניות.
===================================================================== */
.fn-tabs{
overflow-y:hidden;
/* הלשוניות עדיין נגללות אופקית במסך צר (גלגלת/החלקה), רק בלי הפס עצמו -
חמש לשוניות אינן מצדיקות סרגל קבוע. */
scrollbar-width:none; -ms-overflow-style:none;
}
.fn-tabs::-webkit-scrollbar{display:none}
/* ---------- כרטיס החבילה במסך Usage ----------
מוצג רק כשלחשבון יש חבילה פעילה. הוא צריך להיקרא כמסגרת שכל שאר המספרים
נמדדים בתוכה, ולכן הוא בגוון ה-accent ולא ככרטיס נוסף ברשימה. */
.plan-banner{background:var(--accent-soft); border-color:var(--accent)}
.plan-banner-head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3); margin-block-end:var(--s4)}
.plan-banner-name{font-size:var(--fs-xl); font-weight:700; letter-spacing:var(--tracking-tight); margin-block-start:var(--s1)}
.plan-banner-limits{
display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:var(--s3) var(--s4); margin:0;
}
.plan-banner-limits dt{font-size:var(--fs-2xs); font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--muted)}
.plan-banner-limits dd{margin:2px 0 0; font-size:var(--fs-md); font-weight:600; font-variant-numeric:tabular-nums}
@media (max-width:520px){ .plan-banner-limits{grid-template-columns:1fr 1fr} }
/* =====================================================================
ACCOUNT AND API
המסך הזה היה .cards-grid עם minmax(280px,1fr), כלומר "Account details"
ו-"Access token" נדחסו לעמודות של ~320px בתוך עמוד של 2000px. ומכיוון
ש-.kv dd נושא word-break:break-all, המזהים נשברו באמצע מילה:
f79a1bc2-bc / 15-4777-962 / 3-be3c59e7f / 447 על ארבע שורות. מזהה שבור
הוא מזהה שאי אפשר לקרוא, להשוות או להקריא בטלפון.
===================================================================== */
/* עמודת קריאה אחת. עמוד הגדרות שנמתח על 1400px מכריח את העין לרוץ לרוחב
בשביל ארבעה שדות - הצרה מכוונת, לא מחסור במקום. */
.acc-wrap{display:flex; flex-direction:column; gap:var(--s4); max-inline-size:940px}
.acc-kv{display:grid; grid-template-columns:190px minmax(0,1fr) auto; gap:var(--s3) var(--s4); margin:0; align-items:baseline}
.acc-kv dt{color:var(--muted); font-weight:600; font-size:var(--fs-sm)}
.acc-kv dt code{margin-inline-start:5px}
.acc-val{
margin:0; font-size:var(--fs-sm); color:var(--ink); min-inline-size:0;
/* anywhere ולא break-all: שובר רק כשאין באמת ברירה (מסך צר מאוד), במקום
לפרק כל מזהה ארוך כברירת מחדל. */
overflow-wrap:anywhere;
}
.acc-copy{align-self:center}
.acc-kv .icon-btn{opacity:.55; transition:opacity var(--t-fast) var(--ease)}
.acc-kv:hover .icon-btn,.acc-kv .icon-btn:focus-visible{opacity:1}
/* כותרת כרטיס עם פעולות בצד - במקום כפתורים שנזרקים בתחתית הכרטיס */
.card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; margin-block-end:var(--s4)}
.card-head h2{margin-block-end:var(--s1)}
.card-head .hint{margin:0; max-inline-size:62ch}
.card-head-actions{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}
.acc-wrap .token-row input{font-size:var(--fs-xs)}
.acc-wrap .table-wrap{border-radius:var(--radius)}
@media (max-width:640px){
/* תווית מעל ערך: 190px לתווית לא משאירים מספיק לערך במסך צר */
.acc-kv{grid-template-columns:minmax(0,1fr) auto; gap:var(--s1) var(--s2)}
.acc-kv dt{grid-column:1 / -1; margin-block-start:var(--s2)}
.card-head-actions{inline-size:100%}
.card-head-actions .btn{flex:1 1 auto; justify-content:center}
}
/* =====================================================================
TABLE EDITOR — סרגל אחד, מיון לפי עמודה, ותפריט פעולות
===================================================================== */
/* סרגל אחד במקום שניים: פירורי-לחם, חיפוש ופעולות באותה שורה. במסך צר החיפוש
יורד לשורה משלו ותופס את כל הרוחב, במקום להצטמק לשדה שאי אפשר להקליד בו. */
.table-toolbar{gap:var(--s3)}
.tb-search{
display:flex; align-items:center; gap:var(--s2); flex:1 1 220px; min-inline-size:0;
background:var(--surface-2); border:1px solid var(--border);
border-radius:var(--radius-sm); padding-inline:10px;
transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.tb-search:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.tb-search .ic{color:var(--faint); inline-size:15px; block-size:15px}
.tb-search input{
flex:1; min-inline-size:0; background:none; border:none; padding:7px 0;
font-family:inherit; font-size:var(--fs-sm); color:var(--ink);
}
.tb-search input:focus{outline:none}
.tb-search input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none}
.tb-actions{display:flex; align-items:center; gap:var(--s2); flex:none}
@media (max-width:640px){ .tb-search{flex-basis:100%; order:3} }
/* הכותרות הפכו ליעד לחיצה (מיון), ו-35px נמוך מדי לאגודל */
@media (max-width:860px){ table.grid th.is-sortable{padding-block:11px} }
/* ---------- מיון ---------- */
th.is-sortable{cursor:pointer; user-select:none}
th.is-sortable:hover{color:var(--ink)}
.th-sort{
inline-size:12px; block-size:12px; margin-inline-start:5px; vertical-align:-2px;
opacity:0; transition:opacity var(--t-fast) var(--ease);
}
/* רמז דהוי ב-hover, מלא בעמודה הפעילה - כך הטבלה לא מלאה בחיצים במנוחה */
th.is-sortable:hover .th-sort{opacity:.45}
th.is-sorted{color:var(--accent-ink)}
th.is-sorted .th-sort{opacity:1; color:var(--accent)}
/* ---------- תפריט פעולות ---------- */
.menu-wrap{position:relative}
.menu{
position:absolute; inset-block-start:calc(100% + 4px); inset-inline-end:0; z-index:50;
min-inline-size:190px; padding:4px;
background:var(--surface); border:1px solid var(--border-strong);
border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);
display:flex; flex-direction:column; gap:1px;
}
.menu-item{
display:flex; align-items:center; gap:var(--s2);
inline-size:100%; text-align:start; padding:8px 10px;
background:none; border:none; border-radius:6px; cursor:pointer;
font-family:inherit; font-size:var(--fs-sm); color:var(--ink); white-space:nowrap;
}
.menu-item:hover{background:var(--surface-2)}
.menu-item .ic{color:var(--muted); inline-size:15px; block-size:15px}
/* =====================================================================
FUNCTION LOGS
הרשימה הייתה שורות שטוחות: כל הרצה ייצרה שתי שורות עם אותה חותמת זמן, בלי סימן
איפה הרצה נגמרת והבאה מתחילה, והפלט נשפך כ-JSON גולמי שנשבר על כמה שורות. כאן
כרטיס אחד להרצה, פלט מוזח, וקיצוץ עם פתיחה.
===================================================================== */
/* שורת הכותרת של הלוגים: שם הפונקציה שהלוגים שייכים לה, ומתג הרענון החי.
השם מוצג במפורש כי המתג פועל על פונקציה אחת בלבד - זו שפתוחה. */
.logs-bar{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-block-end:var(--s3)}
.fn-live{gap:6px; line-height:1; padding:5px 10px; border:1px solid var(--border); border-radius:999px; font-size:var(--fs-xs)}
.fn-live:hover{color:var(--ink); border-color:var(--border-strong)}
/* מצב פעיל: צבע ההדגשה + סיבוב איטי ורציף של האייקון, כדי שיהיה ברור במבט
שהמסך מתעדכן מעצמו ואין צורך ללחוץ. */
.fn-live.is-live{color:var(--accent); border-color:var(--accent)}
.fn-live.is-live .ic{animation:fn-live-spin 2.2s linear infinite}
@keyframes fn-live-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.fn-live.is-live .ic{animation:none}}
.logs{background:none; border:none; box-shadow:none; overflow:visible; display:flex; flex-direction:column; gap:var(--s2)}
.log-entry{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden}
.log-entry.is-err{border-color:color-mix(in srgb, var(--stop) 45%, var(--border))}
.log-head{display:flex; align-items:center; gap:var(--s3); padding:9px var(--s4); flex-wrap:wrap}
.log-head .log-time{font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted); white-space:nowrap}
.log-meta{font-family:var(--mono); font-size:var(--fs-xs); color:var(--faint); white-space:nowrap; margin-inline-start:auto}
.log-out{border-block-start:1px solid var(--border); background:var(--surface-2); position:relative}
.log-out.is-err{background:var(--stop-soft)}
.log-out-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s2); padding:5px var(--s4) 0}
.log-out-label{
font-family:var(--mono); font-size:var(--fs-2xs); color:var(--faint);
text-transform:uppercase; letter-spacing:var(--tracking-caps);
}
.log-out.is-err .log-out-label{color:var(--stop)}
.log-pre{
margin:0; padding:4px var(--s4) var(--s3); font-family:var(--mono);
font-size:var(--fs-xs); line-height:1.65; color:var(--ink);
white-space:pre-wrap; word-break:break-word; overflow-x:auto;
/* isolate ולא bidi-override: מבנה ה-JSON נשאר LTR, אבל ערך בעברית בתוך
מחרוזת עדיין נקרא נכון בתוך עצמו. ההזחה כבר מפרידה כל ערך לשורה משלו. */
unicode-bidi:isolate;
}
/* קיצוץ: מציגים LOG_CLAMP_LINES שורות, והשאר נפתח בלחיצה. ההחלטה נעשית לפי מספר
השורות בטקסט ולא לפי מדידת DOM - דטרמיניסטי, ולא תלוי בכך שהאלמנט כבר בעמוד. */
.log-out.is-clamped .log-pre{max-block-size:calc(8 * 1.65em); overflow:hidden}
.log-out.is-clamped:not(.is-open) .log-pre{
-webkit-mask-image:linear-gradient(to bottom, #000 70%, transparent);
mask-image:linear-gradient(to bottom, #000 70%, transparent);
}
.log-out.is-clamped.is-open .log-pre{max-block-size:none; -webkit-mask-image:none; mask-image:none}
.log-more{
display:block; inline-size:100%; text-align:start;
background:none; border:none; border-block-start:1px solid var(--border);
padding:8px var(--s4); cursor:pointer;
font-family:inherit; font-size:var(--fs-xs); font-weight:600; color:var(--accent-ink);
}
.log-more:hover{background:var(--surface-3)}
/* =====================================================================
SKELETONS — מחליפים את ספינר הטעינה
הספינר לא אומר דבר על מה שעומד להופיע, והמעבר ממנו לתוכן נקרא כקפיצה. שלד
בצורת התוכן שנטען מקצר את *תחושת* ההמתנה. prefers-reduced-motion כבר מבטל את
האנימציה גלובלית בקובץ הזה, כך שהשלד נשאר סטטי למי שביקש זאת.
===================================================================== */
.skel{
background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
background-size:400% 100%;
animation:skel 1.4s ease infinite;
border-radius:5px;
}
@keyframes skel{ from{background-position:100% 0} to{background-position:0 0} }
.skel-wrap{pointer-events:none}
.skel-rows{display:flex; flex-direction:column; gap:var(--s3); padding:var(--s4)}
.skel-row{display:flex; align-items:center; gap:var(--s4)}
.skel-wrap.metric-row .metric{display:flex; flex-direction:column; gap:var(--s2)}
/* ערך תא מלא (נפתח בלחיצה על תא חתוך) */
.cell-value{max-block-size:52vh; overflow:auto; white-space:pre-wrap; word-break:break-word}
td.is-clipped{cursor:pointer}
/* רמז שיש עוד תוכן: פס דק בתחתית התא, רק ב-hover. חשוב שלא יהיה קבוע - סימון
קבוע על עשרות תאים הופך את הטבלה לרועשת. */
td.is-clipped:hover{box-shadow:inset 0 -1px 0 var(--accent)}
/* =====================================================================
CALENDAR — בורר טווח תאריכים
החליף שני שדות datetime-local. הם עבדו, אבל הבורר שנפתח מהם שייך למערכת
ההפעלה: צבעים, פונט ורדיוסים משלו, ומראה שונה בין כרום ל-Safari ל-Firefox.
הרכיב כאן בנוי כולו מהטוקנים של הקונסולה - ולכן זהה בכל דפדפן, ומגיב ל-accent
ול-dark mode כמו כל שאר הממשק.
===================================================================== */
.cal-times{display:flex; align-items:center; gap:var(--s2); margin-block-end:var(--s3)}
.cal-times input{
flex:1; min-inline-size:0; font-family:var(--mono); font-size:var(--fs-sm);
font-variant-numeric:tabular-nums; text-align:center; letter-spacing:.04em;
padding:9px 10px; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
background:var(--surface); color:var(--ink); transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.cal-times input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
/* האייקון הנייטיב של שדה time הוא אפור-מערכת וצורם על רקע כהה. ב-dark mode
הופכים אותו כדי שיישב עם צבע הטקסט במקום לצוף מעליו. */
/* אותו כלל כמו הפלטה: כהה כברירת מחדל, ולא לפי מערכת ההפעלה */
:root:not([data-theme="light"]) .cal-times input::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.55)}
:root[data-theme="dark"] .cal-times input::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.55)}
:root[data-theme="light"] .cal-times input::-webkit-calendar-picker-indicator{filter:none}
.cal{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:var(--s3)}
.cal-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s2); margin-block-end:var(--s3)}
.cal-title{font-size:var(--fs-md); font-weight:600; letter-spacing:var(--tracking-tight)}
.cal-nav{
background:none; border:none; border-radius:8px; color:var(--muted); cursor:pointer;
padding:6px; display:inline-flex; transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cal-nav:hover{background:var(--surface-3); color:var(--ink)}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.cal-dow{
font-size:var(--fs-2xs); font-weight:600; color:var(--faint); text-align:center;
text-transform:uppercase; letter-spacing:var(--tracking-caps); padding-block:0 6px;
}
.cal-day{
aspect-ratio:1; min-block-size:32px; display:grid; place-items:center;
border:none; background:none; border-radius:8px; cursor:pointer;
font-family:inherit; font-size:var(--fs-sm); color:var(--ink);
font-variant-numeric:tabular-nums;
transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cal-day:hover{background:var(--surface-3)}
/* ימים מהחודש הסמוך נשארים לחיצים - בחירת טווח שחוצה חודש היא מקרה נפוץ */
.cal-day.is-out{color:var(--faint); opacity:.5}
.cal-day.is-today{box-shadow:inset 0 0 0 1px var(--border-strong)}
/* הטווח: הקצוות מלאים ב-accent, מה שביניהם בגוון החלש שלו. הרדיוס נפתח רק כלפי
פנים הטווח, כך שהרצף נקרא כרצועה אחת ולא כשרשרת עיגולים. */
.cal-day.in-range{background:var(--accent-soft); border-radius:0}
.cal-day.in-range:hover{background:color-mix(in srgb, var(--accent) 22%, transparent)}
.cal-day.is-edge{background:var(--accent); color:var(--accent-contrast); font-weight:600; box-shadow:none}
.cal-day.is-edge:hover{background:var(--accent-ink)}
.cal-day.is-start:not(.is-end){border-start-end-radius:0; border-end-end-radius:0}
.cal-day.is-end:not(.is-start){border-start-start-radius:0; border-end-start-radius:0}
.date-filter-btns{display:flex; gap:var(--s2)}
/* max-width:540px של המודל הכללי משאיר ללוח ~320px, כלומר תאים של 44px שנראים
דחוסים. הרחבה נקודתית רק למודל שמכיל בורר תאריכים. */
.modal:has(.date-filter){max-width:660px}
/* במסך צר הלוח מקבל את כל הרוחב, והקיצורים עוברים מעליו */
@media (max-width:520px){
.cal-day{min-block-size:36px}
.date-filter-actions{flex-direction:column; align-items:stretch}
.date-filter-btns{inline-size:100%}
.date-filter-btns .btn{flex:1; justify-content:center}
}
/* toast: האייקון נושא את הסטטוס, ולכן הפס הצבעוני בצד כבר לא לבד */
.toast{display:flex; align-items:center; gap:var(--s3)}
.toast-ic{color:var(--muted)}
.toast.ok .toast-ic{color:var(--ok)}
.toast.err .toast-ic{color:var(--stop)}
/* מצב ריק: האייקון מעל הטקסט, לא לצידו. place-items של הבסיס עבד על grid,
ובגריד flex-direction מתעלמים ממנו - לכן המעבר ל-flex כאן מפורש. */
.empty-state{display:flex; flex-direction:column; align-items:center; justify-content:center}
/* =====================================================================
POLISH — פוקוס, גובה (elevation) ו-hover
===================================================================== */
/* עד עכשיו הייתה טבעת פוקוס לשדות בלבד. ניווט במקלדת בכפתורים, בפריטי התפריט
ובלשוניות לא סימן כלום - זה גם כשל נגישות וגם פשוט מבלבל. */
:where(a,button,[tabindex],summary):focus-visible{
outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm);
}
:where(a,button,[tabindex]):focus:not(:focus-visible){outline:none}
/* גובה: משטח שיושב בדף מקבל גבול בלבד. צל שמור למה שבאמת מרחף מעל התוכן
(מודל, toast, מגירה). קודם כל כרטיס קיבל את שניהם, וזה מה שנתן תחושת "בועות". */
.card,.metric,.list-pane,.table-wrap,.logs,.chart,.code-files,.project-card{
box-shadow:none;
}
.card:hover,.project-card:hover{box-shadow:var(--shadow-sm)}
/* hover של שורת טבלה חזר ל-surface-2: גוון ה-accent על כל שורה שהעכבר חולף מעליה
היה רועש מדי ברשימה ארוכה, ובלבל עם השורה הנבחרת בפועל. */
table.grid tr:hover td{background:var(--surface-2)}
/* overflow-x:hidden על html/body הוסר. הוא לא פתר גלישה - הוא רק הסתיר אותה,
ובחלק מהדפדפנים הוא גם שובר position:sticky של כותרות הטבלה (דפדפן מתעלם מ-sticky
כשלאב-קדמון יש overflow שאינו visible). הסיבה האמיתית כבר טופלה במקור: min-inline-size:0
על פריטי ה-grid, שמאפשר לטבלה לגלול בתוך .table-scroll במקום לדחוף את הדף. */
/* רשימת השורות שנכשלו בייבוא CSV. unicode-bidi:plaintext כי כל פריט מתחיל במילה
אנגלית ("Line 42:") ואחריה הודעת שגיאה שעשויה להיות בעברית - בלעדיו הסדר מתהפך. */
.import-errors {
margin-block: 0.4rem 0;
padding-inline-start: 1.1rem;
max-block-size: 9rem;
overflow-y: auto;
font-size: 0.85em;
line-height: 1.5;
}
.import-errors li {
unicode-bidi: plaintext;
margin-block-end: 0.15rem;
}
/* שורות "מה ייכנס / מה יתעלם" במודאל ייבוא ה-CSV. האייקון בשורה נפרדת מהטקסט
(align-items:flex-start) כי רשימת שמות ארוכה נשברת לכמה שורות, ומרכוז אנכי
היה מזיז אותו לאמצע הגוש. */
.import-line {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0;
font-size: 13px;
line-height: 1.55;
overflow-wrap: anywhere; /* שם עמודה ארוך לא ידחוף את המודאל לרוחב */
}
.import-line .ic { flex: none; margin-block-start: 2px }
.import-line.ok .ic { color: var(--ok) }
.import-line.warn { color: var(--muted) }
.import-line.warn .ic { color: var(--warn) }
/* שורת ההצעה להתאמה חסרת-רישיות: label עם תיבת סימון, שצריכה להיראות כשאלה
שממתינה לתשובה - ולכן משטח משלה. במכוון אינה משתמשת ב-.field.inline: הכלל
.field input מלביש על כל שדה גבול, ריפוד ורוחב מלא, וזה שגוי לתיבת סימון. */
.import-line.ask {
padding: 9px 11px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: var(--surface-2);
cursor: pointer;
}
.import-line.ask input {
inline-size: auto;
flex: none;
margin-block-start: 3px;
accent-color: var(--accent);
}
/* רשימת העמודות שיימחקו, במודאל אישור מחיקת עמודה */
.drop-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.drop-list code {
display: inline-block;
padding: 3px 8px;
border-radius: var(--radius-sm);
background: var(--stop-soft);
color: var(--stop);
}
/* קבצים שנכשלו בהעלאה. נשארים על המסך אחרי שרשימת ההעלאה נבנית מחדש, כי אחרת
סיבת הכישלון מהבהבת ונעלמת (ראו uploadFiles). */
.upload-failed {
margin: 10px 14px;
border: 1px solid var(--stop);
border-radius: var(--radius-sm);
background: var(--stop-soft);
}
.upload-failed-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 12px 4px;
font-size: 13px;
}
.upload-failed-title { display: flex; align-items: center; gap: 6px; color: var(--stop) }
.upload-failed-title .ic { flex: none }
.upload-failed .upload-queue { padding-block-end: 8px }
.upload-failed .upload-queue li { align-items: flex-start }
.upload-failed .upload-status { white-space: normal; text-align: end }
|