/* Tanazul - stylesheet */
:root{
    --bg:#F6F4EF; --surface:#FFFFFF; --surface-2:#EFEBE2; --border:#DDD6C7;
    --ink:#1C2521; --ink-muted:#5B6560;
    --accent:#0F6B5C; --accent-strong:#0B4F44; --accent-soft:#E4F0EC; --on-accent:#F7FBFA;
    --gold:#8F6D24; --gold-soft:#F4ECD8;
    --good:#1F7A4D; --good-soft:#E3F3E9;
    --warn:#96650D; --warn-soft:#FBF0DA;
    --bad:#B23A2E; --bad-soft:#FBE7E4;
    --shadow:0 1px 2px rgba(28,37,33,.07), 0 10px 26px -14px rgba(28,37,33,.22);
    --radius:14px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#101817; --surface:#172221; --surface-2:#1E2B29; --border:#2B3A37;
      --ink:#ECEFE9; --ink-muted:#9FB0AA;
      --accent:#4FCBB0; --accent-strong:#7BE0C8; --accent-soft:#183430; --on-accent:#0B1E1A;
      --gold:#D9B15A; --gold-soft:#2E2718;
      --good:#4CC585; --good-soft:#163326;
      --warn:#E3B34B; --warn-soft:#34290F;
      --bad:#E2685A; --bad-soft:#3A1E1A;
      --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 30px -16px rgba(0,0,0,.65);
    }
  }
  :root[data-theme="dark"]{
    --bg:#101817; --surface:#172221; --surface-2:#1E2B29; --border:#2B3A37;
    --ink:#ECEFE9; --ink-muted:#9FB0AA;
    --accent:#4FCBB0; --accent-strong:#7BE0C8; --accent-soft:#183430; --on-accent:#0B1E1A;
    --gold:#D9B15A; --gold-soft:#2E2718;
    --good:#4CC585; --good-soft:#163326;
    --warn:#E3B34B; --warn-soft:#34290F;
    --bad:#E2685A; --bad-soft:#3A1E1A;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 30px -16px rgba(0,0,0,.65);
  }
  *{box-sizing:border-box}
  html{background:var(--bg)}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;
    font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  }
  .num{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
  h1,h2,h3,h4{ text-wrap:balance; margin:0; font-weight:600; }
  p{margin:0}
  a{color:inherit}
  button{font-family:inherit}
  ::selection{background:var(--accent-soft)}

  .container{max-width:1120px; margin:0 auto; padding-inline:20px}
  .app-header{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
  .header-row{display:flex; align-items:center; gap:16px; padding-block:14px}
  .brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.15rem; text-decoration:none; white-space:nowrap}
  .brand-mark{width:34px; height:34px; border-radius:9px; background:var(--accent); color:var(--on-accent); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:.95rem; flex:none}
  nav.main-nav{display:flex; gap:4px; flex:1; overflow-x:auto; scrollbar-width:none}
  nav.main-nav::-webkit-scrollbar{display:none}
  .nav-link{padding:8px 14px; border-radius:999px; font-size:.9rem; font-weight:500; color:var(--ink-muted); text-decoration:none; white-space:nowrap; border:1px solid transparent}
  .nav-link:hover{color:var(--ink); background:var(--surface-2)}
  .nav-link.active{color:var(--accent-strong); background:var(--accent-soft); border-color:var(--border)}
  .lang-toggle{display:flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; flex:none}
  .lang-toggle button{border:none; background:var(--surface); color:var(--ink-muted); padding:7px 13px; font-size:.82rem; font-weight:600; cursor:pointer}
  .lang-toggle button.active{background:var(--accent); color:var(--on-accent)}

  main{padding-block:32px 64px; min-height:60vh}
  .stack{display:flex; flex-direction:column; gap:28px}
  section+section{margin-top:40px}

  .eyebrow{font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-strong)}
  .hero{display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:center; padding-block:8px 12px}
  .hero h1{font-size:clamp(1.9rem,3.2vw,2.6rem); line-height:1.25}
  .hero .lede{margin-top:14px; color:var(--ink-muted); font-size:1.05rem; max-width:52ch}
  .hero-actions{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}
  .hero-panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px}
  .hero-panel .kv-row:not(:last-child){border-bottom:1px dashed var(--border)}

  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border-radius:10px; font-weight:600; font-size:.92rem; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:transform .08s ease}
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--accent); color:var(--on-accent)}
  .btn-primary:hover{background:var(--accent-strong)}
  .btn-ghost{background:transparent; border-color:var(--border); color:var(--ink)}
  .btn-ghost:hover{background:var(--surface-2)}
  .btn-sm{padding:7px 13px; font-size:.82rem; border-radius:8px}
  .btn-block{width:100%}
  .btn[disabled]{opacity:.5; cursor:not-allowed}

  .stat-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-top:28px}
  .stat-cell{background:var(--surface); padding:16px 18px}
  .stat-cell .n{font-size:1.5rem; font-weight:700}
  .stat-cell .l{font-size:.8rem; color:var(--ink-muted); margin-top:2px}

  .how-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
  .how-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
  .how-card .tag{display:inline-block; font-size:.75rem; font-weight:700; padding:3px 10px; border-radius:999px; margin-bottom:12px}
  .tag-seller{background:var(--gold-soft); color:var(--gold)}
  .tag-buyer{background:var(--accent-soft); color:var(--accent-strong)}
  .step{display:flex; gap:12px; padding-block:10px}
  .step:not(:last-child){border-bottom:1px solid var(--border)}
  .step-n{width:26px; height:26px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; flex:none; font-family:'IBM Plex Mono',monospace}
  .step h4{font-size:.94rem}
  .step p{color:var(--ink-muted); font-size:.86rem; margin-top:3px}

  .trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
  .trust-card{border:1px solid var(--border); border-radius:12px; padding:14px; background:var(--surface)}
  .trust-card .lvl{font-family:'IBM Plex Mono',monospace; font-size:.75rem; font-weight:600; color:var(--ink-muted)}
  .trust-card h4{font-size:.92rem; margin-top:4px}
  .trust-card p{font-size:.82rem; color:var(--ink-muted); margin-top:6px}

  .callout{background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:16px 18px; font-size:.88rem; color:var(--ink-muted); display:flex; gap:10px}
  .callout b{color:var(--ink); font-weight:600}
  .callout .ic{flex:none}

  .page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px}
  .page-head h2{font-size:1.5rem}
  .page-head p{color:var(--ink-muted); font-size:.92rem; margin-top:4px}

  .filter-bar{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); display:grid; grid-template-columns:repeat(5,1fr) auto; gap:12px; align-items:end; margin-bottom:24px}
  .field{display:flex; flex-direction:column; gap:5px}
  .field label{font-size:.78rem; font-weight:600; color:var(--ink-muted)}
  .input,select.input,textarea.input{background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:9px 11px; font-size:.9rem; color:var(--ink); font-family:inherit; width:100%}
  .input:focus,select.input:focus,textarea.input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
  textarea.input{resize:vertical; min-height:70px}

  .deal-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px}
  .deal-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden; text-decoration:none; color:inherit}
  .deal-card:hover{border-color:var(--accent)}
  .deal-card-top{padding:16px 18px 12px; display:flex; justify-content:space-between; align-items:flex-start; gap:8px}
  .deal-card-top h3{font-size:1.02rem}
  .deal-card-top .loc{font-size:.82rem; color:var(--ink-muted); margin-top:3px}
  .badge{display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; padding:4px 9px; border-radius:999px; white-space:nowrap; flex:none}
  .badge-0{background:var(--surface-2); color:var(--ink-muted)}
  .badge-1{background:var(--warn-soft); color:var(--warn)}
  .badge-2{background:var(--accent-soft); color:var(--accent-strong)}
  .badge-3{background:var(--gold-soft); color:var(--gold)}
  .badge-pending{background:var(--warn-soft); color:var(--warn)}
  .badge-approved{background:var(--good-soft); color:var(--good)}
  .badge-rejected{background:var(--bad-soft); color:var(--bad)}
  .badge-sample{background:var(--surface-2); color:var(--ink-muted); border:1px dashed var(--border)}
  .kv-row{display:flex; justify-content:space-between; align-items:baseline; padding:7px 18px; font-size:.86rem; gap:10px}
  .kv-row .k{color:var(--ink-muted)}
  .kv-row .v{font-weight:600}
  .deal-card-foot{margin-top:auto; background:var(--accent-soft); padding:12px 18px; display:flex; justify-content:space-between; align-items:center}
  .deal-card-foot .k{font-size:.78rem; color:var(--accent-strong); font-weight:600}
  .deal-card-foot .v{font-size:1.15rem; font-weight:700; color:var(--accent-strong)}
  .empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted); border:1px dashed var(--border); border-radius:var(--radius)}

  .detail-grid{display:grid; grid-template-columns:1.3fr .95fr; gap:24px; align-items:start}
  .panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px}
  .panel h3{font-size:1.05rem; margin-bottom:14px}
  .panel + .panel{margin-top:20px}

  .bar-chart{margin-top:14px}
  .bar-row{margin-bottom:12px}
  .bar-row .bar-label{display:flex; justify-content:space-between; font-size:.82rem; margin-bottom:5px}
  .bar-track{height:14px; background:var(--surface-2); border-radius:999px; overflow:hidden}
  .bar-fill{height:100%; border-radius:999px}
  .bar-fill.a{background:var(--accent)}
  .bar-fill.b{background:var(--gold)}

  .verdict{margin-top:14px; padding:12px 14px; border-radius:10px; font-size:.88rem; font-weight:600; display:flex; gap:8px; align-items:center}
  .verdict.good{background:var(--good-soft); color:var(--good)}
  .verdict.bad{background:var(--bad-soft); color:var(--bad)}
  .verdict.neutral{background:var(--surface-2); color:var(--ink-muted)}

  table.admin-table{width:100%; border-collapse:collapse; font-size:.86rem}
  table.admin-table th{text-align:start; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-muted); padding:9px 10px; border-bottom:1px solid var(--border)}
  table.admin-table td{padding:10px; border-bottom:1px solid var(--border); vertical-align:top}
  table.admin-table tr:last-child td{border-bottom:none}
  .table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow)}
  .row-actions{display:flex; gap:6px; flex-wrap:wrap}

  .tabs{display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap}
  .tab-btn{padding:7px 14px; border-radius:999px; border:1px solid var(--border); background:var(--surface); font-size:.82rem; font-weight:600; color:var(--ink-muted); cursor:pointer}
  .tab-btn.active{background:var(--ink); color:var(--bg); border-color:var(--ink)}

  .lock-screen{max-width:380px; margin:60px auto; text-align:center}
  .lock-screen .brand-mark{margin:0 auto 16px}

  footer{border-top:1px solid var(--border); padding-block:24px; margin-top:40px}
  footer .container{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.8rem; color:var(--ink-muted)}

  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .form-grid .full{grid-column:1 / -1}
  .success-box{background:var(--good-soft); color:var(--good); border-radius:12px; padding:18px; font-size:.9rem; font-weight:500; display:flex; gap:10px; align-items:flex-start}

  .account-chip{display:flex; align-items:center; gap:7px; padding:5px 6px 5px 5px; border-radius:999px; border:1px solid var(--border); background:var(--surface); text-decoration:none; color:var(--ink); font-size:.82rem; font-weight:600; flex:none}
  .account-chip .avatar{width:24px; height:24px; border-radius:50%; background:var(--accent-soft); color:var(--accent-strong); display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; flex:none}
  .welcome-overlay{position:fixed; inset:0; background:rgba(15,20,18,.6); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:20px; z-index:200}
  .welcome-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); max-width:440px; width:100%; padding:26px; max-height:92vh; overflow-y:auto}
  .role-pick{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:6px 0 2px}
  .role-opt{border:1px solid var(--border); border-radius:12px; padding:14px 10px; text-align:center; cursor:pointer; font-size:.86rem; font-weight:600; color:var(--ink-muted); background:var(--bg)}
  .role-opt .ic{display:block; font-size:1.3rem; margin-bottom:6px}
  .role-opt.selected{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-strong)}
  .skip-link{display:block; text-align:center; margin-top:14px; font-size:.82rem; color:var(--ink-muted); background:none; border:none; cursor:pointer; text-decoration:underline; width:100%}

  @media (max-width:860px){
    .hero{grid-template-columns:1fr}
    .how-grid{grid-template-columns:1fr}
    .trust-grid{grid-template-columns:repeat(2,1fr)}
    .filter-bar{grid-template-columns:1fr 1fr}
    .detail-grid{grid-template-columns:1fr}
    .form-grid{grid-template-columns:1fr}
    .stat-strip{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion:reduce){ *{transition:none !important} }