@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
    --navy: #0d1b2a;
    --navy2: #162536;
    --navy3: #1e3550;
    --gold: #c9a84c;
    --gold2: #e2bf6e;
    --gold-bg: rgba(201,168,76,0.10);
    --gold-border: rgba(201,168,76,0.22);
    --white: #ffffff;
    --off: #f5f7fa;
    --muted: #7d95ab;
    --text: #253545;
    --border: #dde5ee;
    --success: #27ae60;
    --danger: #c0392b;
    --info: #2980b9;
    --sidebar: 265px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--off);
    color: var(--text);
    min-height: 100vh;
}

/* ─── LOGIN ─── */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #07111c 0%, #122030 45%, #0a1c30 100%);
    position: relative;
    overflow: hidden;
}
.login-wrap::before {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(201,168,76,.07), transparent 70%);
    top: -100px; right: -80px; border-radius: 50%;
}
.login-wrap::after {
    content: '';
    position: absolute;
    width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(41,128,185,.05), transparent 70%);
    bottom: -80px; left: -60px; border-radius: 50%;
}
.login-box {
    width: 420px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--gold-border);
    border-radius: 22px;
    padding: 48px 42px 44px;
    backdrop-filter: blur(18px);
    position: relative; z-index: 2;
    box-shadow: 0 28px 80px rgba(0,0,0,.45);
}
.login-logo {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: var(--gold);
    letter-spacing: .5px;
    margin-bottom: 4px;
}
.login-logo span { color: #fff; }
.login-hint { text-align:center; color:var(--muted); font-size:.75rem; letter-spacing:1.8px; text-transform:uppercase; margin-bottom:34px; }
.lbl { display:block; font-size:.73rem; font-weight:600; letter-spacing:.7px; text-transform:uppercase; color:#9eb8cc; margin-bottom:7px; }
.linput {
    width:100%; background:rgba(255,255,255,.05); border:1.5px solid rgba(201,168,76,.18);
    border-radius:10px; color:#fff; padding:12px 15px; font-family:'DM Sans',sans-serif;
    font-size:.9rem; outline:none; transition:border-color .25s, box-shadow .25s;
}
.linput:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,168,76,.13); }
.linput::placeholder { color:rgba(255,255,255,.2); }
.btn-gold {
    width:100%; padding:13px; background:linear-gradient(135deg,var(--gold),#9a7a30);
    border:none; border-radius:10px; color:var(--navy); font-weight:700; font-size:.87rem;
    letter-spacing:1px; text-transform:uppercase; cursor:pointer; font-family:'DM Sans',sans-serif;
    transition:all .3s;
}
.btn-gold:hover { background:linear-gradient(135deg,var(--gold2),var(--gold)); transform:translateY(-1px); box-shadow:0 8px 22px rgba(201,168,76,.3); }

/* ─── SIDEBAR ─── */
.sidebar {
    width: var(--sidebar);
    background: var(--navy);
    min-height: 100vh;
    position: fixed; top:0; left:0; z-index:200;
    display:flex; flex-direction:column;
    border-right: 1px solid rgba(201,168,76,.12);
    transition: transform .3s;
}
.sb-brand { padding:26px 22px 18px; border-bottom:1px solid var(--gold-border); }
.sb-brand-name { font-family:'Playfair Display',serif; font-size:1.45rem; color:var(--gold); }
.sb-brand-name span { color:#fff; }
.sb-brand-sub { font-size:.64rem; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-top:2px; }
.sb-nav { padding:16px 0; flex:1; overflow-y:auto; }
.sb-section { font-size:.62rem; font-weight:700; letter-spacing:2.2px; text-transform:uppercase; color:var(--muted); padding:14px 22px 5px; }
.sb-link {
    display:flex; align-items:center; gap:11px;
    padding:10px 22px; color:#b8cedf; font-size:.855rem; font-weight:500;
    text-decoration:none; transition:all .22s; position:relative;
}
.sb-link:hover { color:#fff; background:rgba(201,168,76,.07); }
.sb-link.active { color:var(--gold); background:var(--gold-bg); }
.sb-link.active::before {
    content:''; position:absolute; left:0; top:0; bottom:0;
    width:3px; background:var(--gold); border-radius:0 2px 2px 0;
}
.sb-link i { width:18px; text-align:center; font-size:.95rem; }
.sb-footer { padding:18px 22px; border-top:1px solid var(--gold-border); }
.sb-admin { display:flex; align-items:center; gap:11px; margin-bottom:13px; }
.sb-av { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--gold),#8a6720); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--navy); font-size:.82rem; }
.sb-aname { font-size:.83rem; font-weight:600; color:#fff; }
.sb-arole { font-size:.67rem; color:var(--muted); }
.sb-logout { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.78rem; text-decoration:none; padding:7px 11px; border-radius:8px; transition:all .22s; }
.sb-logout:hover { color:#e74c3c; background:rgba(231,76,60,.1); }

/* ─── MAIN ─── */
.main { margin-left:var(--sidebar); min-height:100vh; }
.topbar {
    background:#fff; border-bottom:1px solid var(--border);
    padding:15px 30px; display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:100; box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.pg-title { font-family:'Playfair Display',serif; font-size:1.35rem; color:var(--navy); font-weight:700; }
.pg-sub { font-size:.75rem; color:var(--muted); margin-top:1px; }
.content { padding:28px 30px; }

/* ─── CARDS ─── */
.card {
    background:#fff; border-radius:16px; border:1px solid var(--border);
    box-shadow:0 3px 18px rgba(0,0,0,.04); overflow:hidden;
}
.card-head {
    background:linear-gradient(135deg,var(--navy) 0%,var(--navy3) 100%);
    padding:20px 26px; display:flex; align-items:center; gap:13px;
}
.card-head-icon {
    width:40px; height:40px; border-radius:10px;
    background:var(--gold-bg); border:1px solid var(--gold-border);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold); font-size:1.05rem; flex-shrink:0;
}
.card-head-title { font-family:'Playfair Display',serif; font-size:1.1rem; color:#fff; font-weight:700; }
.card-head-desc { font-size:.74rem; color:var(--muted); margin-top:2px; }
.card-body { padding:28px 26px; }

/* ─── STAT CARDS ─── */
.stat { background:#fff; border-radius:14px; border:1px solid var(--border); padding:22px; transition:transform .25s,box-shadow .25s; }
.stat:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.08); }
.stat-ico { width:46px; height:46px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; margin-bottom:14px; }
.stat-ico.g { background:rgba(201,168,76,.12); color:var(--gold); }
.stat-ico.b { background:rgba(41,128,185,.12); color:var(--info); }
.stat-ico.gr { background:rgba(39,174,96,.12); color:var(--success); }
.stat-val { font-family:'Playfair Display',serif; font-size:2rem; font-weight:700; color:var(--navy); line-height:1; }
.stat-lbl { font-size:.77rem; color:var(--muted); margin-top:4px; font-weight:500; }

/* ─── FORM ELEMENTS ─── */
.flabel { display:block; font-size:.74rem; font-weight:600; color:#607080; letter-spacing:.5px; text-transform:uppercase; margin-bottom:7px; }
.fcontrol {
    width:100%; border:1.5px solid var(--border); border-radius:10px;
    padding:10px 13px; font-family:'DM Sans',sans-serif; font-size:.88rem;
    color:var(--navy); background:#fafcff; transition:all .22s; outline:none;
}
.fcontrol:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,168,76,.11); background:#fff; }
.fcontrol::placeholder { color:#b0c0cc; }

/* ─── BUTTONS ─── */
.btn-gen {
    background:linear-gradient(135deg,var(--navy),var(--navy3));
    border:1.5px solid var(--gold-border); color:var(--gold);
    font-weight:600; padding:11px 24px; border-radius:10px;
    font-family:'DM Sans',sans-serif; cursor:pointer; font-size:.86rem;
    display:inline-flex; align-items:center; gap:7px;
    transition:all .28s; text-decoration:none;
}
.btn-gen:hover {
    background:linear-gradient(135deg,var(--gold),#9a7a30);
    color:var(--navy); border-color:transparent;
    transform:translateY(-1px); box-shadow:0 8px 22px rgba(201,168,76,.28);
}
.btn-dl {
    background:linear-gradient(135deg,var(--success),#1e8449);
    color:#fff; border:none; padding:6px 13px; border-radius:8px;
    font-size:.77rem; font-weight:600; text-decoration:none;
    display:inline-flex; align-items:center; gap:5px; transition:all .22s; cursor:pointer;
}
.btn-dl:hover { transform:translateY(-1px); box-shadow:0 5px 14px rgba(39,174,96,.32); color:#fff; }
.btn-del {
    background:linear-gradient(135deg,var(--danger),#922b21);
    color:#fff; border:none; padding:6px 13px; border-radius:8px;
    font-size:.77rem; font-weight:600; text-decoration:none;
    display:inline-flex; align-items:center; gap:5px; transition:all .22s; cursor:pointer;
}
.btn-del:hover { transform:translateY(-1px); box-shadow:0 5px 14px rgba(192,57,43,.3); color:#fff; }
.btn-sm {
    padding:8px 18px; font-size:.82rem;
    border-radius:9px; font-weight:600; cursor:pointer; border:none;
    display:inline-flex; align-items:center; gap:6px; transition:all .22s; text-decoration:none;
}
.btn-sm.navy { background:var(--navy); color:var(--gold); }
.btn-sm.navy:hover { background:var(--navy3); }
.btn-sm.outline { background:#fff; border:1.5px solid var(--border); color:var(--text); }
.btn-sm.outline:hover { border-color:#aaa; }

/* ─── TABLE ─── */
.tbl-wrap { background:#fff; border-radius:16px; border:1px solid var(--border); overflow:hidden; box-shadow:0 3px 18px rgba(0,0,0,.04); }
.tbl-head { background:linear-gradient(135deg,var(--navy),var(--navy3)); padding:18px 24px; display:flex; align-items:center; justify-content:space-between; }
.tbl-head-title { font-family:'Playfair Display',serif; color:#fff; font-size:1.05rem; }
.tbl { width:100%; border-collapse:collapse; }
.tbl thead th { background:#eff3f8; color:#607080; font-size:.7rem; font-weight:700; letter-spacing:.9px; text-transform:uppercase; padding:12px 15px; border-bottom:1px solid var(--border); white-space:nowrap; }
.tbl tbody td { padding:13px 15px; font-size:.86rem; color:#354555; border-bottom:1px solid #f0f4f8; vertical-align:middle; }
.tbl tbody tr:last-child td { border-bottom:none; }
.tbl tbody tr:hover td { background:#fafcff; }

/* ─── BADGE ─── */
.badge-ref { background:linear-gradient(135deg,var(--gold),#8a6720); color:var(--navy); font-weight:700; padding:3px 10px; border-radius:20px; font-size:.71rem; letter-spacing:.4px; white-space:nowrap; }
.badge-ref.blue { background:linear-gradient(135deg,var(--info),#1f618d); color:#fff; }

/* ─── ALERTS ─── */
.alert-ok { background:rgba(39,174,96,.08); border:1px solid rgba(39,174,96,.28); border-radius:12px; color:#1a6b3a; padding:13px 17px; display:flex; align-items:center; gap:9px; font-size:.86rem; }
.alert-err { background:rgba(192,57,43,.08); border:1px solid rgba(192,57,43,.25); border-radius:12px; color:#7b241c; padding:13px 17px; display:flex; align-items:center; gap:9px; font-size:.86rem; }
.alert-warn { background:rgba(243,156,18,.08); border:1px solid rgba(243,156,18,.28); border-radius:12px; color:#7d6608; padding:13px 17px; display:flex; align-items:center; gap:9px; font-size:.86rem; }

/* ─── UPLOAD ZONE ─── */
.upload-zone {
    border:2px dashed var(--gold-border); border-radius:13px;
    padding:30px 20px; text-align:center; background:#fafcff;
    transition:border-color .25s, background .25s; cursor:pointer;
}
.upload-zone:hover, .upload-zone.drag { border-color:var(--gold); background:var(--gold-bg); }
.upload-zone i { font-size:2.2rem; color:var(--gold); opacity:.7; margin-bottom:10px; }
.upload-zone p { font-size:.85rem; color:var(--muted); }
.upload-zone strong { color:var(--text); }

/* ─── PREVIEW ─── */
.preview-panel {
    border:2px dashed var(--border); border-radius:14px;
    padding:28px 20px; min-height:200px; text-align:center;
    color:var(--muted); background:#fafcff;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.preview-panel i { font-size:2.3rem; margin-bottom:11px; opacity:.35; }

/* ─── LETTERHEAD PREVIEW THUMB ─── */
.lh-thumb { width:100%; max-height:180px; object-fit:contain; border-radius:8px; border:1px solid var(--border); }
.lh-status-ok { display:flex; align-items:center; gap:8px; font-size:.83rem; color:var(--success); font-weight:600; }
.lh-status-none { font-size:.83rem; color:var(--muted); font-style:italic; }

/* ─── DIVIDER ─── */
.divider-gold { border:none; height:1px; background:linear-gradient(to right,transparent,var(--gold),transparent); margin:18px 0; opacity:.25; }

/* ─── EMPTY ─── */
.empty { text-align:center; padding:56px 20px; color:var(--muted); }
.empty i { font-size:2.8rem; margin-bottom:14px; opacity:.28; display:block; }

/* ─── FADE IN ─── */
.fade-in { animation: fi .38s ease; }
@keyframes fi { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* ─── RESPONSIVE ─── */
@media(max-width:768px){
    .sidebar { transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); }
    .main { margin-left:0; }
    .content { padding:16px; }
    .topbar { padding:12px 16px; }
}
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--off); }
::-webkit-scrollbar-thumb { background:#c5d0da; border-radius:3px; }