:root{
    --bg:#0d0900; --surface:#171200; --card:#1e1700; --border:#3a2d00;
    --accent:#c9a84c; --accent2:#e8c96d; --gold:#f5d676;
    --text:#f5ead0; --muted:#8a7a50; --success:#4caf7d; --danger:#e05252;
    --input-bg:#160f00;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{font-family:'Cairo',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;}
  body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
    background-image:linear-gradient(rgba(201,168,76,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,.04) 1px,transparent 1px);
    background-size:40px 40px;}

  /* ══ LIGHT MODE ══ */
  body.light-mode {
    --bg:#f5f0e8; --surface:#ede6d6; --card:#fff8ee; --border:#d4c090;
    --text:#1a1200; --muted:#7a6830; --input-bg:#fdf8ef;
  }
  body.light-mode::before{
    background-image:linear-gradient(rgba(201,168,76,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,.06) 1px,transparent 1px);
  }
  /* إصلاح الوضع الفاتح — النص يظل غامق عند hover */
  body.light-mode tbody tr:hover td { color: var(--text) !important; }
  body.light-mode tbody tr:hover td:first-child,
  body.light-mode tbody tr:hover td:nth-child(2) { background: #fff0d5; }
  body.light-mode input[type=date] { color-scheme: light; }

  /* ══ THEME TOGGLE ══ */
  .theme-toggle{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--border);background:var(--card);color:var(--accent);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.2);transition:all .3s;flex-shrink:0;}
  .theme-toggle:hover{transform:scale(1.1);box-shadow:0 4px 18px rgba(201,168,76,.4);}
  /* زر الثيم في صفحة اللوجين — fixed */
  .theme-toggle-login{position:fixed;top:16px;left:16px;z-index:9970;}

  /* ══ SPLASH SCREEN ══ */
  .splash-screen{position:fixed;inset:0;z-index:99999;background:#0d0900;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .6s ease;}
  .splash-screen.hide{opacity:0;pointer-events:none;}
  .splash-logo{font-size:72px;font-weight:900;letter-spacing:-2px;
    background:linear-gradient(135deg,#f5d676 0%,#c9a84c 50%,#e8c96d 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    animation:splashPop .6s cubic-bezier(.34,1.56,.64,1) both;}
  .splash-logo span{background:linear-gradient(135deg,#fff,#e8c96d);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
  .splash-tagline{color:#8a7a50;font-size:14px;letter-spacing:3px;margin-top:10px;animation:fadeUp .6s .3s both;}
  .splash-bar{width:120px;height:3px;background:rgba(201,168,76,.2);border-radius:2px;margin-top:32px;overflow:hidden;animation:fadeUp .4s .4s both;}
  .splash-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px;animation:splashLoad 1.8s .3s ease forwards;}
  @keyframes splashPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
  @keyframes splashLoad{from{width:0}to{width:100%}}

  /* ══ BADGE جديد ══ */
  .badge-new{display:inline-flex;align-items:center;padding:1px 6px;border-radius:20px;font-size:9px;font-weight:800;background:linear-gradient(135deg,#2ecc71,#27ae60);color:#fff;margin-right:5px;vertical-align:middle;letter-spacing:.3px;box-shadow:0 2px 6px rgba(46,204,113,.4);animation:pulse-new 2s infinite;}
  @keyframes pulse-new{0%,100%{box-shadow:0 2px 6px rgba(46,204,113,.4)}50%{box-shadow:0 2px 14px rgba(46,204,113,.7)}}
  .ishop-logo-wrap{text-align:center;margin-bottom:28px;position:relative;z-index:1;}
  .ishop-logo-icon{font-size:52px;display:block;margin-bottom:8px;filter:drop-shadow(0 0 24px rgba(201,168,76,.7));}
  .ishop-logo-text{font-size:clamp(36px,9vw,64px);font-weight:900;letter-spacing:-1px;line-height:1;
    background:linear-gradient(135deg,#f5d676 0%,#c9a84c 50%,#e8c96d 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    font-family:'Cairo',sans-serif;display:inline-block;}
  .ishop-logo-text .ishop-shop{background:linear-gradient(135deg,#fff8e8,#c9a84c);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
  .ishop-tagline{font-size:13px;color:var(--muted);letter-spacing:2px;margin-top:6px;font-weight:600;}

  .ishop-logo-sm{font-size:28px;font-weight:900;letter-spacing:-0.5px;margin-bottom:6px;
    background:linear-gradient(135deg,#f5d676,#c9a84c);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    font-family:'Cairo',sans-serif;}
  .ishop-logo-sm span{background:linear-gradient(135deg,#fff,#e8c96d);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

  .ishop-logo-topbar{font-size:18px;font-weight:900;letter-spacing:-0.5px;margin-left:8px;
    background:linear-gradient(135deg,#f5d676,#c9a84c);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    font-family:'Cairo',sans-serif;flex-shrink:0;}
  .ishop-logo-topbar span{background:linear-gradient(135deg,#fff8e8,#c9a84c);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

  /* توقيع iShop في نماذج الطباعة */
  .ishop-print-sig{font-size:11px;color:#bbb;text-align:center;letter-spacing:1px;margin-top:2px;}
  .ishop-print-sig span{font-weight:900;color:#c9a84c;font-size:13px;}
  .login-screen{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);padding:20px;}
  .login-screen::before{content:'';position:fixed;inset:0;pointer-events:none;
    background-image:linear-gradient(rgba(79,142,247,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(79,142,247,.04) 1px,transparent 1px);
    background-size:40px 40px;}

  /* Welcome hero */
  .welcome-hero{text-align:center;max-width:500px;position:relative;z-index:1;animation:fadeUp .5s ease;}
  .welcome-hero .big-emoji{font-size:72px;display:block;margin-bottom:20px;filter:drop-shadow(0 0 30px rgba(201,168,76,.6));}
  .welcome-hero h1{font-size:clamp(26px,6vw,46px);font-weight:900;background:linear-gradient(135deg,var(--gold) 20%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px;line-height:1.15;}
  .welcome-hero p{color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:32px;}
  .btn-browse{display:inline-flex;align-items:center;gap:10px;padding:16px 36px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0d0900;border:none;border-radius:14px;font-family:'Cairo',sans-serif;font-size:17px;font-weight:800;cursor:pointer;transition:all .3s;box-shadow:0 8px 28px rgba(201,168,76,.4);}
  .btn-browse:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(201,168,76,.6);}

  /* Small login link */
  .login-link-wrap{margin-top:24px;position:relative;z-index:1;}
  .btn-login-small{background:transparent;border:1px solid var(--border);color:var(--muted);padding:8px 20px;border-radius:20px;font-family:'Cairo',sans-serif;font-size:13px;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
  .btn-login-small:hover{border-color:var(--accent);color:var(--accent);}

  /* Login modal inside login screen */
  .login-modal-wrap{display:none;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.8);backdrop-filter:blur(6px);align-items:center;justify-content:center;}
  .login-modal-wrap.show{display:flex;animation:fadeUp .25s ease;}
  .login-box{background:var(--card);border:1px solid var(--border);border-radius:22px;padding:36px 32px;width:90%;max-width:380px;}
  .login-logo{text-align:center;margin-bottom:24px;}
  .login-logo .emoji{font-size:40px;display:block;margin-bottom:8px;}
  .login-logo h2{font-size:19px;font-weight:900;color:var(--text);}
  .login-logo p{color:var(--muted);font-size:13px;margin-top:4px;}
  .login-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
  .login-field label{font-size:12px;font-weight:600;color:var(--muted);}
  .login-field input{background:var(--input-bg);border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;font-family:'Cairo',sans-serif;font-size:14px;color:var(--text);outline:none;transition:all .2s;width:100%;}
  .login-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,142,247,.12);}
  .login-err{color:var(--danger);font-size:12px;text-align:center;min-height:18px;margin-bottom:8px;}
  .btn-login{width:100%;padding:13px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0d0900;border:none;border-radius:11px;font-family:'Cairo',sans-serif;font-size:15px;font-weight:800;cursor:pointer;transition:all .25s;box-shadow:0 6px 20px rgba(201,168,76,.3);}
  .btn-login:hover{transform:translateY(-1px);filter:brightness(1.08);}
  .btn-close-login{width:100%;padding:10px;background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:10px;font-family:'Cairo',sans-serif;font-size:13px;cursor:pointer;margin-top:8px;transition:all .2s;}
  .btn-close-login:hover{color:var(--text);}
  .login-screen.hidden{display:none;}

  /* ══ APP ══ */
  .app-screen{display:none;}
  .app-screen.visible{display:block;}
  .container{max-width:1100px;margin:0 auto;padding:20px;position:relative;z-index:1;}

  /* Top bar */
  .topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px;}
  .topbar-left{display:flex;align-items:center;gap:10px;}
  .user-chip{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:30px;padding:6px 14px;font-size:13px;}
  .user-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#0d0900;}
  .user-name{font-weight:700;color:var(--text);}
  .user-role{font-size:11px;color:var(--muted);}
  .btn-logout{padding:7px 16px;background:rgba(231,76,60,.1);border:1px solid rgba(231,76,60,.25);color:var(--danger);border-radius:20px;font-family:'Cairo',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;}
  .btn-logout:hover{background:rgba(231,76,60,.2);}

  .header{text-align:center;padding:20px 0 28px;}
  .header-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(79,142,247,.1);border:1px solid rgba(79,142,247,.3);border-radius:30px;padding:6px 18px;font-size:12px;color:var(--accent);letter-spacing:1px;margin-bottom:14px;text-transform:uppercase;}
  .header h1{font-size:clamp(22px,5vw,42px);font-weight:900;background:linear-gradient(135deg,var(--gold) 20%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:6px;}
  .header p{color:var(--muted);font-size:13px;}

  .sync-bar{display:flex;align-items:center;justify-content:center;gap:6px;padding:5px 14px;border-radius:20px;font-size:11px;font-weight:700;margin-bottom:20px;letter-spacing:.3px;transition:all .4s ease;width:fit-content;margin-left:auto;margin-right:auto;}
  .sync-bar.online{background:rgba(46,204,113,.1);border:1px solid rgba(46,204,113,.3);color:#2ecc71;}
  .sync-bar.offline{background:rgba(231,76,60,.1);border:1px solid rgba(231,76,60,.3);color:#e05252;}
  .sync-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
  .sync-bar.online .sync-dot{background:#2ecc71;animation:pulse-green 2s infinite;}
  .sync-bar.offline .sync-dot{background:#e05252;animation:pulse-red 2s infinite;}
  @keyframes pulse-green{0%,100%{opacity:1;box-shadow:0 0 5px #2ecc71}50%{opacity:.4;box-shadow:0 0 12px #2ecc71}}
  @keyframes pulse-red{0%,100%{opacity:1;box-shadow:0 0 5px #e05252}50%{opacity:.4;box-shadow:0 0 12px #e05252}}

  .tabs{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:6px;margin-bottom:24px;gap:6px;}
  .tab{flex:1;padding:12px;border:none;border-radius:10px;cursor:pointer;font-family:'Cairo',sans-serif;font-size:15px;font-weight:600;transition:all .25s;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:8px;}
  .tab.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0d0900;box-shadow:0 4px 20px rgba(201,168,76,.4);font-weight:800;}
  .tab:hover:not(.active){color:var(--text);background:var(--card);}
  .tab-hidden{display:none!important;}

  .panel{display:none;}
  .panel.active{display:block;animation:fadeUp .3s ease;}
  @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

  .card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:24px;margin-bottom:16px;}
  .card-title{font-size:15px;font-weight:700;color:var(--accent);margin-bottom:18px;display:flex;align-items:center;gap:8px;}
  .card-title::after{content:'';flex:1;height:1px;background:linear-gradient(to left,transparent,var(--border));}

  .form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;}
  .form-group{display:flex;flex-direction:column;gap:5px;}
  .form-group.full{grid-column:1/-1;}
  label span.req{color:var(--accent);margin-right:2px;}

  input,select,textarea{background:var(--input-bg);border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;font-family:'Cairo',sans-serif;font-size:15px;color:var(--text);transition:all .2s;outline:none;width:100%;}
  input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(201,168,76,.15);}
  input[type=date]{color-scheme:dark;}
  select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b6b80' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 13px center;padding-left:34px;}
  select option{background:var(--card);color:var(--text);}
  textarea{resize:vertical;min-height:80px;font-size:15px;line-height:1.6;}
  label{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.3px;}
  table{width:100%;border-collapse:collapse;font-size:13px;}
  thead th{background:var(--surface);padding:13px 12px;font-weight:700;color:var(--muted);font-size:12px;letter-spacing:.5px;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap;}
  td{padding:12px 12px;white-space:nowrap;font-size:13px;}
  .detail-item-label{font-size:11px;color:var(--muted);font-weight:700;margin-bottom:5px;}
  .detail-item-val{font-size:14px;font-weight:700;color:var(--text);}
  .detail-item-val.text-long{font-size:13px;font-weight:400;color:var(--text);line-height:1.6;}
  @media(max-width:600px){
    /* ── الحاويات ── */
    .container{padding:12px;}
    .card{padding:16px;}
    .drawer-body{padding:14px 16px 28px;}

    /* ── الفورم ── */
    input,select,textarea{font-size:16px !important;padding:13px 14px;}
    label{font-size:14px !important;}
    .form-grid{grid-template-columns:1fr;}

    /* ── العناوين ── */
    .card-title{font-size:16px;margin-bottom:14px;}
    .header h1{font-size:26px;}
    .header p{font-size:14px;}
    .header-badge{font-size:13px;}

    /* ── التابز ── */
    .tab{font-size:14px;padding:13px 8px;}

    /* ── الجدول ── */
    table{font-size:14px;}
    thead th{font-size:13px;padding:12px 10px;}
    td{font-size:14px;padding:12px 10px;}
    .row-num{font-size:12px;}
    .badge{font-size:12px;padding:3px 9px;}
    .btn-details{font-size:13px;padding:7px 12px;}
    .btn-edit,.btn-delete{font-size:13px;padding:6px 11px;}

    /* ── الدرور (تفاصيل الجهاز) ── */
    .drawer-model{font-size:19px;}
    .drawer-storage{font-size:15px;}
    .detail-section-title{font-size:12px;}
    .detail-item{padding:12px 14px;}
    .detail-item-label{font-size:12px !important;}
    .detail-item-val{font-size:16px !important;}
    .detail-item-val.text-long{font-size:14px !important;line-height:1.7;}
    .drawer-actions a,.drawer-actions button{font-size:16px;padding:15px;}
    .drawer-share-row a,.drawer-share-row button{font-size:14px;padding:13px;}
    .share-label{font-size:13px;}

    /* ── الأزرار ── */
    .btn-submit{font-size:17px;padding:17px;}
    .btn-search,.btn-clear,.btn-refresh{font-size:14px;padding:13px 16px;}
    .search-bar input{font-size:15px;}

    /* ── الإحصائيات ── */
    .stat-chip{font-size:13px;padding:8px 14px;}

    /* ── الشريط العلوي ── */
    .user-name{font-size:14px;}
    .user-role,.role-admin,.role-user{font-size:12px !important;}
    .btn-logout{font-size:13px;padding:8px 18px;}

    /* ── إصلاح الـ topbar على موبايل ── */
    .topbar{flex-wrap:nowrap;gap:6px;align-items:center;}
    .topbar-left{flex:1;min-width:0;overflow:hidden;gap:6px;}
    .ishop-logo-topbar{font-size:15px;flex-shrink:0;}
    .user-chip{padding:5px 10px;gap:6px;min-width:0;overflow:hidden;}
    .user-chip > div:last-child{min-width:0;overflow:hidden;}
    .user-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px;}
    .user-role,.role-admin,.role-user{font-size:10px !important;white-space:nowrap;}
    .topbar > div:last-child{flex-shrink:0;gap:5px;}
    .theme-toggle{width:34px;height:34px;font-size:15px;}
    .btn-logout{font-size:12px;padding:6px 10px;white-space:nowrap;}

    /* ── التابات — اختصار النصوص ── */
    .tab{font-size:12px;padding:10px 4px;gap:4px;}
    #tab-entry .tab-text-full{display:none;}
    #tab-entry .tab-text-short{display:inline !important;}

    /* ── الدرور — شبكة التفاصيل ── */
    .detail-grid{grid-template-columns:1fr 1fr;}

    /* ── شريط بحث الموظف — إعادة ترتيب ── */
    #search-bar-user .search-bar{flex-wrap:wrap;}
    /* select يأخذ السطر الأول كاملاً، input يمتد، والأزرار تنزل */
    #search-bar-user .search-bar select{flex:1 1 100%;order:1;}
    #search-bar-user .search-bar input{flex:1 1 auto;order:2;min-width:0;}
    #search-bar-user .search-bar .btn-clear{order:3;flex-shrink:0;}
    #search-bar-user .search-bar .btn-refresh{order:4;flex:1;justify-content:center;}
    /* أزرار CSV + مشاركة + مقارنة في صف مستقل */
    #search-bar-user > div:nth-child(4){flex-direction:column;gap:8px;}
    #search-bar-user > div:nth-child(4) > .battery-slider-wrap{min-width:unset;width:100%;}
    #search-bar-user > div:nth-child(4) > .sort-wrap{width:100%;}
    #search-bar-user > div:nth-child(4) > .sort-wrap .sort-select{flex:1;width:100%;}
    #search-bar-user > div:nth-child(4) > div:last-child{width:100%;justify-content:stretch;}
    #search-bar-user > div:nth-child(4) > div:last-child button{flex:1;text-align:center;justify-content:center;}

    /* ── الموديل ── */
    .modal h3{font-size:18px;}
    .modal p{font-size:14px;}
    .modal-btns button{font-size:15px;padding:14px;}
    .modal-err{font-size:13px;}

    /* ── الـ Toast ── */
    .toast{font-size:15px;padding:14px 22px;}

    /* ── صفحة الـ Login ── */
    .welcome-hero h1{font-size:30px;}
    .welcome-hero p{font-size:15px;}
    .btn-browse{font-size:17px;padding:16px 32px;}
    .login-field label{font-size:14px;}
    .login-field input{font-size:16px;}
    .login-logo h2{font-size:20px;}
    .login-logo p{font-size:14px;}
    .btn-login{font-size:16px;padding:14px;}
  }

  .battery-row{display:flex;align-items:center;gap:10px;}
  .battery-row input[type=range]{flex:1;padding:0;height:6px;border:none;cursor:pointer;accent-color:var(--accent);background:var(--border);border-radius:3px;}
  .battery-val{font-size:17px;font-weight:900;min-width:50px;text-align:center;color:var(--accent);}

  .warranty-expiry{display:none;margin-top:10px;}
  .warranty-expiry.show{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .warranty-expiry label{white-space:nowrap;font-size:12px;color:var(--muted);font-weight:600;}
  .warranty-expiry input{flex:1;min-width:160px;}

  .btn-submit{width:100%;padding:15px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0d0900;border:none;border-radius:12px;font-family:'Cairo',sans-serif;font-size:16px;font-weight:800;cursor:pointer;transition:all .25s;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 6px 24px rgba(201,168,76,.3);}
  .btn-submit:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(201,168,76,.5);}
  .btn-submit:disabled{opacity:.6;cursor:not-allowed;transform:none;}
  .spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:white;border-radius:50%;animation:spin .7s linear infinite;display:none;}
  @keyframes spin{to{transform:rotate(360deg)}}

  .search-bar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
  .search-bar input{flex:1;min-width:180px;padding:12px 16px;font-size:14px;border-radius:12px;}
  .btn-search{padding:12px 22px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0d0900;border:none;border-radius:12px;font-family:'Cairo',sans-serif;font-size:14px;font-weight:800;cursor:pointer;transition:all .2s;white-space:nowrap;}
  .btn-search:hover{filter:brightness(1.1);}
  .btn-clear{padding:12px 16px;background:var(--card);color:var(--muted);border:1px solid var(--border);border-radius:12px;font-family:'Cairo',sans-serif;font-size:13px;cursor:pointer;}
  .btn-refresh{padding:12px 16px;background:var(--card);color:var(--accent);border:1px solid rgba(201,168,76,.3);border-radius:12px;font-family:'Cairo',sans-serif;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px;}
  .btn-refresh:hover{background:rgba(201,168,76,.1);}
  .btn-refresh.loading svg{animation:spin .7s linear infinite;}

  .stats-bar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
  .stat-chip{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:7px 13px;font-size:12px;display:flex;align-items:center;gap:6px;}
  .stat-chip strong{color:var(--accent);}

  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;border:1px solid var(--border);}
  .badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;gap:3px;}
  tbody tr{border-bottom:1px solid rgba(42,42,58,.7);transition:background .15s;}
  tbody tr:last-child{border-bottom:none;}
  tbody tr:hover{background:rgba(201,168,76,.06);}
  tbody tr:hover td{color:var(--text)!important;}
  /* الـ badges تحتفظ بلونها عند hover */
  tbody tr:hover .badge,
  tbody tr:hover .btn-details,
  tbody tr:hover .btn-edit,
  tbody tr:hover .btn-delete,
  tbody tr:hover .btn-archive,
  tbody tr:hover .btn-copy-row,
  tbody tr:hover .btn-compare-row,
  tbody tr:hover .contact-num,
  tbody tr:hover .row-num { color: inherit !important; }
  .badge-yes{background:rgba(46,204,113,.15);color:var(--success);border:1px solid rgba(46,204,113,.25);}
  .badge-no{background:rgba(231,76,60,.12);color:var(--danger);border:1px solid rgba(231,76,60,.2);}
  .badge-warn{background:rgba(231,76,60,.12);color:var(--danger);border:1px solid rgba(231,76,60,.2);}
  .badge-reg{background:rgba(79,142,247,.12);color:var(--accent);border:1px solid rgba(79,142,247,.25);}
  .badge-unreg{background:rgba(245,200,66,.12);color:var(--gold);border:1px solid rgba(245,200,66,.25);}
  .badge-active{background:rgba(46,204,113,.15);color:var(--success);border:1px solid rgba(46,204,113,.25);}
  .badge-expired{background:rgba(231,76,60,.12);color:var(--danger);border:1px solid rgba(231,76,60,.2);}
  .badge-locked{background:rgba(124,93,247,.15);color:#b09fff;border:1px solid rgba(124,93,247,.3);}
  .badge-free{background:rgba(46,204,113,.1);color:var(--success);border:1px solid rgba(46,204,113,.2);}

  .battery-bar-wrap{display:flex;align-items:center;gap:6px;}
  .battery-mini{width:38px;height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
  .battery-mini-fill{height:100%;border-radius:3px;}
  .row-num{background:rgba(79,142,247,.1);color:var(--accent);border-radius:5px;padding:2px 7px;font-size:10px;font-weight:700;}
  /* ══ EMPTY STATE ══ */
  .empty-state{text-align:center;padding:44px 20px;color:var(--muted);}
  .empty-state .emoji{font-size:44px;margin-bottom:10px;}
  .empty-state p{font-size:14px;margin-bottom:14px;}
  .empty-state-hint{font-size:12px;color:var(--muted);opacity:.7;margin-bottom:16px;}
  .btn-empty-action{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:10px;border:1px solid rgba(201,168,76,.4);background:rgba(201,168,76,.08);color:var(--accent);font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;}
  .btn-empty-action:hover{background:rgba(201,168,76,.18);}

  /* ══ SKELETON LOADING ══ */
  .table-loading{padding:0;}
  @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
  .skel-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border);}
  .skel-row:last-child{border-bottom:none;}
  .skel{border-radius:6px;background:linear-gradient(90deg,var(--surface) 25%,var(--border) 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;}
  .skel-num{width:28px;height:20px;flex-shrink:0;}
  .skel-model{height:16px;flex:2;}
  .skel-storage{height:14px;flex:.7;}
  .skel-bat{height:10px;width:60px;border-radius:5px;}
  .skel-btn{height:28px;width:76px;border-radius:8px;}

  /* ══ TOAST WITH PROGRESS ══ */
  .toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);color:white;padding:13px 24px 9px;border-radius:12px;font-weight:700;font-size:14px;z-index:9998;transition:transform .35s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:180px;}
  .toast.show{transform:translateX(-50%) translateY(0);}
  .toast-text{display:flex;align-items:center;gap:8px;}
  .toast-progress{width:100%;height:3px;background:rgba(255,255,255,.25);border-radius:2px;overflow:hidden;}
  .toast-progress-bar{height:100%;background:rgba(255,255,255,.7);border-radius:2px;width:100%;animation:none;}
  .toast.show .toast-progress-bar{animation:toastProg 3.2s linear forwards;}
  @keyframes toastProg{from{width:100%}to{width:0%}}

  /* ══ TOPBAR MOBILE COMPACT ══ */
  @media(max-width:480px){
    .topbar{gap:6px;padding-bottom:4px;}
    .topbar-left{gap:7px;}
    .ishop-logo-topbar{font-size:15px!important;}
    .user-chip{padding:4px 10px;gap:6px;}
    .user-avatar{width:24px;height:24px;font-size:11px;}
    .user-name{font-size:12px!important;}
    .user-role,.role-admin,.role-user{display:none!important;}
    .btn-logout{font-size:11px!important;padding:5px 11px!important;}
    .theme-toggle{width:34px!important;height:34px!important;font-size:15px!important;}
  }

  .btn-delete{background:rgba(231,76,60,.1);border:1px solid rgba(231,76,60,.2);color:var(--danger);border-radius:7px;padding:4px 9px;cursor:pointer;font-size:12px;transition:all .2s;}
  .btn-delete:hover{background:rgba(231,76,60,.25);}
  .btn-edit{background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.25);color:var(--accent);border-radius:7px;padding:4px 9px;cursor:pointer;font-size:12px;transition:all .2s;}
  .btn-edit:hover{background:rgba(201,168,76,.25);}
  .btn-wa{display:inline-flex;align-items:center;gap:4px;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.25);color:#25d366;border-radius:7px;padding:4px 9px;font-size:11px;font-weight:700;text-decoration:none;transition:all .2s;white-space:nowrap;}
  .btn-wa:hover{background:rgba(37,211,102,.25);}

  .toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);color:white;padding:13px 24px;border-radius:12px;font-weight:700;font-size:14px;z-index:9998;transition:transform .35s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;display:flex;align-items:center;gap:8px;}
  .toast.show{transform:translateX(-50%) translateY(0);}

  .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:9990;display:flex;align-items:flex-start;justify-content:center;backdrop-filter:blur(5px);opacity:0;pointer-events:none;transition:opacity .25s;overflow-y:auto;padding:16px 0 32px;}
  .modal-overlay.show{opacity:1;pointer-events:all;}
  .modal{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:24px 20px;width:92%;max-width:440px;transform:translateY(20px) scale(.97);transition:transform .25s;text-align:center;margin:auto;flex-shrink:0;}
  .modal-overlay.show .modal{transform:translateY(0) scale(1);}
  #archive-modal{align-items:flex-start;padding:12px 0 40px;}
  #archive-modal .modal{margin:auto;}
  .modal-icon{font-size:42px;margin-bottom:10px;}
  .modal h3{font-size:18px;font-weight:800;margin-bottom:8px;}
  .modal p{color:var(--muted);font-size:13px;margin-bottom:18px;}
  .modal-pass{width:100%;margin-bottom:14px;text-align:center;letter-spacing:2px;font-size:15px;}
  .modal-pass::placeholder{letter-spacing:0;}
  .modal-err{color:var(--danger);font-size:12px;margin-bottom:10px;min-height:16px;}
  .modal-btns{display:flex;gap:10px;}
  .modal-btns button{flex:1;padding:12px;border-radius:10px;border:none;font-family:'Cairo',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;}
  .btn-cancel-m{background:var(--surface);color:var(--muted);border:1px solid var(--border)!important;}
  .btn-cancel-m:hover{color:var(--text);}
  .btn-confirm-del{background:linear-gradient(135deg,#e74c3c,#c0392b);color:white;box-shadow:0 4px 16px rgba(231,76,60,.3);}
  .btn-confirm-del:hover{filter:brightness(1.1);}
  .btn-confirm-del:disabled{opacity:.6;cursor:not-allowed;}

  .btn-archive{background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.25);color:var(--accent);border-radius:7px;padding:4px 9px;cursor:pointer;font-size:12px;transition:all .2s;font-family:'Cairo',sans-serif;}
  .btn-archive:hover{background:rgba(201,168,76,.25);}
  .arch-reason-btn.selected{border-color:var(--accent)!important;background:rgba(201,168,76,.15)!important;color:var(--accent)!important;}
  .badge-archived{background:rgba(201,168,76,.15);color:var(--accent);border:1px solid rgba(201,168,76,.3);display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;}
  .badge-return{background:rgba(79,142,247,.12);color:#7fb3ff;border:1px solid rgba(79,142,247,.25);display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;}

  td.td-long{max-width:130px;overflow:hidden;text-overflow:ellipsis;}
  .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .table-wrap table { min-width:700px; width:100%; table-layout:auto; }
  thead th, tbody td { vertical-align:middle; white-space:nowrap; }
  thead th:first-child, tbody td:first-child { position:sticky; right:0; background:var(--surface); z-index:2; width:36px; min-width:36px; }
  thead th:nth-child(2), tbody td:nth-child(2) { position:sticky; right:36px; background:var(--surface); z-index:2; min-width:130px; max-width:160px; box-shadow:-3px 0 8px rgba(0,0,0,.4); }
  tbody td:first-child, tbody td:nth-child(2) { background:var(--card); }
  tbody tr:hover td:first-child, tbody tr:hover td:nth-child(2) { background:#1e1700; }
  .contact-num{color:var(--accent);font-weight:700;}

  /* role badge in topbar */
  .role-admin{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800;font-size:11px;}
  /* Users Management */
  .users-mgmt-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);z-index:10100;display:none;align-items:center;justify-content:center;padding:20px;}
  .users-mgmt-overlay.show{display:flex;}
  .users-mgmt-box{background:var(--card);border:1px solid var(--border);border-radius:20px;width:100%;max-width:700px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;}
  .users-mgmt-hd{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
  .users-mgmt-hd h3{font-size:16px;font-weight:800;}
  .users-mgmt-body{padding:20px 24px;overflow-y:auto;flex:1;}
  .user-card-mgmt{background:var(--input-bg);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:10px;display:flex;align-items:center;gap:12px;}
  .user-card-mgmt-info{flex:1;}
  .user-card-mgmt-name{font-weight:700;font-size:14px;}
  .user-card-mgmt-sub{font-size:12px;color:var(--muted);margin-top:2px;}
  .ucm-btn{border:none;border-radius:8px;padding:6px 12px;cursor:pointer;font-family:'Cairo',sans-serif;font-size:12px;font-weight:700;}
  .ucm-edit{background:rgba(79,142,247,.12);color:var(--accent);}
  .ucm-add-btn{width:100%;padding:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0d0900;border:none;border-radius:11px;font-family:'Cairo',sans-serif;font-size:14px;font-weight:800;cursor:pointer;margin-top:12px;}
  /* User edit form */
  .uf-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
  .uf-field{display:flex;flex-direction:column;gap:4px;}
  .uf-field label{font-size:12px;font-weight:600;color:var(--muted);}
  .uf-field input,.uf-field select{background:var(--input-bg);border:1.5px solid var(--border);border-radius:9px;padding:10px 12px;font-family:'Cairo',sans-serif;font-size:13px;color:var(--text);outline:none;}
  .uf-field input:focus,.uf-field select:focus{border-color:var(--accent);}
  .pass-wrap{position:relative;}
  .pass-wrap input{width:100%;padding-left:36px;}
  .pass-eye{position:absolute;left:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:14px;color:var(--muted);}
  .role-user{color:var(--success);font-weight:700;font-size:11px;}

  /* ══ DETAIL DRAWER ══ */
  .detail-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9980;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(4px);}
  .detail-overlay.show{opacity:1;pointer-events:all;}
  .detail-drawer{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--border);border-radius:24px 24px 0 0;z-index:9981;padding:0;max-height:85vh;overflow-y:auto;transform:translateY(100%);transition:transform .35s cubic-bezier(.32,1,.4,1);touch-action:pan-y;}
  .detail-drawer.show{transform:translateY(0);}
  .detail-drawer.dragging{transition:none;}
  .drawer-handle{width:40px;height:4px;background:var(--border);border-radius:2px;margin:12px auto 0;}
  .drawer-header{padding:16px 20px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--card);z-index:2;}
  .drawer-model{font-size:17px;font-weight:900;background:linear-gradient(135deg,var(--gold),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
  .drawer-storage{font-size:13px;color:var(--muted);margin-top:2px;}
  .btn-close-drawer{background:var(--surface);border:1px solid var(--border);color:var(--muted);width:32px;height:32px;border-radius:50%;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .btn-close-drawer:hover{color:var(--text);}
  .drawer-body{padding:16px 20px 24px;}
  .detail-section{margin-bottom:18px;}
  .detail-section-title{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:6px;}
  .detail-section-title::after{content:'';flex:1;height:1px;background:var(--border);}
  .detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .detail-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:11px 13px;}
  .detail-item.full{grid-column:1/-1;}
  .drawer-actions{display:flex;gap:10px;margin-top:18px;}
  .drawer-actions a,.drawer-actions button{flex:1;padding:13px;border-radius:12px;font-family:'Cairo',sans-serif;font-size:14px;font-weight:800;text-decoration:none;text-align:center;border:none;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;}
  .drawer-btn-wa{background:linear-gradient(135deg,#25d366,#128c4e);color:white;box-shadow:0 4px 16px rgba(37,211,102,.3);}
  .drawer-btn-call{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0d0900;box-shadow:0 4px 16px rgba(201,168,76,.3);}
  .drawer-btn-edit{background:rgba(201,168,76,.15);color:var(--accent);border:1px solid rgba(201,168,76,.3)!important;}
  .drawer-btn-del{background:rgba(231,76,60,.1);color:var(--danger);border:1px solid rgba(231,76,60,.2)!important;}
  .drawer-share-row{display:flex;gap:8px;margin-top:10px;}
  .drawer-share-row a,.drawer-share-row button{flex:1;padding:11px;border-radius:12px;font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;text-decoration:none;text-align:center;border:none;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px;}
  .btn-share-wa{background:rgba(37,211,102,.12);color:#25d366;border:1px solid rgba(37,211,102,.3)!important;}
  .btn-share-wa:hover{background:rgba(37,211,102,.25);}
  .btn-share-copy{background:rgba(201,168,76,.1);color:var(--accent);border:1px solid rgba(201,168,76,.25)!important;}
  .btn-share-copy:hover{background:rgba(201,168,76,.2);}
  .share-label{font-size:11px;color:var(--muted);font-weight:600;margin-top:14px;margin-bottom:4px;letter-spacing:.5px;}

  /* Details button */
  .btn-details{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,rgba(201,168,76,.2),rgba(232,201,109,.15));border:1px solid rgba(201,168,76,.4);color:var(--accent);border-radius:8px;padding:5px 11px;font-family:'Cairo',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap;}
  .btn-details:hover{background:rgba(201,168,76,.35);box-shadow:0 2px 10px rgba(201,168,76,.25);}
  .btn-details:active{transform:scale(.96);}

  /* Simplified table */
  .col-hide{display:none!important;}
  .tap-hint{font-size:10px;color:var(--muted);text-align:center;margin-bottom:8px;opacity:.7;}

  /* ══ GUEST HERO CARDS — hover ══ */
  #gs-total:hover,#gs-iphone:hover,#gs-android:hover{opacity:.85;}
  /* Battery slider للزائر */
  .guest-bat-wrap{display:flex;align-items:center;gap:8px;padding:4px 0;}
  .guest-bat-wrap label{font-size:12px;color:var(--muted);white-space:nowrap;font-weight:700;}
  .guest-bat-wrap input[type=range]{flex:1;accent-color:var(--accent);}
  .guest-bat-val{font-size:13px;font-weight:800;color:var(--accent);min-width:38px;text-align:center;}
  .hl{background:rgba(201,168,76,.35);color:var(--text);border-radius:3px;padding:0 2px;}

  /* ══ VOICE BUTTON — مخفي تماماً لجميع المستخدمين ══ */
  .btn-voice{ display:none !important; }

  /* ══ DARK MODE — إصلاح تباين النص عند التأشير ══ */
  tbody tr:hover td { color: var(--text) !important; }
  .badge:hover { color: inherit; }
  /* إصلاح select options في الوضع الليلي */
  select option { background: var(--card); color: var(--text); }
  /* إصلاح الجداول في الوضع الليلي */
  tbody tr:hover td:first-child,
  tbody tr:hover td:nth-child(2) { background:#2a1f00; }
  /* التأكد من وضوح النص في كل الحالات */
  .badge-yes, .badge-no, .badge-warn, .badge-reg, .badge-unreg,
  .badge-active, .badge-expired, .badge-locked, .badge-free { color: inherit; }

  /* ══ SEARCH HISTORY ══ */
  .search-history{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px;}
  .hist-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;background:var(--surface);border:1px solid var(--border);color:var(--muted);font-size:12px;font-family:'Cairo',sans-serif;cursor:pointer;transition:all .2s;}
  .hist-chip:hover{border-color:var(--accent);color:var(--accent);}
  .hist-chip .hist-del{font-size:10px;opacity:.5;margin-right:2px;}
  .hist-chip .hist-del:hover{opacity:1;color:var(--danger);}

  /* ══ BATTERY FILTER SLIDER ══ */
  .battery-slider-wrap{display:flex;align-items:center;gap:10px;padding:8px 0 4px;}
  .battery-slider-wrap label{font-size:12px;color:var(--muted);white-space:nowrap;font-weight:700;}
  .battery-slider-wrap input[type=range]{flex:1;accent-color:var(--accent);}
  .bat-slider-val{font-size:13px;font-weight:800;color:var(--accent);min-width:40px;text-align:center;}

  /* ══ SORT SELECT ══ */
  .sort-wrap{display:flex;align-items:center;gap:8px;}
  .sort-wrap label{font-size:12px;color:var(--muted);white-space:nowrap;}
  .sort-select{padding:7px 12px;border-radius:9px;border:1px solid var(--border);background:var(--card);color:var(--text);font-family:'Cairo',sans-serif;font-size:13px;cursor:pointer;}

  /* ══ COPY ROW BUTTON ══ */
  .btn-copy-row{background:rgba(79,142,247,.08);border:1px solid rgba(79,142,247,.2);color:#7fb3ff;border-radius:7px;padding:4px 8px;cursor:pointer;font-size:11px;transition:all .2s;font-family:'Cairo',sans-serif;}
  .btn-copy-row:hover{background:rgba(79,142,247,.2);}

  /* ══ TAB BADGE ══ */
  .tab-badge{display:inline-flex;align-items:center;justify-content:center;background:rgba(201,168,76,.2);color:var(--accent);border-radius:20px;font-size:10px;font-weight:800;padding:1px 6px;margin-right:4px;min-width:18px;}
  .tab.active .tab-badge{background:rgba(13,9,0,.2);color:#0d0900;}

  /* ══ COMPARE ══ */
  .btn-compare-row{background:rgba(124,93,247,.08);border:1px solid rgba(124,93,247,.2);color:#b09fff;border-radius:7px;padding:4px 8px;cursor:pointer;font-size:11px;transition:all .2s;font-family:'Cairo',sans-serif;}
  .btn-compare-row:hover{background:rgba(124,93,247,.2);}
  .btn-compare-row.selected{background:rgba(124,93,247,.25);border-color:#b09fff;}
  .compare-bar{display:none;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:12px;background:rgba(124,93,247,.1);border:1px solid rgba(124,93,247,.3);margin-bottom:12px;flex-wrap:wrap;}
  .compare-bar.show{display:flex;}
  .compare-bar-info{font-size:13px;color:#b09fff;font-weight:700;}
  .btn-do-compare{padding:8px 16px;border-radius:9px;background:rgba(124,93,247,.2);border:1px solid rgba(124,93,247,.4);color:#b09fff;font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;}
  .btn-do-compare:hover{background:rgba(124,93,247,.35);}
  .compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .compare-col{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;}
  .compare-col-title{font-size:15px;font-weight:900;color:var(--accent);margin-bottom:12px;text-align:center;}
  .compare-row-item{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px;}
  .compare-row-item:last-child{border-bottom:none;}
  .compare-row-item .lbl{color:var(--muted);font-weight:600;}
  .compare-row-item .val{font-weight:700;color:var(--text);}
  .compare-row-item .val.better{color:var(--success);}
  .compare-row-item .val.worse{color:var(--danger);}

  /* ══ KEYBOARD SHORTCUT HINT ══ */
  .kbd{display:inline-flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:1px 6px;font-size:10px;color:var(--muted);font-family:monospace;line-height:1.6;}

  /* ══ SHARE URL MODAL ══ */
  .share-url-box{display:flex;gap:8px;margin-top:10px;}
  .share-url-input{flex:1;background:var(--input-bg);border:1.5px solid var(--border);border-radius:10px;padding:10px 12px;font-family:'Cairo',sans-serif;font-size:13px;color:var(--text);outline:none;}

  /* ══ EXPORT & KEYBOARD hint tooltip ══ */
  .shortcut-hint{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 16px;font-size:12px;color:var(--muted);z-index:9960;display:none;gap:16px;flex-wrap:wrap;box-shadow:0 8px 24px rgba(0,0,0,.3);}
  .shortcut-hint.show{display:flex;}
  .shortcut-hint span{display:flex;align-items:center;gap:5px;}
/* ══ TYPOGRAPHY ENHANCEMENT — خطوط أكبر وأوضح ══ */

/* Base font size boost */
body { font-size: 16px; }

/* ── الجدول الرئيسي ── */
table { font-size: 15px !important; }
thead th { font-size: 13px !important; font-weight: 800 !important; letter-spacing: 0 !important; }
td { font-size: 15px !important; padding: 14px 12px !important; font-weight: 600 !important; }

/* ── شاشة التفاصيل (Drawer) ── */
.detail-item-label { font-size: 13px !important; font-weight: 800 !important; letter-spacing: 0.5px; }
.detail-item-val   { font-size: 17px !important; font-weight: 800 !important; }
.detail-item-val.text-long { font-size: 15px !important; font-weight: 600 !important; }

/* عنوان الـ drawer */
.drawer-title { font-size: 20px !important; font-weight: 900 !important; }
.drawer-subtitle { font-size: 15px !important; font-weight: 700 !important; }

/* ── الإدخال ── */
label  { font-size: 15px !important; font-weight: 800 !important; }
input, select, textarea { font-size: 16px !important; font-weight: 600 !important; }

/* ── الـ Chips والـ Badges ── */
.chip, .list-chip, .spec-chip { font-size: 12px !important; font-weight: 700 !important; }

/* ── الأزرار ── */
.btn-login  { font-size: 17px !important; font-weight: 900 !important; }
.tab        { font-size: 16px !important; font-weight: 700 !important; }

/* ── Stats bar ── */
.stat-chip  { font-size: 14px !important; font-weight: 700 !important; }

/* ── Login ── */
.login-logo h2      { font-size: 22px !important; font-weight: 900 !important; }
.login-logo p       { font-size: 15px !important; }
.login-field label  { font-size: 14px !important; font-weight: 800 !important; }
.login-field input  { font-size: 16px !important; }
.login-err          { font-size: 14px !important; }

/* ── User chip ── */
.user-name  { font-size: 15px !important; font-weight: 700 !important; }
.user-role  { font-size: 12px !important; }

/* ── Section titles في الـ drawer ── */
.drawer-section-title { font-size: 13px !important; font-weight: 800 !important; letter-spacing: 1px; }

/* ── الأزرار الصغيرة ── */
.btn-edit, .btn-delete, .btn-archive { font-size: 16px !important; }

/* ── Card model في Grid ── */
.card-model   { font-size: 14px !important; font-weight: 800 !important; }
.list-model   { font-size: 16px !important; font-weight: 800 !important; }
.list-price   { font-size: 18px !important; font-weight: 900 !important; }
.badge-price  { font-size: 14px !important; font-weight: 800 !important; }

/* ── Sync bar ── */
.sync-bar { font-size: 13px !important; font-weight: 800 !important; }

/* ── Toast ── */
.toast { font-size: 15px !important; font-weight: 700 !important; }

/* ══ LAYOUT TOGGLE BUTTONS ══ */
.layout-toggle-wrap {
  display: flex; gap: 6px; align-items: center;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 20px; padding: 4px; margin-right: auto;
}
.layout-toggle-wrap button {
  background: transparent; border: none; color: var(--muted);
  width: 32px; height: 32px; border-radius: 14px; cursor: pointer;
  font-size: 15px; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; font-family: 'Cairo', sans-serif;
}
.layout-toggle-wrap button.active {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #0d0900;
}

/* ══ GRID LAYOUT ══ */
.ishop-grid-layout {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 4px 0;
}

/* ══ LIST LAYOUT ══ */
.ishop-list-layout {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

/* ── Grid Card ── */
.gc-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; cursor: pointer;
  transition: all 0.2s; position: relative;
}
.gc-card:active { transform: scale(0.97); border-color: var(--accent); }

.gc-card-img {
  height: 110px; display: flex; align-items: center; justify-content: center;
  font-size: 50px; background: var(--surface); position: relative;
  border-bottom: 1px solid var(--border);
}
.gc-badge-new {
  position: absolute; top: 7px; right: 7px;
  background: linear-gradient(135deg,#2ecc71,#27ae60);
  color: #fff; font-size: 9px; font-weight: 800;
  padding: 3px 8px; border-radius: 20px;
}
.gc-badge-price {
  position: absolute; bottom: 7px; left: 7px;
  background: rgba(0,0,0,0.7); color: var(--accent2);
  font-size: 13px; font-weight: 800; padding: 3px 10px;
  border-radius: 20px; border: 1px solid var(--border);
}
.gc-card-body { padding: 10px; }
.gc-card-model {
  font-size: 13px; font-weight: 800; color: var(--text);
  margin-bottom: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
.gc-chip {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 7px; font-size: 11px;
  color: var(--accent); font-weight: 700;
}
.gc-bat-row { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.gc-bat-bar { flex: 1; height: 4px; background: var(--input-bg); border-radius: 10px; overflow: hidden; }
.gc-bat-fill { height: 100%; border-radius: 10px; }
.gc-bat-pct { font-size: 11px; font-weight: 800; min-width: 32px; }
.gc-card-foot {
  display: flex; justify-content: space-between;
  padding-top: 7px; border-top: 1px solid var(--border);
  font-size: 10px; color: var(--muted);
}
.gc-actions {
  display: flex; gap: 5px; margin-top: 8px; justify-content: flex-end;
}
.gc-act-btn {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 8px; cursor: pointer;
  font-size: 14px; transition: all 0.2s;
}
.gc-act-btn:active { transform: scale(0.92); }
.gc-act-del { border-color: rgba(231,76,60,0.3); }

/* ── List Item ── */
.gc-list-item {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; cursor: pointer; transition: all 0.2s;
  position: relative; overflow: hidden;
}
.gc-list-item::before {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(to bottom, var(--accent), var(--accent2));
}
.gc-list-item:active { transform: scale(0.98); border-color: var(--accent); }
.gc-list-icon {
  font-size: 36px; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border-radius: 12px; flex-shrink: 0;
}
.gc-list-main { flex: 1; min-width: 0; }
.gc-list-model { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 5px; }
.gc-list-right { text-align: left; flex-shrink: 0; }
.gc-list-price { font-size: 17px; font-weight: 900; color: var(--accent2); margin-bottom: 3px; }
.gc-list-by { font-size: 11px; color: var(--muted); }

/* ══ THEMES ══════════════════════════════════════════════════ */

/* ── Blue Dark ── */
body.theme-blue {
  --bg:#050d1a; --surface:#0a1628; --card:#0f1f36; --border:#1a3050;
  --accent:#4a9eff; --accent2:#7ec8ff; --gold:#7ec8ff;
  --text:#d0e8ff; --muted:#3a6090; --input-bg:#071020;
}
body.theme-blue::before {
  background-image: linear-gradient(rgba(74,158,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(74,158,255,.04) 1px,transparent 1px);
}

/* ── Green Dark ── */
body.theme-green {
  --bg:#050f08; --surface:#0a1f0d; --card:#0f2a12; --border:#1a4020;
  --accent:#4aff80; --accent2:#80ffaa; --gold:#80ffaa;
  --text:#d0ffd8; --muted:#2a6030; --input-bg:#071510;
}
body.theme-green::before {
  background-image: linear-gradient(rgba(74,255,128,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(74,255,128,.04) 1px,transparent 1px);
}

/* ── Purple ── */
body.theme-purple {
  --bg:#0a0514; --surface:#150a28; --card:#1e1038; --border:#3a1a60;
  --accent:#b060ff; --accent2:#d090ff; --gold:#d090ff;
  --text:#e8d0ff; --muted:#6030a0; --input-bg:#0d0720;
}
body.theme-purple::before {
  background-image: linear-gradient(rgba(176,96,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(176,96,255,.04) 1px,transparent 1px);
}

/* ── Red Dark ── */
body.theme-red {
  --bg:#120404; --surface:#200808; --card:#2e0c0c; --border:#501818;
  --accent:#ff5a5a; --accent2:#ff8888; --gold:#ff8888;
  --text:#ffd8d8; --muted:#803030; --input-bg:#180505;
}
body.theme-red::before {
  background-image: linear-gradient(rgba(255,90,90,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,90,90,.04) 1px,transparent 1px);
}

/* ── Theme Panel ── */
.theme-panel {
  display: none; position: fixed; bottom: 80px; left: 50%;
  transform: translateX(-50%); z-index: 9990;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 20px; padding: 14px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  min-width: 280px;
}
.theme-panel.open { display: block; animation: fadeUp .2s ease; }
.theme-panel-title {
  font-size: 11px; color: var(--muted); font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px;
}
.theme-swatches { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.theme-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer; padding: 8px 10px; border-radius: 12px;
  border: 2px solid transparent; transition: all 0.2s;
  background: var(--surface);
}
.theme-swatch.active { border-color: var(--accent); }
.theme-swatch:active { transform: scale(0.92); }
.swatch-circle {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
}
.swatch-label { font-size: 10px; color: var(--muted); font-weight: 700; }

/* ══ DEVICE IMAGES ══ */
.img-gallery {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px; padding: 4px 0;
}
.img-thumb-wrap { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1; }
.img-thumb { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform 0.2s; }
.img-thumb:active { transform: scale(0.97); }
.img-del-btn {
  position: absolute; top: 5px; left: 5px;
  background: rgba(0,0,0,0.7); color: #fff;
  border: none; border-radius: 50%; width: 24px; height: 24px;
  font-size: 11px; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
}
.img-add-btn {
  aspect-ratio: 1; border-radius: 12px;
  border: 2px dashed var(--border); display: flex;
  align-items: center; justify-content: center;
  font-size: 28px; color: var(--muted); cursor: pointer;
  transition: all 0.2s; background: var(--surface);
}
.img-add-btn:active { border-color: var(--accent); color: var(--accent); transform: scale(0.97); }
.img-upload-empty {
  grid-column: 1/-1; border: 2px dashed var(--border);
  border-radius: 12px; padding: 24px; display: flex;
  flex-direction: column; align-items: center; gap: 8px;
  color: var(--muted); cursor: pointer; transition: all 0.2s;
  background: var(--surface);
}
.img-upload-empty:active { border-color: var(--accent); color: var(--accent); }
.drawer-images-title {
  font-size: 12px; font-weight: 800; color: var(--muted);
  letter-spacing: 1px; text-transform: uppercase;
  margin: 14px 0 8px; display: flex; align-items: center; gap: 6px;
}

/* ══ MOBILE FIXES & REVIEW ══════════════════════════════════ */

/* ── Grid/List على موبايل ── */
@media(max-width:600px) {
  /* Grid: عمودين على الموبايل */
  .ishop-grid-layout {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .gc-card-img { height: 90px !important; font-size: 40px !important; }
  .gc-card-model { font-size: 12px !important; }
  .gc-badge-price { font-size: 11px !important; padding: 2px 8px !important; }
  .gc-chip { font-size: 10px !important; padding: 2px 5px !important; }

  /* List: عرض كامل */
  .ishop-list-layout { gap: 8px !important; }
  .gc-list-item { padding: 10px 12px !important; }
  .gc-list-icon { width: 44px !important; height: 44px !important; font-size: 28px !important; }
  .gc-list-model { font-size: 14px !important; }
  .gc-list-price { font-size: 15px !important; }

  /* Layout toggle */
  .layout-toggle-wrap button { width: 28px !important; height: 28px !important; font-size: 13px !important; }

  /* Theme panel - يظهر من الأسفل على موبايل */
  .theme-panel {
    bottom: 70px !important;
    left: 10px !important;
    right: 10px !important;
    transform: none !important;
    min-width: unset !important;
  }

  /* صور الجهاز */
  .img-gallery { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .img-thumb-wrap { aspect-ratio: 1 !important; }

  /* الـ actions في الـ grid */
  .gc-actions { gap: 4px !important; }
  .gc-act-btn { padding: 4px 6px !important; font-size: 13px !important; }
}

/* ── إصلاح الـ scroll في الـ drawer ── */
.detail-drawer {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* ── إصلاح الـ input zoom على iOS ── */
@media(max-width:600px) {
  input, select, textarea {
    font-size: 16px !important; /* يمنع الـ zoom على iOS */
  }
}

/* ── إصلاح الأزرار على الموبايل ── */
@media(max-width:600px) {
  .btn-submit { 
    width: 100% !important; 
    padding: 16px !important; 
    font-size: 17px !important;
  }
  /* الزر الكبير في الـ drawer */
  .drawer-actions button, .drawer-actions a {
    min-height: 52px !important;
    font-size: 15px !important;
  }
}

/* ── إصلاح الـ form على موبايل ── */
@media(max-width:480px) {
  .form-grid { grid-template-columns: 1fr !important; }
  .card { padding: 14px !important; }
  .card-title { font-size: 15px !important; }

  /* الـ stats bar مع toggle */
  .stats-bar { flex-wrap: wrap !important; gap: 6px !important; }
  .layout-toggle-wrap { flex-shrink: 0; }
}

/* ── تحسين الـ tap targets ── */
button, a, select, input[type="checkbox"], input[type="radio"] {
  min-height: 44px;
}
.gc-act-btn, .img-del-btn, .layout-toggle-wrap button {
  min-height: unset !important;
}

/* ── منع تحديد النص عند الـ tap ── */
.gc-card, .gc-list-item, .device-card {
  -webkit-user-select: none;
  user-select: none;
}

/* ══ IMAGE INSTRUCTIONS ══ */
.img-instructions {
  margin-top: 10px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px;
}
.img-inst-row {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: var(--muted); padding: 4px 0;
}
.img-inst-row span:last-child { color: var(--text); font-size: 12px; line-height: 1.5; }

/* ══ IMAGE REFRESH BUTTON ══ */
.img-refresh-btn {
  width: 100%; margin-top: 10px; padding: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #0d0900; border: none; border-radius: 12px;
  font-size: 14px; font-weight: 800; cursor: pointer;
  font-family: 'Cairo', sans-serif;
}
.img-refresh-btn:active { transform: scale(0.97); }

/* ══ GRID CARD IMAGE DOTS ══ */
.gc-img-dots {
  position: absolute; bottom: 6px; left: 50%;
  transform: translateX(-50%); display: flex; gap: 4px; z-index: 2;
}
.gc-img-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.5);
}
.gc-img-dot.active { background: #fff; }