/* ═══════════════════════════════════════════════════════════
   安芯住 Hotel OS — 共用設計系統（深藍 + 青 + 金，對齊品牌）
   純 Demo，假數據，無後端
   ═══════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#15294F;--navy-dk:#0E1C37;--navy2:#122442;--navy-dp:#0C1830;
  --panel:#1B3059;--panel2:#213A63;--panel3:#26426E;
  --cyan:#5B9BD5;--c2:#7AB8E0;--cyan-glow:rgba(91,155,213,.35);
  --copper:#D98C4B;--copper2:#E6A968;--copper-dk:#B8733A;
  --green:#4ADE80;--green-lt:rgba(74,222,128,.14);
  --amber:#F0B24B;--amber-lt:rgba(240,178,75,.14);
  --red:#FF6B6B;--red-lt:rgba(255,107,107,.15);
  --w:#F0F4FA;--g:#93A4C0;--g2:#6E809E;
  --line:rgba(91,155,213,.16);--line2:rgba(91,155,213,.3);
  --shadow:0 18px 40px -18px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.28);
  --mono:"Share Tech Mono",monospace;--sans:"Noto Sans TC","Segoe UI",sans-serif;--head:"Rajdhani","Share Tech Mono",sans-serif;
  --sb:248px;
}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);color:var(--w);font-size:15px;line-height:1.6;min-height:100vh;
  background:
    radial-gradient(1000px 560px at 78% -8%,rgba(217,140,75,.10),transparent 55%),
    radial-gradient(900px 600px at 8% 0%,rgba(91,155,213,.12),transparent 55%),
    var(--navy);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(91,155,213,.28);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── Layout ───────────────────────────────────────────── */
.layout{display:flex;min-height:100vh}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.content{padding:26px 30px 48px;max-width:1320px;width:100%;margin:0 auto}
@media(max-width:900px){.content{padding:18px 16px 40px}}

/* ── Sidebar ──────────────────────────────────────────── */
.sidebar{width:var(--sb);flex-shrink:0;background:linear-gradient(180deg,var(--navy-dk),var(--navy-dp));
  border-right:1px solid var(--line);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;z-index:40}
.sb-brand{display:flex;align-items:center;gap:11px;padding:20px 20px 18px;border-bottom:1px solid var(--line)}
.sb-brand img.mark{width:38px;height:38px;object-fit:contain}
.sb-brand img.word{height:20px;width:auto}
.sb-tag{font-size:.62rem;letter-spacing:2px;color:var(--copper2);text-transform:uppercase;padding:12px 22px 6px;font-weight:700}
.sb-nav{flex:1;overflow-y:auto;padding:4px 12px}
.sb-link{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;color:var(--g);font-weight:500;
  margin-bottom:3px;transition:all .18s ease;position:relative;cursor:pointer}
.sb-link .ico{width:22px;text-align:center;font-size:1.05rem;filter:grayscale(.2)}
.sb-link .en{display:block;font-size:.64rem;color:var(--g2);letter-spacing:.5px;font-family:var(--head);text-transform:uppercase}
.sb-link:hover{background:rgba(91,155,213,.08);color:var(--w)}
.sb-link.on{background:linear-gradient(90deg,rgba(217,140,75,.16),rgba(91,155,213,.10));color:var(--w)}
.sb-link.on::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--copper)}
.sb-link.on .ico{filter:none}
.sb-foot{padding:14px 18px;border-top:1px solid var(--line);font-size:.72rem;color:var(--g2)}
.sb-foot b{color:var(--c2);font-weight:600}
.sb-status{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-weight:600;margin-bottom:4px}
.sb-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}

/* ── Topbar ───────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;
  padding:12px 30px;background:rgba(14,28,55,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.tb-ham{display:none;font-size:1.4rem;background:none;border:0;color:var(--w);cursor:pointer}
.hotel-sel{display:flex;align-items:center;gap:10px;padding:7px 14px;border:1px solid var(--line2);border-radius:11px;
  background:rgba(91,155,213,.07);cursor:pointer;transition:border-color .2s}
.hotel-sel:hover{border-color:var(--copper)}
.hotel-sel .nm{font-weight:700}.hotel-sel .sub{font-size:.7rem;color:var(--g)}
.hotel-sel .chev{color:var(--c2)}
.tb-spacer{flex:1}
.tb-date{font-family:var(--mono);font-size:.82rem;color:var(--g);letter-spacing:.5px}
.tb-bell{position:relative;font-size:1.15rem;cursor:pointer}
.tb-bell .dot{position:absolute;top:-4px;right:-6px;background:var(--red);color:#fff;font-size:.6rem;font-weight:700;
  min-width:15px;height:15px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.tb-user{display:flex;align-items:center;gap:9px}
.tb-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--copper),var(--copper-dk));
  display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--navy-dp);font-size:.85rem}
.tb-user .nm{font-size:.82rem;font-weight:600}.tb-user .role{font-size:.68rem;color:var(--g)}
@media(max-width:900px){
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .25s ease;box-shadow:var(--shadow)}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .sb-scrim{display:block}
  .sb-scrim{display:none;position:fixed;inset:0;background:rgba(6,14,30,.6);z-index:35}
  .tb-ham{display:block}
  .topbar{padding:12px 16px;gap:10px}
  .hotel-sel .sub{display:none}
}
@media(max-width:560px){
  .tb-date{display:none}
  .tb-user .nm,.tb-user .role{display:none}
  .hotel-sel{padding:6px 10px}
  .hotel-sel .nm{display:block;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ── Page head ────────────────────────────────────────── */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px;animation:fadeUp .5s ease both}
.page-head .eyebrow{font-family:var(--head);font-size:.7rem;letter-spacing:2px;color:var(--copper2);text-transform:uppercase;font-weight:700}
.page-head h1{font-size:1.7rem;font-weight:700;letter-spacing:.5px;margin-top:3px}
.page-head .desc{color:var(--g);font-size:.86rem;margin-top:4px;max-width:640px}
.ph-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ── Buttons ─────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:10px;font-weight:600;font-size:.82rem;
  border:1px solid var(--line2);background:rgba(91,155,213,.08);color:var(--w);cursor:pointer;transition:all .18s;font-family:var(--sans)}
.btn:hover{border-color:var(--cyan);background:rgba(91,155,213,.16)}
.btn.gold{background:linear-gradient(135deg,var(--copper),var(--copper-dk));border-color:transparent;color:#1a1206}
.btn.gold:hover{box-shadow:0 6px 18px rgba(217,140,75,.4)}
.btn.sm{padding:5px 11px;font-size:.74rem}
.btn.ghost{background:transparent}

/* ── Grid helpers ─────────────────────────────────────── */
.grid{display:grid;gap:16px}
.g-kpi{grid-template-columns:repeat(5,1fr)}
.g-2{grid-template-columns:2fr 1fr}
.g-2e{grid-template-columns:1fr 1fr}
.g-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.g-kpi{grid-template-columns:repeat(3,1fr)}.g-2,.g-2e,.g-3{grid-template-columns:1fr}}
@media(max-width:560px){.g-kpi{grid-template-columns:repeat(2,1fr)}}

/* ── Card / Panel ─────────────────────────────────────── */
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line2);border-radius:16px;
  padding:18px 20px;box-shadow:var(--shadow);animation:fadeUp .5s ease both}
.card.tight{padding:16px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.card-h h3{font-size:1rem;font-weight:700;display:flex;align-items:center;gap:9px}
.card-h h3 .bar{width:4px;height:18px;border-radius:2px;background:linear-gradient(180deg,var(--copper),var(--cyan))}
.card-h .more{font-size:.76rem;color:var(--c2);font-weight:600}
.card-h .more:hover{color:var(--copper2)}

/* ── KPI tile ─────────────────────────────────────────── */
.kpi{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line2);border-radius:14px;
  padding:15px 16px;position:relative;overflow:hidden;box-shadow:var(--shadow);animation:fadeUp .5s ease both}
.kpi::after{content:"";position:absolute;right:-20px;top:-20px;width:70px;height:70px;border-radius:50%;
  background:radial-gradient(circle,rgba(91,155,213,.16),transparent 70%)}
.kpi .lb{font-size:.74rem;color:var(--g);display:flex;align-items:center;gap:7px}
.kpi .lb .ic{font-size:.95rem}
.kpi .val{font-family:var(--head);font-size:1.9rem;font-weight:700;line-height:1.15;margin-top:6px;letter-spacing:.5px}
.kpi .val small{font-size:.9rem;color:var(--g);font-weight:600;margin-left:2px}
.kpi .delta{font-size:.72rem;font-weight:700;margin-top:3px;display:inline-flex;align-items:center;gap:3px}
.up{color:var(--green)}.down{color:var(--red)}.flat{color:var(--g)}
.kpi.accent{border-color:rgba(217,140,75,.5)}
.kpi.accent .val{color:var(--copper2)}
.kpi.accent::after{background:radial-gradient(circle,rgba(217,140,75,.22),transparent 70%)}

/* ── Pills / status ───────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%}
.pill.ok{background:var(--green-lt);color:var(--green)}.pill.ok::before{background:var(--green)}
.pill.warn{background:var(--amber-lt);color:var(--amber)}.pill.warn::before{background:var(--amber)}
.pill.bad{background:var(--red-lt);color:var(--red)}.pill.bad::before{background:var(--red)}
.pill.info{background:rgba(91,155,213,.14);color:var(--c2)}.pill.info::before{background:var(--cyan)}
.pill.mute{background:rgba(138,155,181,.14);color:var(--g)}.pill.mute::before{background:var(--g)}
.pill.live::before{animation:pulse 1.4s infinite}
.tag{display:inline-block;padding:2px 9px;border-radius:7px;font-size:.7rem;font-weight:600;background:rgba(91,155,213,.12);color:var(--c2)}
.tag.gold{background:var(--copper-lt);color:var(--copper2)}

/* ── Table ────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;border-radius:12px}
table.tbl{width:100%;border-collapse:collapse;font-size:.84rem;min-width:520px}
table.tbl th{text-align:left;font-size:.7rem;letter-spacing:.5px;text-transform:uppercase;color:var(--g);font-weight:600;
  padding:9px 12px;border-bottom:1px solid var(--line2);white-space:nowrap}
table.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tr:hover td{background:rgba(91,155,213,.05)}
table.tbl td.num,table.tbl th.num{text-align:right;font-family:var(--mono)}
.cellmain{font-weight:700}.cellsub{font-size:.72rem;color:var(--g)}

/* ── Progress bar ─────────────────────────────────────── */
.bar-row{display:flex;align-items:center;gap:12px;padding:8px 0}
.bar-row .nm{width:96px;flex-shrink:0;font-size:.8rem;color:var(--g)}
.bar-track{flex:1;height:9px;border-radius:6px;background:rgba(10,20,40,.6);overflow:hidden}
.bar-fill{height:100%;border-radius:6px;transform-origin:left;animation:grow .7s ease both;
  background:linear-gradient(90deg,var(--cyan),var(--c2))}
.bar-fill.gold{background:linear-gradient(90deg,var(--copper),var(--copper2))}
.bar-fill.green{background:linear-gradient(90deg,#2F9E5E,var(--green))}
.bar-fill.red{background:linear-gradient(90deg,#C24343,var(--red))}
.bar-row .pct{width:44px;text-align:right;font-family:var(--mono);font-size:.8rem;font-weight:700}

/* ── Kanban ───────────────────────────────────────────── */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.kanban{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.kanban{grid-template-columns:1fr}}
.kan-col{background:rgba(10,20,40,.35);border:1px solid var(--line);border-radius:14px;padding:12px}
.kan-col h4{font-size:.8rem;display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;color:var(--g)}
.kan-col h4 .ct{background:rgba(91,155,213,.16);color:var(--c2);border-radius:20px;padding:1px 9px;font-size:.7rem;font-weight:700}
.kan-card{background:linear-gradient(180deg,var(--panel3),var(--panel2));border:1px solid var(--line2);border-radius:11px;
  padding:11px 12px;margin-bottom:9px;transition:transform .15s}
.kan-card:hover{transform:translateY(-2px)}
.kan-card .rm{font-weight:700;font-family:var(--head);letter-spacing:.5px}
.kan-card .meta{font-size:.72rem;color:var(--g);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* ── Alert / AI card ──────────────────────────────────── */
.alert{display:flex;gap:13px;padding:14px 15px;border-radius:13px;border:1px solid var(--line2);
  background:linear-gradient(180deg,var(--panel2),var(--panel));margin-bottom:12px;animation:fadeUp .5s ease both;position:relative;overflow:hidden}
.alert .ai-ic{width:40px;height:40px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.alert.sev-high{border-color:rgba(255,107,107,.4)}.alert.sev-high .ai-ic{background:var(--red-lt);color:var(--red)}
.alert.sev-med{border-color:rgba(240,178,75,.38)}.alert.sev-med .ai-ic{background:var(--amber-lt);color:var(--amber)}
.alert.sev-low .ai-ic{background:rgba(91,155,213,.14);color:var(--c2)}
.alert.sev-good{border-color:rgba(74,222,128,.35)}.alert.sev-good .ai-ic{background:var(--green-lt);color:var(--green)}
.alert .body{flex:1;min-width:0}
.alert .ttl{font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.alert .txt{font-size:.82rem;color:var(--g);margin-top:4px}
.alert .impact{font-size:.76rem;color:var(--copper2);margin-top:6px;font-weight:600}
.alert .acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

/* ── Misc ─────────────────────────────────────────────── */
.muted{color:var(--g)}.mono{font-family:var(--mono)}
.hl{color:var(--copper2);font-weight:700}
.stat-inline{display:flex;gap:22px;flex-wrap:wrap}
.stat-inline .si .n{font-family:var(--head);font-size:1.35rem;font-weight:700}
.stat-inline .si .l{font-size:.72rem;color:var(--g)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.74rem;color:var(--g);margin-top:10px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.divider{height:1px;background:var(--line);margin:16px 0}
.note{font-size:.74rem;color:var(--g2);margin-top:14px}
.flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.8rem}
.flow .step{padding:6px 12px;border-radius:9px;background:rgba(91,155,213,.1);border:1px solid var(--line);font-weight:600}
.flow .step.done{background:var(--green-lt);color:var(--green);border-color:rgba(74,222,128,.3)}
.flow .step.now{background:var(--copper-lt);color:var(--copper2);border-color:rgba(217,140,75,.4)}
.flow .arr{color:var(--g2)}
.demo-ribbon{position:fixed;right:-42px;top:20px;transform:rotate(45deg);background:var(--copper);color:#1a1206;
  font-size:.66rem;font-weight:800;letter-spacing:1.5px;padding:5px 46px;z-index:60;box-shadow:0 4px 14px rgba(0,0,0,.4)}