:root{
    --depth-void:oklch(8% 0.02 260);
    --depth-space:oklch(14% 0.04 265);
    --depth-mid:oklch(22% 0.06 270);
    --depth-surface:oklch(28% 0.08 272);
    --accent-primary:oklch(72% 0.18 185);
    --accent-secondary:oklch(75% 0.2 45);
    --accent-tertiary:oklch(70% 0.15 310);
    --text-lumen:oklch(94% 0.02 260);
    --text-dim:oklch(70% 0.03 265);
    --glow-intensity:0 0 20px;
    --radius-orb:60px;
    --radius-panel:32px;
    --radius-element:20px;
    --transition-fluid:0.3s cubic-bezier(0.3,0,0.2,1);
}
body.light-mode{
    --depth-void:oklch(92% 0.02 85);
    --depth-space:oklch(86% 0.03 80);
    --depth-mid:oklch(78% 0.04 75);
    --depth-surface:oklch(72% 0.05 70);
    --text-lumen:oklch(18% 0.02 260);
    --text-dim:oklch(35% 0.03 265);
}
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}
html{
    width: 100vw;
    overflow-x: hidden;
}
body{
    background:var(--depth-void);
    color:var(--text-lumen);
    font-family:'Inter','SF Pro','Segoe UI',system-ui;
    min-height:100vh;
    /* display:flex;
    align-items:center;
    justify-content:center; */
    transition:background var(--transition-fluid);
    width: 100%;
}
.cosmic-nexus{
    width:100%;
    max-width:1800px;
    margin:2rem;
    position:relative;
}
.theme-orb{
    position:fixed;
    bottom:20px;left:20px;
    width:56px;height:56px;
    border-radius:50%;
    background:var(--depth-surface);
    border:2px solid var(--accent-primary);
    color:var(--text-lumen);
    font-size:1.5rem;
    cursor:pointer;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition-fluid);
    box-shadow:var(--glow-intensity) var(--accent-primary);
}
.theme-orb i{position:absolute;transition:var(--transition-fluid);}
.theme-orb .fa-sun{opacity:0;transform:rotate(90deg);}
.light-mode .theme-orb .fa-moon{opacity:0;transform:rotate(-90deg);}
.light-mode .theme-orb .fa-sun{opacity:1;transform:rotate(0);}

.stellar-header{
    margin-bottom:1.5rem;
    position:relative;
}
.header-glow{
    position:absolute;
    top:-50%;left:-20%;
    width:140%;height:200%;
    background:radial-gradient(circle,var(--accent-primary) 0%,transparent 70%);
    opacity:0.15;
    filter:blur(60px);
    pointer-events:none;
}
.header-content{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:rgba(var(--depth-mid),0.3);
    backdrop-filter:blur(20px);
    padding:1rem 2rem;
    border-radius:var(--radius-orb);
    border:1px solid rgba(255,255,255,0.1);
    position:relative;
    z-index:2;
}
.title-group{
    display:flex;
    align-items:baseline;
    gap:0.5rem;
}
.forge-title{
    font-size:3rem;
    font-weight:800;
    letter-spacing:4px;
    background:linear-gradient(135deg,var(--text-lumen),var(--accent-primary));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.header-badge{
    display:flex;
    align-items:center;
    gap:0.75rem;
    background:var(--depth-surface);
    padding:0.5rem 1.5rem;
    border-radius:var(--radius-orb);
    border-left:4px solid var(--accent-tertiary);
}
.header-badge i{color:var(--accent-tertiary);font-size:1.2rem;}

.dimension-workspace{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) 480px;
    gap:1.5rem;
    min-height:75vh;
}
.canvas-realm{
    position:sticky;
    top:2rem;
    align-self:start;
    height:fit-content;
}
.canvas-vessel{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    background:var(--depth-space);
    border-radius:var(--radius-panel);
    overflow:hidden;
    box-shadow:0 20px 40px rgba(0,0,0,0.6),0 0 0 2px var(--accent-primary) inset;
}
.dimension-canvas{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    display:block;
}
.primary-layer{z-index:1;}
.guide-layer{z-index:2;pointer-events:none;}
.crop-layer{z-index:3;pointer-events:none;opacity:0.5;}

.center-cockpit{
    position:absolute;
    bottom:30px;left:50%;
    transform:translateX(-50%);
    z-index:10;
    transition:var(--transition-fluid);
}
.center-cockpit.hidden{opacity:0;transform:translateX(-50%) translateY(20px);pointer-events:none;}
.cockpit-panel{
    background:rgba(10,20,40,0.9);
    backdrop-filter:blur(20px);
    border-radius:80px;
    padding:0.5rem;
    display:flex;
    align-items:center;
    gap:0.5rem;
    border:1px solid var(--accent-primary);
    box-shadow:0 10px 30px rgba(0,0,0,0.5);
}
.cockpit-btn{
    width:48px;height:48px;
    border-radius:50%;
    border:none;
    cursor:pointer;
    font-size:1.2rem;
    transition:var(--transition-fluid);
}
.cockpit-btn.confirm{
    background:var(--accent-primary);
    color:var(--depth-void);
}
.cockpit-btn.cancel{
    background:rgba(255,255,255,0.1);
    color:var(--text-lumen);
}
.cockpit-coord{
    display:flex;
    align-items:center;
    gap:0.25rem;
    padding:0 1rem;
    color:var(--accent-secondary);
    font-weight:600;
}
.coord-label{font-size:0.8rem;opacity:0.7;}
.coord-value{font-size:1.2rem;min-width:45px;text-align:center;}
.cockpit-snap{
    background:rgba(255,255,255,0.1);
    border:none;
    border-radius:40px;
    padding:0.5rem 1rem;
    color:var(--text-lumen);
    display:flex;
    align-items:center;
    gap:0.5rem;
    cursor:pointer;
    transition:var(--transition-fluid);
}
.cockpit-snap:hover{background:var(--accent-secondary);color:var(--depth-void);}

.viewport-controls{
    position:absolute;
    top:20px;right:20px;
    z-index:5;
    display:flex;
    gap:0.5rem;
}
.control-btn{
    width:44px;height:44px;
    border-radius:50%;
    background:rgba(0,0,0,0.5);
    border:1px solid rgba(255,255,255,0.2);
    color:white;
    font-size:1.2rem;
    cursor:pointer;
    backdrop-filter:blur(10px);
    transition:var(--transition-fluid);
}
.control-btn:hover{background:var(--accent-primary);color:var(--depth-void);}
.canvas-status{
    position:absolute;
    bottom:20px;left:20px;
    background:rgba(0,0,0,0.5);
    backdrop-filter:blur(10px);
    padding:0.25rem 1rem;
    border-radius:40px;
    font-size:0.8rem;
    color:var(--text-dim);
    z-index:4;
}

.control-hub{
    background:var(--depth-surface);
    border-radius:var(--radius-panel);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 20px 40px rgba(0,0,0,0.4);
}
.hub-header{
    padding:1.5rem;
    background:linear-gradient(145deg,var(--depth-mid),var(--depth-surface));
    border-bottom:2px solid var(--accent-primary);
    display:flex;
    align-items:center;
    gap:1rem;
    font-size:1.2rem;
    font-weight:600;
}
.hub-header i{color:var(--accent-primary);font-size:1.4rem;}
.hub-sections{
    flex:1;
    overflow-y:auto;
    padding:1rem;
    display:flex;
    flex-direction:column;
    gap:0.75rem;
}
.hub-section{
    background:var(--depth-mid);
    border-radius:var(--radius-element);
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.05);
}
.section-trigger{
    width:100%;
    padding:1rem;
    background:linear-gradient(90deg,var(--depth-mid),var(--depth-surface));
    border:none;
    color:var(--text-lumen);
    display:flex;
    align-items:center;
    gap:1rem;
    cursor:pointer;
    font-size:1rem;
    font-weight:500;
    transition:var(--transition-fluid);
}
.section-trigger i:first-child{color:var(--accent-primary);width:24px;}
.section-trigger span{flex:1;text-align:left;}
.trigger-icon{transition:transform 0.3s;}
.hub-section.expanded .trigger-icon{transform:rotate(180deg);}
.section-content{
    padding:1.25rem;
    display:none;
    background:var(--depth-mid);
}
.hub-section.expanded .section-content{display:block;}

.upload-zone{
    border:2px dashed var(--accent-primary);
    border-radius:var(--radius-element);
    padding:2rem;
    text-align:center;
    cursor:pointer;
    transition:var(--transition-fluid);
}
.upload-zone:hover{
    background:rgba(var(--accent-primary),0.1);
    border-color:var(--accent-secondary);
}
.upload-zone i{font-size:3rem;color:var(--accent-primary);margin-bottom:1rem;}
.upload-hint{
    display:block;
    font-size:0.8rem;
    color:var(--text-dim);
    margin-top:0.5rem;
}
.file-input-hidden{display:none;}
.file-preview{
    display:flex;
    align-items:center;
    gap:1rem;
    background:var(--depth-space);
    padding:0.75rem;
    border-radius:var(--radius-element);
}
.preview-thumb{
    width:40px;height:40px;
    background:linear-gradient(45deg,var(--accent-primary),var(--accent-tertiary));
    border-radius:8px;
}
.preview-meta{
    flex:1;
    display:flex;
    flex-direction:column;
}
#fileName{font-weight:600;}
#fileSize{font-size:0.8rem;color:var(--text-dim);}
.icon-btn{
    background:none;
    border:none;
    color:var(--text-dim);
    cursor:pointer;
    font-size:1.2rem;
    transition:var(--transition-fluid);
}
.icon-btn:hover{color:var(--accent-secondary);}

.pivot-grid{
    display:flex;
    flex-wrap:wrap;
    gap:0.75rem;
    margin-bottom:1rem;
    align-items:flex-end;
}
.pivot-input{
    flex:1 1 120px;
    display:flex;
    flex-direction:column;
    min-width:0;
}
.pivot-input label{
    font-size:0.7rem;
    color:var(--text-dim);
    margin-bottom:0.25rem;
}
.pivot-field{
    width:100%;
    background:var(--depth-space);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    padding:0.6rem;
    color:var(--text-lumen);
    font-size:1rem;
    text-align:center;
    box-sizing:border-box;
}
.pivot-apply,.pivot-reset{
    width:44px;height:44px;
    border-radius:50%;
    border:none;
    cursor:pointer;
    font-size:1.1rem;
    transition:var(--transition-fluid);
    flex:0 0 auto;
}
.pivot-apply{
    background:var(--accent-primary);
    color:var(--depth-void);
}
.pivot-reset{
    background:rgba(255,255,255,0.1);
    color:var(--text-lumen);
}
.pivot-hint{
    display:flex;
    align-items:center;
    gap:0.5rem;
    color:var(--text-dim);
    font-size:0.85rem;
    padding:0.5rem;
    background:var(--depth-space);
    border-radius:40px;
}

.ring-command-bar{
    display:flex;
    gap:0.5rem;
    margin-bottom:1rem;
    flex-wrap:wrap;
}
.cmd-btn{
    flex:1;
    min-width:80px;
    padding:0.75rem;
    border:none;
    border-radius:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    cursor:pointer;
    font-weight:500;
    transition:var(--transition-fluid);
}
.cmd-btn.primary{
    background:var(--accent-primary);
    color:var(--depth-void);
}
.cmd-btn.secondary{
    background:rgba(255,255,255,0.1);
    color:var(--text-lumen);
}
.cmd-btn:hover{transform:translateY(-2px);filter:brightness(1.2);}

.ring-inventory{
    max-height:400px;
    overflow-y:auto;
    margin-bottom:1rem;
}
.ring-item{
    background:var(--depth-space);
    border-radius:40px;
    padding:0.5rem 0.75rem;
    margin-bottom:0.5rem;
    display:flex;
    align-items:center;
    gap:0.75rem;
    border-left:4px solid var(--accent-primary);
    transition:var(--transition-fluid);
}
.ring-badge{
    width:16px;height:16px;
    border-radius:50%;
    background:var(--accent-primary);
}
.ring-controls{
    display:flex;
    gap:0.5rem;
    flex:1;
}
.ring-controls label{
    font-size:0.7rem;
    display:flex;
    flex-direction:column;
    color:var(--text-dim);
}
.ring-controls input{
    width:75px;
    padding:0.3rem;
    background:var(--depth-mid);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    color:var(--text-lumen);
    text-align:center;
}
.ring-tools{
    display:flex;
    gap:0.25rem;
}
.ring-tools button{
    background:none;
    border:none;
    color:var(--text-dim);
    cursor:pointer;
    padding:0.25rem;
    font-size:1rem;
    transition:var(--transition-fluid);
}
.ring-tools button:hover{color:var(--accent-secondary);}

.layer-workshop{
    background:var(--depth-space);
    border-radius:var(--radius-element);
    padding:1rem;
    margin-top:0.5rem;
}
.workshop-header{
    display:flex;
    align-items:center;
    gap:0.5rem;
    margin-bottom:1rem;
    color:var(--accent-primary);
}
.bg-type-selector{
    display:flex;
    gap:1rem;
    margin-bottom:1rem;
}
.bg-option{
    display:flex;
    align-items:center;
    gap:0.25rem;
    cursor:pointer;
}
.bg-option input[type=radio]{accent-color:var(--accent-primary);}
.color-picker-wrap{
    position:relative;
    display:inline-block;
}
.color-picker-wrap input[type=color]{
    width:60px;height:60px;
    border-radius:50%;
    border:2px solid var(--accent-primary);
    cursor:pointer;
}
.color-picker-wrap i{
    position:absolute;
    bottom:0;right:0;
    background:var(--depth-surface);
    padding:0.25rem;
    border-radius:50%;
    font-size:0.8rem;
}
.gradient-panel{
    margin-top:1rem;
}
.grad-pair{
    display:flex;
    gap:0.5rem;
    margin-bottom:0.5rem;
}
.grad-pair input[type=color]{
    width:50px;height:50px;
    border-radius:50%;
    border:2px solid var(--accent-secondary);
}
.grad-dir{
    width:100%;
    padding:0.5rem;
    background:var(--depth-mid);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:20px;
    color:var(--text-lumen);
}
.ref-toggler{
    display:flex;
    align-items:center;
    gap:1rem;
    margin-top:1rem;
}
.toggle-switch{
    position:relative;
    width:50px;height:24px;
}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-track{
    position:absolute;
    cursor:pointer;
    top:0;left:0;right:0;bottom:0;
    background:var(--depth-mid);
    border-radius:34px;
    transition:var(--transition-fluid);
}
.toggle-track:before{
    position:absolute;
    content:"";
    height:20px;width:20px;
    left:2px;bottom:2px;
    background:var(--accent-primary);
    border-radius:50%;
    transition:var(--transition-fluid);
}
.toggle-switch input:checked + .toggle-track:before{transform:translateX(26px);}

.motion-dashboard{
    background:var(--depth-mid);
    border-radius:var(--radius-element);
    padding:1rem;
}
.transport-panel{
    display:flex;
    align-items:center;
    gap:1rem;
    margin-bottom:1rem;
}
.transport-btn{
    width:44px;height:44px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.1);
    color:var(--text-lumen);
    font-size:1.2rem;
    cursor:pointer;
    transition:var(--transition-fluid);
}
.transport-btn.play{background:var(--accent-primary);color:var(--depth-void);}
.global-speed{
    flex:1;
    display:flex;
    align-items:center;
    gap:0.5rem;
}
.global-speed i{color:var(--accent-secondary);}
.global-speed input[type=range]{
    flex:1;
    height:4px;
    -webkit-appearance:none;
    appearance:none;
    background:var(--depth-mid);
    border-radius:2px;
}
.global-speed input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:16px;height:16px;
    border-radius:50%;
    background:var(--accent-primary);
    cursor:pointer;
}
#speedValue{min-width:45px;}

.ring-motion-panel {
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}
.export-dashboard{
    background:var(--depth-space);
    border-radius:var(--radius-element);
    padding:1rem;
}
.export-timeline{
    display:flex;
    flex-direction:column;
    gap:1rem;
    margin-bottom:1rem;
}
.time-inputs{
    display:flex;
    gap:1rem;
}
.time-unit{
    flex:1;
}
.time-unit label{
    display:block;
    font-size:0.7rem;
    color:var(--text-dim);
    margin-bottom:0.25rem;
}
.time-field{
    width:100%;
    padding:0.6rem;
    background:var(--depth-mid);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    color:var(--text-lumen);
    text-align:center;
}
.fps-selector,.scale-selector{
    display:flex;
    align-items:center;
    gap:1rem;
}
.fps-dropdown{
    flex:1;
    padding:0.6rem;
    background:var(--depth-mid);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    color:var(--text-lumen);
}
.scale-buttons{
    display:flex;
    gap:0.5rem;
    flex:1;
}
.scale-btn{
    flex:1;
    padding:0.5rem;
    background:rgba(255,255,255,0.1);
    border:none;
    border-radius:20px;
    color:var(--text-lumen);
    cursor:pointer;
    transition:var(--transition-fluid);
}
.scale-btn.active{
    background:var(--accent-primary);
    color:var(--depth-void);
}
.crop-designer{
    background:var(--depth-mid);
    border-radius:var(--radius-element);
    padding:1rem;
    margin:1rem 0;
}
.crop-designer h5{
    color:var(--accent-secondary);
    margin-bottom:0.75rem;
}
.aspect-select{
    width:100%;
    padding:0.6rem;
    background:var(--depth-space);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    color:var(--text-lumen);
    margin-bottom:0.75rem;
}
.custom-crop{
    display:flex;
    gap:1rem;
    margin-bottom:1rem;
}
.custom-dim{
    flex:1;
}
.custom-dim label{
    display:block;
    font-size:0.7rem;
    color:var(--text-dim);
}
.crop-dim{
    width:100%;
    padding:0.5rem;
    background:var(--depth-space);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    color:var(--text-lumen);
}
.offset-controls{
    display:flex;
    flex-direction:column;
    gap:0.75rem;
}
.offset-axis{
    display:flex;
    align-items:center;
    gap:0.75rem;
}
.offset-axis span:first-child{width:50px;font-size:0.9rem;}
.offset-slider{
    flex:1;
    height:4px;
    -webkit-appearance:none;
    appearance:none;
    background:var(--depth-space);
    border-radius:2px;
}
.offset-slider::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:16px;height:16px;
    border-radius:50%;
    background:var(--accent-secondary);
    cursor:pointer;
}
.offset-axis span:last-child{min-width:45px;font-size:0.9rem;}

.anim-item {
    background: var(--depth-space);
    border-radius: var(--radius-element);
    padding: 1rem;
    border-left: 3px solid var(--accent-primary);
    transition: var(--transition-fluid);
}

.anim-item:hover {
    background: var(--depth-space);
}

.anim-item .speed-control {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.anim-item .speed-label {
    font-size: 0.8rem;
    color: var(--text-dim);
    min-width: 40px;
}

.anim-item .motionSpeed {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--depth-mid);
    border-radius: 2px;
}

.anim-item .motionSpeed::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-primary);
    cursor: pointer;
}

.anim-item .motionSpeedNum {
    width: 70px;
    background: var(--depth-mid);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 0.4rem 0.6rem;
    color: var(--text-lumen);
    font-size: 0.9rem;
    text-align: center;
    box-sizing: border-box;
}

.anim-item .motionSpeedNum:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.anim-item .direction-controls {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.anim-item .direction-controls label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-lumen);
    cursor: pointer;
}

.anim-item .direction-controls input[type="radio"] {
    accent-color: var(--accent-primary);
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.export-prime{
    width:100%;
    padding:1rem;
    background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
    border:none;
    border-radius:40px;
    color:var(--depth-void);
    font-weight:600;
    font-size:1.1rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.75rem;
    cursor:pointer;
    transition:var(--transition-fluid);
    margin-top:1rem;
}
.export-prime:hover{transform:scale(1.02);filter:brightness(1.1);}
.export-progress{
    margin-top:1rem;
    text-align:center;
}
.progress-bar{
    width:100%;
    height:6px;
    background:var(--depth-mid);
    border-radius:3px;
    overflow:hidden;
    margin-bottom:0.5rem;
}
.progress-bar:after{
    content:'';
    display:block;
    width:30%;
    height:100%;
    background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));
    border-radius:3px;
    animation:progressPulse 1.5s infinite;
}
@keyframes progressPulse{
    0%{width:0%;}
    50%{width:70%;}
    100%{width:100%;}
}

.preset-actions{
    display:flex;
    gap:1rem;
}
.preset-btn{
    flex:1;
    padding:0.75rem;
    border:none;
    border-radius:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    cursor:pointer;
    transition:var(--transition-fluid);
}
.preset-btn.save{
    background:var(--accent-tertiary);
    color:var(--depth-void);
}
.preset-btn.load{
    background:rgba(255,255,255,0.1);
    color:var(--text-lumen);
}
.hub-footer{
    padding:1rem;
    border-top:1px solid rgba(255,255,255,0.1);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    color:var(--text-dim);
    font-size:0.85rem;
}
.hub-footer i{color:var(--accent-secondary);animation:heartBeat 1.5s infinite;}
@keyframes heartBeat{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.2);color:var(--accent-tertiary);}
}

.toast-portal{
    position:fixed;
    top:20px;left:50%;
    transform:translateX(-50%);
    z-index:2000;
}
.toast-message{
    background:var(--accent-primary);
    color:var(--depth-void);
    padding:0.75rem 2rem;
    border-radius:40px;
    font-weight:600;
    box-shadow:0 10px 30px rgba(0,0,0,0.3);
    animation:toastSlide 0.3s;
}
@keyframes toastSlide{
    from{opacity:0;transform:translateY(-20px);}
    to{opacity:1;transform:translateY(0);}
}

.modal-dim{
    position:fixed;
    top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,0.8);
    backdrop-filter:blur(10px);
    display:flex;
    align-items:center;justify-content:center;
    z-index:2100;
    opacity:0;
    pointer-events:none;
    transition:var(--transition-fluid);
}
.modal-dim.show{opacity:1;pointer-events:auto;}
.modal-core{
    background:var(--depth-surface);
    border-radius:48px;
    padding:2.5rem;
    max-width:400px;
    width:90%;
    text-align:center;
    position:relative;
    overflow:hidden;
    border:1px solid var(--accent-primary);
}
.modal-shine{
    position:absolute;
    top:-50%;left:-50%;
    width:200%;height:200%;
    background:radial-gradient(circle,var(--accent-primary) 0%,transparent 70%);
    opacity:0.1;
    animation:rotate 10s linear infinite;
}
@keyframes rotate{from{transform:rotate(0);}to{transform:rotate(360deg);}}
.modal-icon{
    font-size:3rem;
    color:var(--accent-secondary);
    margin-bottom:1rem;
}
.modal-message{
    font-size:1.2rem;
    margin-bottom:2rem;
    position:relative;
}
.modal-actions{
    display:flex;
    gap:1rem;
    justify-content:center;
    position:relative;
}
.btn-prime,.btn-ghost{
    padding:0.75rem 2rem;
    border:none;
    border-radius:40px;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition-fluid);
}
.btn-prime{
    background:var(--accent-primary);
    color:var(--depth-void);
}
.btn-ghost{
    background:rgba(255,255,255,0.1);
    color:var(--text-lumen);
}

.hidden{display:none !important;}

@media (max-width:1200px){
    .dimension-workspace{grid-template-columns:1fr 400px;}
}
@media (max-width:900px){
    .dimension-workspace{grid-template-columns:1fr;}
    .control-hub{max-height:none;}
    .header-content{flex-direction:column;gap:1rem;}
}
@media (max-width:600px){
    .forget-title{font-size:2rem;}
    .cockpit-panel{flex-wrap:wrap;width:90%;}
    .time-inputs{flex-direction:column;}
}

.ring-motion-panel::-webkit-scrollbar,
.ring-inventory::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}

.ring-motion-panel::-webkit-scrollbar-track,
.ring-inventory::-webkit-scrollbar-track {
    background: var(--depth-mid);
    border-radius: 10px;
}

.ring-motion-panel::-webkit-scrollbar-thumb,
.ring-inventory::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 10px;
    transition: var(--transition-fluid);
}

.ring-motion-panel::-webkit-scrollbar-thumb:hover,
.ring-inventory::-webkit-scrollbar-thumb:hover {
    background: var(--accent-secondary);
}

.ring-motion-panel,
.ring-inventory {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary) var(--depth-mid);
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232ec4b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px !important;
}

body.light-mode select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232ec4b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

.grad-dir,
.fps-dropdown,
.aspect-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232ec4b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px !important;
}