.appearance-bar-actions { display:flex; align-items:center; gap:7px; flex:0 0 auto; }
#appearanceOpen,#appearanceClose { display:grid; place-items:center; padding:0; width:36px; height:36px; background:var(--surface); border:1px solid var(--line); color:var(--ink); border-radius:8px; }
#appearanceOpen .ui-icon,#appearanceClose .ui-icon { width:17px; height:17px; }
#appearanceOpen:hover,#appearanceClose:hover { background:var(--tint); border-color:var(--focus); }
body #appearanceDialog { width:min(450px,calc(100vw - 24px)); max-height:min(88dvh,700px); padding:0; overflow:auto; overscroll-behavior:contain; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 78px #0004; }
#appearanceDialog .ap-heading { position:relative; padding:23px 52px 18px 24px; }
.ap-kicker,.ap-sample>label { color:var(--muted); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.10em; }
#appearanceDialog h2 { margin:5px 0 3px; font-size:27px; line-height:1.18; font-weight:650; letter-spacing:-.035em; }
#appearanceDialog p,.ap-font-toggle small,.ap-sample small { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
#appearanceClose { position:absolute; top:16px; right:17px; width:30px; height:30px; }
.ap-modes { min-width:0; padding:0 24px 18px; border:0; margin:0; }
.ap-modes legend { float:none; padding:0 0 7px; margin:0; color:var(--ink); font-size:14px; font-weight:650; }
.ap-mode-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.ap-mode-options label { display:grid; gap:8px; min-width:0; padding:8px; border:1px solid var(--line); border-radius:10px; background:var(--surface); cursor:pointer; }
.ap-mode-options label:has(:checked) { border-color:var(--accent); background:var(--tint); box-shadow:inset 0 0 0 1px var(--accent); }
.ap-mode-options label:focus-within,.ap-sample:focus-within { outline:2px solid var(--focus); outline-offset:2px; }
.ap-choice { display:flex; gap:6px; align-items:center; font-size:12px; font-weight:600; color:var(--ink); white-space:nowrap; }
.ap-choice input,.ap-font-toggle input { width:14px; height:14px; padding:0; margin:0; flex:0 0 auto; accent-color:var(--accent); }
.ap-swatch { display:block; position:relative; height:34px; border-radius:5px; border:1px solid #27343330; background:linear-gradient(90deg,#254639 20%,#f4f5ee 20%); }
.ap-swatch::before {content:'';position:absolute;left:28%;top:25%;height:13%;width:30%;border-radius:2px;background:#345747;}
.ap-swatch::after {content:'';position:absolute;left:28%;top:51%;height:26%;width:61%;border-radius:2px;background:linear-gradient(to right,#cbd6c7 47%,transparent 47% 53%,#cbd6c7 53%);}
.ap-swatch-dark { background:linear-gradient(90deg,#151517 20%,#2d2d32 20%);border-color:#42434a; }
.ap-swatch-dark::before { background:#ffac75; }
.ap-swatch-dark::after { background:linear-gradient(to right,#57545b 47%,transparent 47% 53%,#57545b 53%); }
.ap-swatch-system { background:linear-gradient(100deg,#254639 20%,#f4f5ee 20% 54%,#2d2d32 55%); }
.ap-swatch-system::before {background:linear-gradient(100deg,#345747 88%,#ffac75 89%);}
.ap-swatch-system::after {background:linear-gradient(to right,#cbd6c7 43%,transparent 43% 53%,#7e7471 53%);}
.ap-modes p.ap-hint { margin-top:8px; }
.ap-type { border-top:1px solid var(--line); padding:16px 24px 20px; }
.ap-font-toggle {display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer;}
.ap-font-toggle strong,.ap-font-toggle small,.ap-sample small,.ap-sample>label {display:block;}
.ap-font-toggle input { width:18px;height:18px; }
.ap-sample {margin-top:12px; border:1px solid var(--line); border-radius:9px; background:var(--paper); padding:11px 12px;}
#appearanceSample {display:block; width:100%; background:transparent; color:var(--ink); border:0; border-radius:0; box-shadow:none; outline:none; padding:4px 0; font-size:21px; font-weight:620; line-height:1.4; letter-spacing:-.025em;}
.ap-sample small { font-size:11px; }
#appearanceDialog footer { display:flex; align-items:center; justify-content:space-between; gap:9px; padding:12px 24px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
#appearanceDone { flex:0 0 auto; }
@media(max-width:520px) { .appearance-bar-actions {gap:5px;} #appearanceOpen{width:34px;height:34px;} #appearanceDialog .ap-heading{padding-left:16px;} .ap-modes,.ap-type,#appearanceDialog footer{padding-left:16px;padding-right:16px;}.ap-mode-options {gap:5px;}.ap-mode-options label {padding:6px;}.ap-choice{gap:4px;} }