:root {
  --ink: #101312; --muted: #98a39e; --lime: #c5ed9b; --violet: #c0a6ef; --stroke: #2f3733; --stroke-hi: #3d4741;
  --surface: rgba(22, 27, 25, .72); --surface-2: rgba(30, 36, 33, .85); --shadow: 0 10px 30px rgba(0, 0, 0, .28);
  --glow-a: 82, 107, 37;
  --on-surface: #f0f3ee; --on-primary: #182412;
  --err-bg: #342822; --err-border: #695142; --err-icon: #e8bb91; --err-text: #efd2b8; --gold: #efbd63;
  font-family: "Inter", "Roboto", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--on-surface); }
body { font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.cm-app { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(135deg, #181a1b, #1c241a 50%, #19181e); }
.cm-glow { position: absolute; width: 800px; height: 800px; border-radius: 50%; pointer-events: none; }
.cm-glow-a { right: -170px; top: -280px; background: radial-gradient(closest-side, rgba(var(--glow-a), .26), rgba(var(--glow-a), 0)); }
.cm-glow-b { left: -220px; bottom: -360px; background: radial-gradient(closest-side, rgba(88, 55, 128, .23), rgba(88, 55, 128, 0)); }

.cm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 20px; padding: 0 24px;
  min-height: 40px; font-size: 16px; font-weight: 600; cursor: pointer; border: 1px solid transparent; background: none; white-space: nowrap; }
.cm-btn:disabled { cursor: default; }
.cm-outlined { border-color: var(--stroke-hi); background: rgba(16, 20, 18, .45); color: var(--on-surface); padding: 0 16px; }
.cm-outlined .cm-ic { color: var(--lime); }
.cm-outlined:hover:not(:disabled) { background: rgba(197, 237, 155, .07); border-color: #56664d; }
.cm-outlined:disabled { border-color: rgba(240, 243, 238, .08); color: rgba(240, 243, 238, .32); background: transparent; }
.cm-outlined:disabled .cm-ic { color: inherit; }
.cm-filled { background: linear-gradient(180deg, #d2f4ad, var(--lime)); color: var(--on-primary); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 2px 8px rgba(0,0,0,.25); }
.cm-tonal { background: #2b3527; color: var(--lime); box-shadow: 0 0 0 1px #3c4a35 inset; }
.cm-tonal:hover:not(:disabled) { background: #33402e; }
.cm-filled:hover:not(:disabled) { filter: brightness(1.06); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.cm-filled:disabled, .cm-tonal:disabled { background: rgba(240, 243, 238, .08); color: rgba(240, 243, 238, .34); box-shadow: none; }
.cm-text { color: var(--lime); padding: 0 12px; }
.cm-text:hover:not(:disabled) { background: rgba(197, 237, 155, .08); }
.cm-text:disabled { color: rgba(240, 243, 238, .38); }
.cm-ic { width: 17px; height: 17px; fill: currentColor; flex: none; }
.cm-ic24 { width: 24px; height: 24px; fill: currentColor; }
.cm-icon-btn { width: 40px; height: 40px; border-radius: 20px; border: none; background: none; color: var(--on-surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.cm-icon-btn:hover:not(:disabled) { background: rgba(240, 243, 238, .08); }
.cm-icon-btn:disabled { color: rgba(240, 243, 238, .38); cursor: default; }

.cm-header { position: relative; display: flex; align-items: center; gap: 16px; padding: 22px 34px; min-height: 100px; }
.cm-brand { display: flex; align-items: center; gap: 10px; margin-right: 8px; user-select: none; }
.cm-brand-mascot { width: 34px; height: 37px; image-rendering: pixelated; }
.cm-brand-name { font-size: 22px; font-weight: 700; letter-spacing: -.3px; }
.cm-brand-name b { color: var(--lime); font-weight: 700; }
.cm-header-right { flex: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 12px; }
.cm-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--surface); border: 1px solid var(--stroke); border-radius: 20px; font-size: 15px; backdrop-filter: blur(8px); }
.cm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.cm-badge.on .cm-dot { background: var(--lime); box-shadow: 0 0 0 3px rgba(197, 237, 155, .18); }
.cm-lang { margin-left: 10px; padding: 6px 8px; font-size: 14px; }
.cm-select { background: #1c221e; border: 1px solid var(--stroke); border-radius: 9px; padding: 8px 10px; font-size: 16px; }

.cm-storage { position: relative; padding: 0 34px 16px; }
.cm-tabframe { display: flex; padding: 5px; gap: 4px; background: var(--surface); border: 1px solid var(--stroke); border-radius: 14px; backdrop-filter: blur(10px); }
.cm-tabs2 { width: 280px; }
.cm-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 8px; border: none; border-radius: 8px;
  background: transparent; color: var(--muted); font-size: 16px; font-weight: 600; cursor: pointer; min-width: 0; }
.cm-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-tab:hover:not(:disabled):not(.selected) { color: var(--on-surface); background: rgba(240, 243, 238, .04); }
.cm-tab.selected { background: linear-gradient(180deg, #2f3a2a, #273023); color: var(--lime); box-shadow: 0 0 0 1px #3d4b36 inset; }
.cm-tab:disabled { color: rgba(155, 166, 161, .45); cursor: default; }
.cm-tab.selected:disabled { color: rgba(197, 237, 155, .6); }

.cm-main { position: relative; flex: 1; display: flex; flex-direction: column; padding: 8px 34px 28px; min-height: 0; }
.cm-center { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 34px; }
.cm-prompt { max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cm-prompt-art { margin-bottom: 6px; }
.cm-prompt-mascot { width: 102px; height: 112px; image-rendering: pixelated; filter: drop-shadow(0 12px 24px rgba(0,0,0,.45)); }
.cm-prompt h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.3px; }
.cm-prompt-text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.cm-prompt-text.small { font-size: 13px; color: rgba(155, 166, 161, .7); }
.cm-prompt .cm-btn { margin-top: 8px; }
.cm-prompt-note { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(155, 166, 161, .7); }
.cm-prompt-note a { color: inherit; }
.cm-big-muted { font-size: 26px; color: var(--muted); margin: 0; }

.cm-cart { display: flex; flex-direction: column; }
.cm-overview { display: flex; align-items: center; gap: 32px; }
.cm-art { flex: none; width: 116px; height: 125px; display: flex; align-items: center; justify-content: center; }
.cm-art.cover { width: calc(var(--art-h, 360px) * .75); height: var(--art-h, 360px); }
.cm-art img { max-width: 100%; max-height: 100%; border-radius: 10px; object-fit: contain; box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); }
.cm-cartpic { width: 116px; height: 125px; --cart-label: url(#g-label-off); }
.cm-defs { position: absolute; }
.cart-label { fill: var(--cart-label); }
.cm-cartpic.on { --cart-label: url(#g-label-on); }
.cm-info { flex: 1; min-width: 0; }
.cm-title { margin: 0; font-size: 44px; font-weight: 600; letter-spacing: -.7px; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-credits { margin: 12px 0 0; color: var(--muted); font-size: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-stars { margin-top: 8px; display: flex; }
.cm-stars svg { width: 25px; height: 25px; fill: var(--gold); }
.cm-genres { margin: 8px 0 0; color: var(--violet); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-summary { margin: 12px 0 0; font-size: 18px; line-height: 1.45; }
.cm-tags { display: flex; flex-wrap: wrap; gap: 7px 8px; margin-top: 12px; }
.cm-tag { padding: 5px 9px; background: rgba(18, 21, 20, .33); border: 1px solid var(--stroke); border-radius: 5px; color: var(--muted); font-size: 14px; letter-spacing: .5px; }
.cm-tag.violet { color: var(--violet); }
.cm-tag.lime { color: var(--lime); }
.cm-actioncard { margin-top: 26px; padding: 6px; background: var(--surface); border: 1px solid var(--stroke); border-radius: 18px; box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.cm-actioncard .cm-tabframe { background: transparent; border: none; padding: 0; backdrop-filter: none; }
.cm-actioncard .cm-buttons { margin-top: 6px; border: none; border-top: 1px solid var(--stroke); border-radius: 0 0 12px 12px; background: transparent; }
.cm-panel { background: var(--surface); border: 1px solid var(--stroke); border-radius: 14px; }
.cm-buttons { margin-top: 12px; padding: 18px 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
.cm-error { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 16px; background: var(--err-bg); border: 1px solid var(--err-border); border-radius: 10px; }
.cm-error .cm-ic { width: 18px; height: 18px; fill: var(--err-icon); }
.cm-error span { color: var(--err-text); font-size: 12px; user-select: text; white-space: pre-wrap; }

.cm-sd { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.cm-sd-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cm-sd-selected { display: inline-flex; align-items: center; gap: 12px; }
.cm-muted16 { font-size: 16px; color: var(--muted); }
.cm-sd-path { display: flex; align-items: center; gap: 4px; margin-top: 16px; padding-left: 16px; }
.cm-sd-dir { flex: 1; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-check { width: 18px; height: 18px; margin: 11px; accent-color: var(--lime); flex: none; }
.cm-sd-list { margin-top: 8px; flex: 1; min-height: 300px; overflow: auto; background: var(--surface); border: 1px solid var(--stroke); border-radius: 16px; box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.cm-sd-list.hover { border-color: var(--lime); }
.cm-sd-empty { min-height: 300px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 16px; margin: 0; }
.cm-row { display: flex; align-items: center; gap: 16px; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--stroke); cursor: pointer; }
.cm-row:last-child { border-bottom: none; }
.cm-row:hover { background: rgba(240, 243, 238, .04); }
.cm-row.selected { background: rgba(197, 237, 155, .07); }
.cm-row .cm-check { margin: 0 4px; }
.cm-row-text { flex: 1; min-width: 0; }
.cm-row-name { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-row.selected .cm-row-name { color: var(--lime); }
.cm-row-size { font-size: 14px; color: var(--muted); }
.cm-row-actions { display: flex; align-items: center; }
.cm-row-actions .chev { fill: var(--muted); width: 24px; height: 24px; margin: 0 8px; }
.cm-menu { position: fixed; z-index: 30; min-width: 140px; padding: 8px 0; background: #2a302c; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.cm-menu button { display: block; width: 100%; text-align: left; padding: 12px 16px; border: none; background: none; font-size: 15px; cursor: pointer; }
.cm-menu button:hover { background: rgba(240, 243, 238, .08); }

.cm-bar { margin-top: 12px; height: 8px; border-radius: 4px; background: #262d29; overflow: hidden; }
.cm-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, #a98be6, var(--violet)); border-radius: 4px; transition: width .2s; }
.cm-bar-fill.done { background: var(--lime); }
.cm-bar-fill.indeterminate { width: 30%; animation: cm-slide 1.2s infinite ease-in-out; }
@keyframes cm-slide { from { margin-left: -30%; } to { margin-left: 100%; } }
.cm-transfer-row { display: flex; justify-content: space-between; margin-top: 12px; min-height: 24px; }

.cm-footer { position: relative; display: flex; justify-content: space-between; gap: 16px; padding: 12px 34px; border-top: 1px solid #222926; min-height: 40px; }
.cm-compat { font-size: 13px; color: var(--err-text); }

.cm-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(6, 8, 7, .62); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; }
.cm-dialog { background: linear-gradient(180deg, #252c28, #1f2522); border: 1px solid var(--stroke-hi); border-radius: 24px; padding: 26px; max-height: calc(100vh - 48px); overflow: auto; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.cm-dialog-title { margin: 0 0 14px; font-size: 22px; font-weight: 600; letter-spacing: -.2px; }
.cm-dialog-title.done { color: var(--lime); }
.cm-dialog-body { font-size: 14px; color: #c4cbc6; }
.cm-dialog-body p { margin: 0 0 12px; }
.cm-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.cm-dialog-actions:empty { display: none; }
.cm-field { width: 100%; padding: 12px 14px; border-radius: 4px; border: 1px solid #8f9a93; background: transparent; font-size: 16px; color: var(--on-surface); }
.cm-field:focus { outline: none; border: 2px solid var(--lime); padding: 11px 13px; }
select.cm-field { appearance: auto; background: #2a302c; }
.cm-label { display: block; font-size: 12px; color: var(--muted); margin: 0 0 4px; }
.cm-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.cm-small { font-size: 12px; color: var(--muted); margin: 12px 0 0; }
.cm-dim { color: rgba(240, 243, 238, .65); font-size: 12px; line-height: 1.5; margin: 0; }
.cm-strong { font-weight: 600; color: var(--on-surface); margin: 16px 0 6px; }
.cm-dialog-status { margin: 22px 0 0; font-size: 16px; color: var(--on-surface); }
.cm-dialog-error { margin: 16px 0 0; color: #ffb4ab; user-select: text; white-space: pre-wrap; }
.cm-link { color: var(--lime); text-decoration: underline; }
.cm-folders { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; }
.cm-folders button { width: 100%; text-align: left; padding: 10px 12px; border: none; background: none; font-size: 15px; cursor: pointer; border-radius: 8px; color: var(--on-surface); }
.cm-folders button:hover:not(:disabled) { background: rgba(240, 243, 238, .06); }
.cm-folders button:disabled { color: rgba(240, 243, 238, .38); cursor: default; }
.cm-dialog-path { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 16px; color: var(--on-surface); }
.cm-snack { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140px); background: #e1e3df; color: #2e312e; padding: 14px 18px; border-radius: 4px; font-size: 14px; transition: transform .25s; z-index: 60; max-width: calc(100vw - 32px); }
.cm-snack.show { transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .cm-header { padding: 16px; flex-wrap: wrap; min-height: 0; }
  .cm-main, .cm-storage, .cm-footer { padding-left: 16px; padding-right: 16px; }
  .cm-overview { flex-direction: column; align-items: flex-start; gap: 18px; }
  .cm-title { font-size: 32px; }
  .cm-actions { flex-wrap: wrap; }
  .cm-tabs2 { width: 100%; }
  .cm-formgrid { grid-template-columns: 1fr; }
}
.cm-update .cm-ic { color: var(--lime); width: 20px; height: 20px; }
.cm-tips { margin: 0; padding-left: 20px; } .cm-tips li { margin: 6px 0; }
.cm-code { white-space: pre-wrap; word-break: break-all; font-size: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--stroke); border-radius: 8px; padding: 10px 12px; margin: 8px 0 0; }
.cm-tabstrip { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px; border-radius: 10px; background: #101312; border: 1px solid var(--stroke); margin: 0 0 6px; }
.cm-tabstrip.compact { gap: 5px; padding: 8px; }
.cm-tabchip { padding: 5px 8px; border-radius: 6px 6px 0 0; font: 600 11px/1 monospace; letter-spacing: .04em; color: var(--chip); border: 1px solid var(--chip); }
.cm-tabstrip.compact .cm-tabchip { padding: 4px 6px; font-size: 10px; letter-spacing: 0; }
.cm-tabrow { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--stroke); }
.cm-tabrow.compact { gap: 8px; padding: 4px 2px; }
.cm-tabrow.off { opacity: .45; }
.cm-tabdot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.cm-tabname { flex: 1; }
.cm-tabrow.compact .cm-tabname { font-size: 14px; }
.cm-tabshow { display: flex; align-items: center; gap: 6px; }
.cm-tabrow.dragging { opacity: .35; }
.cm-taggrip { cursor: grab; color: #8a918c; user-select: none; touch-action: none; letter-spacing: -2px; padding: 0 2px; }
.cm-tabrow.dragging .cm-taggrip { cursor: grabbing; }
.cm-mascot { display: block; margin: 0 auto 10px; width: 102px; height: 112px; image-rendering: pixelated; }
.cm-disclosure { display: flex; align-items: center; gap: 6px; margin: 8px 0 0 28px; padding: 0; border: none; background: none; color: var(--lime); font: inherit; font-size: 14px; cursor: pointer; }