:root {
  --ink: #18212b;
  --muted: #71808f;
  --line: #e6e9e6;
  --paper: #f7f8f5;
  --card: #ffffff;
  --green: #2f7468;
  --green-dark: #22554d;
  --mint: #d8eee8;
  --peach: #f7dfd1;
  --gold: #e8b96b;
  --red: #bd5e5e;
  --shadow: 0 18px 60px rgba(35, 55, 63, .08);
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 82% 5%, rgba(216,238,232,.55), transparent 32rem), var(--paper); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.site-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 24px 0; display: flex; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -.03em; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; color: #fff; background: var(--green); border-radius: 11px 11px 11px 3px; }
.topnav { display: flex; gap: 24px; margin-left: 32px; font-size: 14px; color: var(--muted); }
.topnav a { padding: 8px 0; }
.topnav a:hover, .topnav a.is-active { color: var(--ink); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.balance-pill, .user-chip { padding: 8px 12px; border: 1px solid var(--line); background: rgba(255,255,255,.62); border-radius: 999px; font-size: 12px; }
.balance-pill { color: var(--green-dark); font-weight: 700; }
.user-chip { color: var(--muted); }
.page-wrap { width: min(1240px, calc(100% - 48px)); margin: 0 auto; flex: 1; padding: 42px 0 80px; }
.footer { width: min(1240px, calc(100% - 48px)); margin: auto auto 0; padding: 25px 0 35px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; color: #9aa4a8; font-size: 12px; }
.button { border: 0; border-radius: 11px; padding: 13px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 14px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .55; cursor: wait; transform: none; }
.button-primary { color: #fff; background: var(--green); box-shadow: 0 9px 22px rgba(47,116,104,.2); }
.button-primary:hover { background: var(--green-dark); }
.button-ghost { color: var(--ink); background: transparent; border: 1px solid var(--line); }
.button-soft { color: var(--green-dark); background: var(--mint); }
.button-light { color: var(--green-dark); background: #fff; }
.button-small { padding: 9px 12px; font-size: 12px; }
.button-full { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; }
.eyebrow { color: var(--green); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 700; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; letter-spacing: -.045em; }
h1 { font-size: clamp(40px, 6vw, 74px); line-height: .98; margin: 16px 0 24px; }
h1 em { color: var(--green); font-style: normal; }
h2 { font-size: clamp(27px, 3vw, 39px); margin: 10px 0 14px; }
h3 { font-size: 20px; margin-bottom: 9px; }
p { color: var(--muted); line-height: 1.7; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; padding: 46px 0 100px; }
.hero-lede { max-width: 570px; font-size: 17px; }
.hero-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; margin-top: 23px; }
.pulse { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(47,116,104,.13); }
.hero-visual { min-height: 510px; position: relative; display: grid; place-items: center; }
.orbit { position: absolute; border: 1px solid rgba(47,116,104,.17); border-radius: 50%; transform: rotate(-18deg); }
.orbit-one { width: 420px; height: 250px; }
.orbit-two { width: 320px; height: 470px; transform: rotate(35deg); }
.hero-card-main { width: min(330px, 78%); min-height: 390px; position: relative; z-index: 1; padding: 18px; color: #fff; background: linear-gradient(150deg, #327e70, #153d39); border-radius: 24px; box-shadow: 0 30px 80px rgba(31,87,77,.28); overflow: hidden; }
.hero-card-main:before { content: ''; position: absolute; inset: 0; opacity: .24; background: radial-gradient(circle at 70% 20%, #f7dfd1 0 6%, transparent 27%), linear-gradient(135deg, transparent 35%, rgba(255,255,255,.18) 35% 36%, transparent 36% 60%, rgba(255,255,255,.1) 60% 61%, transparent 61%); }
.hero-card-top, .hero-card-info, .hero-wave { position: relative; z-index: 2; display: flex; justify-content: space-between; }
.live-chip { padding: 7px 9px; border-radius: 7px; background: rgba(255,255,255,.16); font-size: 9px; letter-spacing: .1em; }
.live-chip i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #f3af8e; }
.hero-metric { opacity: .65; font-size: 11px; }
.hero-portrait { position: relative; z-index: 1; display: grid; place-items: center; height: 270px; margin: 20px 0; color: rgba(255,255,255,.82); font: 700 160px 'Space Grotesk'; background: linear-gradient(145deg, rgba(241,195,170,.85), rgba(90,146,129,.7)); border-radius: 18px; }
.hero-card-info { flex-direction: column; gap: 3px; }
.hero-card-info strong { font-size: 20px; }
.hero-card-info span { opacity: .7; font-size: 12px; }
.hero-wave { align-items: center; gap: 5px; margin-top: 22px; opacity: .8; }
.hero-wave i { width: 3px; height: 15px; display: block; border-radius: 4px; background: #fff; }
.hero-wave i:nth-child(2n) { height: 26px; }.hero-wave i:nth-child(3n) { height: 10px; }.hero-wave i:nth-child(4n) { height: 34px; }
.floating-stat { position: absolute; z-index: 2; padding: 14px 17px; border-radius: 13px; background: rgba(255,255,255,.9); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 3px; }
.floating-stat strong { font: 700 21px 'Space Grotesk'; }.floating-stat span { color: var(--muted); font-size: 11px; }.stat-top { top: 86px; right: 0; }.stat-bottom { bottom: 80px; left: 5px; }
.section-block { padding: 75px 0; }.compact-section { padding-top: 25px; }.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 30px; }.section-heading > p { max-width: 400px; margin: 0; }.section-heading-small { margin-top: 68px; }.text-link { color: var(--green); font-size: 13px; font-weight: 700; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.feature { padding: 29px; background: var(--card); border: 1px solid var(--line); border-radius: 17px; }.feature-number { display: block; margin-bottom: 48px; color: var(--green); font: 700 13px 'Space Grotesk'; }.feature p { font-size: 14px; margin-bottom: 0; }
.model-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }.model-card { border: 1px solid var(--line); border-radius: 17px; background: var(--card); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }.model-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }.model-avatar { height: 180px; display: grid; place-items: center; position: relative; color: rgba(255,255,255,.8); font: 700 94px 'Space Grotesk'; background: linear-gradient(145deg, #dcb7a5, #6e9c8d); }.model-card:nth-child(2n) .model-avatar { background: linear-gradient(145deg, #b9d1ca, #5c8078); }.model-card:nth-child(3n) .model-avatar { background: linear-gradient(145deg, #f0c6b3, #a57f74); }.status-dot { position: absolute; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #b7c0c0; }.model-avatar .status-dot { right: 15px; top: 15px; width: 12px; height: 12px; border: 3px solid rgba(255,255,255,.65); }.status-dot.is-online { background: #65bd93; box-shadow: 0 0 0 4px rgba(101,189,147,.16); }.model-card-body { padding: 20px; }.model-card h3 { margin: 6px 0 8px; }.model-card p { min-height: 48px; font-size: 13px; }.model-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }.model-meta a { color: var(--green); font-weight: 700; }
.callout { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin: 35px 0 0; padding: 40px 45px; color: #fff; background: var(--green-dark); border-radius: 22px; }.callout h2 { max-width: 600px; }.callout p { max-width: 690px; color: rgba(255,255,255,.7); }.callout code, code { padding: 2px 5px; color: var(--green-dark); background: var(--mint); border-radius: 4px; font-size: .9em; }
.page-intro { max-width: 720px; padding: 25px 0 45px; }.page-intro h1 { font-size: clamp(40px, 5vw, 62px); }.page-intro p { font-size: 17px; }.filter-row { display: flex; justify-content: space-between; padding: 14px 0 20px; color: var(--muted); font-size: 13px; }.filter-note { display: inline-flex; gap: 8px; align-items: center; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.price-card { padding: 29px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }.price-card.is-featured { border-color: var(--green); box-shadow: var(--shadow); }.price { margin: 25px 0 12px; font: 700 39px 'Space Grotesk'; }.price small { color: var(--muted); font: 400 13px 'DM Sans'; }.price-card p { min-height: 74px; font-size: 13px; }.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }.package-card { display: flex; justify-content: space-between; align-items: center; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }.package-card div { display: flex; flex-direction: column; gap: 5px; }.package-card span { color: var(--muted); font-size: 12px; }
.card { padding: 27px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 8px 25px rgba(35,55,63,.025); }.card-heading { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 18px; }.card-heading h2 { margin-bottom: 0; font-size: 25px; }.muted { color: var(--muted); }.muted-panel { background: rgba(255,255,255,.65); }.empty-state { padding: 70px 30px; text-align: center; border: 1px dashed #cbd8d4; border-radius: 18px; background: rgba(255,255,255,.55); }.empty-state p { max-width: 460px; margin: 10px auto 20px; }.empty-icon { color: var(--green); font: 700 38px 'Space Grotesk'; margin-bottom: 10px; }
.auth-layout, .setup-layout { display: grid; grid-template-columns: 1fr 480px; gap: 80px; align-items: center; min-height: 620px; max-width: 1080px; margin: auto; }.auth-art h1 { max-width: 620px; }.auth-art p { max-width: 530px; font-size: 17px; }.auth-card h2 { margin-top: 12px; }.stack-form { display: flex; flex-direction: column; gap: 16px; margin-top: 23px; }.stack-form label { display: flex; flex-direction: column; gap: 7px; color: var(--ink); font-size: 13px; font-weight: 700; }.stack-form input, .stack-form textarea, .stack-form select, .inline-form input { width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 9px; outline: 0; color: var(--ink); background: #fcfdfb; }.stack-form input:focus, .stack-form textarea:focus, .stack-form select:focus, .inline-form input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(47,116,104,.1); }.form-hint { color: var(--muted); font-size: 11px; line-height: 1.5; }.auth-switch { margin-top: 20px; color: var(--muted); font-size: 13px; text-align: center; }.auth-switch a { color: var(--green); font-weight: 700; }.wide-card { width: 100%; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.mysql-fields { display: none; padding: 15px; background: #f7f9f6; border: 1px solid var(--line); border-radius: 11px; }.mysql-fields.is-visible { display: flex; flex-direction: column; gap: 15px; }.setup-list { display: grid; gap: 11px; color: var(--green-dark); font-size: 13px; font-weight: 600; }
.notice { padding: 14px 17px; margin-bottom: 18px; border-radius: 10px; font-size: 13px; line-height: 1.5; }.notice-success { color: #276354; background: #e1f1eb; border: 1px solid #c8e7dc; }.notice-error { color: #8d4848; background: #f9e8e4; border: 1px solid #f0cfca; }.notice-warning { color: #7c5b2b; background: #fdf2dc; border: 1px solid #f3dfb3; margin-top: 28px; }.notice small { color: inherit; opacity: .8; }
.profile-hero { display: grid; grid-template-columns: 170px 1fr auto; gap: 30px; align-items: center; padding: 40px 0 50px; }.profile-avatar { width: 170px; height: 170px; position: relative; display: grid; place-items: center; color: rgba(255,255,255,.8); font: 700 85px 'Space Grotesk'; background: linear-gradient(145deg, #dcb7a5, #6e9c8d); border-radius: 28px; }.profile-avatar .status-dot { right: 17px; top: 17px; width: 14px; height: 14px; border: 3px solid #fff; }.profile-hero-copy h1 { margin: 10px 0 13px; font-size: clamp(42px, 5vw, 64px); }.profile-hero-copy p { max-width: 620px; }.profile-tags { display: flex; flex-wrap: wrap; gap: 8px; }.profile-tags span { padding: 8px 11px; border-radius: 8px; color: var(--green-dark); background: var(--mint); font-size: 11px; }.live-layout { display: grid; grid-template-columns: 1fr 300px; gap: 19px; }.live-console { padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }.video-stage { min-height: 420px; position: relative; display: grid; place-items: center; color: var(--muted); background: #132c2d; border-radius: 13px; overflow: hidden; }.video-stage video { width: 100%; height: 100%; min-height: 420px; object-fit: cover; opacity: 0; }.video-stage.has-video video { opacity: 1; }.video-placeholder { display: grid; place-items: center; gap: 6px; position: absolute; inset: 0; padding: 25px; text-align: center; color: rgba(255,255,255,.75); }.video-placeholder strong { color: #fff; }.video-placeholder small { font-size: 12px; }.video-placeholder.is-hidden { display: none; }.placeholder-icon { display: block; color: #86cabb; font-size: 30px; }.console-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-top: 13px; }.inline-form { display: flex; gap: 8px; align-items: center; }.tip-form { width: 185px; }.tip-form input { width: 75px; }.console-actions { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 12px; }.console-actions span { color: var(--muted); font-size: 12px; }.profile-side { display: grid; align-content: start; gap: 17px; }.clean-list { display: grid; gap: 12px; padding: 0; margin: 18px 0 0; list-style: none; color: var(--muted); font-size: 13px; line-height: 1.5; }.clean-list li { padding-left: 19px; position: relative; }.clean-list li:before { content: '✓'; position: absolute; left: 0; color: var(--green); }.big-stat { color: var(--green); font: 700 53px 'Space Grotesk'; }
.dashboard-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding-bottom: 28px; }.dashboard-head h1 { font-size: clamp(38px, 5vw, 58px); margin-bottom: 15px; }.dashboard-head p { max-width: 630px; }.balance-card, .status-card, .admin-key { min-width: 195px; padding: 19px; border: 1px solid var(--line); border-radius: 16px; background: #fff; display: flex; flex-direction: column; gap: 6px; }.balance-card span, .status-card span, .admin-key span { color: var(--muted); font-size: 11px; }.balance-card strong { color: var(--green); font: 700 40px 'Space Grotesk'; }.balance-card a, .status-card a { color: var(--green); font-size: 12px; font-weight: 700; }.status-card { flex-direction: row; flex-wrap: wrap; align-items: center; }.status-card strong { font-size: 13px; }.status-card a { width: 100%; }.status-card.is-online { border-color: #a7d8c6; }.admin-key strong { font-size: 13px; }.tabs { display: flex; gap: 24px; margin-bottom: 29px; border-bottom: 1px solid var(--line); }.tab { padding: 11px 0; color: var(--muted); border-bottom: 2px solid transparent; font-size: 13px; }.tab.is-active { color: var(--green); border-bottom-color: var(--green); }.dashboard-grid, .admin-grid { display: grid; grid-template-columns: 1fr 310px; gap: 18px; }.dashboard-grid aside, .admin-grid aside { display: grid; align-content: start; gap: 18px; }.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 19px; }.stat-card { padding: 21px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }.stat-card span, .stat-card small { display: block; color: var(--muted); font-size: 11px; }.stat-card strong { display: block; margin: 10px 0 3px; color: var(--green); font: 700 34px 'Space Grotesk'; }.callout-list { display: grid; gap: 10px; margin-top: 22px; }.callout-list div { display: flex; gap: 20px; padding: 12px 0; border-top: 1px solid var(--line); }.callout-list strong { width: 55px; color: var(--green); font-size: 12px; }.callout-list span { color: var(--muted); font-size: 13px; }
.table-wrap { width: 100%; overflow-x: auto; }.table-wrap table { width: 100%; border-collapse: collapse; font-size: 12px; }.table-wrap th { padding: 10px 8px; text-align: left; color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }.table-wrap td { padding: 14px 8px; border-top: 1px solid var(--line); vertical-align: middle; }.table-wrap td small { display: block; margin-top: 4px; color: var(--muted); }.amount { font-weight: 700; }.amount.positive { color: var(--green); }.amount.negative { color: var(--red); }.table-empty { padding: 28px 8px !important; color: var(--muted); text-align: center; }.badge { display: inline-block; padding: 6px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }.badge-neutral { color: #68777b; background: #eef1ef; }.badge-success { color: #276354; background: #dff1ea; }.badge-warning { color: #866029; background: #fff0cb; }
.studio-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 19px; }.studio-card { padding: 18px; }.studio-toolbar { display: flex; justify-content: space-between; align-items: start; margin-bottom: 15px; }.studio-toolbar h2 { margin-bottom: 0; }.studio-video { min-height: 500px; position: relative; display: grid; place-items: center; background: #132c2d; border-radius: 13px; overflow: hidden; }.studio-video video { width: 100%; min-height: 500px; object-fit: cover; transform: scaleX(-1); }.studio-video .video-placeholder { position: absolute; }.studio-video .video-placeholder.is-hidden { display: none; }.check-list { display: grid; gap: 16px; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.55; }.playback-card { max-width: 890px; }.protected-video { width: 100%; max-height: 640px; background: #132c2d; border-radius: 12px; }.video-placeholder.large { position: relative; min-height: 400px; background: #132c2d; border-radius: 12px; }.playback-meta { display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-top: 17px; color: var(--muted); font-size: 12px; }
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }.video-card { padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }.video-thumb { min-height: 160px; display: grid; place-items: center; position: relative; color: #fff; background: linear-gradient(145deg, #325f5c, #173535); border-radius: 10px; font-size: 35px; }.video-thumb small { position: absolute; right: 9px; bottom: 8px; padding: 5px; color: #d6eee8; background: rgba(0,0,0,.2); border-radius: 4px; font-size: 9px; }.video-card h3 { margin: 16px 0 7px; font-size: 17px; }.video-card p { margin: 0; font-size: 12px; }
@media (max-width: 960px) { .hero, .auth-layout, .setup-layout { grid-template-columns: 1fr; gap: 30px; }.hero-visual { min-height: 430px; order: -1; }.profile-hero { grid-template-columns: 120px 1fr; }.profile-avatar { width: 120px; height: 120px; font-size: 60px; }.profile-hero-action { grid-column: 2; }.model-grid { grid-template-columns: repeat(2, 1fr); }.feature-grid, .pricing-grid, .package-grid, .video-grid { grid-template-columns: 1fr 1fr; }.dashboard-grid, .admin-grid, .studio-layout, .live-layout { grid-template-columns: 1fr; }.stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .topbar { width: min(100% - 28px, 1240px); flex-wrap: wrap; gap: 16px; }.topnav { order: 3; width: 100%; margin-left: 0; gap: 17px; overflow-x: auto; }.top-actions { margin-left: auto; }.user-chip { display: none; }.page-wrap, .footer { width: min(100% - 28px, 1240px); }.footer { flex-direction: column; }.hero { padding-top: 20px; padding-bottom: 55px; }.hero-visual { min-height: 370px; }.hero-card-main { min-height: 330px; }.hero-portrait { height: 210px; }.stat-top { right: -5px; top: 35px; }.stat-bottom { left: -4px; bottom: 30px; }.feature-grid, .model-grid, .pricing-grid, .package-grid, .video-grid, .form-grid, .stat-grid { grid-template-columns: 1fr; }.section-heading, .dashboard-head, .callout { align-items: start; flex-direction: column; }.profile-hero { grid-template-columns: 1fr; }.profile-hero-action { grid-column: auto; }.profile-avatar { width: 115px; height: 115px; }.console-row { grid-template-columns: 1fr; }.tip-form { width: 100%; }.console-actions { align-items: start; flex-direction: column; }.auth-layout, .setup-layout { min-height: auto; padding: 30px 0; }.auth-art h1 { font-size: 48px; }.studio-video, .studio-video video { min-height: 340px; }.video-stage, .video-stage video { min-height: 270px; } }