/* ============================================================
   TASKO China — Design System
   Industrial / tech aesthetic. Dark base + gold accent.
   Reused across login / app / dashboard.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Teko:wght@500;600;700&display=swap');

:root {
  /* Surfaces */
  --bg: #0a0a0b;
  --bg-2: #0e0e10;
  --panel: #151517;
  --panel-2: #18181b;
  --panel-3: #1e1e22;
  --border: #2a2a2e;
  --border-soft: #232327;

  /* Brand */
  --gold: #f4c400;
  --gold-bright: #ffd646;
  --gold-deep: #c99a00;
  --gold-soft: rgba(244, 196, 0, .14);
  --gold-glow: rgba(244, 196, 0, .35);

  /* Text */
  --text: #f5f2ea;
  --text-dim: #d0c7ae;
  --muted: #8a8678;
  --muted-2: #6a6a72;

  /* Status */
  --danger: #fb6f6f;
  --danger-soft: rgba(251, 111, 111, .12);
  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, .12);
  --info: #60a5fa;

  /* Geometry */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --cut: 14px; /* angular corner cut, echoes the logo badge */

  /* Shadow */
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, .35);
  --shadow-md: 0 18px 50px rgba(0, 0, 0, .45);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .55);

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: .16s;
  --t: .28s;
  --t-slow: .5s;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, system-ui, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Typography ---------- */
.t-display {
  font-family: Teko, Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  line-height: .95;
  color: var(--gold);
  margin: 0;
}
.t-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  font-weight: 800;
  color: var(--gold-deep);
}

/* ---------- Angular cut-corner helper ---------- */
.t-cut {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

/* ---------- Card / panel ---------- */
.t-card {
  position: relative;
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}

/* ---------- Form controls ---------- */
.t-label {
  display: block;
  font-size: 11px;
  color: var(--gold-deep);
  margin: 0 0 7px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1px;
}
.t-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: #0c0c0d;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.t-input::placeholder { color: var(--muted-2); }
.t-input:focus {
  outline: none;
  border-color: var(--gold);
  background: #0e0e0f;
  box-shadow: 0 0 0 3px var(--gold-soft);
}

/* ---------- Button ---------- */
.t-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--gold-bright);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #161200;
  font: inherit;
  font-weight: 900;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .9px;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t), filter var(--t);
  box-shadow: 0 10px 26px -10px var(--gold-glow);
}
.t-btn::after { /* sheen sweep on hover */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .6s var(--ease);
}
.t-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px var(--gold-glow); filter: brightness(1.04); }
.t-btn:hover::after { transform: translateX(130%); }
.t-btn:active { transform: translateY(0) scale(.99); }
.t-btn[disabled] { opacity: .65; cursor: progress; transform: none; }
.t-btn.is-ghost {
  background: transparent; color: var(--text);
  border-color: var(--border); box-shadow: none;
}
.t-btn.is-ghost:hover { border-color: var(--gold); color: var(--gold); }

/* spinner */
.t-spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(22,18,0,.35); border-top-color: #161200;
  animation: t-rotate .7s linear infinite; display: none;
}
.t-btn.is-loading .t-spin { display: inline-block; }
@keyframes t-rotate { to { transform: rotate(360deg); } }

/* ---------- Status text ---------- */
.t-error {
  font-size: 13.5px; color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid rgba(251,111,111,.25);
  border-radius: var(--r-sm);
  padding: 10px 12px; margin-top: 14px;
  display: none;
}
.t-error.show { display: block; animation: t-shake .4s var(--ease-in-out); }
@keyframes t-shake {
  10%,90% { transform: translateX(-1px); }
  20%,80% { transform: translateX(2px); }
  30%,50%,70% { transform: translateX(-4px); }
  40%,60% { transform: translateX(4px); }
}

/* ---------- Animated industrial background ---------- */
.t-bg {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  background: radial-gradient(1200px 700px at 12% -5%, #2a2412 0%, #131310 38%, #08080a 100%);
}
.t-bg::before { /* drifting gold aurora */
  content: ""; position: absolute;
  width: 60vmax; height: 60vmax; left: -10vmax; top: -18vmax;
  background: radial-gradient(circle, var(--gold-glow) 0%, transparent 62%);
  filter: blur(30px); opacity: .5;
  animation: t-drift 16s var(--ease-in-out) infinite alternate;
}
.t-bg::after { /* subtle grid */
  content: ""; position: absolute; inset: 0; opacity: .05;
  background-image:
    linear-gradient(var(--gold) 1px, transparent 1px),
    linear-gradient(90deg, var(--gold) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
}
@keyframes t-drift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(22vw, 16vh) scale(1.25); }
}

/* ---------- Entrance animations ---------- */
@keyframes t-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes t-fade { from { opacity: 0; } to { opacity: 1; } }
.t-rise { animation: t-rise var(--t-slow) var(--ease) both; }
.t-stagger > * { animation: t-rise .5s var(--ease) both; }
.t-stagger > *:nth-child(1) { animation-delay: .05s; }
.t-stagger > *:nth-child(2) { animation-delay: .12s; }
.t-stagger > *:nth-child(3) { animation-delay: .19s; }
.t-stagger > *:nth-child(4) { animation-delay: .26s; }
.t-stagger > *:nth-child(5) { animation-delay: .33s; }
.t-stagger > *:nth-child(6) { animation-delay: .40s; }
.t-stagger > *:nth-child(7) { animation-delay: .47s; }

/* ---------- Modal (portal) ---------- */
.t-modal-backdrop {
  position: fixed; inset: 0; z-index: 10050; display: none;
  align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow: auto;
  background: rgba(8, 8, 10, .985);
}
.t-modal-backdrop.show { display: flex; animation: t-fade .2s ease; }
.t-modal {
  width: min(1000px, 96vw); margin: auto;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); animation: t-rise .3s var(--ease) both;
}
.t-modal-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 22px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel), rgba(21,21,23,.97));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.t-modal-title { font-family: Teko, sans-serif; font-size: 26px; line-height: 1;
  text-transform: uppercase; letter-spacing: .6px; color: var(--gold); }
.t-modal-close {
  flex: none; width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: #1a1a1a; color: var(--text);
  font-size: 16px; transition: border-color .15s, color .15s, transform .12s;
}
.t-modal-close:hover { border-color: var(--danger); color: var(--danger); }
.t-modal-close:active { transform: scale(.94); }
.t-modal-body { padding: 22px; }
body.t-modal-open { overflow: hidden; }

/* ---------- Payment receipt thumbnails ---------- */
.receipt-thumb { display: block; margin-bottom: 8px; }
.receipt-thumb img {
  width: 100%; max-width: 340px; max-height: 260px; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--border); background: #0c0c0d;
  cursor: zoom-in; transition: border-color .15s, transform .15s;
}
.receipt-thumb img:hover { border-color: var(--gold); transform: translateY(-1px); }
.receipt-missing {
  font-size: 12.5px; color: var(--danger); background: var(--danger-soft);
  border: 1px solid rgba(251,111,111,.25); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px; max-width: 340px;
}

/* ---------- Planned payments list inside an order ---------- */
.plan-row {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: #121212; margin-bottom: 6px; font-size: 13px; flex-wrap: wrap;
}
.plan-row .plan-dt { color: var(--text-dim); min-width: 64px; }
.plan-row .plan-amt { font-weight: 700; color: var(--text); }
.plan-row .plan-pct { color: var(--gold-deep); font-weight: 800; }
.plan-badge { font-size: 10.5px; font-weight: 800; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.plan-badge.paid { color: #7ee2a3; background: rgba(74,222,128,.14); }
.plan-badge.planned { color: #f6dc7f; background: rgba(244,196,0,.14); }
.plan-badge.overdue { color: #ff9d9d; background: rgba(251,111,111,.16); }
.plan-badge.canceled { color: #bbb; background: #2a2a2a; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}