:root{
  --ink:#14213D; --ink-soft:#2B3A5C; --paper:#F5F6F4; --card:#FFFFFF;
  --border:#E4E6EA; --muted:#7C8496; --gold:#E8A33D; --emerald:#1F7A5C;
  --emerald-light:#E5F3EC; --danger:#D64545; --danger-light:#FBEAEA; --radius:12px;
  --shadow:0 1px 3px rgba(20,33,61,0.08);
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Tajawal',sans-serif;}
h1,h2,h3{font-family:'Cairo',sans-serif;}
.app{max-width:1180px;margin:0 auto;padding:0 20px 60px;}
.topbar{background:var(--ink);color:#fff;padding:14px 20px;}
.topbar-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{width:36px;height:36px;border-radius:9px;background:var(--gold);display:flex;align-items:center;justify-content:center;color:var(--ink);font-family:'Cairo',sans-serif;font-weight:800;transform:rotate(-4deg);}
.brand-name{font-family:'Cairo',sans-serif;font-weight:800;font-size:19px;}
.top-actions a{color:#fff;text-decoration:none;background:rgba(255,255,255,0.1);padding:9px 14px;border-radius:9px;font-weight:700;font-size:13.5px;}
.store-title{font-size:26px;font-weight:800;margin:26px 0 4px;}
.store-sub{color:var(--muted);margin:0 0 6px;font-size:14px;}
.admin-tabs{display:flex;gap:6px;margin:20px 0 20px;flex-wrap:wrap;}
.admin-tabs button{background:#fff;border:1px solid var(--border);border-radius:9px;padding:9px 15px;font-weight:700;font-size:13px;color:var(--muted);}
.admin-tabs button.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px;}
.stat-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;}
.stat-num{font-family:'Cairo',sans-serif;font-weight:800;font-size:26px;}
.stat-label{color:var(--muted);font-size:13px;margin-top:4px;}
.panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:20px;}
.panel h3{margin:0 0 16px;font-size:16px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-grid label{font-size:13px;font-weight:700;color:var(--ink-soft);display:block;margin-bottom:5px;}
.form-grid input,.form-grid textarea,.form-grid select{width:100%;padding:9px 11px;border-radius:8px;border:1px solid var(--border);font-size:13.5px;font-family:'Tajawal',sans-serif;}
.form-full{grid-column:1/-1;}
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{text-align:right;color:var(--muted);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--border);font-size:12.5px;}
td{padding:10px;border-bottom:1px solid var(--border);vertical-align:middle;}
td img{width:36px;height:36px;object-fit:cover;border-radius:6px;background:var(--paper);}
.row-actions{display:flex;gap:6px;flex-wrap:wrap;}
.tag{display:inline-block;padding:3px 9px;border-radius:6px;font-size:11.5px;font-weight:700;}
.tag-sale{background:var(--danger-light);color:var(--danger);}
.tag-ok{background:var(--emerald-light);color:var(--emerald);}
.tag-pending{background:#FFF4E0;color:var(--gold-dark,#B87A1F);}
.msg-item{border:1px solid var(--border);border-radius:10px;padding:13px;margin-bottom:10px;}
.msg-head{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-bottom:6px;}
.reply-row{display:flex;gap:8px;margin-top:8px;}
.reply-row input{flex:1;padding:8px 10px;border-radius:8px;border:1px solid var(--border);font-size:13px;}
.btn{border-radius:9px;border:1px solid var(--border);background:#fff;padding:9px 15px;font-weight:700;font-size:13.5px;cursor:pointer;}
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink);}
.btn-gold{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.btn-danger{color:var(--danger);border-color:var(--danger-light);background:var(--danger-light);}
.btn-block{width:100%;}
.field-err{color:var(--danger);font-size:12px;margin-top:4px;}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--border);border-radius:999px;padding:5px 10px;font-size:12.5px;font-weight:700;}
.chip button{background:none;border:none;color:var(--danger);font-weight:800;cursor:pointer;padding:0;}
.color-pick{width:26px;height:26px;border-radius:50%;border:2px solid var(--border);cursor:pointer;}
.color-pick.selected{border-color:var(--ink);}
.color-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.mat-block{border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:12px;}
.mat-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px;}
.inline-form input[type=text]{padding:7px 9px;border-radius:7px;border:1px solid var(--border);font-size:13px;}
.inline-form input[type=color]{width:36px;height:32px;border-radius:7px;border:1px solid var(--border);padding:2px;}
.slide-thumb{width:60px;height:40px;object-fit:cover;border-radius:6px;background:var(--paper);}
.notif{position:fixed;top:16px;left:16px;background:var(--gold);color:var(--ink);padding:14px 18px;border-radius:12px;font-weight:800;font-size:14px;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,0.2);max-width:320px;}
.notif p{margin:4px 0 0;font-weight:600;font-size:12.5px;}

/* Media thumbs / library */
.media-thumb-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.media-thumb{position:relative;width:80px;height:80px;border-radius:8px;overflow:hidden;border:1px solid var(--border);background:var(--paper);}
.media-thumb img,.media-thumb video{width:100%;height:100%;object-fit:cover;}
.media-thumb button{position:absolute;top:2px;left:2px;background:rgba(20,33,61,0.85);color:#fff;border:none;border-radius:6px;width:20px;height:20px;font-size:12px;cursor:pointer;line-height:1;}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;}
.lib-thumb{width:100%;height:110px;cursor:pointer;transition:.15s;}
.lib-thumb:hover{outline:2px solid var(--gold);}

/* Chat layout */
.chat-layout{display:flex;height:560px;}
.chat-thread-list{width:230px;border-left:1px solid var(--border);overflow-y:auto;flex-shrink:0;}
.chat-thread-item{padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;}
.chat-thread-item:hover{background:var(--paper);}
.chat-thread-item.active{background:var(--emerald-light);}
.chat-thread-view{flex:1;display:flex;flex-direction:column;}
.chat-thread-header{padding:12px 16px;border-bottom:1px solid var(--border);font-weight:700;font-size:14px;}
.chat-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;}
.chat-msg{max-width:70%;padding:8px 11px;border-radius:12px;font-size:13.5px;}
.chat-msg.from-me{align-self:flex-start;background:var(--ink);color:#fff;border-bottom-right-radius:3px;}
.chat-msg.from-owner{align-self:flex-end;background:var(--paper);color:var(--ink);border:1px solid var(--border);border-bottom-left-radius:3px;}
.chat-msg p{margin:0 0 4px;line-height:1.6;}
.chat-media-img,.chat-media-vid{max-width:100%;border-radius:8px;display:block;margin-top:2px;}
.chat-time{font-size:10px;opacity:0.6;display:block;margin-top:3px;}
.chat-input-row{display:flex;gap:8px;align-items:center;border-top:1px solid var(--border);}
.chat-input-row input{flex:1;padding:9px 11px;border-radius:8px;border:1px solid var(--border);font-family:'Tajawal',sans-serif;font-size:13.5px;}

/* Sales bar chart */
.bar-chart{display:flex;align-items:flex-end;gap:4px;height:180px;padding-top:10px;}
.bar-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;}
.bar-fill{width:70%;background:var(--emerald);border-radius:4px 4px 0 0;min-height:2px;transition:.2s;}
.bar-label{font-size:10px;color:var(--muted);margin-top:6px;writing-mode:vertical-rl;text-orientation:mixed;}

/* Auth screens */
.auth-screen{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.auth-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:32px;max-width:380px;width:100%;box-shadow:0 4px 20px rgba(20,33,61,0.08);}
.auth-card h2{margin:0 0 14px;font-size:19px;}

/* Connection status banner */
.conn-banner{position:fixed;top:0;left:0;right:0;background:var(--danger);color:#fff;text-align:center;padding:8px 12px;font-size:13px;font-weight:700;z-index:200;display:none;}
.conn-banner.show{display:block;}

/* Mobile responsiveness */
@media (max-width: 640px){
  .app{padding:0 12px 50px;}
  .topbar{padding:10px 12px;}
  .topbar-inner{gap:8px;flex-wrap:wrap;}
  .brand-name{font-size:15px;}
  .top-actions{display:flex;gap:6px;flex-wrap:wrap;}
  .top-actions a, .top-actions button{padding:7px 10px;font-size:12px;}
  .store-title{font-size:20px;margin-top:18px;}
  .admin-tabs{gap:4px;}
  .admin-tabs button{padding:7px 10px;font-size:12px;}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .panel{padding:14px;}
  .form-grid{grid-template-columns:1fr;}
  table{font-size:12px;}
  th,td{padding:6px;}
  .chat-layout{flex-direction:column;height:auto;}
  .chat-thread-list{width:100%;max-height:180px;border-left:none;border-bottom:1px solid var(--border);}
  .chat-messages{height:300px;}
  .auth-card{padding:22px;}
  .media-grid{grid-template-columns:repeat(2,1fr);}
}