
:root{--ink:#1a1108;--bg:#111827;--panel:#1f2937;--border:rgba(255,255,255,.08);--cream:#fdf6ee;--gold:#d4a76a;--coral:#e87b5a;--green:#5aab6e;--red:#e05a5a;--fd:'Playfair Display',Georgia,serif;--fs:'Caveat',cursive;--fb:'Lato',sans-serif;--r:14px;--t:.25s ease}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{font-size:17px}
body{font-family:var(--fb);background:var(--bg);color:#e2e8f0;min-height:100vh}
button,a,select,input,label{cursor:pointer}
.layout{display:grid;grid-template-columns:255px 1fr;min-height:100vh}
.sidebar{background:var(--ink);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sb-logo{padding:1.8rem 1.5rem 1.5rem;border-bottom:1px solid var(--border)}
.sb-logo .name{font-family:var(--fs);font-size:1.5rem;color:var(--cream);display:block}
.sb-logo .role{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block;margin-top:2px}
.sb-nav{flex:1;padding:1rem 0;overflow-y:auto}
.nl{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.25);padding:.8rem 1.5rem .3rem}
.sb-nav a{display:flex;align-items:center;gap:.75rem;padding:.65rem 1.5rem;font-size:.85rem;color:rgba(255,255,255,.6);text-decoration:none;border-left:3px solid transparent;transition:all var(--t)}
.sb-nav a:hover{color:var(--cream);background:rgba(255,255,255,.05)}
.sb-nav a.active{color:var(--cream);background:rgba(212,167,106,.12);border-left-color:var(--gold)}
.sb-foot{padding:1.2rem 1.5rem;border-top:1px solid var(--border)}
.sb-foot a{font-size:.78rem;color:var(--coral);text-decoration:none;display:flex;align-items:center;gap:.4rem}
.sb-foot a:hover{color:#f09070}
.main{overflow-y:auto}
.page{display:none;padding:2rem 2.5rem}
.page.active{display:block}
.ph h1{font-family:var(--fd);font-size:1.9rem;color:var(--cream);margin-bottom:.25rem}
.ph p{color:rgba(255,255,255,.5);font-size:.9rem;margin-bottom:2rem}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem}
.sc{background:var(--panel);border-radius:var(--r);padding:1.4rem;border:1px solid var(--border)}
.sc .icon{font-size:1.6rem;display:block;margin-bottom:.5rem}
.sc .val{font-family:var(--fd);font-size:1.9rem;font-weight:700;color:var(--cream)}
.sc .lbl{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:.15rem}
.sc .delta{font-size:.75rem;margin-top:.4rem;color:rgba(255,255,255,.35)}
.sc .delta.up{color:var(--green)}
.panel{background:var(--panel);border-radius:var(--r);border:1px solid var(--border);overflow:hidden;margin-bottom:1.5rem}
.ph2{padding:1.2rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.ph2 h2{font-family:var(--fd);font-size:1.1rem;color:var(--cream)}
.pb{padding:1.5rem}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.1rem;border-radius:100px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;border:none;font-family:var(--fb);transition:all var(--t);text-decoration:none}
.bg{background:var(--gold);color:var(--ink);font-weight:700}.bg:hover{background:#e0b87a;transform:translateY(-1px)}
.bc{background:var(--coral);color:#fff}.bc:hover{background:#d06a4a;transform:translateY(-1px)}
.bh{background:rgba(255,255,255,.07);color:rgba(255,255,255,.75);border:1px solid var(--border)}.bh:hover{background:rgba(255,255,255,.12);color:var(--cream)}
.bd{background:rgba(224,90,90,.15);color:var(--red);border:1px solid rgba(224,90,90,.25)}.bd:hover{background:rgba(224,90,90,.25)}
.bs{background:rgba(90,171,110,.15);color:var(--green);border:1px solid rgba(90,171,110,.25)}.bs:hover{background:rgba(90,171,110,.25)}
.sm{padding:.35rem .8rem;font-size:.7rem}
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.35);padding:0 1rem .75rem;text-align:left;border-bottom:1px solid var(--border)}
.tbl td{padding:.9rem 1rem;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:rgba(255,255,255,.02)}
.thumb{width:52px;height:52px;border-radius:10px;overflow:hidden;flex-shrink:0;background:#2a3545;display:flex;align-items:center;justify-content:center;font-size:1.6rem}
.thumb img{width:100%;height:100%;object-fit:cover}
.ac{display:flex;align-items:center;gap:.75rem}
.at{font-weight:700;color:var(--cream);font-size:.9rem}
.as{font-size:.72rem;color:rgba(255,255,255,.4);margin-top:1px}
.bdg{display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:100px;font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.order-row{border:1px solid var(--border);border-radius:var(--r2);margin-bottom:.6rem;overflow:hidden}
.order-summary{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.1rem;cursor:pointer;gap:1rem;flex-wrap:wrap}
.order-summary:hover{background:rgba(255,255,255,.03)}
.order-detail{display:none;padding:1rem 1.1rem 1.2rem;border-top:1px solid var(--border);background:rgba(0,0,0,.15)}
.order-detail.open{display:block}
.bn{background:rgba(232,123,90,.2);color:var(--coral)}
.bl{background:rgba(212,167,106,.2);color:var(--gold)}
.bx{background:rgba(255,255,255,.08);color:rgba(255,255,255,.35)}
.bo{background:rgba(90,171,110,.15);color:var(--green)}
.bc2{background:rgba(232,123,90,.15);color:var(--coral)}
.bf{background:rgba(212,167,106,.15);color:var(--gold)}
.abt{display:flex;gap:.4rem;flex-wrap:wrap}
.tg{position:relative;width:36px;height:20px;display:inline-block;flex-shrink:0}
.tg input{opacity:0;width:0;height:0;position:absolute}
.ts{position:absolute;inset:0;background:rgba(255,255,255,.1);border-radius:100px;transition:.2s}
.ts::before{content:'';position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;left:3px;top:3px;transition:.2s}
.tg input:checked+.ts{background:var(--coral)}
.tg input:checked+.ts::before{transform:translateX(16px)}
.tg.gld input:checked+.ts{background:var(--gold)}
.tr{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:rgba(255,255,255,.55)}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.ff{display:flex;flex-direction:column;gap:.4rem}
.full{grid-column:1/-1}
.ff label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.ff input,.ff select,.ff textarea{background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:10px;padding:.65rem .9rem;color:var(--cream);font-family:var(--fb);font-size:.9rem;outline:none;width:100%;transition:border-color var(--t)}
.ff input:focus,.ff select:focus,.ff textarea:focus{border-color:var(--gold)}
.ff select option{background:var(--panel)}
.ff textarea{resize:vertical;min-height:80px}
/* IMAGE UPLOAD */
.upload-zone{border:2px dashed rgba(255,255,255,.18);border-radius:14px;padding:2rem;text-align:center;transition:all var(--t);position:relative;cursor:pointer;background:rgba(255,255,255,.03)}
.upload-zone:hover,.upload-zone.drag{border-color:var(--gold);background:rgba(212,167,106,.06)}
.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upload-icon{font-size:2.5rem;display:block;margin-bottom:.75rem;opacity:.6}
.upload-zone h4{font-family:var(--fd);color:var(--cream);font-size:1rem;margin-bottom:.3rem}
.upload-zone p{font-size:.78rem;color:rgba(255,255,255,.4);line-height:1.5}
.img-preview{position:relative;margin-top:1rem;border-radius:12px;overflow:hidden;max-height:220px;display:none}
.img-preview img{width:100%;height:220px;object-fit:cover;display:block}
.img-preview-existing{border-radius:12px;overflow:hidden;margin-bottom:.75rem;background:#2a3545}
.img-preview-existing img{width:100%;height:auto;max-height:240px;object-fit:contain;display:block}
.img-preview .rm-img{position:absolute;top:.5rem;right:.5rem;background:rgba(0,0,0,.6);border:none;border-radius:50%;width:28px;height:28px;color:#fff;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.img-preview .rm-img:hover{background:var(--red)}
.img-preview-label{font-size:.72rem;color:rgba(255,255,255,.45);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem}
.fa{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--border)}
.mbg{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);z-index:200;opacity:0;pointer-events:none;transition:opacity var(--t);display:flex;align-items:center;justify-content:center;padding:1.5rem}
.mbg.open{opacity:1;pointer-events:all}
.mbox{background:var(--panel);border-radius:20px;max-width:680px;width:100%;max-height:90vh;overflow-y:auto;border:1px solid var(--border);transform:scale(.95);transition:transform var(--t)}
.mbg.open .mbox{transform:scale(1)}
.mbar{padding:1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--panel);z-index:1}
.mbar h3{font-family:var(--fd);font-size:1.3rem;color:var(--cream);font-style:italic}
.mx{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.08);border:none;color:var(--cream);font-size:1rem;display:flex;align-items:center;justify-content:center}
.mx:hover{background:rgba(255,255,255,.15)}
.mbody{padding:1.5rem}
.cbox{background:var(--panel);border-radius:20px;max-width:400px;width:100%;border:1px solid var(--border);padding:2rem;text-align:center}
.cbox h3{font-family:var(--fd);font-size:1.2rem;color:var(--cream);margin-bottom:.5rem}
.cbox p{color:rgba(255,255,255,.55);font-size:.88rem;margin-bottom:1.5rem;line-height:1.6}
.cact{display:flex;gap:.75rem;justify-content:center}
.cp{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}
.ct{border-radius:14px;overflow:hidden;border:2px solid rgba(255,255,255,.08);position:relative;background:rgba(255,255,255,.03)}
.ct.on{border-color:var(--coral);box-shadow:0 0 0 1px rgba(232,123,90,.3)}
.cti{height:105px;overflow:hidden;background:#2a3545;display:flex;align-items:center;justify-content:center;font-size:3rem}
.cti img{width:100%;height:100%;object-fit:cover}
.ctn{padding:.6rem .75rem .75rem}
.ctn h4{font-family:var(--fd);font-size:.82rem;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.4rem}
.ctnum{position:absolute;top:.5rem;left:.5rem;background:var(--coral);color:#fff;width:22px;height:22px;border-radius:50%;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.sb{display:flex;gap:.75rem;margin-bottom:1.2rem;align-items:center;flex-wrap:wrap}
.sw{position:relative;flex:1;min-width:180px;max-width:300px}
.sw::before{content:"\1F50D";position:absolute;left:.8rem;top:50%;transform:translateY(-50%);font-size:.8rem;pointer-events:none;z-index:1}
.si{background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:100px;padding:.55rem 1rem .55rem 2.4rem;color:var(--cream);font-size:.85rem;outline:none;width:100%;transition:border-color var(--t);font-family:var(--fb)}
.si:focus{border-color:var(--gold)}
.fsel{background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:100px;padding:.55rem 1rem;color:var(--cream);font-size:.82rem;outline:none;font-family:var(--fb)}
.fsel option{background:var(--panel)}
.toast{position:fixed;bottom:2rem;right:2rem;background:rgba(20,12,4,.97);color:var(--cream);border:1px solid var(--border);border-radius:14px;padding:.85rem 1.4rem;font-size:.85rem;z-index:500;display:flex;align-items:center;gap:.6rem;box-shadow:0 8px 30px rgba(0,0,0,.4);transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s;transform:translateY(80px);opacity:0;pointer-events:none;min-width:240px}
.toast.show{transform:translateY(0);opacity:1}
.empty{text-align:center;padding:3rem;color:rgba(255,255,255,.3)}
.empty .ei{font-size:3rem;display:block;margin-bottom:.75rem}
.spinner{display:inline-block;width:28px;height:28px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:860px){.layout{grid-template-columns:1fr}.sidebar{display:none}.stats{grid-template-columns:1fr 1fr}.page{padding:1.2rem}.fg{grid-template-columns:1fr}}

/* VULN-06 extracted inline styles — part 2: remaining style="" attributes */
.lbl--mb { margin-bottom: .75rem; }
.flex-wrap-gap { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.hint-text { font-size: .65rem; color: rgba(255,255,255,.35); }
.badge-count { display: none; margin-left: 6px; background: var(--red); color: #fff; border-radius: 10px; padding: 1px 6px; font-size: 10px; font-weight: 700; vertical-align: middle; }
.sb-foot-row { display: flex; justify-content: space-between; align-items: center; }
.logout-btn { background: none; border: none; color: rgba(255,255,255,.35); font-size: .75rem; font-family: inherit; cursor: pointer; }
.logs-banner { display: none; align-items: center; justify-content: space-between; background: rgba(224,90,90,.1); border-left: 4px solid var(--red); padding: 10px 16px; gap: 12px; flex-wrap: wrap; }
.logs-banner-msg { color: var(--cream); }
.logs-banner-actions { display: flex; gap: 16px; align-items: center; }
.logs-banner-link { color: var(--coral); }
.logs-banner-dismiss { cursor: pointer; color: rgba(255,255,255,.4); }
.stats-loading { grid-column: 1/-1; display: flex; justify-content: center; padding: 2rem; }
.loading-center { display: flex; justify-content: center; padding: 2rem; }
.pb--flex { display: flex; gap: .75rem; flex-wrap: wrap; }
.overflow-auto { overflow-x: auto; }
.ph-row { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: .75rem; }
.analytics-range-group { display: flex; gap: .4rem; align-items: center; flex-shrink: 0; }
.analytics-tab-btn { background: none; border: none; border-bottom: 2px solid transparent; padding: .6rem 1rem; color: var(--dim); font-size: .85rem; cursor: pointer; font-family: inherit; }
.analytics-tab-btn.active { border-bottom-color: var(--violet); color: var(--violet); font-weight: 600; }
.analytics-tab-row { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
.ph2-left { display: flex; align-items: center; gap: .75rem; }
.count-badge { font-size: .75rem; background: rgba(255,255,255,.08); padding: .2rem .6rem; border-radius: 100px; color: rgba(255,255,255,.5); }
.pb--sm { padding-bottom: .5rem; }
.count-label--coral { font-size: .78rem; color: var(--coral); }
.count-label--gold { font-size: .78rem; color: var(--gold); }
.count-label--dim { font-size: .72rem; color: rgba(255,255,255,.35); }
.hint-para { font-size: .82rem; color: rgba(255,255,255,.4); margin-bottom: 1.2rem; }
.toggle-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.toggle-label { font-size: .85rem; color: rgba(255,255,255,.5); }
.panel--mb { margin-bottom: 1.5rem; }
.sb--compact { margin: 0; flex-wrap: wrap; }
.logs-controls { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
#logsSeenBtn { display: none; }
.analytics-tab-content { display: none; }
.log-detail-row { display: none; }

/* VULN-06 extracted inline styles */
.login-overlay { position: fixed; inset: 0; background: #111827; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.login-card { background: #1f2937; border-radius: 20px; border: 1px solid rgba(255,255,255,.08); padding: 2.5rem; max-width: 420px; width: 100%; }
.login-header { text-align: center; margin-bottom: 2rem; }
.login-icon { font-size: 2.5rem; margin-bottom: .5rem; }
.login-title { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: #fdf6ee; }
.login-subtitle { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: #d4a76a; margin-top: .3rem; }
.ff--mb1 { margin-bottom: 1rem; }
.ff--mb15 { margin-bottom: 1.5rem; }
.login-error { color: #e05a5a; font-size: .82rem; margin-bottom: 1rem; display: none; }
.btn--full { width: 100%; justify-content: center; }
.link-row { text-align: center; margin-top: 1.2rem; }
.ghost-btn { background: none; border: none; color: rgba(255,255,255,.35); font-size: .75rem; font-family: inherit; cursor: pointer; }
.hidden { display: none; }
.form-desc { color: rgba(255,255,255,.55); font-size: .85rem; margin-bottom: 1.2rem; }
.form-msg { font-size: .82rem; margin-bottom: 1rem; display: none; }
.confirm-icon { font-size: 2.5rem; margin-bottom: .75rem; }
