/* Apple-like system look, matches your existing style.css */

:root{
  --bg:#f5f5f7;
  --ink:#1d1d1f;
  --muted:#6e6e73;
  --card:#fff;
  --edge:rgba(0,0,0,.08);
  --graphite1:#3a3a3c; --graphite2:#1d1d1f;
  --ghost:#e9e9eb; --ghost2:#d1d1d6;
  --ok:#34c759; --warn:#ff9f0a; --bad:#ff3b30; --blue:#0a84ff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
}

/* Auth wrappers */
.auth-wrap{
  min-height:100dvh; display:grid; place-items:center; padding:40px 16px;
}
.auth-card{
  width:min(460px, 94vw);
  background:var(--card);
  border-radius:20px;
  box-shadow:0 4px 12px var(--edge);
  padding:28px 24px;
}
h1{font-size:1.5rem; margin:0 0 6px}
h2{margin:0 0 6px}
h3{margin:0 0 10px}
.sub{color:var(--muted); margin:0 0 16px}

.field{margin:12px 0}
.field label{display:block; font-size:.9rem; margin:0 0 6px; color:#000}
.field input,.field select{
  width:100%; padding:12px 12px; border-radius:12px; border:1px solid #d2d2d7;
  background:#fff; outline:none; transition:.2s; font-size:.95rem;
}
.field input:focus,.field select:focus{border-color:#b1b1b6; box-shadow:0 0 0 4px rgba(0,0,0,.04)}

.btn{
  padding:12px 22px; border:none; border-radius:12px; cursor:pointer;
  font-weight:600; letter-spacing:-.01em; transition:.25s;
}
.btn.primary{
  color:#fff; background:linear-gradient(180deg,var(--graphite1),var(--graphite2));
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:var(--ghost); color:var(--ink)}
.btn.ghost:hover{background:var(--ghost2)}

.alt{margin-top:12px; color:var(--muted); font-size:.95rem}
.alt a{color:var(--ink); font-weight:600}

.alert{
  background:#fffbea; border-left:4px solid var(--warn);
  color:#5f5f62; padding:10px 12px; border-radius:10px; margin:10px 0 16px;
}

/* Password meter (meshed bar) */
.pw-meter{margin-top:8px; position:relative; height:12px; background:#f2f2f2; border-radius:10px; overflow:hidden}
.pw-meter .pw-bar{
  height:100%; width:6%; border-radius:10px;
  background:conic-gradient(from 180deg at 50% 50%, #ff3b30, #ff9f0a, #ff3b30);
  transition:width .25s ease, background .25s ease;
}
.pw-meter .pw-label{
  position:absolute; right:8px; top:-22px; font-size:.8rem; color:var(--muted);
}
.pw-rules{display:flex; gap:10px; flex-wrap:wrap; padding:8px 0 0; margin:0; list-style:none}
.rule{font-size:.82rem; color:#8e8e93; background:#f2f2f2; padding:4px 8px; border-radius:10px}
.rule.ok{color:#0f5132; background:#eaf7ef}

/* Confirm match hint */
.match-note{font-size:.8rem; color:#8e8e93; margin-top:6px}
.match-note.ok{color:#0f5132}

/* Dashboard */
.dash-wrap{max-width:1100px; margin:0 auto; padding:28px 16px}
.dash-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px}
.brand{font-weight:800; letter-spacing:-.015em}
.dash-main .card{
  background:var(--card); border-radius:20px; box-shadow:0 4px 12px var(--edge);
  padding:20px; margin-bottom:16px;
}
.grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:8px}
.stat{background:#f7f7f8; border-radius:12px; padding:12px}
.stat-k{font-size:.8rem; color:var(--muted)}
.stat-v{font-weight:700}

/* Table */
.table{width:100%; display:grid; gap:6px}
.tr{display:grid; grid-template-columns:80px 1fr 1.1fr 120px 120px 140px 120px; align-items:center; gap:8px; background:#fafafa; padding:10px 12px; border-radius:12px}
.tr.th{background:#f2f2f2; font-weight:700}
.empty{color:var(--muted)}
.b{padding:4px 8px; border-radius:999px; font-size:.8rem; font-weight:700}
.badge-pend{background:#fff3cd; color:#9c6500}
.badge-proc{background:#dbeafe; color:#1e40af}
.badge-done{background:#dcfce7; color:#166534}
.badge-fail{background:#fee2e2; color:#991b1b}

@media (max-width:900px){
  .tr{grid-template-columns:60px 1fr 1fr 90px 110px 120px 120px}
  .grid{grid-template-columns:1fr}
}
/* Order status badges */
.Pending { background:#fff3cd; color:#9c6500; }
.Processing { background:#dbeafe; color:#1e40af; }
.Completed { background:#dcfce7; color:#166534; }
.Failed { background:#fee2e2; color:#991b1b; }

/* Password meter (profile page) */
.pw-meter{margin-top:6px;height:10px;background:#f2f2f2;border-radius:8px;overflow:hidden}
.pw-bar{height:100%;width:0%;background:#ff3b30;border-radius:8px;transition:.3s}