/* KMind 宇宙交互 V17 · the skin button and the skin panel (src/skins/skins.js). Colours come from the skin's own variables. */
.km-skin-btn .km-skin-ic{display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.km-skin-btn:hover .km-skin-ic,.km-skin-btn[aria-expanded="true"] .km-skin-ic{transform:rotate(-24deg)}
.km-skin-btn[aria-expanded="true"]{color:var(--k-acc)}
.km-skins{position:fixed;z-index:1200;width:296px;padding:12px 12px 8px;border-radius:14px;color:var(--k-ink);font:12px/1.4 var(--font);
  background:var(--cz-solid,rgba(var(--k-bg-rgb),.975));box-shadow:0 0 34px 18px var(--cz-halo,rgba(var(--k-bg-rgb),.6)),0 18px 40px rgba(var(--k-sh),.12);
  animation:km-skins-in .18s ease-out}
.km-skins[hidden]{display:none}
@keyframes km-skins-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.km-skin-head{display:flex;align-items:baseline;gap:8px;padding:0 4px 10px}
.km-skin-head b{font-size:13px;font-weight:650;color:var(--k-ink)}
.km-skin-head span{font-size:10px;letter-spacing:.14em;color:var(--k-dim)}
.km-skin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.km-skin-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px 9px;border:0;border-radius:12px;background:transparent;
  color:var(--k-ink2);font:inherit;cursor:pointer;transition:background .15s,color .15s}
.km-skin-tile svg{display:block;transition:transform .35s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 4px 10px rgba(var(--k-sh),.16))}
.km-skin-tile:hover{background:radial-gradient(ellipse 80% 70% at 50% 40%,rgba(var(--k-acc-rgb),.1),transparent 80%);color:var(--k-ink)}
.km-skin-tile:hover svg{transform:rotate(-10deg) scale(1.05)}
.km-skin-tile b{font-weight:560;font-size:12px}
.km-skin-tile.on{background:radial-gradient(ellipse 85% 75% at 50% 40%,rgba(var(--k-acc-rgb),.16),transparent 82%);color:var(--k-acc)}
.km-skin-tile.on::after{content:"";position:absolute;inset:2px;pointer-events:none;opacity:.8;--t:rgba(var(--k-acc-rgb),.75);
  background:linear-gradient(var(--t),var(--t)) 0 0/8px 1px no-repeat,linear-gradient(var(--t),var(--t)) 0 0/1px 8px no-repeat,
    linear-gradient(var(--t),var(--t)) 100% 0/8px 1px no-repeat,linear-gradient(var(--t),var(--t)) 100% 0/1px 8px no-repeat,
    linear-gradient(var(--t),var(--t)) 0 100%/8px 1px no-repeat,linear-gradient(var(--t),var(--t)) 0 100%/1px 8px no-repeat,
    linear-gradient(var(--t),var(--t)) 100% 100%/8px 1px no-repeat,linear-gradient(var(--t),var(--t)) 100% 100%/1px 8px no-repeat}
.km-skin-on{position:absolute;top:8px;right:10px;width:6px;height:6px;border-radius:50%;background:var(--k-acc);box-shadow:0 0 8px rgba(var(--k-acc-rgb),.8)}
.km-skin-add{color:var(--k-dim)}
.km-skin-plus{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px dashed rgba(var(--k-acc-rgb),.42);font-size:20px;font-weight:300;
  color:var(--k-acc);transition:transform .25s,border-color .15s}
.km-skin-add:hover .km-skin-plus{transform:rotate(90deg);border-color:var(--k-acc)}
.km-skin-fx{display:flex;align-items:center;gap:7px;width:100%;margin-top:8px;padding:9px 6px 3px;border:0;background:var(--cz-rule-soft) top/100% 1px no-repeat;
  color:var(--k-ink2);font:inherit;cursor:pointer}
.km-skin-fx:hover{color:var(--k-acc)}
.km-skin-fx svg{flex:none}
.km-skin-tile:focus-visible,.km-skin-fx:focus-visible{outline:2px solid var(--k-acc);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.km-skins,.km-skin-tile svg,.km-skin-ic,.km-skin-plus{animation:none;transition:none}}

/* ---------- V17 · 视觉效果: what each effect switched off does to the page (src/kmind/fx.js puts fx-off-<id> on body) ---------- */
body.fx-off-ui *,body.fx-off-ui *::before,body.fx-off-ui *::after{animation-duration:0s!important;animation-delay:0s!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
body.fx-off-uiGlow{--cz-glow:transparent!important;--hud-glow:transparent!important}
body.fx-off-uiGlow #kmu *,body.fx-off-uiGlow .km-skins *{text-shadow:none!important}
body.fx-off-uiGlow #kmu .kmu-pill.kmu-primary::before{display:none}
body.fx-off-blur *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.fx-off-edge #kmu-fade{display:none}
body.fx-off-frame #kmu::after{display:none}
body.fx-off-frame #kmu{--hud-ticks:none!important}
body.fx-off-en .km-en,body.fx-off-en .km-ow-en,body.fx-off-en .km-fx small,body.fx-off-en .km-skin-head span,body.fx-off-en .km-fx-head span{display:none!important}
body.fx-off-en #kmu .kmu-bar[data-cap]::before{display:none}
body.fx-off-badges #kmu .kmu-badge,body.fx-off-badges #kmu .kmu-dot{display:none!important}

/* ---------- V17 · 设置 › 外观: the skins and the effects ---------- */
.km-fx{margin:22px 0 4px;padding-top:16px;background:var(--cz-rule-soft,linear-gradient(90deg,transparent,rgba(var(--k-acc-rgb),.14),transparent)) top/100% 1px no-repeat}
.km-fx.km-fx-skins{margin:0 0 18px;padding-top:0;background:none}
.km-fx-head{display:flex;align-items:baseline;gap:8px;margin:0 0 10px}
.km-fx-head h3{margin:0;font-size:15px;font-weight:650}
.km-fx-head span,.km-fx small{font:500 9px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.16em;color:var(--k-dim);text-transform:uppercase}
.km-skin-chips{display:flex;flex-wrap:wrap;gap:8px}
.km-skin-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 8px;border:1px solid var(--k-line);border-radius:999px;background:transparent;color:var(--k-ink2);font:inherit;font-size:13px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.km-skin-chip i{width:20px;height:20px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 32%,#fff 0,var(--a) 45%,var(--g) 100%);box-shadow:inset 0 0 0 1px rgba(var(--k-sh),.12)}
.km-skin-chip i.plus{display:grid;place-items:center;background:none;border:1px dashed rgba(var(--k-acc-rgb),.5);box-shadow:none;font-style:normal;color:var(--k-acc);font-size:14px;line-height:1}
.km-skin-chip:hover{border-color:var(--k-acc);color:var(--k-acc)}
.km-skin-chip.on{border-color:var(--k-acc);color:var(--k-acc);background:rgba(var(--k-acc-rgb),.08);font-weight:600}
.km-skin-chip.km-skin-add{color:var(--k-dim);border-style:dashed}
.km-fx-pre{display:inline-flex;align-items:center;gap:2px;padding:3px;margin:0 0 12px;border-radius:999px;background:rgba(var(--k-acc-rgb),.06);box-shadow:inset 0 0 0 1px var(--k-line)}
.km-fx-pre button{height:28px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--k-ink2);font:inherit;font-size:13px;cursor:pointer;transition:background .15s,color .15s}
.km-fx-pre button:hover{color:var(--k-acc)}
.km-fx-pre button.on{background:var(--k-bg);color:var(--k-acc);font-weight:600;box-shadow:0 1px 4px rgba(var(--k-sh),.14),inset 0 0 0 1px rgba(var(--k-acc-rgb),.25)}
.km-fx-custom{padding:0 12px 0 8px;font-size:12px;color:var(--k-dim);opacity:.45}
.km-fx-custom.on{opacity:1;color:var(--k-amber)}
.km-fx-groups{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
@media (max-width:720px){.km-fx-groups{grid-template-columns:1fr}}
.km-fx-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 10px;border-radius:10px;background:rgba(var(--k-acc-rgb),.035);box-shadow:inset 0 0 0 1px rgba(var(--k-acc-rgb),.08)}
.km-fx-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:var(--k-acc);background:rgba(var(--k-acc-rgb),.08);flex:none}
.km-fx-name{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.km-fx-name b{font-size:13px;font-weight:600;color:var(--k-ink)}
.km-fx-n{font:500 11px/1 "JetBrains Mono",ui-monospace,monospace;color:var(--k-dim);flex:none}
.km-fx-sw{position:relative;display:inline-block;width:34px;height:20px;flex:none;cursor:pointer}
.km-fx-sw input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer;z-index:1}
.km-fx-sw i{position:absolute;inset:0;border-radius:999px;background:rgba(var(--k-sh),.16);transition:background .18s}
.km-fx-sw i::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.km-fx-sw input:checked+i{background:var(--k-acc)}
.km-fx-sw input:checked+i::after{transform:translateX(14px)}
.km-fx-sw input:indeterminate+i{background:rgba(var(--k-acc-rgb),.5)}
.km-fx-sw input:indeterminate+i::after{transform:translateX(7px)}
.km-fx-sw input:focus-visible+i{outline:2px solid var(--k-acc);outline-offset:2px}
.km-fx-detail{margin-top:12px}
.km-fx-detail summary{display:inline-flex;align-items:center;gap:7px;padding:6px 2px;color:var(--k-ink2);font-size:13px;cursor:pointer;list-style:none}
.km-fx-detail summary::-webkit-details-marker{display:none}
.km-fx-detail summary::after{content:"";width:6px;height:6px;margin-left:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .2s}
.km-fx-detail[open] summary::after{transform:rotate(45deg) translate(-2px,-1px)}
.km-fx-detail summary:hover{color:var(--k-acc)}
.km-fx-detail summary small{padding:2px 6px;border-radius:999px;background:rgba(var(--k-acc-rgb),.08);color:var(--k-acc);letter-spacing:0}
.km-fx-dgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px 22px;margin-top:8px}
.km-fx-dh{display:flex;align-items:baseline;gap:7px;padding-bottom:6px;margin-bottom:2px;font-size:12px;font-weight:650;color:var(--k-ink);background:var(--cz-rule-soft) bottom/100% 1px no-repeat}
.km-fx-item{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px;font-size:13px;color:var(--k-ink2)}

/* ---------- V17 · 语言: the language button opens a menu (src/kmind/langs.js), beside the skin button ---------- */
button.km-lang-btn{display:inline-flex;align-items:center;gap:4px;width:auto!important;min-width:0;padding:0 7px!important}
button.km-lang-btn>svg:first-child{flex:none;opacity:.85}
button.km-lang-btn .km-lang-caret{flex:none;opacity:.6;transition:transform .2s}
button.km-lang-btn[aria-expanded="true"]{color:var(--k-acc)}
button.km-lang-btn[aria-expanded="true"] .km-lang-caret{transform:rotate(180deg)}
.km-langs{width:236px}
.km-lang-list{display:flex;flex-direction:column;gap:2px;font:inherit;letter-spacing:0}
.km-lang-row{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border:0;border-radius:10px;background:transparent;color:var(--k-ink2);font:inherit;text-align:left;cursor:pointer;transition:background .15s,color .15s}
.km-lang-row:hover:not(:disabled),.km-lang-row:focus-visible{background:radial-gradient(ellipse 90% 90% at 20% 50%,rgba(var(--k-acc-rgb),.1),transparent 85%);color:var(--k-ink);outline:none}
.km-lang-row.on{color:var(--k-acc)}
.km-lang-row:disabled{opacity:.45;cursor:default}
.km-lang-glyph{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;font:600 13px/1 "Inter Tight","Plex SC",sans-serif;color:var(--k-acc);
  background:radial-gradient(circle at 35% 30%,rgba(var(--k-acc-rgb),.22),rgba(var(--k-acc-rgb),.06) 70%);box-shadow:inset 0 0 0 1px rgba(var(--k-acc-rgb),.22)}
.km-lang-row.on .km-lang-glyph{background:var(--k-acc);color:var(--k-on-acc);box-shadow:0 0 12px rgba(var(--k-acc-rgb),.45)}
.km-lang-name{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.km-lang-name b{font-size:13px;font-weight:600}
.km-lang-name small{font:500 9px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--k-dim)}
.km-lang-tick{display:grid;place-items:center;color:var(--k-acc)}
.km-lang-more{margin-top:4px;padding-top:9px;border-radius:0 0 10px 10px;background:var(--cz-rule-soft) top/100% 1px no-repeat;color:var(--k-dim)}
.km-lang-plus{background:none;border:1px dashed rgba(var(--k-acc-rgb),.45);box-shadow:none;font-weight:300;font-size:16px}
body.fx-off-en .km-lang-name small{display:inline!important}
@media (max-width:520px){.titlebar button.km-lang-btn>span,.titlebar button.km-lang-btn .km-lang-caret{display:none}.titlebar button.km-lang-btn{padding:0 5px!important}}
/* V18 · skin packs: installed tiles can be removed, a world skin wears a small mark; the importer */
.km-skin-cell{position:relative;display:block}
.km-skin-cell .km-skin-tile{width:100%}
.km-skin-del{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:13px;line-height:1;color:var(--k-mute);background:rgba(var(--k-bg-rgb),.9);box-shadow:inset 0 0 0 1px var(--k-line);opacity:0;transition:opacity .15s}
.km-skin-cell:hover .km-skin-del,.km-skin-del:focus-visible{opacity:1}
.km-skin-del:hover{color:var(--k-danger)}
.km-skin-world{position:absolute;left:8px;top:8px;width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:var(--k-acc);box-shadow:0 0 6px var(--cz-glow,rgba(var(--k-acc-rgb),.5))}
@media(hover:none){.km-skin-del{opacity:1}}
.km-sp{display:flex;flex-direction:column;gap:12px;min-width:min(440px,80vw)}
.km-sp-drop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 16px;border-radius:14px;border:1.5px dashed var(--k-line);color:var(--k-ink2);cursor:pointer;text-align:center;transition:background .15s,border-color .15s}
.km-sp-drop:hover,.km-sp-drop.over{border-color:var(--k-acc);background:rgba(var(--k-acc-rgb),.05);color:var(--k-acc)}
.km-sp-drop b{font-weight:650}
.km-sp-drop small{color:var(--k-mute);font-family:var(--mono,monospace);font-size:11.5px}
.km-sp-paste summary,.km-sp-warn summary{cursor:pointer;color:var(--k-ink2);font-size:13px}
.km-sp-paste textarea{width:100%;margin-top:6px;font-family:"JetBrains Mono",monospace;font-size:12px}
.km-sp-ok{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:rgba(var(--k-acc-rgb),.06);box-shadow:inset 0 0 0 1px var(--k-line)}
.km-sp-ok span{display:flex;flex-direction:column}
.km-sp-ok small{color:var(--k-mute);font-size:12px}
.km-sp-err{margin:0;padding:8px 12px 8px 28px;border-radius:10px;color:var(--k-danger);background:rgba(192,50,33,.06);font-size:12.5px}
.km-sp-warn ul{margin:6px 0 0;padding-left:20px;color:var(--k-mute);font-size:12px;max-height:140px;overflow:auto}

/* V26 · one language on screen: with 英文副标题 off (the default) the small English lines under Chinese titles go */
body.fx-off-en .km-skin-head span,body.fx-off-en .km-en,body.fx-off-en .km-ow-en,body.fx-off-en .km-men{display:none!important}
