.roll-studio-page { --roll-violet:#8c73ff;--roll-cyan:#50d9c0;--roll-gold:#f3b45f;display:grid;gap:1rem;max-width:1800px;margin:0 auto;padding-bottom:4rem; }
.roll-studio-hero { isolation:isolate;position:relative;display:flex;align-items:center;justify-content:space-between;min-height:220px;overflow:hidden;padding:2.25rem 2.5rem;border:1px solid rgba(140,115,255,.24);border-radius:1.5rem;background:radial-gradient(circle at 10% 120%,rgba(80,217,192,.14),transparent 34%),radial-gradient(circle at 78% -15%,rgba(140,115,255,.25),transparent 36%),linear-gradient(135deg,rgba(20,28,49,.99),rgba(7,12,24,.99));box-shadow:0 30px 80px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.04); }
.roll-studio-hero::before { content:"";position:absolute;inset:0;z-index:-1;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:31px 31px;mask-image:linear-gradient(90deg,#000,transparent 80%); }
.roll-hero-copy { position:relative;z-index:1;max-width:690px; }.roll-kicker { display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem;color:#ad9fff;font-size:.68rem;font-weight:900;letter-spacing:.2em; }.roll-kicker span { width:24px;height:1px;background:linear-gradient(90deg,var(--roll-cyan),var(--roll-violet));box-shadow:0 0 12px var(--roll-cyan); }
.roll-hero-copy h1 { margin:0;color:#f7f8fd;font-size:clamp(2.2rem,4vw,3.55rem);font-weight:900;letter-spacing:-.065em;line-height:1; }.roll-hero-copy p { max-width:650px;margin:.9rem 0 0;color:#a7b3c6;font-size:1rem;line-height:1.65; }
.roll-hero-status { display:flex;align-items:center;gap:.5rem;margin-top:1.15rem;color:#748298;font-size:.67rem;font-weight:800;text-transform:uppercase; }.roll-hero-status>span { width:7px;height:7px;border-radius:50%;background:var(--roll-cyan);box-shadow:0 0 0 5px rgba(80,217,192,.08),0 0 14px rgba(80,217,192,.6); }
.roll-hero-stats { position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(125px,1fr));gap:.65rem;margin-right:7.5rem; }.roll-hero-stats>div { min-width:125px;padding:.85rem 1rem;border:1px solid rgba(148,163,184,.12);border-radius:.9rem;background:rgba(4,10,21,.45);backdrop-filter:blur(12px); }
.roll-hero-stats span,.roll-hero-stats strong,.roll-hero-stats small { display:block; }.roll-hero-stats span { color:#68768c;font-size:.55rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase; }.roll-hero-stats strong { margin-top:.25rem;color:#f1f4f9;font-size:1.25rem;font-weight:900;line-height:1; }.roll-hero-stats small { margin-top:.3rem;color:#66748a;font-size:.55rem; }.roll-hero-stats strong.good { color:#5bd9c1; }.roll-hero-stats strong.warn { color:#f1ae67; }
.roll-hero-dice { position:absolute;right:-30px;bottom:-45px;display:grid;place-items:center;width:190px;height:190px;border:1px solid rgba(140,115,255,.19);border-radius:42px;color:rgba(184,171,255,.28);font-size:3rem;transform:rotate(18deg);box-shadow:inset 0 0 55px rgba(140,115,255,.04); }.roll-hero-dice i { position:absolute;width:72px;height:72px;border:1px solid rgba(80,217,192,.14);border-radius:18px;transform:rotate(28deg); }
.roll-studio-toolbar { position:sticky!important;top:.75rem;z-index:12;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:78px;padding:.75rem 1rem!important;overflow:hidden;backdrop-filter:blur(20px)!important;background:linear-gradient(135deg,rgba(13,21,38,.95),rgba(8,14,27,.96))!important; }.roll-studio-toolbar:hover { transform:none!important; }
.roll-toolbar-fields,.roll-toolbar-actions { display:flex;align-items:center;gap:.55rem; }.roll-type-select { width:245px; }.roll-pity-field { width:145px; }.roll-toolbar-sync { display:flex;align-items:center;gap:.55rem;margin-left:.35rem; }.roll-toolbar-sync>span { width:8px;height:8px;border-radius:50%;background:#50d9c0;box-shadow:0 0 9px rgba(80,217,192,.55); }.roll-toolbar-sync>span.dirty { background:#f3b45f;box-shadow:0 0 9px rgba(243,180,95,.5); }.roll-toolbar-sync>div { display:grid; }.roll-toolbar-sync strong { color:#cdd5e2;font-size:.66rem; }.roll-toolbar-sync small { color:#66758b;font-size:.55rem; }.roll-toolbar-progress { position:absolute;right:0;bottom:0;left:0; }
.roll-mode-switch { display:flex;padding:3px;border:1px solid rgba(148,163,184,.12);border-radius:.72rem;background:rgba(2,7,16,.4); }.roll-mode-switch button { display:flex;align-items:center;gap:.3rem;padding:.42rem .62rem;border:0;border-radius:.5rem;color:#68778d;background:transparent;font-size:.59rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;transition:.16s ease; }.roll-mode-switch button .mud-icon-root { font-size:.9rem; }.roll-mode-switch button.active { color:#66d9c3;background:rgba(80,217,192,.1);box-shadow:inset 0 0 0 1px rgba(80,217,192,.13); }.roll-mode-switch button.active.debug { color:#f0b069;background:rgba(243,180,95,.1);box-shadow:inset 0 0 0 1px rgba(243,180,95,.14); }
.roll-review-menu { width:min(660px,80vw);max-height:65vh;overflow-y:auto;background:linear-gradient(155deg,#111b30,#080f1d)!important; }.roll-review-heading { display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.65rem;border-bottom:1px solid rgba(148,163,184,.09); }.roll-review-heading>div { display:grid; }.roll-review-heading span { color:#8b79ef;font-size:.55rem;font-weight:900;letter-spacing:.14em; }.roll-review-heading strong { color:#e7ebf2;font-size:.85rem; }.roll-review-heading em { color:#7b899d;font-size:.62rem;font-style:normal; }.roll-review-line { display:grid;grid-template-columns:58px 1fr;gap:.65rem;margin-top:.45rem;padding:.6rem;border:1px solid rgba(148,163,184,.08);border-radius:.65rem;background:rgba(3,8,18,.25); }.roll-review-line>span { align-self:start;padding:.2rem .3rem;border-radius:.35rem;color:#8fa0b7;background:rgba(148,163,184,.07);font-size:.51rem;font-weight:900;text-align:center;text-transform:uppercase; }.roll-review-line.added>span { color:#65d9c2;background:rgba(80,217,192,.08); }.roll-review-line.deleted>span { color:#f48891;background:rgba(244,136,145,.08); }.roll-review-line>div { display:grid; }.roll-review-line strong { color:#cbd4e1;font-size:.65rem; }.roll-review-line small { margin-top:.18rem;color:#6d7b90;font-size:.56rem;line-height:1.45; }.roll-review-empty { padding:2rem;color:#68768a;text-align:center; }
.roll-studio-workspace { display:grid;grid-template-columns:minmax(255px,290px) minmax(520px,1fr) minmax(320px,370px);gap:1rem;align-items:start; }.roll-entry-library,.roll-entry-designer,.roll-distribution,.roll-simulation { overflow:hidden;padding:1rem!important;background:linear-gradient(160deg,rgba(15,23,41,.97),rgba(7,13,25,.98))!important; }.roll-entry-library:hover,.roll-entry-designer:hover,.roll-distribution:hover,.roll-simulation:hover { transform:none!important; }
.roll-panel-heading { display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem; }.roll-panel-heading>div>span { display:block;margin-bottom:.24rem;color:#8271e2;font-size:.57rem;font-weight:900;letter-spacing:.15em; }.roll-panel-heading h2 { margin:0;color:#edf1f7;font-size:1.1rem;font-weight:850;letter-spacing:-.035em; }.roll-icon-action { display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(140,115,255,.2);border-radius:.6rem;color:#b5a8ff;background:rgba(140,115,255,.08); }.roll-icon-action:hover { background:rgba(140,115,255,.15); }.roll-icon-action .mud-icon-root { font-size:1.05rem; }
.roll-entry-library { position:sticky!important;top:6.5rem;height:calc(100vh - 8.3rem); }.roll-library-summary { display:flex;align-items:center;gap:.45rem;margin:-.35rem 0 .75rem;color:#68768b;font-size:.56rem;font-weight:750;text-transform:uppercase; }.roll-library-summary i { width:3px;height:3px;border-radius:50%;background:#49566b; }.roll-entry-list { display:flex;flex-direction:column;gap:.38rem;height:calc(100% - 70px);overflow-y:auto;padding-right:.2rem; }
.roll-entry-card { position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto 7px;align-items:center;gap:.55rem;width:100%;padding:.7rem;border:1px solid transparent;border-radius:.8rem;color:inherit;text-align:left;background:transparent;transition:.16s ease; }.roll-entry-card:hover { border-color:rgba(148,163,184,.1);background:rgba(255,255,255,.025);transform:translateX(2px); }.roll-entry-card.active { border-color:rgba(140,115,255,.24);background:linear-gradient(90deg,rgba(140,115,255,.14),rgba(80,217,192,.03));box-shadow:inset 3px 0 var(--roll-violet); }.roll-entry-card.disabled { opacity:.58; }
.roll-rarity { display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(148,163,184,.12);border-radius:.6rem;color:#bbc5d4;background:rgba(148,163,184,.055);font-size:.62rem;font-weight:900; }.roll-rarity.rarity-1,.roll-entry-badges .rarity-1 { color:#65d4ff;border-color:rgba(101,212,255,.2);background:rgba(101,212,255,.07); }.roll-rarity.rarity-2,.roll-entry-badges .rarity-2 { color:#b093ff;border-color:rgba(176,147,255,.22);background:rgba(176,147,255,.08); }.roll-rarity.rarity-3,.roll-entry-badges .rarity-3 { color:#f0a6ff;border-color:rgba(240,166,255,.22);background:rgba(240,166,255,.08); }.roll-rarity.rarity-4,.roll-entry-badges .rarity-4 { color:#ffbc67;border-color:rgba(255,188,103,.22);background:rgba(255,188,103,.08); }
.roll-entry-copy { display:grid;min-width:0; }.roll-entry-copy strong { overflow:hidden;color:#dce3ed;font-size:.69rem;text-overflow:ellipsis;white-space:nowrap; }.roll-entry-copy small { overflow:hidden;margin-top:.15rem;color:#65748a;font-size:.54rem;text-overflow:ellipsis;white-space:nowrap; }.roll-entry-odds { display:grid;text-align:right; }.roll-entry-odds strong { color:#d9e0eb;font-size:.65rem; }.roll-entry-odds small { color:#627087;font-size:.5rem; }.roll-entry-state { width:6px;height:6px;border-radius:50%;background:#59677b; }.roll-entry-state.live { background:#52d8bf;box-shadow:0 0 7px rgba(82,216,191,.55); }.roll-entry-state.error { background:#f08189;box-shadow:0 0 7px rgba(240,129,137,.5); }.roll-entry-meter { position:absolute;right:.65rem;bottom:.3rem;left:2.85rem;height:2px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.025); }.roll-entry-meter i { display:block;height:100%;background:linear-gradient(90deg,var(--roll-violet),var(--roll-cyan)); }.roll-library-empty { display:grid;place-items:center;gap:.45rem;padding:2rem 1rem;border:1px dashed rgba(140,115,255,.18);border-radius:.9rem;color:#6f7d92;background:rgba(140,115,255,.025); }.roll-library-empty strong { color:#b9c3d2;font-size:.7rem; }.roll-library-empty small { font-size:.57rem; }
.roll-entry-designer { min-width:0; }.roll-designer-heading { margin-bottom:.75rem; }.roll-entry-badges { display:flex;gap:.35rem; }.roll-entry-badges span { padding:.3rem .48rem;border:1px solid rgba(148,163,184,.11);border-radius:.45rem;color:#8390a5;background:rgba(255,255,255,.02);font-size:.53rem;font-weight:900; }.roll-entry-badges span.live { color:#59d8c0;border-color:rgba(80,217,192,.18);background:rgba(80,217,192,.06); }.roll-entry-badges span.off { color:#77859a; }.roll-validation-strip { display:flex;align-items:flex-start;gap:.5rem;margin-bottom:.65rem;padding:.6rem;border:1px solid rgba(243,180,95,.18);border-radius:.65rem;color:#d8a565;background:rgba(243,180,95,.055);font-size:.6rem;line-height:1.45; }.roll-validation-strip .mud-icon-root { font-size:1rem; }.roll-designer-tabs .mud-tabs-panels { min-height:570px; }.roll-editor-section { display:grid;gap:1rem;padding:1rem .8rem 1.25rem; }.roll-section-heading { display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.75rem;border-bottom:1px solid rgba(148,163,184,.08); }.roll-section-heading span { display:block;color:#7566cc;font-size:.54rem;font-weight:900;letter-spacing:.13em; }.roll-section-heading h3 { margin:.15rem 0 0;color:#dfe5ee;font-size:.95rem; }.roll-section-heading>strong { color:#5dd9c2;font-size:.72rem; }.roll-section-heading>small { color:#6d7b90;font-size:.57rem; }
.roll-toggle-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem; }.roll-toggle-card { display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.68rem;border:1px solid rgba(148,163,184,.1);border-radius:.8rem;background:rgba(4,9,19,.22);cursor:pointer; }.roll-toggle-card:hover,.roll-toggle-card.on { border-color:rgba(140,115,255,.2);background:linear-gradient(135deg,rgba(140,115,255,.08),rgba(80,217,192,.02)); }.roll-toggle-card>span { display:grid;grid-template-columns:20px 1fr;column-gap:.4rem;min-width:0; }.roll-toggle-card .mud-icon-root { grid-row:1/3;color:#718096;font-size:1rem; }.roll-toggle-card.on .mud-icon-root { color:#a998ff; }.roll-toggle-card strong { color:#cbd4e1;font-size:.65rem; }.roll-toggle-card small { grid-column:2;color:#66748a;font-size:.54rem;line-height:1.3; }
.roll-weight-equation { display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem;border:1px solid rgba(80,217,192,.12);border-radius:.75rem;background:rgba(80,217,192,.035); }.roll-weight-equation span { color:#617087;font-size:.55rem;font-weight:900;text-transform:uppercase; }.roll-weight-equation strong { color:#66d9c3;font:700 .67rem/1.4 monospace;text-align:right; }.roll-token-presets,.roll-test-presets { display:flex;flex-wrap:wrap;align-items:center;gap:.35rem; }.roll-token-presets>span,.roll-test-presets>span { margin-right:.25rem;color:#66758a;font-size:.58rem;font-weight:750; }.roll-token-presets button,.roll-test-presets button { padding:.28rem .48rem;border:1px solid rgba(148,163,184,.1);border-radius:999px;color:#7f8da2;background:rgba(255,255,255,.018);font-size:.57rem;font-weight:800; }.roll-token-presets button:hover,.roll-token-presets button.active,.roll-test-presets button:hover,.roll-test-presets button.active { border-color:rgba(140,115,255,.24);color:#c7bcff;background:rgba(140,115,255,.09); }
.roll-wishlist-tiers { padding:.75rem;border:1px solid rgba(148,163,184,.09);border-radius:.75rem;background:rgba(4,9,19,.22); }.roll-image-option { display:flex;align-items:center;gap:.55rem;min-width:190px; }.roll-image-option>b { display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(140,115,255,.18);border-radius:.5rem;color:#c3b8ff;background:rgba(140,115,255,.07);font-size:.62rem; }.roll-image-option>span { display:grid; }.roll-image-option strong { color:#cbd4e1;font-size:.64rem; }.roll-image-option small { color:#68778d;font-size:.52rem;font-weight:800;text-transform:uppercase; }
.roll-event-explainer { display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem; }.roll-event-explainer>div { display:flex;align-items:center;gap:.55rem;padding:.65rem;border:1px solid rgba(148,163,184,.09);border-radius:.75rem;background:rgba(4,9,19,.22); }.roll-event-explainer .mud-icon-root { color:#9c8cff;font-size:1.1rem; }.roll-event-explainer span { display:grid; }.roll-event-explainer strong { color:#cbd4e1;font-size:.63rem; }.roll-event-explainer small { color:#66758a;font-size:.54rem; }.roll-designer-footer { display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.7rem;padding-top:.7rem;border-top:1px solid rgba(148,163,184,.08); }.roll-designer-footer>span { display:flex;align-items:center;gap:.35rem;color:#647288;font-size:.57rem; }.roll-designer-footer .mud-icon-root { font-size:.9rem; }.roll-designer-empty { display:grid;place-items:center;min-height:620px;padding:2rem;color:#6c7a8f;text-align:center; }.roll-designer-empty>.mud-icon-root { color:#8f7ff0;font-size:2.5rem; }.roll-designer-empty h2 { margin:.8rem 0 .2rem;color:#dce3ed; }.roll-designer-empty p { margin:0 0 1rem;font-size:.7rem; }
.roll-distribution-column { position:sticky;top:6.5rem;display:grid;gap:1rem;max-height:calc(100vh - 8.3rem);overflow-y:auto;padding-right:.15rem; }.roll-total-percent { color:#5bd9c1;font:900 .85rem/1 monospace; }.roll-distribution-meta { display:flex;align-items:center;gap:.45rem;margin-top:-.45rem;color:#66758a;font-size:.57rem; }.roll-distribution-meta i { width:3px;height:3px;border-radius:50%;background:#48566a; }.roll-distribution-meta strong { color:#aab5c5; }.roll-distribution-list { display:grid;gap:.7rem;margin-top:.9rem; }.roll-distribution-row>div,.roll-simulation-row>div { display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:.45rem; }.roll-distribution-row>div>strong,.roll-simulation-row>div>strong { color:#aeb9c8;font-size:.58rem; }.roll-distribution-row em,.roll-simulation-row em { color:#d9e0ea;font-size:.62rem;font-style:normal;font-weight:850; }.roll-distribution-row .roll-rarity,.roll-simulation-row .roll-rarity { width:29px;height:29px;font-size:.56rem; }.roll-distribution-track,.roll-simulation-track { position:relative;display:block;height:6px;overflow:hidden;margin-top:.35rem;border-radius:99px;background:rgba(255,255,255,.035); }.roll-distribution-track i,.roll-simulation-track i { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--roll-violet),var(--roll-cyan));box-shadow:0 0 9px rgba(80,217,192,.25); }.roll-distribution-row>small,.roll-simulation-row>small { display:block;margin-top:.28rem;color:#617087;font-size:.52rem;text-align:right; }.roll-distribution-empty { display:grid;place-items:center;gap:.35rem;padding:1.5rem;color:#d0a267;text-align:center; }.roll-distribution-empty strong { color:#c8d0dc;font-size:.68rem; }.roll-distribution-empty small { color:#65748a;font-size:.55rem; }
.roll-lab-icon { display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(80,217,192,.17);border-radius:.55rem;color:#5cd9c1;background:rgba(80,217,192,.055); }.roll-lab-icon .mud-icon-root { font-size:1rem; }.roll-test-presets { margin-bottom:.65rem; }.roll-simulation-empty { display:grid;place-items:center;gap:.2rem;margin-top:.8rem;padding:1.25rem;border:1px dashed rgba(140,115,255,.14);border-radius:.75rem;text-align:center; }.roll-simulation-empty span { color:#7465c9;font-size:.5rem;font-weight:900;letter-spacing:.13em; }.roll-simulation-empty strong { color:#bfc8d6;font-size:.65rem; }.roll-simulation-empty small { color:#647288;font-size:.54rem; }.roll-simulation-caption { margin-top:.8rem;color:#6d7b90;font-size:.56rem;text-align:center; }.roll-simulation-results { display:grid;gap:.65rem;margin-top:.7rem; }.roll-simulation-track { overflow:visible; }.roll-simulation-track i { background:linear-gradient(90deg,#50b8d9,#50d9c0); }.roll-simulation-track b { position:absolute;top:-3px;width:2px;height:12px;border-radius:2px;background:#f3b45f;box-shadow:0 0 7px rgba(243,180,95,.6); }.roll-simulation-row small span.good { color:#59d8c0; }.roll-simulation-row small span.warn { color:#f0ad68; }.roll-simulation-legend { display:flex;justify-content:center;gap:.8rem;margin-top:.8rem;color:#65748a;font-size:.5rem; }.roll-simulation-legend span { display:flex;align-items:center;gap:.28rem; }.roll-simulation-legend i { width:14px;height:4px;border-radius:9px;background:#50d0c1; }.roll-simulation-legend b { width:2px;height:10px;background:#f3b45f; }
.rarity-bg-0 { background:#91a0b5!important; }.rarity-bg-1 { background:#5fcdf8!important; }.rarity-bg-2 { background:#9d80f5!important; }.rarity-bg-3 { background:#da8cef!important; }.rarity-bg-4 { background:#e9a852!important; }
@media(max-width:1500px){.roll-studio-workspace{grid-template-columns:minmax(255px,290px) minmax(0,1fr)}.roll-distribution-column{position:static;grid-column:2;grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;overflow:visible;padding:0}.roll-hero-stats{margin-right:5rem}}
@media(max-width:1080px){.roll-studio-hero{align-items:flex-start;padding:1.8rem}.roll-hero-stats{margin:0 3rem 0 1rem}.roll-studio-toolbar{align-items:flex-start;flex-direction:column}.roll-toolbar-actions{width:100%;flex-wrap:wrap}.roll-studio-workspace{grid-template-columns:1fr}.roll-entry-library{position:static!important;height:auto;max-height:500px}.roll-entry-list{height:350px}.roll-distribution-column{grid-column:1}}
@media(max-width:760px){.roll-studio-page{gap:.75rem}.roll-studio-hero{display:block;min-height:auto;padding:1.5rem;border-radius:1.1rem}.roll-hero-copy p{font-size:.85rem}.roll-hero-stats{grid-template-columns:repeat(2,1fr);margin:1.2rem 0 0}.roll-hero-stats>div{min-width:0}.roll-hero-dice{display:none}.roll-studio-toolbar{position:static!important}.roll-toolbar-fields{width:100%;flex-wrap:wrap}.roll-type-select{width:100%}.roll-toolbar-sync{margin-left:0}.roll-toolbar-actions .mud-button-root{flex:1}.roll-distribution-column{grid-template-columns:1fr}.roll-toggle-grid,.roll-event-explainer{grid-template-columns:1fr}.roll-section-heading,.roll-designer-footer{align-items:flex-start;flex-direction:column}.roll-review-menu{width:88vw}}