:root{
    --bg:#F6F3EC;
    --surface:#FFFFFF;
    --ink:#1E1C18;
    --ink-soft:#6B665C;
    --indigo:#182A3A;
    --indigo-soft:#26405490;
    --teal:#1F4E4A;
    --teal-soft:#E4EEEC;
    --gold:#B4842A;
    --gold-soft:#F6E9D2;
    --rust:#A5432F;
    --rust-soft:#F6E1DA;
    --border:#E4DFD2;
    --radius:10px;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Vazirmatn',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:'JetBrains Mono','Vazirmatn',monospace;}

  /* ---------- alerts ---------- */
  .alert{padding:12px 16px;border-radius:8px;font-size:13px;margin-bottom:18px;}
  .alert-error{background:var(--rust-soft);color:var(--rust);border:1px solid #a5432f33;}
  .alert-success{background:var(--teal-soft);color:var(--teal);border:1px solid #1f4e4a33;}

  .empty-state{padding:40px 20px;text-align:center;color:var(--ink-soft);font-size:13.5px;}

  .plan-limit-note{font-size:12px;color:var(--ink-soft);margin-top:6px;}
  .icon-btn{background:none;border:1px solid var(--border);border-radius:6px;width:30px;height:30px;cursor:pointer;color:var(--ink-soft);font-size:13px;}
  .icon-btn:hover{border-color:var(--teal);color:var(--teal);}
  .icon-btn.danger:hover{border-color:var(--rust);color:var(--rust);}
  .actions-cell{display:flex;gap:6px;}

  /* ---------- signature pattern strip (Persian rug border motif) ---------- */
  .rug-strip{
    height:10px;width:100%;
    background:
      repeating-linear-gradient(135deg,
        var(--gold) 0 6px,
        transparent 6px 12px);
    opacity:.85;
  }

  /* ======================= LOGIN SCREEN ======================= */
  .login-wrap{min-height:100vh;display:flex;}
  .login-art{
    flex:1.1;background:var(--indigo);
    position:relative;overflow:hidden;
    display:flex;flex-direction:column;justify-content:space-between;
    padding:48px;color:#EDE8DD;
  }
  .login-art::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(circle at 20% 20%, #ffffff10, transparent 40%),
      repeating-linear-gradient(45deg, #ffffff08 0 2px, transparent 2px 26px),
      repeating-linear-gradient(-45deg, #ffffff08 0 2px, transparent 2px 26px);
  }
  .login-art .brandmark{position:relative;font-weight:800;font-size:22px;letter-spacing:.5px;}
  .login-art .brandmark span{color:var(--gold);}
  .login-art .quote{position:relative;font-size:15px;line-height:2.1;color:#C9C2B3;max-width:380px;}
  .login-art .quote b{color:var(--gold-soft);font-weight:600;}
  .login-form-side{
    flex:1;display:flex;align-items:center;justify-content:center;
    background:var(--surface);padding:32px;
  }
  .login-card{width:100%;max-width:360px;}
  .login-card h1{font-size:24px;margin:0 0 6px;font-weight:800;}
  .login-card p{color:var(--ink-soft);margin:0 0 28px;font-size:14px;}
  .field{margin-bottom:16px;}
  .field label{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:6px;font-weight:500;}
  .field input{
    width:100%;padding:12px 14px;border-radius:8px;
    border:1.5px solid var(--border);font-family:inherit;font-size:14px;
    background:#FBFAF7;transition:.15s;
  }
  .field input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft);}
  .btn-primary{
    width:100%;padding:13px;border:none;border-radius:8px;
    background:var(--teal);color:#fff;font-family:inherit;font-weight:700;font-size:14.5px;
    cursor:pointer;transition:.15s;
  }
  .btn-primary:hover{background:#173C39;}
  .login-foot{margin-top:18px;font-size:12.5px;color:var(--ink-soft);text-align:center;}

  /* ======================= APP SHELL ======================= */
  .app{display:flex;min-height:100vh;}
  .sidebar{
    width:230px;flex-shrink:0;background:var(--indigo);color:#D9D4C6;
    display:flex;flex-direction:column;
  }
  .sidebar .brand{padding:22px 20px 16px;font-weight:800;font-size:17px;color:#fff;display:flex;align-items:center;gap:10px;}
  .sidebar .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);}
  .sidebar nav{padding:8px 12px;display:flex;flex-direction:column;gap:2px;}
  .sidebar nav a{
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:8px;color:#C4BFB1;
    text-decoration:none;font-size:13.5px;font-weight:500;
  }
  .sidebar nav a .ic{width:17px;text-align:center;opacity:.8;}
  .sidebar nav a.active{background:#ffffff14;color:#fff;}
  .sidebar nav a.active .ic{color:var(--gold);}
  .sidebar nav .section-label{font-size:11px;color:#8B8778;margin:14px 12px 4px;letter-spacing:.5px;}
  .sidebar .foot{margin-top:auto;padding:16px 20px;font-size:12px;color:#8B8778;border-top:1px solid #ffffff14;}

  .main{flex:1;display:flex;flex-direction:column;min-width:0;}
  .topbar{
    height:64px;background:var(--surface);border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;padding:0 24px;
  }
  .topbar .search{
    display:flex;align-items:center;gap:8px;background:var(--bg);
    padding:9px 14px;border-radius:8px;border:1px solid var(--border);width:280px;
    color:var(--ink-soft);font-size:13px;
  }
  .topbar .user{display:flex;align-items:center;gap:10px;font-size:13px;}
  .avatar{width:32px;height:32px;border-radius:50%;background:var(--gold-soft);color:var(--gold);
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}
  .content{padding:28px 28px 60px;}
  .content h2{font-size:19px;font-weight:800;margin:0 0 4px;}
  .content .sub{color:var(--ink-soft);font-size:13.5px;margin:0 0 24px;}

  /* stat cards */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px;}
  .stat-card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    padding:20px;position:relative;overflow:hidden;
  }
  .stat-card .rug-strip{position:absolute;top:0;right:0;left:0;}
  .stat-card .label{font-size:12.5px;color:var(--ink-soft);margin-bottom:10px;padding-top:6px;}
  .stat-card .value{font-family:'JetBrains Mono';font-size:26px;font-weight:600;}
  .stat-card .value small{font-size:13px;color:var(--ink-soft);font-weight:500;margin-left:4px;}
  .stat-card.teal .value{color:var(--teal);}
  .stat-card.gold .value{color:var(--gold);}
  .stat-card.rust .value{color:var(--rust);}

  /* table */
  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
  .card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
  .card-head h3{margin:0;font-size:14.5px;font-weight:700;}
  table{width:100%;border-collapse:collapse;font-size:13px;}
  th{
    text-align:right;padding:12px 20px;background:#FAF8F3;color:var(--ink-soft);
    font-weight:600;font-size:12px;border-bottom:1px solid var(--border);
  }
  td{padding:14px 20px;border-bottom:1px solid #F0ECE3;}
  tr:last-child td{border-bottom:none;}
  .code{font-family:'JetBrains Mono';font-size:12.5px;color:var(--ink-soft);}
  .badge{padding:4px 10px;border-radius:6px;font-size:11.5px;font-weight:600;display:inline-block;}
  .badge.done{background:var(--teal-soft);color:var(--teal);}
  .badge.pending{background:var(--gold-soft);color:var(--gold);}
  .badge.new{background:var(--rust-soft);color:var(--rust);}

  /* form (brand profile) */
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:24px;}
  .form-grid .full{grid-column:1/-1;}
  .logo-upload{
    width:88px;height:88px;border-radius:14px;background:var(--teal-soft);
    display:flex;align-items:center;justify-content:center;color:var(--teal);
    font-size:12px;font-weight:600;text-align:center;border:1.5px dashed #1F4E4A55;margin-bottom:8px;
  }
  .plan-tag{
    display:inline-flex;align-items:center;gap:6px;background:var(--gold-soft);color:var(--gold);
    padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700;
  }
  .save-bar{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--border);background:#FAF8F3;}
  .btn-ghost{padding:10px 20px;border-radius:8px;border:1.5px solid var(--border);background:#fff;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;}
  .btn-save{padding:10px 22px;border-radius:8px;border:none;background:var(--teal);color:#fff;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;}

  /* ---------- mobile nav trigger (hidden on desktop) ---------- */
  .menu-btn{
    display:none;background:none;border:1.5px solid var(--border);
    border-radius:8px;width:38px;height:38px;font-size:16px;cursor:pointer;color:var(--ink);
    flex-shrink:0;
  }
  .sidebar-overlay{display:none;}

  /* table wrapper so rows scroll horizontally on narrow screens instead of crushing */
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table{min-width:640px;}

  /* ======================= RESPONSIVE ======================= */
  @media (max-width:900px){
    .login-wrap{flex-direction:column;}
    .login-art{flex:none;padding:32px 24px;min-height:200px;}
    .login-art .quote{display:none;}
    .login-form-side{padding:28px 20px;}

    .app{position:relative;}
    .sidebar{
      position:fixed;inset:0 auto 0 0;z-index:100;
      transform:translateX(100%);transition:transform .25s ease;
      width:78vw;max-width:270px;box-shadow:-8px 0 24px #00000030;
    }
    html[dir="rtl"] .sidebar{right:0;left:auto;}
    .sidebar.open{transform:translateX(0) !important;}
    .sidebar-overlay{
      display:none;position:fixed;inset:0;background:#00000055;z-index:90;
    }
    .sidebar-overlay.show{display:block;}

    .menu-btn{display:inline-block;}
    .topbar{padding:0 14px;gap:10px;}
    .topbar .search{width:auto;flex:1;font-size:12.5px;padding:8px 10px;}
    .topbar .search span.txt{display:none;}
    .user span:not(.avatar){display:none;}

    .content{padding:18px 14px 40px;}
    .content h2{font-size:17px;}
    .stats{grid-template-columns:1fr;gap:12px;}
    .stats[style]{grid-template-columns:1fr !important;}
    .form-grid{grid-template-columns:1fr;padding:18px;}
    .card-head{flex-wrap:wrap;gap:10px;}
    .save-bar{flex-wrap:wrap;}
  }

  @media (max-width:520px){
    .login-card h1{font-size:20px;}
    .stat-card .value{font-size:22px;}
  }

/* ---------- pagination ---------- */
.pagination{display:flex;gap:6px;justify-content:center;padding:16px;flex-wrap:wrap;}
.pagination .page-link{
  padding:7px 13px;border-radius:6px;border:1px solid var(--border);
  color:var(--ink-soft);text-decoration:none;font-size:12.5px;font-family:inherit;
}
.pagination .page-link.active{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:700;}
.pagination .page-link:hover:not(.active){border-color:var(--teal);color:var(--teal);}

/* ---------- upload loading spinner ---------- */
.spinner{
  display:inline-block;width:13px;height:13px;border-radius:50%;
  border:2px solid #ffffff55;border-top-color:#fff;
  animation:spin .7s linear infinite;vertical-align:middle;margin-left:6px;
}
@keyframes spin{to{transform:rotate(360deg);}}
button[disabled]{opacity:.75;cursor:not-allowed;}