@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 80% -10%, #1c2a44 0%, #0c1120 55%, #08090f 100%);
  color: #EDEFF3;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; margin: 0; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
::selection { background: #E8A33D; color: #0c1120; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 28px 20px 60px; }

.header { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.header img { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
.header .sub { color: #8A93A6; font-size: 14px; margin-top: 4px; }
.header h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.01em; }

.tabbar { display: flex; gap: 4px; border-bottom: 1px solid #253248; margin-bottom: 24px; flex-wrap: wrap; }
.tab {
  background: transparent; border: none; color: #8A93A6; padding: 10px 16px;
  font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent;
}
.tab.active { color: #EDEFF3; border-bottom: 2px solid #E8A33D; }

.card { background: #131C2E; border: 1px solid #253248; border-radius: 6px; padding: 18px; margin-bottom: 16px; }

.btn {
  background: #E8A33D; color: #1a1206; border: none; border-radius: 4px;
  padding: 10px 18px; font-weight: 600; font-size: 14px;
}
.btn:hover { background: #f0b358; }
.btn:disabled { background: #4a4638; color: #8a8578; cursor: not-allowed; }
.btn-ghost {
  background: transparent; color: #E8A33D; border: 1px solid #4a3c22;
  border-radius: 4px; padding: 9px 16px; font-size: 14px; font-weight: 500;
}
.btn-ghost:hover { background: rgba(232,163,61,0.08); }

.input {
  background: #0c1120; border: 1px solid #2a3752; color: #EDEFF3;
  border-radius: 4px; padding: 9px 11px; font-size: 14px; width: 100%;
}
.input:focus { outline: 2px solid #E8A33D; outline-offset: 1px; }
.label { font-size: 12.5px; color: #8A93A6; margin-bottom: 4px; display: block; }

table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th { text-align: left; color: #8A93A6; font-weight: 500; padding: 8px 10px; border-bottom: 1px solid #253248; }
table.tbl td { padding: 8px 10px; border-bottom: 1px solid #1b2438; }

.pill { font-size: 12px; padding: 3px 9px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.pill-default { background: #1b2438; color: #8A93A6; }
.pill-ok { background: #173323; color: #4C9A6A; }
.pill-warn { background: #332a17; color: #E8A33D; }
.pill-danger { background: #331717; color: #c96a6a; }

.grid-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.grid-table th { padding: 6px 10px; color: #8A93A6; font-weight: 500; }
.slot-btn {
  width: 100%; min-width: 74px; padding: 7px 4px; border-radius: 4px; font-size: 12px;
  border: 1px solid #253248; background: #0c1120; color: #EDEFF3; cursor: pointer;
}
.slot-btn.taken { background: #1b2438; color: #5b6377; cursor: not-allowed; }
.slot-btn.locked { background: #161c2c; color: #454e60; cursor: not-allowed; }
.slot-btn.selected { border: 2px solid #E8A33D; background: rgba(232,163,61,0.12); }

.error-box { background: #331717; color: #e08a8a; padding: 10px 14px; border-radius: 4px; margin-bottom: 16px; font-size: 13.5px; }
.warn-box { background: #332a17; color: #E8A33D; padding: 8px 12px; border-radius: 4px; margin-bottom: 12px; font-size: 12.5px; }
.note { font-size: 12.5px; color: #8A93A6; }
.hidden { display: none !important; }

@media print {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area { position: absolute; top: 0; left: 0; width: 100%; }
  .print-label { page-break-after: always; }
}