@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');

:root {
  --navy: #0b142b;
  --navy-2: #111f3b;
  --navy-3: #1b2d50;
  --ink: #142039;
  --muted: #75829a;
  --line: #e5eaf2;
  --surface: #ffffff;
  --canvas: #f4f7fb;
  --teal: #14b8a6;
  --teal-dark: #0d8f83;
  --aqua: #dff8f3;
  --blue: #3e78ff;
  --purple: #7657e8;
  --amber: #f6a63b;
  --red: #e65e69;
  --green: #22a06b;
  --shadow: 0 18px 55px rgba(21, 37, 68, .08);
  --shadow-sm: 0 8px 24px rgba(21, 37, 68, .07);
  --radius: 20px;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body {
  margin: 0;
  font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-size: 15px;
  line-height: 1.7;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 25px; height: 25px; }

.app-shell { display: flex; min-height: 100vh; direction: rtl; }
.sidebar {
  width: 270px;
  flex: 0 0 270px;
  min-height: 100vh;
  position: sticky;
  top: 0;
  align-self: flex-start;
  background: linear-gradient(165deg, var(--navy) 0%, #101d39 60%, #172a4b 100%);
  color: #f8fbff;
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow: hidden;
}
.sidebar::before {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: rgba(20, 184, 166, .1);
  top: -100px;
  left: -80px;
}
.brand { position: relative; display: flex; align-items: center; gap: 11px; padding: 2px 8px 14px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center;
  color: white; font-size: 21px; font-weight: 800;
  background: linear-gradient(135deg, #1ed1bb, #347df6);
  box-shadow: 0 10px 24px rgba(20, 184, 166, .28);
}
.brand-title { font-weight: 800; font-size: 17px; line-height: 1.35; letter-spacing: -.2px; }
.brand-sub { color: #8c9ab5; font-size: 11px; margin-top: 2px; }
.demo-pill { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #bff6ed; padding: 6px 10px; border-radius: 999px; font-size: 11px; white-space: nowrap; }
.role-block { position: relative; padding: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); border-radius: 16px; }
.role-label { color: #8d9ab1; font-size: 11px; margin-bottom: 7px; }
.role-switcher { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.role-switcher button { border: 0; color: #afbad0; background: transparent; padding: 7px 3px; border-radius: 9px; font-size: 11px; transition: .2s ease; }
.role-switcher button:hover { background: rgba(255,255,255,.08); color: white; }
.role-switcher button.active { color: var(--navy); background: #bff6ed; font-weight: 800; }
.sidebar-nav { position: relative; display: flex; flex-direction: column; gap: 4px; }
.nav-caption { color: #657593; font-size: 11px; padding: 0 11px 5px; }
.nav-item { border: 0; width: 100%; display: flex; align-items: center; gap: 11px; color: #acb8cc; background: transparent; border-radius: 12px; padding: 10px 12px; text-align: right; font-size: 13px; transition: .2s ease; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-item.active { color: #fff; background: linear-gradient(90deg, rgba(20,184,166,.25), rgba(20,184,166,.06)); box-shadow: inset -3px 0 0 var(--teal); }
.nav-item .nav-badge { margin-right: auto; background: rgba(231, 94, 105, .95); color: white; font-size: 10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; }
.sidebar-footer { position: relative; margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); padding: 15px 8px 0; }
.mini-user { display: flex; align-items: center; gap: 9px; }
.avatar { width: 36px; height: 36px; border-radius: 13px; display: grid; place-items: center; font-weight: 800; background: #d8f5ef; color: #0c776f; }
.avatar.purple { background: #ece7ff; color: #6048c7; }
.avatar.amber { background: #fff0d5; color: #9b5d00; }
.mini-user-name { font-size: 12px; font-weight: 700; }
.mini-user-role { color: #8190a9; font-size: 11px; }
.logout-btn { margin-right: auto; border: 0; padding: 6px; color: #8c9ab5; background: transparent; }

.main { min-width: 0; flex: 1; padding: 0 36px 44px; }
.topbar { min-height: 86px; display: flex; align-items: center; gap: 16px; justify-content: space-between; border-bottom: 1px solid var(--line); }
.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.eyebrow { color: var(--muted); font-size: 12px; margin-bottom: 2px; }
.page-title { font-size: 23px; font-weight: 800; letter-spacing: -.5px; margin: 0; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); background: white; border-radius: 13px; color: #5a6780; position: relative; box-shadow: 0 3px 9px rgba(20, 38, 70, .03); }
.icon-btn:hover { color: var(--teal-dark); border-color: #b6e9e1; background: #f4fffd; }
.unread-dot { position: absolute; top: 8px; left: 8px; width: 7px; height: 7px; border-radius: 99px; background: var(--red); border: 2px solid white; }
.account-chip { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: white; border-radius: 14px; padding: 5px 9px 5px 7px; }
.account-chip .avatar { width: 30px; height: 30px; border-radius: 10px; font-size: 12px; }
.account-name { font-size: 12px; font-weight: 700; line-height: 1.3; }
.account-role { color: var(--muted); font-size: 10px; }
.view-content { padding-top: 28px; max-width: 1440px; margin: 0 auto; }
.mobile-menu { display: none !important; }
.mobile-bottom-nav { display: none; }

.hero-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.5fr 1fr; min-height: 245px; padding: 31px 34px; border-radius: 26px; color: white; background: linear-gradient(115deg, #10244a 2%, #1a3e61 58%, #0d927f 150%); box-shadow: 0 22px 45px rgba(12, 45, 78, .2); }
.hero-card::after { content: ""; position: absolute; width: 410px; height: 410px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; left: -120px; bottom: -260px; box-shadow: 0 0 0 28px rgba(255,255,255,.025), 0 0 0 57px rgba(255,255,255,.02), 0 0 0 85px rgba(255,255,255,.015); }
.hero-card::before { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: rgba(20, 184, 166, .2); left: 16%; top: -185px; filter: blur(2px); }
.hero-copy, .hero-art { position: relative; z-index: 1; }
.hero-kicker { color: #a7f1e7; font-size: 12px; font-weight: 700; display: flex; gap: 7px; align-items: center; }
.hero-kicker span { width: 7px; height: 7px; border-radius: 99px; background: #72e7d4; box-shadow: 0 0 0 5px rgba(114, 231, 212, .12); }
.hero-title { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.45; max-width: 570px; margin: 12px 0 9px; letter-spacing: -.7px; }
.hero-text { color: #c5d3e8; max-width: 520px; margin: 0 0 20px; font-size: 13px; }
.hero-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.hero-art { display: flex; align-items: center; justify-content: center; }
.orbit { width: 205px; height: 205px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; position: relative; transform: rotate(-12deg); }
.orbit::before, .orbit::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; inset: 22px; }
.orbit::after { inset: 45px; border-color: rgba(114, 231, 212, .25); }
.orbit-core { position: absolute; inset: 72px; display: grid; place-items: center; border-radius: 50%; color: #0e3a4a; background: #d6fff7; box-shadow: 0 0 45px rgba(186,255,242,.45); transform: rotate(12deg); }
.orbit-bubble { position: absolute; display: grid; place-items: center; border-radius: 14px; color: white; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(7px); }
.orbit-bubble.one { width: 42px; height: 42px; top: 10px; right: 16px; }
.orbit-bubble.two { width: 34px; height: 34px; bottom: 12px; left: 16px; }
.orbit-bubble.three { width: 28px; height: 28px; top: 84px; left: -13px; }

.section-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 28px 0 14px; }
.section-head h2 { font-size: 18px; line-height: 1.3; margin: 0; letter-spacing: -.25px; }
.section-head p { color: var(--muted); margin: 4px 0 0; font-size: 12px; }
.link-btn { border: 0; background: transparent; color: var(--teal-dark); font-size: 12px; font-weight: 700; padding: 3px; }
.link-btn:hover { color: var(--blue); }
.category-grid { display: grid; grid-template-columns: repeat(7, minmax(80px, 1fr)); gap: 10px; }
.category-card { border: 1px solid var(--line); background: white; border-radius: 16px; padding: 14px 8px 12px; text-align: center; transition: .2s ease; min-width: 0; }
.category-card:hover { border-color: #aee6df; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.category-icon { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; margin: 0 auto 8px; font-size: 19px; }
.cat-1 { color: #2371c7; background: #e6f1ff; }.cat-2 { color: #cf7742; background: #fff0e7; }.cat-3 { color: #8a63d5; background: #f0ebff; }.cat-4 { color: #148d7d; background: #e3fbf5; }.cat-5 { color: #c27b18; background: #fff5dc; }.cat-6 { color: #db5b75; background: #ffebf1; }.cat-7 { color: #4d6b8e; background: #e9f1f7; }
.category-card b { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.category-card span { display: block; color: var(--muted); font-size: 10px; margin-top: 1px; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.service-card { border: 1px solid var(--line); background: white; border-radius: 19px; padding: 17px; box-shadow: 0 2px 5px rgba(18, 33, 60, .02); transition: .22s ease; }
.service-card:hover { box-shadow: var(--shadow-sm); border-color: #b9e9e3; transform: translateY(-2px); }
.service-top { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.service-icon { width: 44px; height: 44px; display: grid; place-items: center; background: #e7fbf7; color: var(--teal-dark); border-radius: 15px; font-size: 22px; }
.service-icon.blue { color: var(--blue); background: #eaf1ff; }.service-icon.purple { color: var(--purple); background: #f0ecff; }.service-icon.orange { color: #cc7c1a; background: #fff3df; }
.service-card h3 { font-size: 15px; margin: 12px 0 4px; }
.service-card p { color: var(--muted); font-size: 12px; line-height: 1.8; min-height: 43px; margin: 0; }
.service-meta { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; margin: 12px 0 14px; }
.service-meta span { display: inline-flex; align-items: center; gap: 4px; }
.service-bottom { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #eef1f5; padding-top: 13px; }
.price-label { color: var(--muted); font-size: 10px; }.price { font-size: 14px; font-weight: 800; color: var(--ink); }
.primary-btn, .secondary-btn, .danger-btn, .ghost-btn { border-radius: 11px; padding: 9px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; font-size: 12px; font-weight: 700; transition: .2s ease; }
.primary-btn { color: white; background: linear-gradient(135deg, #10ae9b, #138f83); box-shadow: 0 8px 18px rgba(20,184,166,.18); }.primary-btn:hover { transform: translateY(-1px); box-shadow: 0 11px 22px rgba(20,184,166,.25); }
.secondary-btn { color: var(--ink); background: #f5f7fb; border-color: var(--line); }.secondary-btn:hover { background: #edf2f8; }
.ghost-btn { color: var(--teal-dark); background: transparent; border-color: #bce8e1; }.ghost-btn:hover { background: #ecfbf8; }
.danger-btn { color: #b43d4b; background: #fff0f1; border-color: #ffd2d6; }.danger-btn:hover { background: #ffe4e7; }
.wide { width: 100%; }
.disabled { opacity: .55; pointer-events: none; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat-card { border: 1px solid var(--line); background: white; border-radius: 17px; padding: 17px 18px; position: relative; overflow: hidden; }
.stat-card::after { content: ""; position: absolute; width: 72px; height: 72px; border-radius: 50%; left: -33px; bottom: -35px; background: rgba(20,184,166,.07); }
.stat-icon { width: 35px; height: 35px; border-radius: 12px; display: grid; place-items: center; color: var(--teal-dark); background: #e5f9f5; margin-bottom: 11px; }.stat-icon.blue { color: var(--blue); background: #e9f0ff; }.stat-icon.purple { color: var(--purple); background: #f0ecff; }.stat-icon.amber { color: #bd7414; background: #fff3dc; }
.stat-label { color: var(--muted); font-size: 11px; }.stat-value { font-size: 22px; font-weight: 800; line-height: 1.4; margin: 2px 0 2px; }.stat-note { font-size: 10px; color: var(--green); }.stat-note.neutral { color: var(--muted); }
.split-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; }
.panel { border: 1px solid var(--line); background: white; border-radius: 19px; padding: 19px; }
.panel-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; margin-bottom: 17px; }.panel-head h3 { font-size: 15px; margin: 0; }.panel-head p { color: var(--muted); font-size: 11px; margin: 3px 0 0; }
.chart { height: 190px; display: flex; align-items: end; gap: 12px; padding: 16px 4px 0; direction: ltr; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: end; gap: 7px; }.chart-bar { width: min(34px, 80%); min-height: 8px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #21c8b4, #119a8d); position: relative; }.chart-bar.alt { background: linear-gradient(180deg, #6b8dff, #4767d8); }.chart-bar::after { content: attr(data-value); position: absolute; top: -22px; right: 50%; transform: translateX(50%); color: var(--muted); font-size: 9px; }.chart-label { color: var(--muted); font-size: 10px; }
.activity-list { display: flex; flex-direction: column; gap: 12px; }.activity-item { display: flex; align-items: center; gap: 10px; }.activity-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 5px #e5faf6; flex: 0 0 auto; }.activity-dot.blue { background: var(--blue); box-shadow: 0 0 0 5px #edf2ff; }.activity-dot.orange { background: var(--amber); box-shadow: 0 0 0 5px #fff5e3; }.activity-copy { min-width: 0; flex: 1; }.activity-copy b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.activity-copy span { color: var(--muted); font-size: 10px; }.activity-time { color: var(--muted); font-size: 10px; white-space: nowrap; }

.searchbar { position: relative; flex: 1; max-width: 390px; }.searchbar input { width: 100%; height: 42px; border: 1px solid var(--line); border-radius: 13px; background: white; padding: 0 39px 0 13px; outline: 0; color: var(--ink); }.searchbar input:focus { border-color: #9adcd4; box-shadow: 0 0 0 3px #e5faf6; }.searchbar .icon { position: absolute; right: 12px; top: 11px; color: var(--muted); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }.toolbar-actions { display: flex; align-items: center; gap: 8px; }
.filter-tabs { display: flex; gap: 6px; overflow: auto; padding-bottom: 3px; }.filter-tab { white-space: nowrap; border: 1px solid var(--line); background: white; color: var(--muted); border-radius: 999px; padding: 6px 11px; font-size: 11px; }.filter-tab.active { color: var(--teal-dark); border-color: #a9e2da; background: #eafbf8; font-weight: 700; }

.detail-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 18px; }.detail-hero { padding: 23px; border-radius: 20px; color: white; background: linear-gradient(120deg, #142a50, #1a5170); position: relative; overflow: hidden; }.detail-hero::after { content:""; position:absolute; width:260px; height:260px; border:1px solid rgba(255,255,255,.15); border-radius:50%; left:-90px; bottom:-160px; box-shadow: 0 0 0 25px rgba(255,255,255,.03), 0 0 0 50px rgba(255,255,255,.025); }.detail-hero > * { position: relative; z-index:1; }.detail-hero .service-icon { margin-bottom: 18px; background: rgba(255,255,255,.13); color: white; }.detail-hero h2 { font-size: 25px; margin: 0 0 8px; }.detail-hero p { color: #cbd7e8; font-size: 13px; max-width: 650px; margin: 0; }.detail-facts { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 21px; }.fact-pill { border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); border-radius: 10px; color: #d6e2f2; padding: 7px 10px; font-size: 11px; }
.info-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }.info-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; }.info-list li .check { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--teal-dark); background: var(--aqua); flex: 0 0 auto; font-size: 12px; }.info-list li span { color: var(--muted); }
.price-card { border: 1px solid #c8ece6; background: linear-gradient(180deg, #f0fffc, #ffffff); border-radius: 19px; padding: 19px; }.price-card h3 { font-size: 14px; margin: 0 0 12px; }.price-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #dbece9; color: var(--muted); font-size: 12px; }.price-row:last-of-type { border-bottom: 0; }.price-row b { color: var(--ink); }.price-total { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; margin-top: 5px; border-top: 1px solid #cce8e3; }.price-total span { color: var(--ink); font-size: 12px; font-weight: 700; }.price-total strong { color: var(--teal-dark); font-size: 20px; }

.stepper { display: flex; gap: 0; margin: 0 0 18px; }.step { flex: 1; text-align: center; position: relative; color: #a5afc0; font-size: 10px; }.step::before { content:""; display:block; width: 23px; height: 23px; border-radius:50%; margin: 0 auto 6px; background: #edf1f5; color: #8f9db0; line-height: 23px; font-weight: 800; }.step:not(:last-child)::after { content:""; position:absolute; top:11px; right: calc(50% + 15px); left: calc(-50% + 15px); height: 2px; background:#edf1f5; }.step.done, .step.active { color: var(--teal-dark); font-weight: 700; }.step.done::before, .step.active::before { background: var(--teal); color: white; }.step.active::before { content:"•"; font-size: 18px; }.step.done::before { content:"✓"; }.step.done:not(:last-child)::after { background: var(--teal); }
.form-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr); gap: 18px; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.form-field { display: flex; flex-direction: column; gap: 6px; }.form-field.full { grid-column: 1 / -1; }.form-field label { font-size: 12px; font-weight: 700; }.form-field label span { color: var(--red); }.field-help { color: var(--muted); font-size: 10px; }.input, .select, .textarea { width: 100%; border: 1px solid var(--line); background: #fbfcfe; border-radius: 11px; padding: 10px 12px; color: var(--ink); outline: 0; }.input:focus, .select:focus, .textarea:focus { border-color: #9bded6; background: white; box-shadow: 0 0 0 3px #e8fbf8; }.textarea { resize: vertical; min-height: 92px; }.error-text { color: var(--red); font-size: 10px; }.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }.choice { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); padding: 8px 10px; border-radius: 10px; background: #fbfcfe; font-size: 11px; }.choice input { accent-color: var(--teal); }.upload-box { border: 1.5px dashed #b9deda; border-radius: 13px; padding: 14px; background: #f5fffd; color: var(--teal-dark); display: flex; align-items: center; gap: 10px; font-size: 11px; }.upload-box input { display: none; }.upload-box .upload-copy { color: var(--muted); margin-right: auto; font-size: 10px; }.uploaded { border-color: #9ddfd5; background: #e9fbf7; }.form-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }

.order-list { display: grid; gap: 12px; }.order-card { border: 1px solid var(--line); background: white; border-radius: 17px; padding: 15px 17px; display: flex; align-items: center; gap: 14px; }.order-card:hover { border-color: #bfe8e1; box-shadow: var(--shadow-sm); }.order-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: #eafbf8; color: var(--teal-dark); font-size: 20px; flex: 0 0 auto; }.order-main { min-width: 0; flex: 1; }.order-main h3 { margin: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.order-main p { color: var(--muted); margin: 3px 0 0; font-size: 10px; }.order-side { display: flex; align-items: center; gap: 12px; }.order-price { font-size: 12px; font-weight: 800; white-space: nowrap; }.status-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; white-space: nowrap; font-size: 10px; font-weight: 700; }.status-chip::before { content:""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }.status-paid { color: #2876ce; background: #eaf2ff; }.status-review { color: #bb741b; background: #fff4df; }.status-assigned { color: #6955c7; background: #efebff; }.status-progress { color: #137f74; background: #e4faf5; }.status-waiting { color: #a46616; background: #fff2d9; }.status-complete { color: #178251; background: #e4f9ee; }.status-cancel { color: #bd5360; background: #ffebee; }
.timeline { position: relative; display: grid; gap: 0; padding-right: 7px; }.timeline::before { content:""; position:absolute; top: 13px; bottom: 13px; right: 14px; width: 2px; background: #dfe7ef; }.timeline-item { position: relative; display: grid; grid-template-columns: 31px 1fr; gap: 10px; padding-bottom: 21px; }.timeline-dot { width: 16px; height: 16px; border-radius: 50%; background: #dfe7ef; border: 4px solid white; box-shadow: 0 0 0 1px #dfe7ef; margin-top: 5px; z-index: 1; }.timeline-item.done .timeline-dot { background: var(--teal); box-shadow: 0 0 0 1px var(--teal); }.timeline-item h4 { margin: 0; font-size: 12px; }.timeline-item p { color: var(--muted); font-size: 10px; margin: 2px 0 0; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: white; }.data-table { width: 100%; border-collapse: collapse; min-width: 620px; }.data-table th { color: var(--muted); font-size: 10px; font-weight: 600; background: #fbfcfe; text-align: right; padding: 12px 14px; white-space: nowrap; }.data-table td { border-top: 1px solid #eff2f6; padding: 13px 14px; font-size: 11px; vertical-align: middle; }.data-table tr:hover td { background: #fbfffe; }.table-primary { font-weight: 700; font-size: 12px; }.table-secondary { color: var(--muted); font-size: 10px; }.table-actions { display: flex; align-items: center; gap: 6px; }
.small-btn { border: 1px solid var(--line); background: white; color: var(--muted); border-radius: 8px; padding: 5px 8px; font-size: 10px; }.small-btn:hover { color: var(--teal-dark); border-color: #a9e2da; }.small-btn.primary { color: var(--teal-dark); background: #ecfbf8; border-color: #bee8e1; }

.builder-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 18px; }.builder-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }.builder-form .full { grid-column: 1 / -1; }.builder-form label { color: var(--muted); display: block; font-size: 10px; margin-bottom: 5px; }.builder-form .input, .builder-form .select { padding: 9px 10px; font-size: 12px; }.toggle-row { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 11px; padding: 8px 10px; background: #fbfcfe; }.switch { position: relative; width: 34px; height: 19px; display: inline-block; }.switch input { opacity: 0; width: 0; height: 0; }.slider { position: absolute; inset: 0; border-radius: 999px; background: #d7dee8; transition: .2s; }.slider::before { content:""; position:absolute; width: 15px; height:15px; top:2px; right:2px; border-radius:50%; background:white; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.16); }.switch input:checked + .slider { background: var(--teal); }.switch input:checked + .slider::before { transform: translateX(-15px); }
.builder-fields { display: grid; gap: 10px; }.builder-field { border: 1px solid var(--line); border-radius: 15px; padding: 13px; background: #fbfcfe; }.builder-field-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }.builder-field-title { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; }.field-index { width:23px; height:23px; border-radius:8px; display:grid; place-items:center; color:var(--teal-dark); background:var(--aqua); font-size:10px; }.builder-field-actions { display:flex; gap:4px; }.builder-field-actions button { border:0; background:transparent; color:var(--muted); padding:4px; }.builder-field-actions button:hover { color:var(--teal-dark); }.builder-field-grid { display:grid; grid-template-columns: 1.2fr .8fr; gap: 9px; }.builder-field-grid .input, .builder-field-grid .select { padding: 8px 9px; font-size: 11px; }.inline-check { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:10px; margin-top:8px; }.inline-check input { accent-color: var(--teal); }.builder-preview { background: linear-gradient(145deg, #0d1931, #172d50); color:white; border-radius:19px; padding: 20px; min-height: 440px; }.builder-preview h3 { margin:0; font-size:15px; }.builder-preview > p { color:#9eacc4; font-size:11px; margin:5px 0 16px; }.preview-phone { background:#f6fafc; border-radius:22px; color:var(--ink); padding:16px; max-width:340px; margin:0 auto; box-shadow:0 16px 35px rgba(0,0,0,.18); }.preview-phone-top { display:flex; justify-content:space-between; align-items:center; font-size:10px; margin-bottom:14px; }.preview-phone h4 { margin:0 0 9px; font-size:14px; }.preview-input { height:28px; border:1px solid #e1e7ef; border-radius:7px; background:white; margin:6px 0; color:#b3bdca; padding:5px 8px; font-size:9px; }.preview-upload { height:47px; display:grid; place-items:center; border:1px dashed #a9dcd6; border-radius:9px; color:#53968e; margin:7px 0; font-size:9px; background:#f3fffd; }

.operator-banner { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:17px 19px; border-radius:18px; background:linear-gradient(105deg, #1f2f5a, #374981); color:white; margin-bottom:17px; }.operator-banner h2 { font-size:16px; margin:0; }.operator-banner p { color:#c1cbe0; font-size:11px; margin:3px 0 0; }.operator-banner .avatar { background:#e6e1ff; color:#5f4ec2; }
.queue-card { border:1px solid var(--line); border-radius:16px; background:white; padding:14px; display:flex; gap:12px; align-items:center; }.queue-card + .queue-card { margin-top:9px; }.queue-card .queue-copy { flex:1; min-width:0; }.queue-card h4 { margin:0; font-size:12px; }.queue-card p { color:var(--muted); margin:2px 0 0; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.queue-action { display:flex; gap:6px; }
.money-box { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.money-item { background:#fbfcfe; border:1px solid var(--line); border-radius:14px; padding:13px; }.money-item span { display:block; color:var(--muted); font-size:10px; }.money-item b { display:block; margin-top:3px; font-size:16px; }.money-item.accent { background:#eafbf8; border-color:#c3ece5; }.money-item.accent b { color:var(--teal-dark); }
.doc-list { display:grid; gap:8px; }.doc-item { display:flex; align-items:center; gap:9px; padding:10px; border:1px solid var(--line); border-radius:11px; background:#fbfcfe; }.doc-item .doc-icon { width:28px; height:28px; border-radius:9px; background:#e9f1ff; color:var(--blue); display:grid; place-items:center; }.doc-item b { display:block; font-size:11px; }.doc-item span { display:block; color:var(--muted); font-size:9px; }.doc-item button { margin-right:auto; }

.notification-list { display:grid; gap:9px; }.notification { display:flex; gap:10px; border:1px solid var(--line); background:white; border-radius:15px; padding:13px; }.notification.unread { border-color:#c1ebe5; background:#f4fffd; }.notification-icon { width:32px; height:32px; border-radius:11px; display:grid; place-items:center; color:var(--teal-dark); background:#e5faf6; flex:0 0 auto; }.notification h4 { margin:0; font-size:12px; }.notification p { color:var(--muted); font-size:10px; margin:2px 0 0; }.notification time { color:#a1adbd; font-size:9px; }
.support-grid { display:grid; grid-template-columns: .8fr 1.2fr; gap:18px; }.support-card { border:1px solid var(--line); background:white; border-radius:18px; padding:17px; }.support-option { display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid #edf0f4; }.support-option:last-child { border-bottom:0; }.support-option .support-icon { width:32px; height:32px; border-radius:11px; background:#edf3ff; color:#5074d8; display:grid; place-items:center; }.support-option b { display:block; font-size:12px; }.support-option span { display:block; color:var(--muted); font-size:10px; }.chat { display:flex; flex-direction:column; height:345px; }.chat-head { display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding-bottom:12px; }.chat-messages { flex:1; overflow:auto; padding:15px 0; display:flex; flex-direction:column; gap:8px; }.bubble { max-width:75%; border-radius:13px; padding:8px 11px; font-size:11px; }.bubble.them { align-self:flex-start; background:#f0f3f8; }.bubble.me { align-self:flex-end; color:white; background:var(--teal-dark); }.chat-input { display:flex; gap:7px; }.chat-input input { min-width:0; flex:1; border:1px solid var(--line); border-radius:10px; padding:8px 10px; outline:0; font-size:11px; }

.wallet-hero { display:flex; justify-content:space-between; align-items:center; gap:18px; color:white; padding:23px; border-radius:20px; background:linear-gradient(120deg, #112849, #1b5670); overflow:hidden; position:relative; }.wallet-hero::after { content:""; position:absolute; width:250px; height:250px; border:1px solid rgba(255,255,255,.12); border-radius:50%; left:-85px; bottom:-165px; }.wallet-hero > * { position:relative; z-index:1; }.wallet-label { color:#bdccdf; font-size:11px; }.wallet-value { font-size:31px; font-weight:800; margin:3px 0; }.wallet-note { color:#9bded4; font-size:10px; }.wallet-hero .wallet-icon { width:60px; height:60px; border:1px solid rgba(255,255,255,.19); background:rgba(255,255,255,.1); border-radius:18px; display:grid; place-items:center; }
.profile-grid { display:grid; grid-template-columns: .8fr 1.2fr; gap:18px; }.profile-card { text-align:center; }.profile-card .avatar { margin:0 auto 10px; width:68px; height:68px; border-radius:24px; font-size:22px; }.profile-card h3 { margin:0; font-size:16px; }.profile-card p { color:var(--muted); font-size:11px; margin:3px 0 18px; }.profile-lines { display:grid; gap:10px; text-align:right; }.profile-line { display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid #edf0f4; font-size:11px; }.profile-line span { color:var(--muted); }

.empty { text-align:center; color:var(--muted); padding:38px 18px; border:1px dashed #cfd8e4; border-radius:16px; background:white; }.empty .icon { margin:0 auto 8px; color:#a5b2c4; width:30px; height:30px; }.empty h3 { color:var(--ink); font-size:14px; margin:0 0 4px; }.empty p { font-size:11px; margin:0; }
.back-row { display:flex; align-items:center; gap:9px; margin-bottom:16px; }.back-row h2 { margin:0; font-size:18px; }.back-button { border:0; background:transparent; color:var(--muted); display:inline-flex; align-items:center; gap:5px; font-size:11px; }.back-button:hover { color:var(--teal-dark); }
.toast { position: fixed; z-index: 50; bottom: 25px; left: 25px; max-width: 360px; color:white; background:#122342; box-shadow:0 15px 35px rgba(10,24,48,.22); border-right:4px solid var(--teal); border-radius:13px; padding:11px 14px; font-size:12px; display:flex; gap:8px; align-items:center; animation:toast-in .25s ease; }.toast.error { border-color:var(--red); }.toast.success { border-color:#5ce2c7; } @keyframes toast-in { from { transform:translateY(10px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.modal-backdrop { position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:18px; background:rgba(8,19,42,.55); backdrop-filter:blur(4px); }.modal { width:min(560px,100%); max-height:calc(100vh - 36px); overflow:auto; background:white; border-radius:22px; box-shadow:0 30px 80px rgba(7,22,46,.3); padding:22px; }.modal-head { display:flex; justify-content:space-between; align-items:start; gap:10px; margin-bottom:17px; }.modal h2 { font-size:18px; margin:0; }.modal p { color:var(--muted); font-size:11px; margin:3px 0 0; }.close-btn { width:30px; height:30px; display:grid; place-items:center; border:0; background:#f2f5f8; border-radius:9px; color:var(--muted); }.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 8% 5%, rgba(20,184,166,.18), transparent 30%), radial-gradient(circle at 85% 90%, rgba(62,120,255,.14), transparent 28%), #f3f7fb; }.login-wrap { width:min(980px,100%); display:grid; grid-template-columns: 1fr 1.08fr; border-radius:27px; overflow:hidden; background:white; box-shadow:0 25px 75px rgba(21,37,68,.13); }.login-brand { color:white; padding:42px 36px; background:linear-gradient(145deg,#0d1832,#173b5c 70%,#0a927f); position:relative; overflow:hidden; }.login-brand::after { content:""; position:absolute; width:380px; height:380px; border:1px solid rgba(255,255,255,.16); border-radius:50%; left:-135px; bottom:-220px; box-shadow:0 0 0 28px rgba(255,255,255,.03),0 0 0 58px rgba(255,255,255,.025); }.login-brand > * { position:relative; z-index:1; }.login-brand h1 { font-size:29px; margin:35px 0 9px; line-height:1.45; }.login-brand p { color:#c3d0e4; font-size:12px; max-width:360px; }.login-points { display:grid; gap:11px; margin-top:30px; }.login-point { display:flex; gap:9px; align-items:center; color:#d3deed; font-size:11px; }.login-point i { width:23px; height:23px; display:grid; place-items:center; color:#0d675e; background:#baf2e8; border-radius:8px; font-style:normal; font-weight:800; }.login-panel { padding:35px; }.login-panel h2 { font-size:22px; margin:0 0 4px; }.login-panel .muted { color:var(--muted); font-size:11px; margin:0 0 24px; }.login-accounts { display:grid; gap:9px; }.login-account { border:1px solid var(--line); background:#fcfdfe; border-radius:14px; padding:12px; display:flex; align-items:center; gap:11px; text-align:right; }.login-account:hover { border-color:#a9e2da; background:#f5fffd; }.login-account .account-info { min-width:0; flex:1; }.login-account b { display:block; font-size:12px; }.login-account span { display:block; color:var(--muted); font-size:10px; }.login-account .go { color:var(--teal-dark); }.otp-box { display:grid; gap:13px; }.otp-note { border-radius:12px; background:#eafbf8; color:#15766e; font-size:11px; padding:10px 12px; }.otp-code { text-align:center; letter-spacing:8px; font-size:21px; font-weight:800; }.login-foot { text-align:center; color:#a0aaba; font-size:10px; margin-top:20px; }

.hidden { display:none !important; }
@media (max-width: 1160px) {
  .main { padding:0 23px 34px; }
  .sidebar { width:235px; flex-basis:235px; }
  .category-grid { grid-template-columns: repeat(4, minmax(90px,1fr)); }
  .service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero-art { opacity:.75; }
}
@media (max-width: 860px) {
  .sidebar { display:none; }
  .main { padding:0 16px 78px; }
  .topbar { min-height:72px; }.mobile-menu { display:grid; }.page-title { font-size:19px; }.topbar-left { gap:9px; }.account-chip .account-info { display:none; }.account-chip { padding:5px; }
  .hero-card { grid-template-columns:1fr; min-height:270px; padding:25px 23px; }.hero-art { position:absolute; left:18px; bottom:-34px; opacity:.42; transform:scale(.8); }.hero-copy { max-width:90%; }.hero-title { font-size:25px; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.split-grid, .detail-layout, .form-layout, .builder-layout, .support-grid, .profile-grid { grid-template-columns:1fr; }.builder-preview { min-height:auto; }
  .mobile-bottom-nav { display:flex; position:fixed; z-index:20; bottom:0; left:0; right:0; height:66px; background:rgba(255,255,255,.94); backdrop-filter:blur(14px); border-top:1px solid var(--line); justify-content:space-around; padding:8px 9px 6px; }.mobile-bottom-nav button { border:0; background:transparent; color:var(--muted); font-size:9px; display:flex; flex-direction:column; align-items:center; gap:2px; padding:3px 10px; border-radius:10px; }.mobile-bottom-nav button.active { color:var(--teal-dark); background:#eafbf8; }.mobile-bottom-nav button .icon { width:19px; height:19px; }
}
@media (max-width: 600px) {
  .view-content { padding-top:19px; }.top-actions .icon-btn:first-child { display:none; }.category-grid { grid-template-columns: repeat(4,1fr); gap:7px; }.category-card { padding:10px 4px; }.category-icon { width:33px; height:33px; font-size:17px; margin-bottom:5px; }.category-card b { font-size:9px; }.category-card span { font-size:8px; }.service-grid { grid-template-columns:1fr; }.form-grid, .builder-form, .builder-field-grid { grid-template-columns:1fr; }.form-field.full, .builder-form .full { grid-column:auto; }.order-card { align-items:flex-start; }.order-side { flex-direction:column; align-items:flex-end; gap:5px; }.order-price { font-size:11px; }.toolbar { align-items:stretch; flex-direction:column; }.toolbar-actions { justify-content:space-between; }.searchbar { max-width:none; }.money-box { grid-template-columns:1fr; }.operator-banner { align-items:flex-start; flex-direction:column; }.login-wrap { grid-template-columns:1fr; }.login-brand { padding:29px 24px; }.login-brand h1 { margin:20px 0 8px; font-size:24px; }.login-points { margin-top:18px; grid-template-columns:repeat(3,1fr); gap:7px; }.login-point { align-items:flex-start; flex-direction:column; font-size:9px; gap:4px; }.login-panel { padding:25px 20px; }.hero-actions { flex-direction:column; align-items:stretch; max-width:210px; }.hero-actions .secondary-btn, .hero-actions .primary-btn { width:100%; }
}