@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');:root{--bg:#080711;--panel:#12101e;--gold:#e7bd63;--cream:#fff2d0;--text:#f7f0df;--muted:#bdb4c8;--line:rgba(255,238,190,.14);--shadow:0 24px 70px rgba(0,0,0,.42)}*{box-sizing:border-box}body{margin:0;font-family:Vazirmatn,Tahoma,Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 15% 0%,rgba(231,189,99,.12),transparent 35%),radial-gradient(circle at 82% 8%,rgba(67,55,140,.26),transparent 36%),linear-gradient(180deg,#0a0913,#080711 55%,#100d19);min-height:100vh}a{text-decoration:none;color:inherit}button,input{font-family:inherit}.platform-shell{min-height:100vh;display:grid;grid-template-columns:.9fr 1.1fr}.platform-hero{position:relative;display:grid;align-content:center;padding:clamp(28px,5vw,80px);overflow:hidden}.platform-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,7,17,.88),rgba(8,7,17,.48)),url('../assets/hero-1.jpg') center/cover;opacity:.92}.platform-hero>*{position:relative;z-index:1}.logo-line{display:flex;align-items:center;gap:14px;margin-bottom:34px}.logo-line img{width:86px;height:86px;object-fit:contain}.logo-line b{display:block;color:var(--gold);font-size:1.6rem}.logo-line span{color:rgba(255,255,255,.78)}.platform-hero h1{margin:0 0 18px;font-size:clamp(2.7rem,6vw,5rem);line-height:1.12}.platform-hero h1 span{display:block;color:var(--gold)}.platform-hero p{max-width:620px;color:rgba(255,255,255,.84);font-size:1.1rem;line-height:2}.platform-panel{display:grid;place-items:center;padding:clamp(22px,4vw,70px)}.card{width:min(100%,520px);padding:30px;border:1px solid rgba(231,189,99,.22);border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)),rgba(18,16,30,.9);box-shadow:var(--shadow)}.card h2{margin:0 0 10px;font-size:2rem}.card p{margin:0 0 24px;color:var(--muted)}.actions,.form{display:grid;gap:14px}.primary,.secondary,.submit{display:flex;align-items:center;justify-content:center;min-height:54px;padding:12px 24px;border-radius:16px;font-weight:900;cursor:pointer}.primary,.submit{border:0;color:#150f08;background:linear-gradient(135deg,#ffe9a4,var(--gold),#b57933)}.secondary{border:1px solid rgba(231,189,99,.34);color:var(--cream);background:rgba(255,255,255,.045)}label{display:grid;gap:8px;color:rgba(255,255,255,.84);font-weight:800}input{width:100%;min-height:52px;padding:12px 14px;color:var(--text);background:rgba(5,5,10,.58);border:1px solid rgba(255,241,200,.16);border-radius:14px;outline:0}.links{display:flex;justify-content:space-between;gap:14px;margin-top:18px;color:var(--gold);font-weight:800}.note{margin-top:18px;padding:14px;border-radius:16px;background:rgba(231,189,99,.08);border:1px solid rgba(231,189,99,.18);color:var(--muted)}.platform-top{position:fixed;top:18px;left:18px;z-index:10}.back-link{display:inline-flex;padding:10px 16px;border-radius:14px;border:1px solid rgba(231,189,99,.28);background:rgba(0,0,0,.26);color:var(--cream);font-weight:900}@media(max-width:900px){.platform-shell{grid-template-columns:1fr}.platform-hero{min-height:420px}}
.order-layout {
  min-height: 100vh;
  padding: 32px clamp(18px,4vw,72px);
}

.order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 28px;
}

.order-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.order-logo img {
  width: 76px;
  height: 76px;
  object-fit: contain;
}

.order-logo b {
  display: block;
  color: var(--gold);
  font-size: 1.4rem;
}

.order-logo span {
  color: var(--muted);
}

.order-grid {
  display: grid;
  grid-template-columns: 1fr .55fr;
  gap: 22px;
  align-items: start;
}

.order-card,
.summary-card {
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(231,189,99,.24);
  background: linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)), var(--panel);
  box-shadow: var(--shadow);
}

.order-card h1,
.summary-card h2 {
  margin: 0 0 10px;
  color: var(--cream);
}

.order-card p,
.summary-card p {
  margin: 0 0 22px;
  color: var(--muted);
}

.order-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px;
  margin-bottom: 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.28);
}

.order-mode button {
  border: 0;
  border-radius: 999px;
  min-height: 46px;
  cursor: pointer;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}

.order-mode button.active {
  color: #17100a;
  background: linear-gradient(135deg,#fff4c5,var(--gold),#9e642d);
}

.order-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.order-estimate {
  margin: 16px 0;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(231,189,99,.18);
  background: linear-gradient(135deg,rgba(231,189,99,.14),rgba(43,36,97,.22));
}

.order-estimate span {
  color: var(--muted);
}

.order-estimate strong {
  display: block;
  color: var(--cream);
  font-size: 1.6rem;
}

.result-box {
  display: none;
  margin-top: 18px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(231,189,99,.24);
  background: rgba(231,189,99,.08);
  color: var(--cream);
}

.result-box.show {
  display: block;
}

.result-code {
  display: block;
  margin-top: 8px;
  color: var(--gold);
  font-size: 1.6rem;
  font-weight: 900;
  direction: ltr;
  text-align: right;
}

.summary-list {
  display: grid;
  gap: 14px;
}

.summary-item {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
}

.summary-item b {
  color: var(--gold);
}

.summary-item span {
  display: block;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.8;
}

@media(max-width: 900px) {
  .order-header,
  .order-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .order-form-grid {
    grid-template-columns: 1fr;
  }
}

.wrap.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}

.auth-card {
  display: grid;
  gap: 14px;
}

.auth-card .logo {
  width: 86px;
  height: 86px;
  object-fit: contain;
  margin: 0 auto 4px;
}

.auth-card h1 {
  margin: 0;
  text-align: center;
}

.auth-card p {
  margin: 0 0 8px;
  text-align: center;
  color: var(--muted);
  line-height: 1.9;
}

.auth-link {
  color: var(--gold);
  display: block;
  margin-top: 6px;
  text-align: center;
  font-weight: 900;
}

.identity-status {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(231,189,99,.22);
  background: rgba(231,189,99,.08);
  color: var(--cream);
  font-weight: 900;
  text-align: center;
}

.identity-instructions,
.challenge-box {
  padding: 16px;
  border: 1px solid rgba(231,189,99,.20);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}

.identity-instructions strong,
.challenge-box span {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-weight: 900;
}

.identity-instructions ul {
  margin: 0;
  padding: 0 20px 0 0;
  color: var(--muted);
  line-height: 2;
}

.challenge-box strong {
  display: block;
  color: var(--cream);
  font-size: 1.05rem;
  line-height: 2;
}

.camera-box {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(231,189,99,.22);
  border-radius: 18px;
  background: rgba(0,0,0,.22);
}

.camera-box video {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: #05050a;
  object-fit: cover;
}

.camera-stage {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #05050a;
}

.camera-stage video {
  display: block;
}

.face-oval {
  position: absolute;
  top: 11%;
  left: 50%;
  width: 54%;
  height: 72%;
  transform: translateX(-50%);
  border: 4px solid rgba(231,189,99,.92);
  border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(0,0,0,.34), 0 0 26px rgba(231,189,99,.42);
  pointer-events: none;
}

.face-oval::after {
  content: "صورت داخل کادر";
  position: absolute;
  right: 50%;
  bottom: -38px;
  transform: translateX(50%);
  white-space: nowrap;
  color: var(--gold);
  font-weight: 900;
  font-size: .9rem;
}

.camera-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.camera-actions .btn {
  min-height: 48px;
  padding: 10px;
  text-align: center;
}

.camera-actions .btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

button:disabled,
.btn:disabled,
.submit:disabled {
  opacity: .72;
  cursor: not-allowed;
}

.is-loading {
  gap: 10px;
}

.is-loading::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid rgba(21,15,8,.28);
  border-top-color: #150f08;
  animation: spin .75s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#recordStatus {
  color: var(--muted);
  line-height: 1.8;
  text-align: center;
}

.dashboard-card .actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 6px;
}

@media(max-width: 560px) {
  .dashboard-card .actions {
    grid-template-columns: 1fr;
  }

  .camera-actions {
    grid-template-columns: 1fr;
  }
}