/* JBIX v4 look (approved by Lior 2026-11-10). Source: STUDIO/design/v4 (home.css). Loaded after the tool's own CSS. */
/* JBIX v4 "quiet luxury" - shared look for every JBIX tool.
   Edit the source files in STUDIO/design/v4, then rebuild this copy.
   Rules: matte surfaces, 1px hairlines, no glow, no gradients on controls, one accent (gold) used sparingly,
   small caps only for tiny labels, sentence case for messages and dialogs. */
:root{
  --x-bg:#0b0b0c; --x-s1:#111113; --x-s2:#151517; --x-s3:#1b1b1e; --x-s4:#222226;
  --x-hair:#ffffff12; --x-hair2:#ffffff1f; --x-hair3:#ffffff30;
  --x-text:#ecebe8; --x-text2:#a3a19c; --x-text3:#6c6a66;
  --x-gold:#ffbb66; --x-gold-ink:#1a1206; --x-gold-soft:#ffbb6614; --x-gold-line:#ffbb6647;
  --x-red:#e5574f;
  --x-r1:6px; --x-r2:10px; --x-r3:14px;
  --x-font:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  /* the tools' own tokens, retuned */
  --bg:var(--x-bg); --text:var(--x-text); --dim:var(--x-text2); --faint:var(--x-text3);
  --line:var(--x-hair); --line-hi:var(--x-hair2); --sans:var(--x-font);
}
html,body{background:var(--x-bg) !important}
body{font-family:var(--x-font) !important;-webkit-font-smoothing:antialiased}
*{text-shadow:none !important}
.screw{display:none !important}

/* the window: no floating device frame, a calm page */
.chassis{background:transparent !important;border:0 !important;box-shadow:none !important;border-radius:0 !important}
.chassis::before,.chassis::after{display:none !important}
.top{border-bottom:1px solid var(--x-hair) !important;padding-bottom:16px !important}

/* small labels: the only place for capitals with spacing */
.lbl,.lcd-label,.out-head .lbl,.rack-head>span,.sw-title,.zoom .lbl{
  font:600 10px/1 var(--x-font) !important;letter-spacing:.16em !important;color:var(--x-text3) !important;text-transform:uppercase}

/* numbers: clean figures in a quiet well, no green screen */
.lcd:not(.knobs *),.time,.sel-lcd,.vdb,.peak{
  background:var(--x-s1) !important;border:1px solid var(--x-hair) !important;border-radius:var(--x-r1) !important;box-shadow:none !important;
  color:var(--x-text) !important;font-family:var(--x-font) !important;font-variant-numeric:tabular-nums;letter-spacing:.02em !important}
.lcd:not(.knobs *) *,.time *{font-family:inherit !important;color:inherit;text-shadow:none !important}
.time i{color:var(--x-text3) !important}

/* buttons: one shape, one height family, matte */
.btn,.ibtn,.tbtn,.tool,.vbtn,.cbtn,.t3,.bridge,.ms,.msclr,.ab-btn,.rec-btn,.rec-cancel,.solo-x,.mon-tab-x,.fmt button,.seg button{
  background:var(--x-s3) !important;border:1px solid var(--x-hair2) !important;border-radius:var(--x-r1) !important;box-shadow:none !important;
  color:var(--x-text) !important;font-family:var(--x-font) !important;font-weight:600 !important;letter-spacing:.08em !important;
  transition:background .15s,border-color .15s,color .15s !important;filter:none !important}
.btn:hover:not(:disabled),.ibtn:hover,.tbtn:hover,.tool:hover:not(:disabled),.vbtn:hover,.cbtn:hover,.t3:hover,.bridge:hover,.ms:hover,.msclr:hover,.ab-btn:hover,.rec-btn:hover{
  background:var(--x-s4) !important;border-color:var(--x-hair3) !important;transform:none !important}
.btn:disabled,.tool:disabled{opacity:.32 !important}
.btn svg,.ibtn svg,.tbtn svg,.tool svg,.vbtn svg,.cbtn svg,.t3 svg,.bridge svg{color:var(--x-text) !important;filter:none !important}
.ibtn svg,.vbtn svg,.cbtn svg{stroke:currentColor !important}
/* ghost = text button, no box until hover */
.btn.ghost{background:transparent !important;border-color:var(--x-hair2) !important;color:var(--x-text2) !important}
.btn.ghost:hover{color:var(--x-text) !important}

/* ON state: a gold mark, not a glow */
.on.tool,.tool.tog.on,.vbtn.on,.t3.on,.bridge.on,.ab-btn.on,.tbtn.tog.on,.ms.on,.fmt button.on,.seg button.on,#gridBtn.on,#fitTracks.on{
  background:var(--x-gold-soft) !important;border-color:var(--x-gold-line) !important;color:var(--x-gold) !important}
.on.tool svg,.tool.tog.on svg,.vbtn.on svg,.t3.on svg,.bridge.on svg,.tbtn.tog.on svg{color:var(--x-gold) !important;stroke:var(--x-gold) !important}
.tool.tog.on span,.t3.on span{color:var(--x-gold) !important}

/* the one primary action per screen: flat gold */
.btn.export,#expSave{background:var(--x-gold) !important;border-color:var(--x-gold) !important;color:var(--x-gold-ink) !important;
  box-shadow:none !important;letter-spacing:.22em !important;font-weight:700 !important}
.btn.export:disabled,#expSave:disabled{opacity:1 !important;background:var(--x-s3) !important;border-color:var(--x-hair2) !important;color:var(--x-text3) !important}
.btn.export svg,#expSave svg{color:currentColor !important;stroke:currentColor !important}
/* play: flat gold disc */
#playBtn{background:var(--x-gold) !important;border-color:var(--x-gold) !important;border-radius:50% !important}
#playBtn svg{color:var(--x-gold-ink) !important;fill:var(--x-gold-ink) !important;stroke:none !important}
/* record: the only red */
.rec-btn i,.ms.rarm i{background:var(--x-red) !important;box-shadow:none !important}

/* inputs and the select box */
select,input[type=text],input:not([type]),.modal-card input{
  background:var(--x-s1) !important;border:1px solid var(--x-hair2) !important;border-radius:var(--x-r1) !important;color:var(--x-text) !important;
  font:500 12.5px var(--x-font) !important;box-shadow:none !important;outline:none}
select:focus,input:focus{border-color:var(--x-gold-line) !important}

/* sliders: one cap everywhere - a slim ivory blade on a graphite body */
.fader-cap{background:#2a2a2e !important;border:1px solid #3a3a40 !important;border-radius:3px !important;box-shadow:0 1px 3px #0009 !important}
.fader-cap::after{background:var(--x-text) !important;box-shadow:none !important;height:1px !important}
.fader{background:transparent !important}
.fader::before{background:var(--x-hair2) !important;box-shadow:none !important;width:2px !important}
input[type=range]::-webkit-slider-runnable-track{background:var(--x-hair2) !important;height:2px !important;border-radius:1px !important;box-shadow:none !important}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px !important;height:16px !important;margin-top:-7px !important;border-radius:3px !important;
  background:#2a2a2e !important;border:1px solid #4a4a50 !important;box-shadow:0 1px 3px #0009 !important}

/* ---------- messages ---------- */
.toasts{z-index:98 !important}
.toast{background:#1d1d20f5 !important;border:1px solid var(--x-hair2) !important;border-radius:var(--x-r2) !important;
  box-shadow:0 18px 40px #000b !important;color:var(--x-text) !important;font:500 13px/1.45 var(--x-font) !important;letter-spacing:0 !important;
  padding:11px 16px 11px 14px !important;display:flex !important;align-items:center;gap:12px}
.toast::before,.toast>i{content:"";flex:none;width:18px !important;height:18px !important;border-radius:0 !important;box-shadow:none !important;
  background:var(--x-text2) !important;-webkit-mask:var(--x-ic-info) center/contain no-repeat;mask:var(--x-ic-info) center/contain no-repeat}
.toast>i+*{margin:0}
.toast:has(>i)::before{display:none}
.toast.ok::before,.toast.ok>i{background:var(--x-gold) !important;-webkit-mask-image:var(--x-ic-ok);mask-image:var(--x-ic-ok)}
.toast.warn::before,.toast.warn>i{background:var(--x-red) !important;-webkit-mask-image:var(--x-ic-warn);mask-image:var(--x-ic-warn)}
.toast code{color:var(--x-text3) !important;font:12px var(--x-font) !important}
.toast button{background:transparent !important;border:0 !important;color:var(--x-gold) !important;font:600 12px var(--x-font) !important;letter-spacing:.04em !important;padding:0 0 0 8px !important}
:root{
  --x-ic-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6v.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --x-ic-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.3l2.7 2.7L16.2 9.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --x-ic-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M12 3.8l9 15.7H3z' stroke-linejoin='round'/%3E%3Cpath d='M12 10v4.5M12 17.2v.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- dialogs ---------- */
.modal,.help.ask,.x-dim{background:#0007 !important}
.modal-card,.ask .card,.x-dialog{background:var(--x-s2) !important;border:1px solid var(--x-hair2) !important;border-radius:var(--x-r3) !important;
  box-shadow:0 40px 90px #000c !important;color:var(--x-text) !important;font-family:var(--x-font) !important}

/* ---------- menus (custom drop-down, shown in the preview) ---------- */
.x-menu{position:fixed;z-index:95;min-width:220px;padding:6px;background:#1d1d20;border:1px solid var(--x-hair2);border-radius:var(--x-r2);
  box-shadow:0 24px 60px #000c;font:500 13px var(--x-font);color:var(--x-text);direction:ltr}
.x-menu .x-h{font:600 10px var(--x-font);letter-spacing:.16em;color:var(--x-text3);padding:9px 10px 6px;text-transform:uppercase}
.x-menu .x-i{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-radius:6px;color:var(--x-text2)}
.x-menu .x-i svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.x-menu .x-i.hov{background:#ffffff0b;color:var(--x-text)}
.x-menu .x-i.sel{color:var(--x-text)}
.x-menu .x-i.sel .x-ck{color:var(--x-gold)}
.x-menu .x-i .x-ck{margin-left:auto;width:14px;height:14px}
.x-menu .x-i kbd{margin-left:auto;font:500 11px var(--x-font);color:var(--x-text3)}
.x-menu .x-sep{height:1px;background:var(--x-hair);margin:6px 4px}
.x-menu .x-i.danger{color:#f0948e}
/* the select box that opened it */
.x-open{border-color:var(--x-gold-line) !important}

/* ---------- dialog content (preview) ---------- */
.x-dialog{position:fixed;z-index:96;left:50%;top:50%;transform:translate(-50%,-50%);width:420px;padding:26px 26px 20px;direction:ltr}
.x-dialog h3{margin:0 0 6px;font:600 17px/1.3 var(--x-font);letter-spacing:0;color:var(--x-text)}
.x-dialog p{margin:0 0 18px;font:400 13.5px/1.55 var(--x-font);color:var(--x-text2)}
.x-dialog .x-ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--x-hair2);margin-bottom:16px;color:var(--x-gold)}
.x-dialog .x-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.x-dialog label{display:block;font:600 10px var(--x-font);letter-spacing:.16em;color:var(--x-text3);margin:0 0 7px;text-transform:uppercase}
.x-dialog input{width:100%;box-sizing:border-box;height:38px;padding:0 12px}
.x-dialog .x-row{display:flex;justify-content:flex-end;gap:8px;margin-top:22px;padding-top:16px;border-top:1px solid var(--x-hair)}
.x-b{height:34px;padding:0 18px;border-radius:var(--x-r1);border:1px solid var(--x-hair2);background:var(--x-s3);color:var(--x-text);font:600 12.5px var(--x-font);letter-spacing:.02em}
.x-b.pri{background:var(--x-gold);border-color:var(--x-gold);color:var(--x-gold-ink)}
.x-b.quiet{background:transparent;border-color:transparent;color:var(--x-text2)}
.x-b.danger{background:transparent;border-color:#e5574f66;color:#f0948e}
/* tooltip */
.x-tip{position:fixed;z-index:97;background:#ecebe8;color:#121214;font:500 12px var(--x-font);padding:6px 10px;border-radius:6px;box-shadow:0 8px 24px #0008;direction:ltr;white-space:nowrap}
.x-tip kbd{font:600 11px var(--x-font);color:#6c6a66;margin-left:8px}
/* small caption telling Lior this element is a preview mock */
.x-note{position:fixed;z-index:99;left:16px;top:12px;font:600 10px var(--x-font);letter-spacing:.16em;color:var(--x-text3);direction:ltr}

/* the light sweep on the J: same speed as before, but only about 1 second of rest between two sweeps (Lior, 2026-11-10).
   The sweep now starts as it enters the J and ends as it leaves it, so no time is spent outside the letter. */
.jbix-wrap::after{animation:jbixSheen2 2.6s ease-in-out infinite !important}
@keyframes jbixSheen2{0%,28%{background-position:100% 0}100%{background-position:0% 0}}
.jbx-sheen{animation:jbxSheen2 3.7s ease-in-out infinite !important}
@keyframes jbxSheen2{0%,27%{transform:translateX(-187px) skewX(-18deg)}100%{transform:translateX(207px) skewX(-18deg)}}
/* the sheen always runs, also on computers set to fewer animations (Lior, 2026-11-10) */

/* JBIX v4 on the STUDIO home page (preview only). */
body{background:var(--x-bg) !important}
.chassis{width:min(1180px,100%) !important;padding:28px 8px 22px !important}
.top{border-bottom:1px solid var(--x-hair) !important;padding:0 6px 26px !important}
.jbix-sub{font:600 10px var(--x-font) !important;letter-spacing:.42em !important;color:var(--x-text3) !important}
.ghost{height:32px !important;border-radius:var(--x-r1) !important;background:transparent !important;border:1px solid var(--x-hair2) !important;
  color:var(--x-text2) !important;font:600 10.5px var(--x-font) !important;letter-spacing:.14em !important}
.ghost:hover{color:var(--x-text) !important;border-color:var(--x-hair3) !important}
.title{margin:44px 0 34px !important}
.title h1{font:300 34px/1.2 var(--x-font) !important;letter-spacing:.01em !important;color:var(--x-text) !important}
.title p{color:var(--x-text3) !important;font-size:14px !important;margin-top:10px !important}
.grid{gap:20px !important}
.card{background:var(--x-s2) !important;border:1px solid var(--x-hair) !important;border-radius:var(--x-r3) !important;box-shadow:none !important;transition:border-color .2s,transform .2s !important}
.card:hover,.card.x-hover{transform:translateY(-2px) !important;border-color:var(--x-hair3) !important;box-shadow:0 24px 50px #0009 !important}
.shot{background:var(--x-s1) !important;border-bottom:1px solid var(--x-hair) !important;padding:14px !important}
.shot img{filter:none !important;border-radius:6px !important}
.meta{padding:16px 18px 18px !important;gap:12px !important}
.meta .nm{font:600 15px var(--x-font) !important;letter-spacing:.32em !important;color:var(--x-text) !important}
.meta .tg{font:600 9.5px var(--x-font) !important;letter-spacing:.2em !important;color:var(--x-text3) !important;margin-top:5px !important}
.meta .go{background:transparent !important;border:0 !important;padding:0 !important;color:var(--x-text2) !important;font:600 10.5px var(--x-font) !important;letter-spacing:.16em !important}
.card:hover .go,.card.x-hover .go{color:var(--x-gold) !important}
.led{width:6px !important;height:6px !important;background:var(--x-hair3) !important;box-shadow:none !important}
.led.on{background:var(--x-gold) !important;box-shadow:none !important}
.badge{background:transparent !important;border:1px solid var(--x-hair2) !important;color:var(--x-text2) !important;font:600 9.5px var(--x-font) !important;letter-spacing:.2em !important;border-radius:4px !important}
.soon-art path{stroke:var(--x-gold) !important}
.soon-art svg{opacity:.55 !important}
.foot{border-top:1px solid var(--x-hair) !important;font:600 9.5px var(--x-font) !important;letter-spacing:.2em !important;color:var(--x-text3) !important;margin-top:28px !important}
.toasts{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px}
/* login page */
.chassis.login{width:min(400px,100%) !important;padding:34px 0 28px !important}
.login input{background:var(--x-s1) !important;border:1px solid var(--x-hair2) !important;border-radius:var(--x-r1) !important;box-shadow:none !important;
  color:var(--x-text) !important;font:500 15px var(--x-font) !important;letter-spacing:.12em !important}
.login input:focus{border-color:var(--x-gold-line) !important}
.login button{background:var(--x-gold) !important;border:1px solid var(--x-gold) !important;border-radius:var(--x-r1) !important;color:var(--x-gold-ink) !important;
  font:700 12px var(--x-font) !important;letter-spacing:.24em !important}
.err{color:#f0948e !important}
/* logo with the dot between J and BIX (Lior, option 53): the J is 9% smaller and a little lower, so the sheen follows it */
.jbix-wrap::after{top:5.71% !important;width:22.65% !important;height:57.29% !important}
/* who is logged in, next to LOG OUT */
.top-right{gap:10px !important}
.who{font:600 10.5px var(--x-font);letter-spacing:.16em;color:var(--x-text3);margin-right:6px}