:root {
  --bg: #080808;
  --bg-soft: #101010;
  --surface: #151515;
  --surface-2: #1b1b1b;
  --surface-3: #222;
  --gold: #d4af37;
  --gold-light: #f2da83;
  --gold-dark: #8f6d13;
  --text: #f8f7f3;
  --muted: #aaa69b;
  --line: rgba(255,255,255,.09);
  --success: #47d7a5;
  --danger: #ff6b77;
  --warning: #f4b84a;
  --info: #6aa8ff;
  --radius: 18px;
  --shadow: 0 24px 60px rgba(0,0,0,.42);
  --sidebar: 272px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--bg); min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }

.gold-text {
  background: linear-gradient(110deg, #9d7515, #f9e59a 44%, #c29420 72%, #fff1b3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eyebrow { color: var(--gold-light); text-transform: uppercase; letter-spacing: .19em; font-size: 11px; font-weight: 800; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hidden { display: none !important; }
.text-right { text-align: right; }

.site-shell {
  overflow: hidden;
  min-height: 100vh;
  background:
    radial-gradient(circle at 76% 8%, rgba(212,175,55,.13), transparent 28%),
    radial-gradient(circle at 12% 38%, rgba(212,175,55,.06), transparent 22%), #080808;
}
.site-nav {
  height: 84px; max-width: 1220px; margin: 0 auto; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 20;
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 900; letter-spacing: -.03em; font-size: 20px; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #111; font-weight: 950;
  background: linear-gradient(145deg,#fff1ad,#b27d0f); box-shadow: inset 0 1px 1px #fff9, 0 10px 30px #b78b2733;
  transform: rotate(-6deg);
}
.brand-mark span { transform: rotate(6deg); }
.nav-links { display: flex; align-items: center; gap: 34px; color: #d7d4cb; font-size: 14px; }
.nav-links a:hover { color: var(--gold-light); }
.nav-actions { display: flex; gap: 10px; align-items: center; }
.btn {
  border: 1px solid var(--line); color: var(--text); background: var(--surface); min-height: 44px; padding: 0 18px;
  border-radius: 12px; font-weight: 750; display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: .2s ease;
}
.btn:hover { transform: translateY(-2px); border-color: rgba(212,175,55,.4); }
.btn-gold { color: #15120a; border-color: #e0c25f; background: linear-gradient(135deg,#f3dc87,#b58418); box-shadow: 0 12px 35px rgba(190,143,29,.19); }
.btn-ghost { background: transparent; }
.btn-danger { color: #fff; background: rgba(255,107,119,.12); border-color: rgba(255,107,119,.28); }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 12px; border-radius: 9px; }
.btn-icon { width: 42px; min-width: 42px; padding: 0; }

.hero { max-width: 1220px; margin: 0 auto; padding: 92px 28px 84px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.hero h1 { font-size: clamp(48px,6.3vw,86px); line-height: .98; letter-spacing: -.065em; margin: 18px 0 24px; max-width: 760px; }
.hero p { font-size: 18px; line-height: 1.75; color: #bdb9ae; max-width: 600px; }
.hero-actions { display: flex; gap: 12px; margin: 34px 0; flex-wrap: wrap; }
.hero-actions .btn { min-height: 52px; padding: 0 24px; }
.trust-row { display: flex; gap: 30px; margin-top: 44px; }
.trust-item strong { display: block; color: #fff; font-size: 20px; }
.trust-item span { color: #77736a; font-size: 12px; }
.hero-visual { position: relative; min-height: 600px; display: grid; place-items: center; perspective: 1100px; }
.hero-orb { position: absolute; width: 430px; height: 430px; border-radius: 50%; background: radial-gradient(circle at 36% 32%,#f6df8a33,#7e5b0c14 38%,transparent 69%); filter: blur(1px); }
.dashboard-preview {
  width: min(100%,540px); min-height: 470px; border: 1px solid rgba(255,255,255,.1); border-radius: 30px; padding: 22px;
  background: linear-gradient(145deg,rgba(30,30,30,.96),rgba(9,9,9,.97)); box-shadow: 0 50px 100px #000a, inset 0 1px 0 #fff1;
  transform: rotateY(-7deg) rotateX(4deg); position: relative; z-index: 2;
}
.preview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; }
.preview-dots { display: flex; gap: 6px; }
.preview-dots span { width: 7px; height: 7px; border-radius: 50%; background: #474747; }
.preview-dots span:first-child { background: var(--gold); }
.preview-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.preview-kpi { padding: 16px; border: 1px solid #ffffff0d; border-radius: 15px; background: #ffffff05; }
.preview-kpi span { font-size: 10px; color: var(--muted); }
.preview-kpi strong { display: block; font-size: 18px; margin-top: 6px; }
.preview-chart { height: 155px; border-radius: 20px; margin: 20px 0; background: linear-gradient(180deg,#d4af3712,transparent), repeating-linear-gradient(0deg,#fff0 0 37px,#ffffff0b 38px); position: relative; overflow: hidden; }
.preview-chart svg { width: 100%; height: 100%; }
.preview-services { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.preview-platform { padding: 15px 6px; border-radius: 16px; background: #fff05; border: 1px solid #fff08; text-align: center; font-size: 10px; color: #aaa; }
.mini-social { width: 38px; height: 38px; margin: 0 auto 8px; border-radius: 13px; display: grid; place-items: center; font-weight: 900; color: #fff; box-shadow: inset 0 1px 1px #fff7,0 9px 15px #0005; }
.instagram { background: linear-gradient(145deg,#ffbc42,#df3a8c 48%,#6e49f2); }
.youtube { background: linear-gradient(145deg,#ff6b6b,#b90000); }
.tiktok { background: linear-gradient(145deg,#40e0d0,#252525 48%,#f24973); }
.facebook { background: linear-gradient(145deg,#6ba8ff,#1655ad); }
.telegram { background: linear-gradient(145deg,#75d8ff,#1182bb); }
.x { background: linear-gradient(145deg,#555,#050505); }
.linkedin { background: linear-gradient(145deg,#46a9e8,#075986); }
.spotify { background: linear-gradient(145deg,#60e88c,#0e9f44); }
.floating-chip { position: absolute; z-index: 5; border: 1px solid #ffffff17; background: #151515e8; backdrop-filter: blur(12px); box-shadow: var(--shadow); border-radius: 17px; padding: 13px 17px; }
.floating-chip.one { right: -15px; top: 105px; }
.floating-chip.two { left: -20px; bottom: 105px; }
.floating-chip strong { display: block; font-size: 15px; }
.floating-chip span { color: var(--muted); font-size: 11px; }

.brand-strip { border-block: 1px solid var(--line); background: #fff018; padding: 22px 0; overflow: hidden; }
.brand-track { display: flex; justify-content: center; gap: 55px; color: #77746b; text-transform: uppercase; letter-spacing: .15em; font-size: 12px; font-weight: 800; flex-wrap: wrap; }
.section { max-width: 1220px; margin: 0 auto; padding: 105px 28px; }
.section-head { max-width: 680px; margin-bottom: 45px; }
.section-head.center { text-align: center; margin-inline: auto; }
.section h2 { font-size: clamp(36px,4.5vw,62px); letter-spacing: -.052em; line-height: 1.04; margin: 14px 0 18px; }
.section-head p { color: var(--muted); line-height: 1.7; font-size: 16px; }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.feature-card { border: 1px solid var(--line); border-radius: 24px; padding: 30px; background: linear-gradient(145deg,#171717,#0c0c0c); min-height: 250px; position: relative; overflow: hidden; }
.feature-card::after { content:""; position:absolute; width:130px; height:130px; right:-70px; top:-70px; border-radius:50%; background:#d4af3718; filter:blur(20px); }
.feature-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 22px; color: #19150c; background: linear-gradient(145deg,#f4df8c,#a67a16); box-shadow: inset 0 1px #fff8,0 14px 35px #ad831a28; }
.feature-card h3 { margin: 24px 0 10px; font-size: 20px; }
.feature-card p { color: #918d84; line-height: 1.65; margin: 0; font-size: 14px; }
.service-showcase { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; }
.platform-card { background: #121212; border: 1px solid var(--line); border-radius: 20px; padding: 22px; display: flex; align-items: center; gap: 15px; transition:.25s ease; }
.platform-card:hover { transform: translateY(-5px); border-color:#d4af3755; box-shadow:0 20px 40px #0005; }
.platform-card .mini-social { margin: 0; flex: 0 0 auto; }
.platform-card strong { display: block; }
.platform-card span { color: var(--muted); font-size: 11px; }
.cta-panel { padding: 68px; border: 1px solid #d4af3733; background: radial-gradient(circle at 80% 20%,#d4af3722,transparent 35%),linear-gradient(135deg,#191919,#0a0a0a); border-radius: 30px; display:flex; justify-content:space-between; gap:30px; align-items:center; }
.cta-panel h2 { margin:0 0 12px; font-size:clamp(34px,4vw,56px); }
.cta-panel p { color:var(--muted); max-width:650px; }
.site-footer { max-width:1220px; margin:0 auto; border-top:1px solid var(--line); padding:40px 28px; display:flex; justify-content:space-between; color:#77736a; font-size:12px; }

.auth-page { min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; background:#080808; }
.auth-art { padding:55px; display:flex; flex-direction:column; justify-content:space-between; background:radial-gradient(circle at 20% 80%,#d4af3722,transparent 34%),linear-gradient(135deg,#151515,#050505); border-right:1px solid var(--line); overflow:hidden; position:relative; }
.auth-art::after { content:""; position:absolute; width:470px; height:470px; border:1px solid #d4af3725; border-radius:50%; right:-140px; bottom:-130px; box-shadow:0 0 0 80px #d4af3708,0 0 0 160px #d4af3705; }
.auth-copy { max-width:680px; position:relative; z-index:2; }
.auth-copy h1 { font-size:clamp(48px,6vw,82px); line-height:.98; letter-spacing:-.06em; margin:18px 0; }
.auth-copy p { max-width:540px; color:#aaa69b; line-height:1.7; }
.auth-benefits { display:flex; gap:30px; position:relative; z-index:2; }
.auth-benefits span { font-size:12px; color:#8f8b82; }
.auth-form-side { display:grid; place-items:center; padding:40px; }
.auth-card { width:min(440px,100%); }
.auth-card h2 { font-size:34px; letter-spacing:-.04em; margin:20px 0 8px; }
.auth-card > p { color:var(--muted); margin-bottom:30px; }
.demo-box { background:#d4af370d; border:1px solid #d4af3729; border-radius:14px; padding:14px; margin-top:18px; font-size:12px; color:#cfc8b5; line-height:1.65; }

.field { margin-bottom:17px; }
.field-row { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }
.field label { display:flex; justify-content:space-between; font-size:12px; color:#c7c4ba; margin-bottom:8px; font-weight:700; }
.input, .select, .textarea {
  width:100%; min-height:46px; border:1px solid var(--line); background:#111; color:#f7f5f0; border-radius:12px; padding:0 14px; outline:none; transition:.2s ease;
}
.textarea { min-height:110px; resize:vertical; padding-top:12px; }
.input:focus,.select:focus,.textarea:focus { border-color:#d4af3780; box-shadow:0 0 0 3px #d4af3710; }
.select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,#777 50%),linear-gradient(135deg,#777 50%,transparent 50%);background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px,5px 5px;background-repeat:no-repeat; }
.input-group { display:flex; gap:9px; }
.input-group .input { flex:1; }

.app-shell { min-height:100vh; display:grid; grid-template-columns:var(--sidebar) 1fr; background:#0a0a0a; }
.sidebar { position:fixed; inset:0 auto 0 0; width:var(--sidebar); background:linear-gradient(180deg,#151515,#090909 80%); border-right:1px solid var(--line); padding:24px 16px; display:flex; flex-direction:column; z-index:50; overflow-y:auto; }
.sidebar .brand { padding:0 10px 24px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.tenant-pill { margin:0 8px 20px; padding:12px; border:1px solid #d4af3722; border-radius:13px; background:#d4af3708; }
.tenant-pill span { color:#8d897f; font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.tenant-pill strong { display:block; font-size:13px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-group { margin:8px 0 18px; }
.nav-label { color:#68655f; font-size:9px; text-transform:uppercase; letter-spacing:.17em; font-weight:800; padding:0 13px 8px; }
.side-link { width:100%; border:0; background:transparent; color:#aaa69e; padding:11px 13px; border-radius:11px; display:flex; align-items:center; gap:12px; text-align:left; font-size:13px; font-weight:650; margin:2px 0; }
.side-link:hover { color:#fff; background:#ffffff08; }
.side-link.active { color:#f7e5a4; background:linear-gradient(90deg,#d4af3722,#d4af3705); box-shadow:inset 2px 0 var(--gold); }
.side-icon { width:20px; text-align:center; font-size:15px; }
.side-badge { margin-left:auto; font-size:9px; background:#d4af3722; color:var(--gold-light); border-radius:20px; padding:3px 7px; }
.sidebar-bottom { margin-top:auto; padding-top:15px; border-top:1px solid var(--line); }
.user-mini { display:flex; align-items:center; gap:10px; padding:10px; }
.avatar { width:38px; height:38px; flex:0 0 auto; border-radius:12px; background:linear-gradient(145deg,#f1da84,#9e7215); color:#17130a; display:grid; place-items:center; font-weight:900; box-shadow:inset 0 1px #fff8; }
.user-mini strong { font-size:12px; display:block; max-width:135px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-mini span { font-size:10px; color:#77736a; text-transform:capitalize; }
.app-main { grid-column:2; min-width:0; }
.topbar { height:78px; border-bottom:1px solid var(--line); background:#0d0d0de8; backdrop-filter:blur(18px); position:sticky; top:0; z-index:35; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.mobile-menu { display:none; }
.top-title h1 { font-size:19px; letter-spacing:-.025em; margin:0; }
.top-title p { color:#706d66; font-size:11px; margin:3px 0 0; }
.top-actions { display:flex; align-items:center; gap:9px; }
.wallet-chip { height:43px; border:1px solid #d4af3728; background:#d4af3709; border-radius:12px; padding:0 14px; display:flex; align-items:center; gap:10px; }
.wallet-chip span { font-size:10px; color:#8b877d; }
.wallet-chip strong { display:block; font-size:13px; color:#f0db93; }
.page { padding:30px; max-width:1680px; margin:0 auto; }
.welcome { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:26px; }
.welcome h2 { font-size:32px; letter-spacing:-.045em; margin:0 0 7px; }
.welcome p { color:var(--muted); margin:0; font-size:13px; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-bottom:22px; }
.kpi-card { border:1px solid var(--line); border-radius:var(--radius); padding:20px; background:linear-gradient(145deg,#171717,#111); min-height:140px; overflow:hidden; position:relative; }
.kpi-card::after { content:""; position:absolute; width:90px; height:90px; right:-35px; top:-35px; background:var(--accent,#d4af37); opacity:.07; border-radius:50%; filter:blur(10px); }
.kpi-top { display:flex; justify-content:space-between; align-items:center; }
.kpi-label { color:#8d8980; font-size:11px; font-weight:700; }
.kpi-icon { width:37px; height:37px; border-radius:11px; display:grid; place-items:center; color:var(--accent,var(--gold)); background:color-mix(in srgb,var(--accent,var(--gold)) 11%,transparent); border:1px solid color-mix(in srgb,var(--accent,var(--gold)) 18%,transparent); }
.kpi-value { display:block; font-size:28px; margin-top:13px; letter-spacing:-.04em; }
.kpi-note { display:block; font-size:10px; color:#65625c; margin-top:5px; }
.content-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(290px,.75fr); gap:18px; }
.card { border:1px solid var(--line); border-radius:var(--radius); background:#121212; box-shadow:0 15px 40px #0002; min-width:0; }
.card-head { padding:19px 21px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.card-head h3 { font-size:14px; margin:0; }
.card-body { padding:21px; }
.chart-box { min-height:260px; padding:20px; position:relative; }
.chart-bars { height:190px; display:flex; align-items:end; gap:12px; padding-top:20px; border-bottom:1px solid var(--line); background:repeating-linear-gradient(0deg,transparent 0 45px,#ffffff09 46px); }
.chart-bar { flex:1; height:var(--h); min-height:6%; border-radius:8px 8px 0 0; background:linear-gradient(180deg,#f0d87d,#9b7116); box-shadow:0 0 20px #d4af3712; position:relative; }
.chart-bar:hover::after { content:attr(data-value); position:absolute; top:-28px; left:50%; transform:translateX(-50%); background:#262626; border:1px solid #fff1; padding:4px 7px; border-radius:6px; font-size:9px; white-space:nowrap; }
.chart-labels { display:flex; justify-content:space-around; color:#67645e; font-size:9px; margin-top:10px; }
.quick-list { display:grid; gap:10px; }
.quick-action { width:100%; padding:13px; display:flex; align-items:center; gap:12px; border:1px solid var(--line); background:#ffffff04; color:#ddd9ce; border-radius:13px; text-align:left; }
.quick-action:hover { border-color:#d4af3744; transform:translateX(2px); }
.quick-action i { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#d4af3710; color:var(--gold-light); font-style:normal; }
.quick-action strong { display:block; font-size:12px; }
.quick-action span { color:#6f6b64; font-size:10px; }
.announce { padding:15px; border-radius:13px; border:1px solid #47d7a528; background:#47d7a508; margin-bottom:10px; }
.announce strong { font-size:12px; display:block; }
.announce p { margin:6px 0 0; color:#8e8a82; font-size:11px; line-height:1.5; }

.toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.search-box { position:relative; flex:1; min-width:230px; max-width:480px; }
.search-box .input { padding-left:42px; }
.search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#777; }
.filters { display:flex; gap:8px; flex-wrap:wrap; }
.platform-filter { min-height:39px; border:1px solid var(--line); background:#121212; color:#8f8c84; border-radius:10px; padding:0 12px; display:flex; align-items:center; gap:7px; font-size:11px; }
.platform-filter.active,.platform-filter:hover { color:#f5dfa0; border-color:#d4af3740; background:#d4af370b; }
.table-wrap { overflow:auto; border-radius:var(--radius); border:1px solid var(--line); }
table { width:100%; border-collapse:collapse; min-width:850px; background:#111; }
th { text-align:left; padding:13px 16px; font-size:9px; color:#716e67; text-transform:uppercase; letter-spacing:.12em; background:#171717; border-bottom:1px solid var(--line); }
td { padding:15px 16px; font-size:11px; color:#c8c4ba; border-bottom:1px solid #ffffff08; vertical-align:middle; }
tbody tr:hover { background:#ffffff025; }
tbody tr:last-child td { border-bottom:0; }
.service-cell { display:flex; align-items:center; gap:11px; min-width:300px; }
.service-cell .mini-social { width:34px; height:34px; border-radius:11px; margin:0; font-size:11px; flex:0 0 auto; }
.service-cell strong { display:block; font-size:11px; color:#eeeae0; }
.service-cell span { font-size:9px; color:#6c6962; }
.status { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border-radius:20px; font-size:9px; font-weight:750; text-transform:capitalize; }
.status::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.status-completed,.status-approved,.status-active,.status-answered { color:var(--success); background:#47d7a510; }
.status-processing,.status-in_progress,.status-customer_reply { color:var(--info); background:#6aa8ff10; }
.status-pending,.status-refill_pending,.status-open { color:var(--warning); background:#f4b84a10; }
.status-canceled,.status-rejected,.status-disabled,.status-suspended,.status-expired { color:var(--danger); background:#ff6b7710; }
.status-partial { color:#d18aff; background:#d18aff10; }
.order-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:18px; align-items:start; }
.platform-selector { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:20px; }
.platform-option { border:1px solid var(--line); background:#151515; border-radius:14px; padding:13px 8px; text-align:center; color:#858179; font-size:10px; }
.platform-option .mini-social { width:35px;height:35px;border-radius:11px;margin:0 auto 8px; }
.platform-option.active,.platform-option:hover { border-color:#d4af3755; color:#f0dfac; background:#d4af3708; }
.service-dropdown { max-height:320px; overflow:auto; border:1px solid var(--line); border-radius:14px; margin-top:8px; background:#0f0f0f; }
.service-choice { width:100%; padding:12px; border:0; border-bottom:1px solid #fff08; background:transparent; color:#bbb7ad; display:flex; gap:10px; text-align:left; }
.service-choice:hover,.service-choice.active { background:#d4af370a; }
.service-choice strong { font-size:11px; display:block; }
.service-choice span { color:#6f6c65; font-size:9px; }
.order-summary { position:sticky; top:98px; }
.summary-service { text-align:center; padding:10px 0 22px; }
.summary-service .mini-social { width:60px;height:60px;border-radius:20px;font-size:20px; }
.summary-service h3 { font-size:16px;margin:12px 0 5px; }
.summary-row { display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--line);font-size:11px; }
.summary-row span { color:#77746d; }
.summary-total { font-size:18px!important;color:var(--gold-light)!important;font-weight:850; }
.modal-backdrop { position:fixed;inset:0;background:#000b;backdrop-filter:blur(7px);z-index:100;display:grid;place-items:center;padding:20px; }
.modal { width:min(590px,100%);max-height:90vh;overflow:auto;background:#151515;border:1px solid #ffffff18;border-radius:22px;box-shadow:0 40px 100px #000;padding:24px; }
.modal-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:22px; }
.modal-head h3 { margin:0;font-size:19px; }
.toast-stack { position:fixed;right:22px;top:90px;z-index:200;display:grid;gap:10px; }
.toast { min-width:280px;max-width:410px;padding:14px 16px;border-radius:13px;border:1px solid #ffffff14;background:#1d1d1df2;box-shadow:var(--shadow);font-size:12px;animation:toast-in .25s ease; }
.toast.success { border-color:#47d7a555; }
.toast.error { border-color:#ff6b7755; }
@keyframes toast-in { from{opacity:0;transform:translateX(20px)} }
.empty { padding:55px 20px;text-align:center;color:#77736b; }
.empty-icon { width:60px;height:60px;border-radius:19px;background:#d4af370b;border:1px solid #d4af3720;display:grid;place-items:center;margin:0 auto 14px;color:var(--gold);font-size:22px; }
.tabs { display:flex;gap:5px;border-bottom:1px solid var(--line);margin-bottom:20px; }
.tab { border:0;background:transparent;color:#777;padding:12px 15px;border-bottom:2px solid transparent;font-size:11px; }
.tab.active { color:#f1d985;border-color:var(--gold); }
.detail-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:13px; }
.detail-box { border:1px solid var(--line);background:#ffffff03;border-radius:13px;padding:14px; }
.detail-box span { color:#777;font-size:9px;text-transform:uppercase;letter-spacing:.08em; }
.detail-box strong { display:block;margin-top:6px;font-size:13px;word-break:break-word; }
.ticket-message { display:flex;gap:11px;margin:16px 0; }
.ticket-bubble { background:#ffffff05;border:1px solid var(--line);border-radius:4px 15px 15px 15px;padding:13px;flex:1; }
.ticket-bubble p { margin:5px 0 0;color:#bcb8af;font-size:12px;line-height:1.55;white-space:pre-wrap; }
.ticket-bubble strong { font-size:10px; }
.ticket-bubble span { color:#666;font-size:9px;margin-left:7px; }
.api-code { background:#080808;border:1px solid var(--line);border-radius:12px;padding:14px;color:#d8ca96;font-family:ui-monospace,monospace;font-size:11px;overflow:auto;white-space:pre; }

@media (max-width:1100px) {
  .hero { grid-template-columns:1fr; padding-top:65px; }
  .hero-copy { text-align:center; }
  .hero-copy p { margin-inline:auto; }
  .hero-actions,.trust-row { justify-content:center; }
  .hero-visual { min-height:530px; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .service-showcase { grid-template-columns:repeat(2,1fr); }
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .content-grid { grid-template-columns:1fr; }
  .order-layout { grid-template-columns:1fr; }
  .order-summary { position:static; }
}
@media (max-width:820px) {
  .nav-links { display:none; }
  .auth-page { grid-template-columns:1fr; }
  .auth-art { display:none; }
  .app-shell { display:block; }
  .sidebar { transform:translateX(-102%);transition:.25s ease;box-shadow:30px 0 70px #0008; }
  .sidebar.open { transform:translateX(0); }
  .app-main { margin:0; }
  .mobile-menu { display:inline-flex; }
  .topbar { padding:0 17px; }
  .page { padding:20px 16px; }
  .platform-selector { grid-template-columns:repeat(3,1fr); }
  .cta-panel { padding:40px;display:block; }
  .cta-panel .btn { margin-top:15px; }
}
@media (max-width:600px) {
  .site-nav { padding:0 18px; }
  .site-nav .btn-ghost { display:none; }
  .hero { padding:52px 18px 55px; }
  .hero h1 { font-size:48px; }
  .hero-visual { min-height:420px; }
  .dashboard-preview { transform:none;padding:16px;min-height:390px; }
  .floating-chip { display:none; }
  .preview-kpis { grid-template-columns:1fr 1fr; }
  .preview-kpi:last-child { display:none; }
  .section { padding:75px 18px; }
  .feature-grid,.service-showcase { grid-template-columns:1fr; }
  .site-footer { flex-direction:column;gap:12px; }
  .kpi-grid { grid-template-columns:1fr 1fr;gap:10px; }
  .kpi-card { min-height:125px;padding:16px; }
  .kpi-value { font-size:23px; }
  .welcome { display:block; }
  .welcome .btn { margin-top:14px; }
  .wallet-chip span { display:none; }
  .top-title p { display:none; }
  .field-row,.detail-grid { grid-template-columns:1fr; }
  .platform-selector { grid-template-columns:repeat(2,1fr); }
}