
*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#050505;--panel:rgba(255,255,255,.075);--panel2:rgba(255,255,255,.12);--line:rgba(255,255,255,.12);--text:#fffaf0;--muted:#b9b0a1;--gold:#d4af37;--gold2:#f6d365;--input:rgba(255,255,255,.075);--danger:#ef4444;--shadow:0 28px 90px rgba(0,0,0,.45)}
html,body{min-height:100%}
body{font-family:Inter,Arial,sans-serif;background:radial-gradient(circle at top left,rgba(212,175,55,.22),transparent 30rem),radial-gradient(circle at bottom right,rgba(246,211,101,.1),transparent 28rem),var(--bg);color:var(--text);display:grid;grid-template-columns:290px 1fr}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}
.sidebar{min-height:100vh;padding:24px;border-right:1px solid var(--line);background:rgba(0,0,0,.30);backdrop-filter:blur(18px);position:sticky;top:0}
.brand{display:flex;align-items:center;gap:12px;font-size:1.45rem;font-weight:950;letter-spacing:-.05em;margin-bottom:34px;color:var(--text)}
.brand-mark{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#050505;font-weight:950;box-shadow:0 16px 40px rgba(212,175,55,.26)}
.brand img{width:56px;height:56px;object-fit:contain}
nav{display:grid;gap:8px}nav a{color:var(--muted);padding:13px 14px;border-radius:16px;font-weight:750;transition:.2s}nav a:hover{color:var(--text);background:rgba(212,175,55,.13)}
.sidebar-card{margin-top:34px;padding:18px;border-radius:20px;border:1px solid var(--line);background:var(--panel)}
.sidebar-card p,.muted,small{color:var(--muted)}.main{padding:30px;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-bottom:26px}.top-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.eyebrow{color:var(--gold);font-weight:950;text-transform:uppercase;letter-spacing:.14em;font-size:.75rem}
h1{font-size:clamp(2.1rem,5vw,4rem);line-height:.95;letter-spacing:-.075em;margin-top:8px}h2{letter-spacing:-.04em;margin-bottom:12px}
.primary-btn,.ghost-btn,.danger-btn{border:0;border-radius:999px;min-height:44px;padding:0 18px;font-weight:900;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center}
.primary-btn{color:#050505;background:linear-gradient(135deg,var(--gold),var(--gold2));box-shadow:0 18px 40px rgba(212,175,55,.22)}.ghost-btn{color:var(--text);border:1px solid var(--line);background:var(--panel)}.danger-btn{color:white;background:rgba(239,68,68,.18);border:1px solid rgba(239,68,68,.35)}.small{min-height:34px;padding:0 12px;font-size:.85rem}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}.content-grid{display:grid;grid-template-columns:1fr 350px;gap:16px}.detail-grid,.ticket-page{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.panel,.stat-card{border:1px solid var(--line);background:var(--panel);border-radius:26px;backdrop-filter:blur(18px);box-shadow:var(--shadow)}.panel{padding:22px;margin-bottom:16px}.stat-card{padding:22px}.stat-card span{color:var(--muted)}.stat-card strong{display:block;font-size:2.15rem;letter-spacing:-.07em;margin:8px 0 4px}
.panel-head{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:18px}
input,select,textarea{width:100%;color:var(--text);border:1px solid var(--line);background:var(--input);outline:0;border-radius:16px;padding:13px 14px;color-scheme:dark}
select option{background:#11100d!important;color:#fffaf0!important}select option:checked{background:#d4af37!important;color:#050505!important}
input:focus,select:focus,textarea:focus{border-color:rgba(212,175,55,.55);box-shadow:0 0 0 4px rgba(212,175,55,.12)}textarea{resize:vertical}
.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:780px}th,td{padding:15px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}th{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}td small{display:block;margin-top:3px}
.badge{display:inline-flex;padding:7px 10px;border-radius:999px;color:#050505;background:linear-gradient(135deg,var(--gold),var(--gold2));font-weight:850;font-size:.78rem}
.pipeline,.info-list{display:grid;gap:10px}.pipeline div,.info-list div{display:flex;justify-content:space-between;gap:14px;padding:14px;border-radius:16px;background:rgba(212,175,55,.09);border:1px solid var(--line)}.pipeline span,.info-list span{color:var(--muted)}.mini-total{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:18px;background:rgba(212,175,55,.1)}
form{display:grid;gap:13px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}label{display:grid;gap:8px;color:var(--muted);font-weight:700}.form-panel{max-width:1000px}.search-form,.status-form{display:flex;gap:10px}
.flash{padding:13px 15px;border-radius:16px;margin-bottom:10px;border:1px solid var(--line);background:var(--panel)}.flash.success{border-color:rgba(52,211,153,.35)}.flash.error{border-color:rgba(239,68,68,.35)}
.login-page{display:grid;place-items:center;grid-template-columns:1fr;padding:20px;min-height:100vh}.login-card{width:min(510px,100%);border:1px solid var(--line);border-radius:30px;background:var(--panel);padding:34px;box-shadow:var(--shadow);backdrop-filter:blur(18px)}.login-logo{width:100%;max-width:330px;max-height:110px;object-fit:contain;margin-bottom:20px}.login-brand{margin-bottom:26px}.login-card p{color:var(--muted);margin:10px 0 20px}
.inline-form{grid-template-columns:1.1fr 1fr .8fr 1fr 1.2fr auto;margin-bottom:18px}.invoice-form{grid-template-columns:1fr 1.2fr .8fr 1fr 1fr auto}.progress{height:10px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden}.progress span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--gold2))}
.project-card,.ticket-card-mini,.message{padding:16px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.045);margin-bottom:12px}.project-title,.ticket-head,.message-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}.message.admin{border-color:rgba(212,175,55,.35);background:rgba(212,175,55,.08)}.message p{white-space:pre-wrap;color:#eee2cc}.notes-box,.reply-box{white-space:pre-wrap;color:var(--muted);padding:15px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.row-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row-actions form{display:inline-flex}.pay-buttons,.pay-stack{display:flex;gap:10px;flex-wrap:wrap}textarea[readonly]{min-height:280px;font-family:ui-monospace,Consolas,monospace;font-size:12px}.danger-text{color:#fca5a5}
@media(max-width:1100px){body{grid-template-columns:1fr}.sidebar{position:relative;min-height:auto;border-right:0;border-bottom:1px solid var(--line)}nav{grid-template-columns:repeat(3,1fr)}.content-grid,.stats-grid,.detail-grid,.ticket-page{grid-template-columns:1fr 1fr}.inline-form,.invoice-form{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.main{padding:18px}.topbar,.panel-head{align-items:flex-start;flex-direction:column}.stats-grid,.content-grid,.detail-grid,.ticket-page,.form-row,nav,.inline-form,.invoice-form{grid-template-columns:1fr}.search-form,.status-form{width:100%;flex-direction:column}h1{font-size:2.4rem}}

.pay-stack form{display:inline-flex}.info-list strong{word-break:break-word}.table-wrap small{word-break:break-word}.top-actions form{display:inline-flex}


/* Neoxify theme system */
:root {
  --nx-bg: #050505;
  --nx-bg-soft: #11100d;
  --nx-card: rgba(255,255,255,.075);
  --nx-card-solid: #171716;
  --nx-text: #fffaf0;
  --nx-muted: #bfb5a6;
  --nx-border: rgba(255,255,255,.12);
  --nx-input: rgba(255,255,255,.08);
  --nx-gold: #d4af37;
  --nx-gold-2: #f6d365;
  --nx-shadow: rgba(0,0,0,.42);
}

:root[data-theme="light"] {
  --nx-bg: #f7f3ea;
  --nx-bg-soft: #ffffff;
  --nx-card: rgba(255,255,255,.82);
  --nx-card-solid: #ffffff;
  --nx-text: #14110b;
  --nx-muted: #655f54;
  --nx-border: rgba(20,17,11,.13);
  --nx-input: rgba(20,17,11,.045);
  --nx-gold: #b78f17;
  --nx-gold-2: #d4af37;
  --nx-shadow: rgba(83,64,16,.14);
}

body {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--nx-gold) 22%, transparent), transparent 34rem),
    radial-gradient(circle at bottom right, color-mix(in srgb, var(--nx-gold-2) 11%, transparent), transparent 30rem),
    var(--nx-bg) !important;
  color: var(--nx-text) !important;
}

.sidebar,
.panel,
.card,
.metric-card,
.form-panel,
.table-wrap,
.login-card,
.auth-card,
.modal,
.detail-card,
.hosting-card {
  background: var(--nx-card) !important;
  border-color: var(--nx-border) !important;
  color: var(--nx-text) !important;
  box-shadow: 0 24px 70px var(--nx-shadow);
}

.sidebar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--nx-card-solid) 88%, transparent), color-mix(in srgb, var(--nx-bg) 88%, transparent)) !important;
}

h1, h2, h3, h4, strong, th, label {
  color: var(--nx-text) !important;
}

p, .muted, small, td, .subtle, .description {
  color: var(--nx-muted) !important;
}

input, select, textarea {
  background: var(--nx-input) !important;
  border-color: var(--nx-border) !important;
  color: var(--nx-text) !important;
}

select option {
  background: var(--nx-card-solid) !important;
  color: var(--nx-text) !important;
}

table, tr, td, th {
  border-color: var(--nx-border) !important;
}

a, .sidebar a {
  color: inherit;
}

.sidebar a:hover,
.sidebar a.active {
  background: color-mix(in srgb, var(--nx-gold) 16%, transparent) !important;
  color: var(--nx-text) !important;
}

.theme-toggle {
  border: 1px solid var(--nx-border);
  background: var(--nx-card);
  color: var(--nx-text);
  border-radius: 999px;
  padding: 10px 13px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.theme-toggle:hover {
  border-color: color-mix(in srgb, var(--nx-gold) 55%, var(--nx-border));
  box-shadow: 0 10px 30px color-mix(in srgb, var(--nx-gold) 16%, transparent);
}

.panel-theme-toggle {
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}

:root[data-theme="light"] .primary-btn,
:root[data-theme="light"] .panel-btn {
  color: #14110b !important;
}

:root[data-theme="light"] .ghost-btn,
:root[data-theme="light"] .danger-btn {
  color: var(--nx-text) !important;
}


.captcha-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
}
.captcha-question {
  border: 1px solid var(--nx-border, rgba(255,255,255,.12));
  background: color-mix(in srgb, var(--nx-gold, #d4af37) 14%, transparent);
  color: var(--nx-text, #fffaf0);
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 950;
  white-space: nowrap;
}
@media(max-width:640px){
  .captcha-row { grid-template-columns: 1fr; }
}



/* Panel light mode readability refinement */
:root[data-theme="light"] {
  --nx-bg: #f6f0e4;
  --nx-bg-soft: #ffffff;
  --nx-card: rgba(255,255,255,.92);
  --nx-card-solid: #ffffff;
  --nx-text: #17130b;
  --nx-muted: #514837;
  --nx-border: rgba(54,42,18,.16);
  --nx-input: rgba(255,255,255,.76);
  --nx-gold: #8a6511;
  --nx-gold-2: #b98915;
  --nx-shadow: rgba(90,67,21,.14);
}

:root[data-theme="light"] .eyebrow,
:root[data-theme="light"] .brand,
:root[data-theme="light"] .badge,
:root[data-theme="light"] .stat-card span,
:root[data-theme="light"] .info-list span {
  color: #6f4f08 !important;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at top left, rgba(185,137,21,.14), transparent 34rem),
    radial-gradient(circle at bottom right, rgba(138,101,17,.08), transparent 30rem),
    #f6f0e4 !important;
}

:root[data-theme="light"] .sidebar,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .card,
:root[data-theme="light"] .metric-card,
:root[data-theme="light"] .form-panel,
:root[data-theme="light"] .table-wrap,
:root[data-theme="light"] .login-card,
:root[data-theme="light"] .auth-card,
:root[data-theme="light"] .modal,
:root[data-theme="light"] .detail-card,
:root[data-theme="light"] .hosting-card,
:root[data-theme="light"] .stat-card {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(54,42,18,.14) !important;
  box-shadow: 0 22px 60px rgba(90,67,21,.12) !important;
}

:root[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(246,240,228,.9)) !important;
}

:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  background: rgba(255,255,255,.86) !important;
  color: #17130b !important;
  border-color: rgba(54,42,18,.20) !important;
}

:root[data-theme="light"] .ghost-btn,
:root[data-theme="light"] .theme-toggle {
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(54,42,18,.18) !important;
  color: #17130b !important;
}

:root[data-theme="light"] .primary-btn,
:root[data-theme="light"] .panel-btn {
  background: linear-gradient(135deg,#9a7113,#d4af37) !important;
  color: #fff8e7 !important;
}

:root[data-theme="light"] .captcha-question {
  background: rgba(138,101,17,.09) !important;
  border-color: rgba(138,101,17,.20) !important;
  color: #4d3606 !important;
}
