/* Shift Mode Styles – copied from original with all tokens */
@import url('../common/us-tokens.css');

/* Complete style sheet duplicated to keep this bundle self-contained. */

/* --- Basic Styles --- */
html, body {height: 100%; margin: 0; padding: 0; overflow: hidden; font-family: var(--us-font-family-default), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;}
body {background-color: var(--us-bg-low); color: var(--us-fg-default);} 

.container {height: 100vh; display: flex; flex-direction: row; background-color: var(--us-bg-canvas); gap: var(--us-spacing-32); padding: var(--us-spacing-32);} 
@media (max-width: 768px){.container{flex-direction: column; gap: var(--us-spacing-16-m); padding: var(--us-spacing-16-m);}}

/* --- Controls Panel --- */
.controls-panel{width: var(--us-sizing-488); flex-shrink: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; background-color: var(--us-bg-canvas); box-sizing: border-box;}
@media (max-width:768px){.controls-panel{width:100%;max-height:40vh;}}
.controls-panel h1{font-size: var(--us-font-size-heading-1); line-height: var(--us-line-height-heading-1); font-weight: var(--us-font-weight-bold); color: var(--us-fg-default); margin: 0 0 var(--us-spacing-24-l) 0; text-align:center;}
.controls-section{flex:1;padding-top:var(--us-spacing-32);border-top:1px solid var(--us-border-medium);} 
.slider-container{margin-bottom:var(--us-spacing-24-l);} 
.section-divider{height:1px;background-color:var(--us-border-medium);margin:var(--us-spacing-32) 0;} 
.major-section{margin-bottom:var(--us-spacing-40);} 
.major-section:last-child{margin-bottom:0;}

/* Buttons & tabs */
.control-btn{display:inline-block;padding:var(--us-spacing-8-s) var(--us-spacing-16-m);border:none;border-radius:var(--us-radii-micro-small);cursor:pointer;font-size:var(--us-font-size-label);font-weight:var(--us-font-weight-bold);transition:all .2s ease;text-align:center;min-width:auto;width:auto;flex:1;}
.control-btn.primary{background-color:var(--us-accent-high);color:var(--us-fg-inverse);} 
.control-btn.secondary{background-color:var(--us-bg-mid);color:var(--us-fg-default);border:1px solid var(--us-border-medium);} 
.control-btn:hover{opacity:.9;}
.segmented-tab{display:flex;background-color:var(--us-bg-low);border-radius:var(--us-radii-micro-medium);padding:var(--us-spacing-4-xs);width:100%;box-sizing:border-box;gap:var(--us-spacing-4-xs);} 
.segmented-tab button{flex:1;padding:var(--us-spacing-8-s) var(--us-spacing-16-m);font-size:var(--us-font-size-label);font-weight:var(--us-font-weight-bold);color:var(--us-fg-subtext);background:transparent;border:none;border-radius:var(--us-radii-micro-small);cursor:pointer;transition:all .2s ease;} 
.segmented-tab button.active{background-color:var(--us-bg-canvas);color:var(--us-accent-high);} 
.segmented-tab button:hover:not(.active){color:var(--us-fg-default);background-color:var(--us-bg-mid);} 

/* Canvas */
.canvas-container{flex:1;display:flex;justify-content:center;align-items:center;overflow:hidden;} 
canvas{display:block;max-width:100%;max-height:100%;object-fit:contain;transition:cursor .2s ease;} 
canvas.persistent-mode{cursor:crosshair!important;} 

/* File upload */
input[type="file"]{display:none;} 
.file-upload-label{display:block;padding:var(--us-spacing-16-m) var(--us-spacing-24-l);background-color:var(--us-accent-high);color:var(--us-fg-inverse);border-radius:var(--us-radii-micro-medium);cursor:pointer;transition:all .2s ease;text-align:center;font-size:var(--us-font-size-body);font-weight:var(--us-font-weight-bold);border:none;box-shadow:0 2px 4px rgba(0,0,0,.1);margin-bottom:var(--us-spacing-16-m);} 
.file-upload-label:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,.15);} 

/* Persistent controls */
.persistent-controls{display:flex;flex-direction:column;gap:var(--us-spacing-12);width:100%;box-sizing:border-box;} 
.persistent-info{font-size:var(--us-font-size-label);color:var(--us-fg-subtext);} 
.persistent-buttons{display:flex;gap:var(--us-spacing-8-s);width:100%;box-sizing:border-box;} 

/* Sliders */
.slider-container input[type=range]{width:100%;cursor:pointer;height:var(--us-spacing-8-s);background:var(--us-bg-mid);border-radius:var(--us-radii-micro-small);outline:none;-webkit-appearance:none;appearance:none;} 
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--us-spacing-20);height:var(--us-spacing-20);border-radius:var(--us-radii-full-static);background:var(--us-accent-high);cursor:pointer;border:2px solid var(--us-bg-canvas);box-shadow:0 2px 4px rgba(0,0,0,.2);} 
input[type=range]::-moz-range-thumb{width:var(--us-spacing-20);height:var(--us-spacing-20);border-radius:var(--us-radii-full-static);background:var(--us-accent-high);cursor:pointer;border:2px solid var(--us-bg-canvas);box-shadow:0 2px 4px rgba(0,0,0,.2);} 
.value-display{font-size:var(--us-font-size-label);color:var(--us-fg-subtext);float:right;} 

.mode-note{font-size:var(--us-font-size-label);color:var(--us-fg-variant);margin-top:var(--us-spacing-8-s);font-style:italic;} 
.hidden{display:none!important;}

/* Action buttons */
.action-buttons {
    display: flex;
    gap: var(--us-spacing-8-s);
    width: 100%;
}

.action-buttons .control-btn {
    width: 100%;
    margin-right: 0;
}

/* Recording controls */
.recording-controls {
    display: flex;
    flex-direction: column;
    gap: var(--us-spacing-24-l);
}

.duration-control {
    display: flex;
    flex-direction: column;
    gap: var(--us-spacing-8-s);
}

.input-with-unit {
    display: flex;
    align-items: center;
    background: var(--us-bg-mid);
    border-radius: var(--us-radii-micro-medium);
    padding: var(--us-spacing-12) var(--us-spacing-16-m);
}

.input-with-unit input {
    border: none;
    background: transparent;
    font-size: var(--us-font-size-body);
    color: var(--us-fg-default);
    width: 60px;
    padding: var(--us-spacing-8-s);
    outline: none;
}

.input-with-unit .unit {
    color: var(--us-fg-subtext);
    font-size: var(--us-font-size-label);
    margin-left: var(--us-spacing-12);
}

.recording-status {
    font-size: var(--us-font-size-label);
    color: var(--us-fg-subtext);
    padding: var(--us-spacing-8-s) 0;
}

/* Recording countdown */
.recording-countdown {
    text-align: center;
    margin: var(--us-spacing-16-m) 0;
    padding: var(--us-spacing-12) var(--us-spacing-16-m);
    background: var(--us-accent-high);
    color: var(--us-fg-inverse);
    border-radius: var(--us-radii-micro-medium);
    font-size: var(--us-font-size-body);
    font-weight: var(--us-font-weight-bold);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}