:root{
  --s900:#0d1117;--s850:#11161f;--s800:#161c27;--s700:#1d2532;--s600:#2a3342;
  --amber:#ff6a00;--amber-d:#d44e00;--line:#27303f;--muted:#8b94a3;--txt:#e9e7e1;--paper:#f3f4f6;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Be Vietnam Pro',system-ui,sans-serif;background:var(--paper);color:#1a1f28;font-size:15px;line-height:1.55}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
h1,h2,h3{font-family:'Oswald',sans-serif;letter-spacing:.01em}

/* LOGIN */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:var(--s900);padding:20px;
  background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:46px 46px}
.login-card{background:var(--s800);border:1px solid var(--line);border-top:4px solid var(--amber);border-radius:6px;padding:42px 38px;width:100%;max-width:400px;box-shadow:0 30px 70px -20px rgba(0,0,0,.6)}
.login-card .lg{text-align:center;margin-bottom:26px}
.login-card .lg h1{color:#fff;text-transform:uppercase;font-size:1.5rem;font-weight:700}
.login-card .lg span{color:var(--amber);font-family:'Oswald';text-transform:uppercase;letter-spacing:.2em;font-size:.7rem}
.login-card label{display:block;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;font-family:'Oswald';margin-bottom:7px;margin-top:16px}
.login-card input{width:100%;background:var(--s900);border:1px solid var(--line);border-radius:4px;padding:13px 15px;color:#fff;font-size:.95rem}
.login-card input:focus{outline:none;border-color:var(--amber)}
.login-card button{width:100%;margin-top:24px;background:var(--amber);color:#fff;border:none;padding:14px;border-radius:4px;font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;font-size:.95rem;transition:.25s}
.login-card button:hover{background:var(--amber-d)}
.login-err{background:rgba(220,60,40,.15);border:1px solid #dc3c28;color:#ff9a88;padding:11px 14px;border-radius:4px;font-size:.88rem;margin-bottom:8px}

/* LAYOUT */
.layout{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sidebar{background:var(--s900);color:var(--txt);padding:24px 0;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar .brand{padding:0 24px 22px;border-bottom:1px solid var(--line);margin-bottom:14px}
.sidebar .brand h2{color:#fff;text-transform:uppercase;font-size:1.15rem;font-weight:700;line-height:1}
.sidebar .brand span{color:var(--amber);font-family:'Oswald';text-transform:uppercase;letter-spacing:.18em;font-size:.62rem}
.sidebar nav a{display:flex;align-items:center;gap:12px;padding:12px 24px;color:var(--muted);font-size:.92rem;border-left:3px solid transparent;transition:.2s}
.sidebar nav a:hover{color:#fff;background:var(--s800)}
.sidebar nav a.active{color:#fff;background:var(--s800);border-left-color:var(--amber)}
.sidebar nav a svg{width:18px;height:18px;flex-shrink:0}
.sidebar .sep{padding:14px 24px 6px;color:var(--s600);font-family:'Oswald';text-transform:uppercase;letter-spacing:.14em;font-size:.66rem}
.sidebar .logout{margin:18px 24px 0;display:block;text-align:center;border:1px solid var(--line);padding:10px;border-radius:4px;color:var(--muted);font-size:.85rem}
.sidebar .logout:hover{border-color:var(--amber);color:var(--amber)}
.viewsite{margin:8px 24px 0;display:block;text-align:center;background:var(--amber);color:#fff;padding:10px;border-radius:4px;font-family:'Oswald';text-transform:uppercase;font-size:.8rem;letter-spacing:.06em}
.viewsite:hover{background:var(--amber-d)}

.main{padding:30px 36px}
.topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;flex-wrap:wrap;gap:12px}
.topline h1{font-size:1.7rem;text-transform:uppercase}
.flash{background:#dff5e1;border:1px solid #5cb85c;color:#2d6a31;padding:12px 16px;border-radius:5px;margin-bottom:20px;font-size:.92rem}

/* CARDS / STATS */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:30px}
.stat{background:#fff;border:1px solid #e3e6ea;border-radius:8px;padding:22px;border-left:4px solid var(--amber)}
.stat .n{font-family:'Oswald';font-weight:700;font-size:2.2rem;color:#11161f;line-height:1}
.stat .l{color:#6b7280;font-size:.85rem;margin-top:6px}
@media(max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr)}}

/* TABLE */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--amber);color:#fff;border:none;padding:11px 18px;border-radius:5px;font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;cursor:pointer;transition:.2s}
.btn:hover{background:var(--amber-d)}
.btn-sm{padding:7px 12px;font-size:.74rem}
.btn-gray{background:#5d6675}.btn-gray:hover{background:#41454e}
.btn-red{background:#dc3c28}.btn-red:hover{background:#b32d1d}
.btn-line{background:#fff;border:1px solid #cfd4da;color:#41454e}.btn-line:hover{border-color:var(--amber);color:var(--amber)}

.panel{background:#fff;border:1px solid #e3e6ea;border-radius:8px;overflow:hidden}
table{width:100%;border-collapse:collapse}
th{text-align:left;background:#f7f8fa;padding:13px 16px;font-family:'Oswald';text-transform:uppercase;font-size:.74rem;letter-spacing:.06em;color:#6b7280;border-bottom:1px solid #e3e6ea}
td{padding:12px 16px;border-bottom:1px solid #eef0f3;vertical-align:middle}
tr:last-child td{border-bottom:none}
td img.thumb{width:64px;height:48px;object-fit:cover;border-radius:4px;border:1px solid #e3e6ea}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.empty{padding:40px;text-align:center;color:#9aa0aa}

/* FORM */
.form-panel{background:#fff;border:1px solid #e3e6ea;border-radius:8px;padding:30px;max-width:820px}
.fg{margin-bottom:18px}
.fg label{display:block;font-family:'Oswald';text-transform:uppercase;font-size:.76rem;letter-spacing:.08em;color:#41454e;margin-bottom:7px}
.fg input[type=text],.fg input[type=email],.fg input[type=tel],.fg input[type=password],.fg textarea,.fg select{
  width:100%;border:1px solid #cfd4da;border-radius:5px;padding:11px 13px;font-family:inherit;font-size:.95rem;color:#1a1f28;background:#fff}
.fg input:focus,.fg textarea:focus,.fg select:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,106,0,.12)}
.fg textarea{resize:vertical;min-height:90px}
.fg .hint{font-size:.78rem;color:#9aa0aa;margin-top:5px}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:600px){.fg-row{grid-template-columns:1fr}}
.img-preview{margin-top:10px}
.img-preview img{max-width:200px;border:1px solid #e3e6ea;border-radius:5px}
.form-actions{display:flex;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid #eef0f3}
.section-card{background:#fff;border:1px solid #e3e6ea;border-radius:8px;padding:24px;margin-bottom:20px}
.section-card h3{text-transform:uppercase;font-size:1.05rem;color:#11161f;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid #eef0f3}
.badge{display:inline-block;background:#eef0f3;color:#6b7280;padding:3px 9px;border-radius:20px;font-size:.74rem;font-family:'Oswald'}
.badge.new{background:var(--amber);color:#fff}
@media(max-width:780px){.layout{grid-template-columns:1fr}.sidebar{position:relative;height:auto}}
</style>