/* Hallmark · macrostructure: Workbench · tone: atmospheric precision · anchor hue: ember */
.settings-ambient { position: fixed; z-index: -1; pointer-events: none; inset: 0; background: radial-gradient(ellipse 65% 80% at -5% 50%, rgba(131,57,28,.23), transparent 80%); }
.settings-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: start; padding-block: var(--space-3xl) var(--space-4xl); min-height: calc(100dvh - 250px); }
.settings-intro h1 { font-size: clamp(46px, 4.5vw, 68px); line-height: 1.08; margin-bottom: var(--space-md); }
.settings-intro h1 em { color: var(--color-accent-text); display: inline-block; line-height: 1.15; padding-bottom: 4px; }
.settings-intro>p { font-size: var(--text-md); max-width: 38ch; margin-bottom: var(--space-xl); }
.key-principles { display: grid; gap: var(--space-lg); max-width: 430px; margin-bottom: var(--space-md); }
.key-principles>div { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-sm); }
.principle-symbol { font: 400 14px/1.5 var(--font-mono); color: var(--color-accent-text); }
.key-principles h2 { font-size: 18px; line-height: 1.3; margin-bottom: var(--space-2xs); letter-spacing: -.02em; }
.key-principles p { font-size: 13px; line-height: 1.8; margin: 0; }
.settings-panels { padding-top: var(--space-xs); min-width: 0; }
.settings-panel { padding: var(--space-lg); background: var(--color-paper-2); }
.panel-title { margin-bottom: var(--space-lg); }
.key-label { color: var(--color-muted); font: 400 10px/1.5 var(--font-mono); }
.settings-panel h2 { font-size: 28px; margin-block: var(--space-xs); }
.settings-panel p { font-size: var(--text-sm); line-height: 1.8; margin-bottom: var(--space-md); }
.settings-panel .state { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-well); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-muted-2); flex: none; }
.on .dot { background: var(--color-accent); box-shadow: 0 0 0 5px rgba(255,109,41,.08); }
.state b { font-size: 14px; font-weight: 500; }
.state .meta { display: block; font-size: 11px; color: var(--color-muted); margin-top: var(--space-3xs); overflow-wrap: anywhere; }
.settings-panel input { height: 52px; border-color: #6e615b; font-family: var(--font-mono); font-size: 13px; }
.settings-panel .input-help { font-size: 11px; margin-top: var(--space-2xs); margin-bottom: var(--space-md); }
.settings-panel .btn.solid { width: 100%; justify-content: space-between; margin-top: var(--space-md); }
#youForm .btn.solid { margin-top: 0; }
.row { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.row .btn { flex: 1; font-size: 12px; padding-inline: var(--space-sm); }
.btn.danger { color: var(--color-error); border-color: rgba(242,140,132,.35); }
.msg { color: var(--color-muted); font-size: 12px; min-height: 20px; margin-top: var(--space-sm); overflow-wrap: anywhere; }
.msg.ok { color: var(--color-positive); }
.settings-footnote { border-top: 1px solid var(--color-rule); padding-top: var(--space-md); color: var(--color-muted); font-size: 11px; line-height: 1.8; margin-top: var(--space-xs); }
.owner-entry { display: flex; justify-content: center; padding: var(--space-md); }
.owner-link { border: 0; background: none; color: var(--color-muted); min-height: 44px; font-size: 11px; padding-inline: var(--space-xs); }
.owner-link>span { color: var(--color-accent-text); margin-left: var(--space-2xs); }
.owner-actions { margin-top: var(--space-md); }
.footer-identity { font-size: 16px; letter-spacing: -.025em; }
@media (max-width: 1024px) { .settings-layout { gap: var(--space-xl); padding-top: 80px; } .settings-panel { padding: var(--space-md); } }
@media (max-width: 768px) { .settings-layout { grid-template-columns: 1fr; padding-block: var(--space-xl) 80px; gap: var(--space-lg); } .settings-intro h1 { font-size: 54px; } .settings-intro>p { margin-bottom: var(--space-lg); font-size: 16px; max-width: 42ch; } .key-principles { display: none; } .settings-intro>.text-link { display: none; } .settings-panels { padding-top: 0; } .settings-panel { padding: var(--space-lg); } }
@media (max-width: 420px) { .settings-panel { padding: var(--space-md); } .settings-intro h1 { font-size: 49px; } .settings-panel .state { padding: var(--space-sm); } .row { flex-direction: column; } .settings-panel h2 { font-size: 25px; } .panel-title { margin-bottom: var(--space-md); } }