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

/* Palette from the app icon */
:root {
  --bg: #120d09;          --bg-color: #120d09;
  --card: #1c140e;        --card-bg: #1c140e;
  --card-2: #251a12;
  --modal-bg: #211810;
  --line: #3a2a1c;
  --gold: #f0b429;        --primary-gold: #f0b429;
  --gold-hover: #ffc94d;
  --saffron: #ff8a3d;
  --copper: #c97a45;
  --cream: #fbe9c8;
  --text: #fff6e6;        --text-main: #fff6e6;
  --text-muted: #c9b59a;  --muted: #c9b59a;
  --teal: #2ec4b6;        --accent: #2ec4b6;
  --rose: #ff6b8a;        --danger: #ff6b8a;
  --success: #6ee7a8;
  --violet: #a78bfa;
  --sky: #5fb8ff;
}

html, body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(240,180,41,.14), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(46,196,182,.10), transparent 60%),
    var(--bg) !important;
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Cinzel', 'Inter', serif !important;
  color: var(--cream) !important;
  letter-spacing: .02em;
  font-weight: 700;
}
h1 {
  font-size: 1.7rem;
  background: linear-gradient(90deg, var(--gold), var(--saffron));
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
}

header, .head-inner { border-bottom: 1px solid var(--line) !important; }
header p, .header-title p { color: var(--text-muted) !important; font-size: .85rem; }

/* Header: title left, Sections centred, controls right */
header:has(.nav-sections) {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center;
  gap: 16px;
}
header:has(.nav-sections) .header-title { grid-column: 1; }
header:has(.nav-sections) .top-actions { grid-column: 3; }

/* Cards */
.input-group, .stat-card, .chart-box, .table-container, .balance-card,
.card, .panel, .creator-card, .item, .setting-row, .modal-content, .login-card, .box {
  background: linear-gradient(160deg, var(--card-2), var(--card)) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
}
.input-group { border-left: 3px solid var(--gold) !important; }
.balance-card {
  background: linear-gradient(135deg, #3a2412 0%, #1c140e 55%, #132a2a 100%) !important;
  border: 1px solid rgba(240,180,41,.35) !important;
}
.balance-amount {
  color: var(--gold) !important; font-weight: 700;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(240,180,41,.35);
}

/* Inputs */
input, select, textarea {
  background: #0d0905 !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(240,180,41,.18) !important;
  outline: none;
}
label { color: var(--text-muted) !important; font-size: .72rem !important; letter-spacing: .06em; font-weight: 600; }

/* Buttons */
.btn {
  border-radius: 12px !important; text-transform: none !important;
  letter-spacing: .01em !important; font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important; font-size: .95rem !important;
  transition: transform .15s, background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.btn-gold, .btn-solid, .btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--saffron)) !important;
  color: #1a0f05 !important; border: 0 !important;
  box-shadow: 0 8px 22px rgba(240,180,41,.25);
}
.btn-gold:hover, .btn-solid:hover, .btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 28px rgba(255,138,61,.35) !important;
  color: #1a0f05 !important;
}
.btn-reset, .copy-btn, .btn-data, .btn {
  background: transparent !important;
  border: 1px solid rgba(46,196,182,.45) !important;
  color: var(--teal) !important;
}
.btn-reset:hover, .copy-btn:hover, .btn-data:hover, .btn:hover {
  border-color: var(--teal) !important;
  background: rgba(46,196,182,.1) !important;
  color: #7ff5ea !important;
}

/* Settings gear */
.btn-settings {
  width: 44px; height: 44px; border-radius: 12px !important; padding: 0 !important;
  border: 1px solid rgba(240,180,41,.5) !important; color: var(--gold) !important;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-settings:hover { background: rgba(240,180,41,.12) !important; color: var(--gold-hover) !important; }

/* Delete / remove buttons */
.btn-delete { border-radius: 8px !important; border-color: var(--rose) !important; color: var(--rose) !important; }

/* Section headings */
.section-title {
  margin: 44px 0 16px; font-size: .95rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--sky) !important;
}
.section-title::after { background: linear-gradient(90deg, rgba(95,184,255,.5), transparent) !important; }

/* Tables */
table { min-width: 0; }
th { color: var(--gold) !important; font-size: .68rem !important; font-weight: 700; letter-spacing: .12em; }
th, td { border-bottom: 1px solid var(--line) !important; padding: 12px 14px !important; }
td { color: var(--text); }
tr:hover td { background: rgba(240,180,41,.04); }
.type-purchase { color: var(--cream) !important; }
.type-payment { color: var(--success) !important; }
tr:last-child td { border-bottom: 0 !important; }

/* Stats */
.stat-card { position: relative; overflow: hidden; }
.stat-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--saffron));
}
.stat-card:nth-child(2)::before { background: linear-gradient(90deg, var(--teal), #7ff5ea); }
.stat-card:nth-child(3)::before { background: linear-gradient(90deg, var(--rose), #ffa3b7); }
.stat-card:nth-child(4)::before { background: linear-gradient(90deg, var(--copper), var(--gold)); }
.stat-val { color: var(--cream) !important; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.6rem; }
.stat-label { color: var(--text-muted) !important; text-transform: uppercase; letter-spacing: .08em; font-size: .68rem !important; }

/* Input cards */
.input-group label {
  color: var(--cream) !important; text-transform: none !important;
  letter-spacing: 0; font-size: 1rem !important; font-weight: 600;
}
.price-tag { color: var(--gold) !important; font-size: .78rem !important; }

/* Settings modal */
.modal-overlay { background: rgba(10,6,3,.78) !important; backdrop-filter: blur(8px); }
.modal-content { padding: 26px !important; font-family: 'Inter', system-ui, sans-serif !important; font-size: 15px; }
.modal-content h2 { font-family: 'Cinzel', serif !important; font-size: 1.3rem !important; }
.modal-header .btn-delete {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: .8rem !important; font-weight: 700 !important; letter-spacing: .08em;
  padding: 8px 14px !important; line-height: 1.2 !important; border-radius: 10px !important;
}

/* Add product (teal) and Save changes (gold) */
#settingsModal .btn-small,
#settingsModal .btn-gold.btn-small {
  background: transparent !important;
  border: 1px solid var(--teal) !important;
  color: var(--teal) !important;
  box-shadow: none !important;
  font-size: .85rem !important; padding: 10px 16px !important;
}
#settingsModal .btn-small:hover { background: rgba(46,196,182,.12) !important; color: #7ff5ea !important; }
#settingsModal button.btn-gold:not(.btn-small) {
  background: linear-gradient(135deg, var(--gold), var(--saffron)) !important;
  color: #1a0f05 !important;
}

/* Recovery code button: rose */
.btn-data[onclick="regenRecovery()"] {
  border-color: rgba(255,107,138,.55) !important;
  color: var(--rose) !important;
}
.btn-data[onclick="regenRecovery()"]:hover {
  background: rgba(255,107,138,.12) !important;
  color: #ffa3b7 !important; border-color: var(--rose) !important;
}

/* Sections list cards */
.item:hover { border-color: rgba(240,180,41,.6) !important; transform: translateY(-3px); }
.icon {
  background: linear-gradient(135deg, rgba(46,196,182,.22), rgba(255,107,138,.18)) !important;
  border: 0 !important; color: var(--cream) !important; border-radius: 14px !important;
}
.item .name {
  color: var(--cream) !important; font-family: 'Cinzel', serif !important;
  font-size: 1.1rem !important; font-weight: 700;
}
.item .count { color: var(--saffron) !important; letter-spacing: .08em; font-size: .72rem !important; }
.soon-badge {
  background: linear-gradient(135deg, var(--teal), #7ff5ea) !important;
  color: #052020 !important; box-shadow: none !important;
}
.item .default-badge {
  position: absolute; top: 14px; right: 14px;
  background: linear-gradient(135deg, var(--gold), var(--saffron));
  color: #1a0f05; font: 800 .65rem 'Inter', sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
}

/* Messages page */
.side, .composer { border-color: var(--line) !important; }
.bubble { background: #251a12 !important; border-radius: 16px !important; }
.bubble.mine { background: linear-gradient(135deg, rgba(240,180,41,.25), rgba(255,138,61,.2)) !important; }
.side button.on { background: var(--card) !important; color: var(--gold) !important; }
.dot { background: var(--rose) !important; color: #fff !important; }

/* Messages page: back link */
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card);
  color: var(--text-muted) !important;
  font: 600 .85rem 'Inter', sans-serif; text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}
.back-link i { color: var(--gold); font-size: .8rem; }
.back-link:hover {
  color: var(--gold) !important; border-color: rgba(240,180,41,.5);
  background: rgba(240,180,41,.06);
}

/* Top bar layout */
.top-actions {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; justify-content: flex-end;
}

/* Sections: small, rectangular, solid gold with a bright shine, a little see-through */
header .nav-sections,
.nav-sections {
  position: relative !important; overflow: hidden !important;
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  padding: 8px 16px !important; border-radius: 4px !important;
  background: linear-gradient(135deg, rgba(255,241,184,.88) 0%, rgba(245,194,66,.88) 45%, rgba(232,150,30,.88) 100%) !important;
  color: #2a1704 !important;
  font: 700 .85rem 'Cinzel', 'Inter', serif !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  text-decoration: none !important;
  border: 1px solid rgba(255,235,170,.8) !important;
  box-shadow:
    0 0 0 3px rgba(240,180,41,.12),
    0 8px 20px rgba(240,180,41,.4),
    inset 0 1px 0 rgba(255,255,255,.7) !important;
  transition: transform .2s, box-shadow .3s;
  justify-self: center;
}
.nav-sections i { font-size: .85rem; }
.nav-sections::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  transform: skewX(-20deg); animation: sheen 3s ease-in-out infinite;
}
@keyframes sheen { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.nav-sections:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 4px rgba(240,180,41,.2),
    0 12px 26px rgba(240,180,41,.55),
    inset 0 1px 0 rgba(255,255,255,.8) !important;
}

/* Admin: blue, shiny, text centred */
#adminLink,
.nav-pill {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 20px; border-radius: 12px;
  font: 700 .9rem 'Inter', sans-serif; letter-spacing: .04em;
  text-align: center; line-height: 1;
  border: 1px solid rgba(147,197,253,.6);
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);
  color: #ffffff;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 8px 20px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .2s, box-shadow .3s, background .2s;
}
#adminLink::after,
.nav-pill::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); animation: sheen 3.4s ease-in-out infinite;
  pointer-events: none;
}
#adminLink:hover,
.nav-pill:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 55%, #2563eb 100%);
  box-shadow: 0 12px 26px rgba(37,99,235,.5), inset 0 1px 0 rgba(255,255,255,.45);
  color: #ffffff;
}

/* Log out: violet */
.nav-logout {
  border-color: rgba(167,139,250,.5); color: var(--violet);
  background: transparent; box-shadow: none;
}
.nav-logout::after { display: none; }
.nav-logout:hover {
  background: rgba(167,139,250,.12); color: #c9b8ff; border-color: var(--violet);
  box-shadow: none;
}

/* Messages icon in the top bar */
.nav-msg {
  position: relative; width: 44px; height: 44px; padding: 0;
  border-color: rgba(46,196,182,.5); color: var(--teal);
  background: transparent; box-shadow: none;
}
.nav-msg::after { display: none; }
.nav-msg:hover { background: rgba(46,196,182,.12); color: #7ff5ea; border-color: var(--teal); box-shadow: none; }
.msg-count {
  display: none; position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--rose); color: #fff;
  font: 700 11px 'Inter', sans-serif; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}

/* Responsive: stack the header on small screens */
@media (max-width: 760px) {
  header:has(.nav-sections) { grid-template-columns: 1fr !important; justify-items: center; }
  header:has(.nav-sections) .header-title,
  header:has(.nav-sections) .top-actions { grid-column: 1; }
  .nav-sections { padding: 7px 14px !important; font-size: .8rem !important; }
}

/* Login */
.login-title { font-family: 'Cinzel', serif !important; font-weight: 700 !important; }
/* Keep the top bar on one line */
.top-actions {
  flex-wrap: nowrap !important;
  gap: 8px !important;
}

/* Admin: solid blue, shiny, same font and shape as Sections, text centred */
#adminLink {
  height: auto !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
  font: 700 .85rem 'Cinzel', 'Inter', serif !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  background: linear-gradient(135deg, #60a5fa 0%, #2563eb 50%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(147,197,253,.7) !important;
  box-shadow: 0 8px 20px rgba(37,99,235,.4), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
#adminLink:hover {
  background: linear-gradient(135deg, #93c5fd 0%, #3b82f6 50%, #2563eb 100%) !important;
  box-shadow: 0 12px 26px rgba(37,99,235,.55), inset 0 1px 0 rgba(255,255,255,.5) !important;
  transform: translateY(-1px);
}
#adminLink::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-20deg); animation: sheen 3.4s ease-in-out infinite;
  pointer-events: none;
}