/* 盘古世界·七重天 — 混沌暗金统一风格 */
:root {
  --bg-deep: #0a0a1a;
  --bg-card: rgba(200,168,74,0.05);
  --bg-hover: rgba(200,168,74,0.12);
  --border: rgba(200,168,74,0.15);
  --gold: #d4a843;
  --gold-dim: #a88630;
  --gold-glow: rgba(212,168,67,0.3);
  --green: #4ade80;
  --red: #ef4444;
  --purple: #c084fc;
  --blue: #60a5fa;
  --steel: #8a9bb5;
  --text: #e8e0d0;
  --text-dim: #8a8a7a;
  --radius: 12px;
  --radius-sm: 6px;
  --btn-min: 48px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100vh;background:var(--bg-deep);color:var(--text);font-family:-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-dim)}
::selection{background:var(--gold);color:var(--bg-deep)}
.container{max-width:1200px;margin:0 auto;padding:16px}
.container-narrow{max-width:800px;margin:0 auto;padding:16px}
h1{font-size:1.8rem;color:var(--gold);margin-bottom:16px}
h2{font-size:1.4rem;color:var(--text);margin-bottom:12px}
h3{font-size:1.1rem;color:var(--gold-dim);margin-bottom:8px}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:all .2s;cursor:pointer}
.card:hover{background:var(--bg-hover);border-color:var(--gold);box-shadow:0 0 20px var(--gold-glow)}
.card-icon{font-size:2rem;margin-bottom:8px}
.card-title{font-size:1rem;color:var(--gold);margin-bottom:4px;font-weight:600}
.card-desc{font-size:.85rem;color:var(--text-dim);line-height:1.4}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.grid-wide{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--btn-min);padding:8px 20px;border:1px solid var(--gold);border-radius:var(--radius-sm);background:transparent;color:var(--gold);font-size:.95rem;cursor:pointer;transition:all .2s}
.btn:hover{background:var(--gold);color:var(--bg-deep)}
.btn-primary{background:var(--gold);color:var(--bg-deep);font-weight:600}
.btn-primary:hover{background:var(--gold-dim)}
input,textarea,select{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text);font-size:.95rem;min-height:var(--btn-min)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 8px var(--gold-glow)}
textarea{resize:vertical;min-height:80px}
.tag{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.75rem;border:1px solid var(--border);color:var(--text-dim);background:var(--bg-card)}
.tag-gold{border-color:var(--gold);color:var(--gold)}
.tag-green{border-color:var(--green);color:var(--green)}
.tag-red{border-color:var(--red);color:var(--red)}
.tag-purple{border-color:var(--purple);color:var(--purple)}
.tag-blue{border-color:var(--blue);color:var(--blue)}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--border);padding-bottom:4px}
.tab{padding:8px 16px;min-height:var(--btn-min);border:none;background:transparent;color:var(--text-dim);cursor:pointer;border-bottom:2px solid transparent;font-size:.9rem}
.tab.active{color:var(--gold);border-bottom-color:var(--gold)}
.tab:hover{color:var(--text)}
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}
.modal{background:var(--bg-deep);border:1px solid var(--gold);border-radius:var(--radius);padding:24px;max-width:600px;width:100%;max-height:80vh;overflow-y:auto}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.modal-close{background:none;border:none;color:var(--text-dim);font-size:1.5rem;cursor:pointer;min-height:var(--btn-min);min-width:var(--btn-min)}
.modal-close:hover{color:var(--gold)}
.footer{text-align:center;padding:24px 16px;color:var(--text-dim);font-size:.8rem;border-top:1px solid var(--border);margin-top:32px}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.status-dot.on{background:var(--green);box-shadow:0 0 6px var(--green)}
.status-dot.off{background:var(--red);box-shadow:0 0 6px var(--red)}
.loading{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--text-dim)}
.loading::after{content:'';display:inline-block;width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;margin-left:8px}
@keyframes spin{to{transform:rotate(360deg)}}
.empty-state{text-align:center;padding:40px 16px;color:var(--text-dim)}
.empty-state .icon{font-size:3rem;margin-bottom:12px;opacity:.5}
.empty-state .msg{font-size:1rem}
.room-empty{text-align:center;padding:60px 20px;border:2px dashed var(--border);border-radius:var(--radius);color:var(--text-dim)}
.room-empty .icon{font-size:3rem;margin-bottom:12px;opacity:.4}
.room-empty .hint{font-size:1rem;margin-bottom:4px}
.room-empty .sub{font-size:.85rem;opacity:.6}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .3s ease-out}
@media(max-width:640px){html{font-size:15px}.container{padding:12px}.grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}.card{padding:14px}h1{font-size:1.4rem}.modal{padding:16px}.tab{padding:6px 12px;font-size:.8rem}}
@media(max-width:400px){html{font-size:14px}.grid{grid-template-columns:repeat(2,1fr)}}