@import"https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&family=Syne:wght@600;700;800&display=swap";@tailwind base;@tailwind components;@tailwind utilities;:root{color-scheme:light;--bg: #f7f5fb;--surface: #ffffff;--surface-soft: #f4efff;--surface-strong: #1b1333;--text: #20143d;--text-soft: #66597f;--line: #e6def6;--primary: #6929c4;--primary-soft: #ede9fe;--primary-strong: #4c1d95;--accent: #eab308;--green: #15803d;--green-soft: #dcfce7;--danger: #b91c1c;--danger-soft: #fee2e2;--teal: #0f766e;--amber-soft: #fef3c7;--shadow: 0 24px 60px rgba(76, 29, 149, .12);--radius-lg: 24px;--radius-md: 18px;--radius-sm: 12px}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;background:radial-gradient(circle at top left,rgba(105,41,196,.08),transparent 32%),radial-gradient(circle at bottom right,rgba(234,179,8,.08),transparent 28%),var(--bg);color:var(--text);font-family:Be Vietnam Pro,sans-serif}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}.app-shell{min-height:100vh}.auth-shell{display:grid;grid-template-columns:1.15fr .95fr;min-height:100vh}.auth-panel{background:linear-gradient(140deg,#0c081cf5,#391469f0),var(--surface-strong);color:#fff;padding:56px;display:flex;flex-direction:column;gap:28px}.auth-panel__logo{display:flex;align-items:center;gap:14px}.auth-panel__mark,.sidebar__mark{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(140deg,var(--accent),#facc15);color:var(--primary-strong);font-family:Syne,sans-serif;font-size:18px;font-weight:800}.sidebar__mark--amber{background:linear-gradient(140deg,#facc15,#fb923c)}.auth-panel__brand,.sidebar__title{font-family:Syne,sans-serif;font-size:1.2rem;font-weight:800}.auth-panel__meta,.sidebar__subtitle{font-size:.85rem;color:#ffffffa6}.auth-panel__title{font-family:Playfair Display,serif;font-size:clamp(2.3rem,4vw,3.8rem);line-height:1.08;margin:0}.auth-panel__title em{color:#fde68a;font-style:normal}.auth-panel__desc{max-width:38rem;margin:0;color:#ffffffb8;line-height:1.8}.auth-feature-list{display:grid;gap:12px}.auth-feature-card{padding:16px 18px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.1);background:#ffffff0d;display:grid;gap:6px}.auth-feature-card span{color:#ffffffb3;font-size:.92rem}.auth-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:var(--radius-md);overflow:hidden;border:1px solid rgba(255,255,255,.12)}.auth-stats div{padding:18px 12px;display:grid;gap:4px;background:#ffffff0a;text-align:center}.auth-stats strong{color:#fde68a;font-family:Syne,sans-serif;font-size:1.5rem}.auth-stats span{color:#ffffffa3;font-size:.85rem}.auth-form-panel{display:grid;place-items:center;padding:32px}.auth-card{width:min(100%,520px);background:#ffffffd6;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:28px;border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow);padding:28px;display:grid;gap:20px}.auth-card__header h2,.card__header h2,.toolbar h2,.topbar h1{margin:0;font-size:1.25rem;font-weight:800}.auth-card__header p,.card__header p,.toolbar p,.topbar p{margin:6px 0 0;color:var(--text-soft);line-height:1.6}.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.demo-tile{border:1px solid var(--line);border-radius:16px;background:#fff;text-align:left;padding:14px;cursor:pointer;display:grid;gap:4px;transition:.18s ease}.demo-tile:hover,.demo-tile.is-selected{border-color:var(--primary);background:var(--primary-soft);transform:translateY(-1px)}.demo-tile span,.demo-tile small{color:var(--text-soft)}.stack,.stack-lg,.list-stack,.timeline,.preview-list{display:grid}.stack{gap:14px}.stack-lg{gap:24px}.field{display:grid;gap:8px}.field span{font-size:.92rem;font-weight:600}.input{width:100%;min-height:48px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--text);padding:0 14px;outline:none;transition:border-color .18s ease,box-shadow .18s ease}.input:focus{border-color:var(--primary);box-shadow:0 0 0 4px #6929c41f}.textarea{min-height:120px;padding:12px 14px;resize:vertical}.input--search{min-width:260px}.btn{min-height:44px;border-radius:14px;border:1px solid transparent;padding:0 16px;font-weight:700;cursor:pointer;transition:.18s ease}.btn:hover{transform:translateY(-1px)}.btn--primary{background:linear-gradient(135deg,var(--primary),#7c3aed);color:#fff;box-shadow:0 14px 24px #6929c433}.btn--ghost{background:#fff;border-color:var(--line);color:var(--text)}.btn--small{min-height:36px;padding:0 12px;border-radius:12px}.text-link{color:var(--primary);font-weight:700}.auth-card__footer{display:flex;align-items:center;gap:8px;color:var(--text-soft)}.form-error{color:var(--danger);background:var(--danger-soft);padding:12px 14px;border-radius:14px}.workspace-shell{min-height:100vh;display:grid;grid-template-columns:300px minmax(0,1fr)}.sidebar{background:linear-gradient(180deg,#3f187afa,#1c1038fa),var(--surface-strong);color:#fff;padding:24px 20px;display:flex;flex-direction:column;gap:18px}.sidebar--admin{background:linear-gradient(180deg,#241849fa,#120c23fa),#151123}.sidebar__brand{display:flex;align-items:center;gap:14px}.sidebar__section-label{color:#ffffff8a;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}.sidebar__nav{display:grid;gap:6px}.sidebar__link{padding:12px 14px;border-radius:14px;color:#ffffffc2;font-weight:600;transition:.18s ease}.sidebar__link:hover,.sidebar__link.is-active{background:#ffffff1f;color:#fff}.plan-card{margin-top:auto;background:#ffffff14;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:16px;display:grid;gap:6px}.plan-card--admin{background:#facc151f}.plan-card__label,.readonly-card span,.stat-card span{color:#ffffffa3;font-size:.8rem}.plan-card small{color:#ffffffb8;line-height:1.5}.sidebar__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,.12);padding-top:16px}.sidebar__footer div{display:grid;gap:2px}.sidebar__footer span{color:#ffffffa3;font-size:.82rem}.content-shell{display:grid;grid-template-rows:auto 1fr}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 28px 20px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#f7f5fbc7;border-bottom:1px solid rgba(230,222,246,.8)}.topbar__actions,.toolbar__right,.usage-row,.modal__actions,.table-actions,.preview-pill-row{display:flex;align-items:center;gap:10px}.page-content{padding:28px}.stats-grid,.two-column,.form-grid,.template-grid{display:grid;gap:16px}.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.stat-card{background:var(--surface);border-radius:24px;padding:20px;border:1px solid var(--line);box-shadow:var(--shadow);display:grid;gap:8px}.stat-card strong{font-size:2rem;font-weight:800}.stat-card small{color:var(--text-soft)}.stat-card--violet{border-top:4px solid var(--primary)}.stat-card--amber{border-top:4px solid var(--accent)}.stat-card--teal{border-top:4px solid var(--teal)}.stat-card--green{border-top:4px solid var(--green)}.card,.toolbar{background:#ffffffd6;border:1px solid rgba(255,255,255,.9);border-radius:24px;box-shadow:var(--shadow)}.card{padding:22px}.card__header,.toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.toolbar{padding:20px 22px}.two-column{grid-template-columns:repeat(2,minmax(0,1fr))}.two-column--wide{grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr)}.list-stack{gap:12px}.list-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-radius:16px;background:var(--surface-soft)}.list-row div,.timeline__item{display:grid;gap:4px}.list-row span,.timeline__item span,.timeline__item small,.table-primary span,.readonly-card small{color:var(--text-soft)}.timeline{gap:12px}.timeline__item{padding:14px 16px;border-left:3px solid var(--primary);background:var(--surface-soft);border-radius:0 16px 16px 0}.progress-bar{height:12px;background:var(--surface-soft);border-radius:999px;overflow:hidden}.progress-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),#a78bfa)}.badge{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 10px;border-radius:999px;font-size:.82rem;font-weight:700}.badge--success{background:var(--green-soft);color:var(--green)}.badge--danger{background:var(--danger-soft);color:var(--danger)}.badge--warning{background:var(--amber-soft);color:#a16207}.badge--neutral{background:var(--surface-soft);color:var(--text)}.table-card{padding:0;overflow:hidden}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:.8rem;color:var(--text-soft);text-transform:uppercase;letter-spacing:.08em}tbody tr:hover{background:#f4efff7a}.table-primary{display:grid;gap:4px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#140e228c;display:grid;place-items:center;padding:24px;z-index:50}.modal{width:min(100%,640px);max-height:calc(100vh - 48px);overflow:auto;background:#fff;border-radius:24px;border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 80px #140e2247;padding:22px}.modal__header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.modal__header h3{margin:0;font-size:1.1rem}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid__full{grid-column:1 / -1}.card--profile{padding:28px}.profile-hero{display:flex;align-items:center;gap:16px;margin-bottom:24px}.profile-hero__logo{width:72px;height:72px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),#a78bfa);color:#fff;font-size:1.3rem;font-weight:800}.profile-hero h2{margin:0;font-size:1.5rem}.profile-hero p{margin:6px 0 0;color:var(--text-soft)}.readonly-card{min-height:120px;padding:18px;border-radius:18px;background:linear-gradient(135deg,#6929c41a,#eab30824);display:grid;align-content:start;gap:8px}.template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.template-card{border-radius:20px;border:1px solid var(--line);background:#fff;padding:18px;display:grid;gap:8px;text-align:left;cursor:pointer;transition:.18s ease}.template-card:hover,.template-card.is-selected{border-color:var(--primary);background:var(--primary-soft);transform:translateY(-1px)}.template-card p,.template-card small{color:var(--text-soft);margin:0}.template-card__tag{display:inline-flex;width:fit-content;padding:4px 10px;border-radius:999px;background:var(--amber-soft);color:#a16207;font-size:.76rem;font-weight:700}.preview-phone{width:min(100%,360px);margin-inline:auto;border-radius:34px;overflow:hidden;border:10px solid #16131f;background:#fff;font-family:var(--preview-font),sans-serif}.preview-phone__hero{padding:26px 22px;background:linear-gradient(160deg,var(--preview-primary),var(--preview-secondary));color:#fff;display:grid;gap:6px}.preview-phone__logo{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:#ffffff2e;font-weight:800}.preview-phone__body{padding:22px;display:grid;gap:14px}.preview-phone__body h3{margin:0;font-size:1.4rem}.preview-phone__body p{margin:0;color:var(--text-soft);line-height:1.7}.preview-pill{min-height:30px;border-radius:999px;background:var(--surface-soft);color:var(--text);padding:0 12px;display:inline-flex;align-items:center;font-size:.82rem;font-weight:700}.preview-list{gap:10px}.preview-list__item{padding:12px 14px;border-radius:16px;background:var(--surface-soft);display:grid;gap:4px}.usage-row{justify-content:space-between;margin-bottom:12px}@media(max-width:1180px){.auth-shell,.workspace-shell{grid-template-columns:1fr}.auth-panel{min-height:auto}.sidebar{position:static}.stats-grid,.two-column,.two-column--wide,.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:820px){.auth-panel,.auth-form-panel,.page-content,.topbar{padding:20px}.topbar,.toolbar,.card__header,.toolbar__right,.usage-row,.modal__actions{flex-direction:column;align-items:stretch}.demo-grid,.stats-grid,.two-column,.two-column--wide,.form-grid,.template-grid,.auth-stats{grid-template-columns:1fr}.input--search{min-width:0}}