/* 桌面游戏合集 — 公共设计系统（Claude Code UI：浅色暖白 · 小米橙 · 等宽字体） */
:root{
  --bg:#faf9f5;
  --bg-2:#ffffff;
  --bg-3:#f0eee8;
  --bg-inset:#ffffff;
  --line:#e7e5de;
  --line-2:#d9d6cc;
  --fg:#262624;
  --fg-2:#57564f;
  --fg-3:#8a8880;
  --accent:#ff6700;      /* 小米橙 */
  --accent-hi:#e85d00;
  --accent-dim:#b34700;
  --accent-bg:rgba(255,103,0,.10);
  --accent-border:rgba(255,103,0,.45);
  --danger:#d93a34;
  --danger-bg:rgba(217,58,52,.10);
  --success:#3e8e41;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Fira Code",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --r-sm:6px;
  --r-md:8px;
  --r-lg:12px;
  --r-xl:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--fg);min-height:100vh;-webkit-font-smoothing:antialiased;font-size:14px}
.wrap{margin:0 auto;padding:24px 24px 72px}

/* icon helper */
.ic{display:inline-block;flex-shrink:0;vertical-align:-2px}

/* header */
header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:13px}
.icon{width:42px;height:42px;border-radius:var(--r-lg);display:grid;place-items:center;background:var(--accent);color:#1a1a1a;border:1px solid var(--accent-hi)}
.icon svg{width:22px;height:22px}
h1{font-size:20px;font-weight:600;font-family:var(--mono);letter-spacing:-.2px}
.sub{font-size:12px;color:var(--fg-3);margin-top:3px;font-family:var(--mono)}
.head-actions{display:flex;gap:8px;flex-wrap:wrap}

/* buttons */
button{font-family:var(--mono);cursor:pointer;border:none;border-radius:var(--r-sm);padding:8px 13px;font-size:13px;font-weight:500;color:var(--fg-2);background:transparent;border:1px solid var(--line-2);display:inline-flex;align-items:center;gap:6px;transition:background .12s,color .12s,border-color .12s,transform .05s;line-height:1}
button:hover{background:var(--bg-3);color:var(--fg);border-color:var(--line-2)}
button:active{transform:scale(.97)}
button.primary{background:var(--accent);border-color:transparent;color:#1a1a1a;font-weight:600}
button.primary:hover{background:var(--accent-hi);color:#1a1a1a}
button.ghost{border-color:transparent}
button.ghost:hover{background:var(--bg-3);border-color:transparent}
button.danger{color:var(--danger);border-color:rgba(241,85,76,.35)}
button.danger:hover{background:var(--danger-bg);border-color:var(--danger)}
button:disabled{opacity:.4;cursor:not-allowed}
button:disabled:hover{background:transparent;color:var(--fg-2)}
a.back{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:13px;font-weight:500;color:var(--fg-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 13px;text-decoration:none;transition:background .12s,color .12s,border-color .12s;line-height:1}
a.back:hover{background:var(--bg-3);color:var(--fg);border-color:var(--line-2)}

/* focus ring */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:focus:not(:focus-visible),input:focus:not(:focus-visible){outline:none}

/* forms */
.field{margin-bottom:14px}
label{display:block;font-size:12px;font-weight:600;color:var(--fg-2);margin-bottom:6px;font-family:var(--mono)}
input[type=text],input[type=number],select,textarea{width:100%;padding:9px 12px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--bg-inset);color:var(--fg);font-size:13.5px;font-family:var(--mono);transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
input::placeholder,textarea::placeholder{color:var(--fg-3)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg-3) 50%),linear-gradient(135deg,var(--fg-3) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
.row{display:flex;gap:8px}.row>*{flex:1}.grow{flex:1}
.row input[style],.row select[style]{flex:1}

/* footer */
footer{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--fg-3);font-family:var(--mono)}

/* reduced motion (通用) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}