.panel,
.card,
.cardSmall,
.resultBox,
.statBox,
.cardStat{
background:linear-gradient(180deg, rgba(29,29,29,0.98), rgba(20,20,20,0.98));
border:1px solid var(--border);
border-radius:var(--radius-lg);
}

.panel,
.card,
.resultBox{
padding:24px;
}

.cardSmall,
.cardStat,
.statBox{
padding:16px;
}

.panel-muted{
background:linear-gradient(180deg, rgba(24,24,24,0.98), rgba(16,16,16,0.98));
}

.panel-accent,
.accent-border{
border-color:var(--border-accent);
}

.empty-state{
padding:40px 24px;
border:1px dashed var(--border-strong);
border-radius:var(--radius-lg);
background:var(--surface-muted);
color:var(--muted-strong);
text-align:center;
}

.btn,
.btnPrimary,
.btnSecondary,
.btnToggle,
.guideBtn,
.btnDisconnect{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:8px 20px;
border:1px solid var(--border);
border-radius:var(--radius-pill);
background:var(--bg-deep);
color:var(--text);
font-size:0.875rem;
font-weight:500;
line-height:1.14;
cursor:pointer;
transition:border-color .16s ease, background .16s ease, color .16s ease, transform .08s ease;
}

.btn:hover,
.btnPrimary:hover,
.btnSecondary:hover,
.btnToggle:hover,
.guideBtn:hover,
.btnDisconnect:hover{
border-color:var(--border-strong);
background:#141414;
}

.btn:active,
.btnPrimary:active,
.btnSecondary:active,
.btnToggle:active,
.guideBtn:active,
.btnDisconnect:active{
transform:translateY(1px);
}

.btnPrimary,
.btn-primary,
.guideBtn.active{
background:var(--bg-deep);
border-color:var(--text);
color:var(--text);
}

.btnSecondary,
.btn-secondary,
.btnGhost,
.btn-ghost{
background:transparent;
border-color:var(--border);
color:var(--muted-strong);
}

.btnSecondary:hover,
.btn-secondary:hover,
.btnGhost:hover,
.btn-ghost:hover{
color:var(--text);
}

.btnToggle.active{
border-color:var(--border-accent);
color:var(--text);
background:var(--primary-soft);
}

.formGroup,
.field{
display:flex;
flex-direction:column;
gap:8px;
margin-bottom:0;
}

.formRow,
.field-row{
display:flex;
flex-wrap:wrap;
gap:12px;
}

.formActions,
.actionRow,
.jsonActions,
.tool-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:4px;
}

.formLabel,
.field-label{
display:block;
margin-bottom:0;
font-size:0.875rem;
line-height:1.43;
color:var(--muted);
}

.helpText,
.field-help{
font-size:0.8125rem;
line-height:1.6;
color:var(--muted);
}

.mt-sm{
margin-top:10px;
}

.mb-sm{
margin-bottom:10px;
}

.stack-sm{
display:flex;
flex-direction:column;
gap:10px;
}

input,
select,
textarea,
.textarea,
.jsonOutput{
width:100%;
border:1px solid var(--border);
border-radius:var(--radius-md);
background:var(--input);
color:var(--text);
box-sizing:border-box;
transition:border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

input{
min-height:44px;
padding:0 14px;
}

input[type="date"]{
height:44px;
-webkit-appearance:none;
appearance:none;
}

select{
min-height:44px;
padding:0 40px 0 14px;
cursor:pointer;
-webkit-appearance:none;
appearance:none;
background-color:var(--input);
background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 14px center;
background-size:16px;
}

textarea,
.textarea,
.jsonOutput{
min-height:180px;
padding:14px;
}

textarea,
.textarea,
.jsonOutput,
.copyField input,
.colorCodeInput{
font-family:var(--font-mono);
font-size:0.875rem;
line-height:1.5;
}

input:hover,
select:hover,
textarea:hover,
.textarea:hover,
.jsonOutput:hover{
background:var(--input-hover);
}

input:focus,
select:focus,
textarea:focus,
.textarea:focus{
outline:none;
border-color:var(--border-accent);
background:#141414;
box-shadow:0 0 0 3px rgba(62,207,142,0.08);
}

select option:disabled{
color:var(--muted);
}

.toggleSwitch{
display:inline-flex;
align-items:center;
gap:12px;
cursor:pointer;
color:var(--muted-strong);
}

.toggleSwitch input{
display:none;
}

.toggleSlider{
position:relative;
width:48px;
height:26px;
background:var(--surface-muted);
border:1px solid var(--border);
border-radius:var(--radius-pill);
transition:background .2s ease, border-color .2s ease;
}

.toggleSlider::before{
content:"";
position:absolute;
top:2px;
left:2px;
width:20px;
height:20px;
border-radius:999px;
background:var(--text);
transition:transform .2s ease;
}

.toggleSwitch input:checked + .toggleSlider{
background:var(--primary-soft);
border-color:var(--border-accent);
}

.toggleSwitch input:checked + .toggleSlider::before{
transform:translateX(22px);
}

.toggleLabel{
font-size:0.875rem;
color:var(--text);
}

.copyField{
display:flex;
align-items:stretch;
margin-top:8px;
}

.copyField input{
flex:1;
border-radius:var(--radius-md) 0 0 var(--radius-md);
border-right:none;
}

.copyIconBtn{
width:48px;
border:1px solid var(--border);
border-radius:0 var(--radius-md) var(--radius-md) 0;
background:var(--bg-deep);
color:var(--text);
cursor:pointer;
}

.copyIconBtn:hover{
background:#141414;
border-color:var(--border-strong);
}

.copyIconBtn.success{
color:var(--success);
}

.jsonOutput,
.code-output{
margin-top:8px;
white-space:pre-wrap;
word-break:break-word;
min-height:180px;
overflow:auto;
}

.jsonOutput.error,
.code-output.error{
border-color:rgba(248,113,113,0.4);
color:#fecaca;
}

.jsonOutput.success,
.code-output.success{
border-color:var(--border-accent);
}

.resultBox{
display:flex;
flex-direction:column;
gap:10px;
text-align:center;
}

.resultValue{
font-size:clamp(2.5rem, 6vw, 4rem);
line-height:1;
font-weight:500;
font-variant-numeric:tabular-nums;
}

.resultLabel,
.resultStatus,
.resultExtra{
font-size:0.9375rem;
line-height:1.5;
color:var(--muted-strong);
}

.result-grid,
.statsGrid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:12px;
}

.stat-card,
.statBox,
.cardStat{
display:flex;
flex-direction:column;
gap:4px;
justify-content:center;
}

.statLabel{
font-family:var(--font-mono);
font-size:0.75rem;
line-height:1.33;
letter-spacing:1.2px;
text-transform:uppercase;
color:var(--muted);
}

.statValue{
font-size:1.5rem;
line-height:1.2;
font-weight:500;
font-variant-numeric:tabular-nums;
}

.guideSelector{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:8px;
}

.automationGuide{
display:flex;
flex-direction:column;
gap:20px;
}

.step{
display:flex;
gap:16px;
align-items:flex-start;
}

.stepNumber{
width:32px;
height:32px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
border:1px solid var(--border-accent);
border-radius:8px;
background:var(--primary-soft);
color:var(--text);
font-family:var(--font-mono);
font-size:0.75rem;
letter-spacing:1.2px;
}

.stepContent{
display:flex;
flex-direction:column;
gap:10px;
flex:1;
}

.stepContent h3{
font-size:1.125rem;
line-height:1.56;
}

.guideBox{
padding:16px;
border:1px solid var(--border);
border-radius:12px;
background:var(--surface-muted);
line-height:1.6;
color:var(--muted-strong);
}

.importantBox,
.notice{
padding:16px;
border:1px solid var(--border-accent);
border-radius:12px;
background:rgba(62,207,142,0.08);
color:var(--text-soft);
font-size:0.875rem;
line-height:1.6;
}

.guideList{
margin-top:8px;
}

.previewBox{
min-height:220px;
overflow:hidden;
border:1px solid var(--border);
border-radius:var(--radius-lg);
background:var(--bg-deep);
}

.previewBox img{
width:100%;
}

.previewLoading{
opacity:0.4;
}

.paceCard{
width:100%;
margin:0;
}

.paceGrid{
display:grid;
gap:20px;
}

.paceGroup{
display:flex;
flex-direction:column;
gap:8px;
}

.paceGroupFull{
grid-column:1 / -1;
}

.customDistance,
.timeInputs,
.paceInputs{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}

.customDistance{
margin-top:10px;
}

.customDistance input{
flex:1;
}

.customDistance select{
width:96px;
}

.timeInputs input,
.paceInputs input{
width:72px;
text-align:center;
}


.colon{
font-family:var(--font-mono);
color:var(--muted);
}

.unit{
font-size:0.875rem;
color:var(--muted);
}

.colorGrid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:14px;
}

.colorField{
display:flex;
flex-direction:column;
gap:8px;
}

.colorControl{
display:grid;
grid-template-columns:minmax(0, 1fr) 52px;
gap:10px;
align-items:center;
}

.colorCodeInput{
width:100%;
min-height:52px;
padding:0 14px;
text-transform:uppercase;
}

.colorCodeInput.isInvalid{
border-color:rgba(248,113,113,0.4);
box-shadow:0 0 0 3px rgba(248,113,113,0.08);
}

.colorPickerInput{
width:52px;
height:52px;
padding:4px;
border-radius:12px;
border:1px solid var(--border);
background:var(--input);
cursor:pointer;
}

.colorPickerInput::-webkit-color-swatch-wrapper{
padding:0;
}

.colorPickerInput::-webkit-color-swatch,
.colorPickerInput::-moz-color-swatch{
border:none;
border-radius:8px;
}

.listContainer{
max-height:220px;
overflow-y:auto;
padding-right:4px;
scrollbar-width:thin;
scrollbar-color:var(--border-strong) transparent;
}

.listContainer::-webkit-scrollbar{
width:10px;
}

.listContainer::-webkit-scrollbar-track{
background:transparent;
}

.listContainer::-webkit-scrollbar-thumb{
background:rgba(154, 154, 154, 0.36);
border:2px solid transparent;
border-radius:999px;
background-clip:padding-box;
}

.listContainer::-webkit-scrollbar-thumb:hover{
background:rgba(154, 154, 154, 0.56);
border:2px solid transparent;
background-clip:padding-box;
}

.listItem{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:10px 12px;
border:1px solid var(--border);
border-radius:12px;
background:var(--surface-muted);
}

.listItem + .listItem{
margin-top:8px;
}

.listItem button{
width:28px;
height:28px;
padding:0;
border:1px solid var(--border);
border-radius:999px;
background:var(--bg-deep);
color:var(--muted-strong);
cursor:pointer;
}

.listItem button:hover{
color:var(--text);
border-color:var(--border-strong);
}

.statusBadge,
.statusIndicator{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 16px;
border:1px solid var(--border-accent);
border-radius:var(--radius-pill);
background:rgba(62,207,142,0.08);
color:var(--success);
font-size:0.875rem;
font-weight:500;
}

.code-label{
font-size:0.75rem;
line-height:1.33;
letter-spacing:1.2px;
text-transform:uppercase;
color:var(--muted);
}

@media (min-width:600px){
.statsGrid,
.result-grid{
grid-template-columns:repeat(3, minmax(0, 1fr));
}

.paceGrid{
grid-template-columns:repeat(2, minmax(0, 1fr));
align-items:start;
}

.paceGrid .actionRow{
grid-column:1 / -1;
justify-content:flex-start;
}
}

@media (max-width:600px){
.formActions,
.actionRow,
.jsonActions{
flex-direction:column;
}

.formActions .btn,
.actionRow .btn,
.jsonActions .btn,
.guideSelector .btn{
width:100%;
}

.step{
gap:12px;
}

.customDistance,
.timeInputs,
.paceInputs{
flex-wrap:nowrap;
}

.timeInputs input,
.paceInputs input{
flex:1;
min-width:0;
width:0;
}

.colorGrid{
grid-template-columns:minmax(0, 1fr);
}

.colorControl{
grid-template-columns:minmax(0, 1fr) 44px;
gap:8px;
}

.colorPickerInput{
width:44px;
height:44px;
}

.colorCodeInput{
min-height:44px;
}
}