:root{
  --accent-50:#eefdf4; --accent-100:#d6f7e4; --accent-200:#a9edc7; --accent-300:#79e2a8; --accent-400:#44cf86; --accent-500:#16b673; --accent-600:#0b9a63; --accent-700:#087a50; --accent-800:#085f40; --accent-900:#064e36;
  --bg: #0b0e11;
  --surface: #11151a;
  --muted: #8b97a6;
  --text: #e6ebf2;
  --text-weak:#b8c2ce;
  --line: rgba(255,255,255,.08);
  --ring: color-mix(in oklab, var(--accent-500) 40%, transparent);
  --shadow: 0 2px 8px rgba(0,0,0,.25), 0 8px 32px rgba(0,0,0,.35);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --space-1: .25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

@media (prefers-color-scheme: light){
  :root{ --bg:#fafbfc; --surface:#ffffff; --muted:#5b6675; --text:#0e141b; --text-weak:#3b4654; --line: rgba(10,15,20,.09); --shadow: 0 1px 2px rgba(16,24,40,.06), 0 12px 24px rgba(16,24,40,.06);}  
}

[data-theme="light"]{ --bg:#fafbfc; --surface:#ffffff; --muted:#5b6675; --text:#0e141b; --text-weak:#3b4654; --line: rgba(10,15,20,.09); --shadow: 0 1px 2px rgba(16,24,40,.06), 0 12px 24px rgba(16,24,40,.06);}  

[data-theme="dark"]{ --bg:#0b0e11; --surface:#11151a; --muted:#8b97a6; --text:#e6ebf2; --text-weak:#b8c2ce; --line: rgba(255,255,255,.08); --shadow: 0 2px 8px rgba(0,0,0,.25), 0 8px 32px rgba(0,0,0,.35);}  

*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color:var(--text); background: var(--bg); line-height:1.6 }

a{ color:inherit }
.wrap{ max-width: 1400px; margin:0 auto; padding:0 var(--space-4) var(--space-16) }

.sitebar{ display:flex; gap:var(--space-4); align-items:center; justify-content:space-between; padding:var(--space-4) 0 }
.brand{ display:flex; align-items:center; gap:.75rem }
.logo{ width:32px; height:32px; border-radius:10px; background: linear-gradient(145deg, var(--accent-600), var(--accent-500)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 6px 14px color-mix(in oklab, var(--accent-600) 30%, transparent) }
.brand h1{ font-size:1rem; font-weight:700; letter-spacing:.02em }
.brand small{ display:block; font-weight:500; color:var(--muted); letter-spacing:.02em }

.hdr-actions{ display:flex; gap:.5rem; align-items:center }
select.select{
	appearance:none; -webkit-appearance:none; -moz-appearance:none;
	height:40px; border:1px solid var(--line); border-radius:12px;
	background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, transparent), color-mix(in oklab, var(--surface) 100%, transparent));
	color: var(--text);
	padding: 0 34px 0 36px; cursor: pointer;
	box-shadow: var(--shadow);
	transition: border-color .2s ease, box-shadow .2s ease, filter .15s ease;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat;
	background-position: 10px center, right 10px center;
	background-size: 18px, 12px;
}
select.select:hover{ filter: brightness(1.05); }
select.select:focus{ outline: none; border-color: color-mix(in oklab, var(--accent-500) 35%, var(--line)); box-shadow: 0 0 0 5px var(--ring); }

.pill{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border:1px solid var(--line); border-radius:999px; background:color-mix(in oklab, var(--surface) 90%, transparent); box-shadow: var(--shadow) }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; height:40px; padding:0 14px; border-radius:12px; border:1px solid var(--line); background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 90%, transparent), color-mix(in oklab, var(--surface) 100%, transparent)); cursor:pointer; transition: transform .08s ease, border-color .2s ease, box-shadow .2s ease }
.btn:active{ transform: translateY(1px) }
.btn.primary{ border-color: color-mix(in oklab, var(--accent-500) 25%, var(--line)); background: linear-gradient(180deg, color-mix(in oklab, var(--accent-500) 18%, var(--surface)), color-mix(in oklab, var(--accent-600) 22%, var(--surface))); color:white; box-shadow: 0 6px 20px color-mix(in oklab, var(--accent-600) 28%, transparent) }
.btn.ghost{ background:transparent }
.btn svg{ width:18px; height:18px }

.hero{ position:relative; margin-top:var(--space-6); border-radius:var(--radius-lg); padding:var(--space-12) var(--space-10); background:linear-gradient(135deg, color-mix(in oklab, var(--accent-500) 10%, var(--surface)), var(--surface)); box-shadow: var(--shadow); overflow:hidden }
.hero::after{ content:""; position:absolute; inset:auto -20% -40% -20%; height:280px; background: radial-gradient(60% 80% at 50% 50%, color-mix(in oklab, var(--accent-500) 18%, transparent), transparent 70%); filter: blur(40px); opacity:.7; pointer-events:none }
.eyebrow{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.title{ font-size: clamp(2rem, 4.6vw, 3.25rem); font-weight:800; letter-spacing:-.02em; margin:.25rem 0 .5rem }
.subtitle{ color:var(--text-weak); max-width:60ch }

.grid{ display:grid; grid-template-columns: 1fr 0.6fr; gap: var(--space-4); margin-top: var(--space-10) }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); max-width: none; }
@container (max-width: 1400px){ .wrap{ max-width: 100vw; } }
@container (max-width: 920px){ .grid{ grid-template-columns: 1fr } }
@media (max-width: 960px){ .grid{ grid-template-columns:1fr } }

.panel{ background:var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow) }
.panel .head{ display:flex; justify-content:space-between; align-items:center; padding: var(--space-6) var(--space-6) var(--space-4) var(--space-6); border-bottom:1px solid var(--line) }

.form{ padding: var(--space-8) }
.section{ padding: var(--space-6) 0; border-top:1px dashed var(--line) }
.section:first-child{ border-top: 0 }
.section h3{ font-size:1.125rem; font-weight:700; letter-spacing:.01em; margin:0 0 var(--space-4); display:flex; align-items:center; gap:.5rem }
.section h3 .dot{ width:12px; height:12px; border-radius:999px; background:var(--accent-500); box-shadow:0 0 0 3px color-mix(in oklab, var(--accent-500) 18%, transparent) }

.grid-fields{ display:grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6) }
.col-6{ grid-column: span 6 }
.col-12{ grid-column: span 12 }
@media (max-width: 720px){ .col-6{ grid-column: span 12 } }

label{ font-size:.875rem; color:var(--muted); margin-bottom:.5rem; display:flex; align-items:center; gap:.35rem }
.req{ color: var(--accent-500); font-weight: 700; }

input[type="text"], input[type="password"], input[type="url"], input[type="number"], textarea{
  width:100%; border:1px solid var(--line); background: color-mix(in oklab, var(--surface) 92%, transparent); color:var(--text);
  padding: 16px 18px; border-radius: 12px; outline: none; font-size:1rem; transition: box-shadow .2s, border-color .2s, background .2s;
}
textarea{ min-height:100px; resize: vertical; font-family: inherit }
input:focus, textarea:focus{ border-color: color-mix(in oklab, var(--accent-500) 40%, var(--line)); box-shadow: 0 0 0 5px var(--ring) }
.help{ font-size:.8125rem; color:var(--muted); margin-top:.5rem }

.toolbar{ display:flex; gap:.5rem; align-items:center }
.sep{ width:1px; height:28px; background:var(--line) }
.switch{ display:inline-grid; grid-auto-flow:column; align-items:center; gap:.5rem }
.switch input{ position:absolute; opacity:0; pointer-events:none }
.toggle{ --w: 44px; --h: 26px; width:var(--w); height:var(--h); border-radius:999px; display:inline-grid; align-items:center; padding:3px; background:color-mix(in oklab, var(--surface) 80%, transparent); border:1px solid var(--line); position:relative; transition:.2s }
.knob{ width:20px; height:20px; border-radius:999px; background:white; translate: 0 0; transition: translate .2s; box-shadow: 0 1px 4px rgba(0,0,0,.25) }
.toggle[data-on="true"]{ background: color-mix(in oklab, var(--accent-500) 20%, var(--surface)); border-color: color-mix(in oklab, var(--accent-500) 30%, var(--line)) }
.toggle[data-on="true"] .knob{ translate: calc(var(--w) - var(--h)) 0 }

.preview{
  display: flex;
  flex-direction: column;
  max-width: 600px;
}
.preview pre{ 
  flex: none; 
  overflow: visible; 
  margin:0; 
  padding: var(--space-6) var(--space-6); 
  background:#0b1020; 
  color:#e5ecff; 
  font: 13px/1.55 var(--mono); 
  border-top:1px solid var(--line); 
  user-select: none; 
  -webkit-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
}
.preview .actions{ display:flex; gap:.5rem; padding: var(--space-4); justify-content:space-between; align-items:center }
.badge{ display:inline-flex; align-items:center; gap:.35rem; font-size:.75rem; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:.25rem .5rem }
.note{ margin: var(--space-3) 0 0; font-size:.85rem; color:var(--muted) }

.config-stats {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  border: 1px solid var(--line);
}

.stat-item svg {
  opacity: 0.7;
}

.preview-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 95%, transparent);
}

.quick-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-ghost:hover {
  background: color-mix(in oklab, var(--accent-500) 8%, var(--surface));
  border-color: color-mix(in oklab, var(--accent-500) 25%, var(--line));
  color: var(--accent-500);
  transform: translateY(-1px);
}

.btn-ghost:active {
  transform: translateY(0);
}

.btn-ghost svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  color: currentColor;
  stroke: currentColor;
}

.btn-ghost:hover svg {
  opacity: 0.8;
}

/* 深色主題下的圖標樣式 */
[data-theme="dark"] .btn-ghost svg {
  opacity: 0.5;
}

[data-theme="dark"] .btn-ghost:hover svg {
  opacity: 0.7;
}

/* 淺色主題下的圖標樣式 */
[data-theme="light"] .btn-ghost svg {
  opacity: 0.7;
}

[data-theme="light"] .btn-ghost:hover svg {
  opacity: 0.9;
}

/* 分隔線樣式 */
.divider {
  height: 1px;
  background: var(--line);
  margin: 1.5rem 0;
  opacity: 0.6;
}

/* 外部連結區域樣式 */
.external-links {
  text-align: center;
}

.links-title {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 1rem;
  font-weight: 500;
}

.links-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background: color-mix(in oklab, var(--accent-500) 4%, var(--surface));
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
  color: var(--text);
}

.link-card:hover {
  background: color-mix(in oklab, var(--accent-500) 8%, var(--surface));
  border-color: color-mix(in oklab, var(--accent-500) 25%, var(--line));
  transform: translateY(-2px);
  box-shadow: 0 4px 16px color-mix(in oklab, var(--accent-500) 15%, transparent);
}

.link-name {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
  color: var(--accent-500);
}

.link-url {
  font-size: 0.8rem;
  color: var(--muted);
  font-family: var(--mono);
}

.foot{ margin-top: var(--space-8); color:var(--muted); font-size:.85rem }

.kbd{ font: 12px var(--mono); background: color-mix(in oklab, var(--surface) 90%, transparent); border:1px solid var(--line); padding:.15rem .35rem; border-radius:6px } 

.btn#resetBtn {
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--line);
}
[data-theme="dark"] .btn#resetBtn {
  color: #fff;
  background: var(--surface);
  border: 1.5px solid var(--line);
}
[data-theme="light"] .btn#resetBtn {
  color: #222;
  background: var(--surface);
  border: 1.5px solid var(--line);
} 
[data-theme="light"] .btn.primary {
  color: var(--text);
} 
.btn.primary:hover {
  filter: brightness(1.08);
  transform: scale(1.045);
  box-shadow: 0 8px 28px color-mix(in oklab, var(--accent-600) 38%, transparent);
} 

.toggle-group{
  display:flex;
  width:100%;
}
.toggle-group .btn{
	flex:1 1 50%;
	height: 48px;
	border:1px solid var(--line);
	background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, transparent), color-mix(in oklab, var(--surface) 100%, transparent));
	border-radius:0;
	color: var(--text);
	font-weight: 600;
}
.toggle-group .btn:first-child{ border-top-left-radius:12px; border-bottom-left-radius:12px }
.toggle-group .btn:last-child{ border-top-right-radius:12px; border-bottom-right-radius:12px; margin-left:-1px }
.toggle-group .btn.primary{ border-color: color-mix(in oklab, var(--accent-500) 25%, var(--line)); background: linear-gradient(180deg, color-mix(in oklab, var(--accent-500) 18%, var(--surface)), color-mix(in oklab, var(--accent-600) 22%, var(--surface))); color:white }

[data-theme="light"] .toggle-group .btn.primary{
	color: var(--text);
	background: linear-gradient(180deg, color-mix(in oklab, var(--accent-500) 12%, var(--surface)), color-mix(in oklab, var(--accent-600) 14%, var(--surface)));
}

.yaml-highlight {
  background: color-mix(in oklab, var(--accent-500) 18%, var(--surface));
  border-radius: 8px;
  transition: background 0.2s;
  color: #fff;
} 

#yamlOut {
  white-space: pre;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.5;
  padding: var(--space-6);
  overflow-x: auto;
  background: color-mix(in oklab, var(--surface) 95%, transparent);
  border-radius: 12px;
  margin: 0;
}

#yamlOut span {
  display: inline-block;
  white-space: pre;
} 
[data-theme="light"] .preview pre {
  background: #f5f7fa;
  color: #23272f;
  border-top: 1px solid var(--line);
} 

.lang{ position:relative; z-index: 40 }
.lang-btn{
	height:40px; display:grid; grid-template-columns: 18px auto 12px; align-items:center; justify-items:center; column-gap:.5rem;
	padding:0 12px; border-radius:12px; border:1px solid color-mix(in oklab, var(--line) 70%, transparent);
	background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, transparent), color-mix(in oklab, var(--surface) 100%, transparent));
	color: var(--text); cursor:pointer; box-shadow: var(--shadow);
	transition: border-color .2s ease, box-shadow .2s ease, filter .15s ease;
}
.lang-btn:hover{ filter:brightness(1.06) }
.lang-btn:focus{ outline:none; border-color: color-mix(in oklab, var(--accent-500) 35%, var(--line)); box-shadow: 0 0 0 5px var(--ring) }
.lang .label{ text-align:center }
.lang .globe{ width:18px; height:18px; display:inline-block; opacity:.95; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") no-repeat center / contain; }
.lang .chev{ width:12px; height:12px; display:inline-block; opacity:.85; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain; }
.lang-menu{
	position:absolute; right:0; left:0; top:calc(100% + 8px); padding:6px; margin:0; list-style:none;
	background: color-mix(in oklab, var(--surface) 96%, transparent); border:1px solid color-mix(in oklab, var(--line) 70%, transparent); border-radius:14px;
	box-shadow: 0 12px 32px rgba(0,0,0,.38);
	display:none; z-index: 50;
}
.lang.open .lang-menu{ display:block; animation: langIn .12s ease-out }
@keyframes langIn{ from{ opacity:0; transform: translateY(-4px) scale(.98) } to{ opacity:1; transform: translateY(0) scale(1) } }
.lang-menu li{
	padding:10px 12px; border-radius:10px; cursor:pointer; color: var(--text);
	white-space:nowrap; display:flex; align-items:center; justify-content:center; text-align:center;
}
.lang-menu li[aria-selected="true"]{
	background: color-mix(in oklab, var(--accent-500) 18%, var(--surface));
	box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent-500) 30%, transparent);
}
.lang-menu li:hover{ background: color-mix(in oklab, var(--accent-500) 12%, var(--surface)) } 

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.btn-icon:hover {
  background: color-mix(in oklab, var(--accent-500) 10%, var(--surface));
  border-color: color-mix(in oklab, var(--accent-500) 30%, var(--line));
  color: var(--accent-500);
  transform: translateY(-1px);
}

.btn-icon:active {
  transform: translateY(0);
}

.btn-icon svg {
  width: 16px;
  height: 16px;
} 

.callout{
  margin: var(--space-2) var(--space-8) var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, transparent), color-mix(in oklab, var(--surface) 100%, transparent));
  box-shadow: var(--shadow);
  color: var(--text);
}
.callout-title{
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--accent-500);
}
.callout p{ margin: .5rem 0 0; color: var(--text-weak); }

.hero{ margin-top: var(--space-2); }
.grid{ margin-top: var(--space-5); }
.form{ padding-top: var(--space-6); }

.actions-bottom{
  display:flex;
  justify-content:flex-end;
  gap:.5rem;
  padding: 0 var(--space-8) var(--space-8);
  margin-top: var(--space-4);
}

.upload-bar{
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  border:1.5px dashed var(--line);
  border-radius: 12px;
  background: color-mix(in oklab, var(--surface) 98%, transparent);
  text-align: center;
  overflow-x: auto;
}
.upload-inner{ display:flex; align-items:center; justify-content:center; gap:.75rem; padding:.75rem 1rem; flex-wrap: nowrap; white-space: nowrap; }
.upload-icon{ opacity:.8; }
.upload-text{ display:flex; align-items:center; gap:.5rem; white-space: nowrap; }
.upload-title{ font-weight:600; color: var(--text); white-space: nowrap; }
.upload-or{ color:var(--muted); font-size:.9em; white-space: nowrap; }
.upload-bar.dragover{ outline:2px solid var(--ring); outline-offset:2px; }
.upload-bar:hover{ border-color: color-mix(in oklab, var(--accent-500) 45%, var(--line)); }

.upload-bar .btn{ color: var(--text); white-space: nowrap; }
[data-theme="dark"] .upload-bar .btn{ color:#fff; }
[data-theme="light"] .upload-bar .btn{ color:#000; }
.upload-bar .btn:hover{ background: color-mix(in oklab, var(--accent-500) 12%, var(--surface)); border-color: color-mix(in oklab, var(--accent-500) 35%, var(--line)); box-shadow: 0 4px 14px color-mix(in oklab, var(--accent-500) 18%, transparent); transform: translateY(-1px); }
.upload-bar .btn:focus-visible{ outline:none; box-shadow: 0 0 0 5px var(--ring); border-color: color-mix(in oklab, var(--accent-500) 40%, var(--line)); }