:root {
  color-scheme: dark;
  --bg: #07111b;
  --bg-deep: #050c13;
  --panel: #0d1b29;
  --panel-soft: #122333;
  --line: rgba(185, 216, 224, .13);
  --line-strong: rgba(185, 216, 224, .23);
  --text: #f5f8f7;
  --muted: #9aadb6;
  --cyan: #7ee2d4;
  --lime: #c8f2a0;
  --orange: #eab477;
  --sans: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.hidden { display: none !important; }

.brand { display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; line-height: 1.15; }
.brand strong { display: block; font-size: 19px; letter-spacing: -.035em; font-weight: 760; }
.brand small { display: block; margin-top: 5px; color: #8faab3; font-size: 10px; letter-spacing: .18em; }
.brand-symbol { width: 37px; height: 37px; border: 1px solid rgba(126,226,212,.48); border-radius: 11px; display: flex; align-items: flex-end; justify-content: center; gap: 4px; padding: 7px; background: linear-gradient(145deg, rgba(126,226,212,.2), rgba(126,226,212,.02)); box-shadow: inset 0 0 22px rgba(126,226,212,.08); }
.brand-symbol span { width: 4px; border-radius: 4px; background: var(--cyan); transform: skewX(-16deg); }
.brand-symbol span:nth-child(1) { height: 12px; opacity: .6; }
.brand-symbol span:nth-child(2) { height: 20px; }
.brand-symbol span:nth-child(3) { height: 15px; opacity: .8; }

.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 0 21px; border-radius: 8px; border: 1px solid transparent; font-size: 14px; font-weight: 700; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button span { font-size: 18px; line-height: 1; font-weight: 400; }
.button-primary { background: var(--cyan); color: #06231f; box-shadow: 0 8px 34px rgba(73,200,177,.16); }
.button-primary:hover { background: #a6f5e9; box-shadow: 0 12px 40px rgba(73,200,177,.26); }
.button-outline { border-color: rgba(126,226,212,.38); background: rgba(9,24,33,.5); color: #dffaf3; }
.button-outline:hover { border-color: var(--cyan); }
.button-quiet { color: #dce8e8; padding-left: 12px; }
.button-quiet:hover { color: var(--cyan); }
.section-index { display: inline-block; color: var(--cyan); font-size: 11px; font-weight: 750; letter-spacing: .22em; text-transform: uppercase; }

.landing { overflow-x: clip; }
.ambient { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.ambient-one { top: 350px; right: 0; width: 600px; height: 600px; background: rgba(49,101,107,.11); }
.ambient-two { top: 1250px; left: -280px; width: 550px; height: 550px; background: rgba(83,134,113,.07); }
.site-header { height: 86px; padding: 0 max(5vw, 24px); display: flex; align-items: center; justify-content: space-between; position: absolute; z-index: 5; inset: 0 0 auto; border-bottom: 1px solid rgba(255,255,255,.09); background: rgba(5,12,19,.26); backdrop-filter: blur(16px); }
.site-header nav { display: flex; align-items: center; gap: clamp(22px,3.3vw,55px); color: #cedbd9; font-size: 13px; }
.site-header nav a:hover { color: var(--cyan); }
.header-cta { min-height: 40px; font-size: 12px; }

.hero { min-height: 780px; height: min(910px, 100svh); position: relative; display: grid; grid-template-columns: 52% 48%; align-items: center; padding: 100px max(5vw,24px) 40px; isolation: isolate; background: #0c151a; }
.hero-photo { position: absolute; inset: 0; z-index: -3; background: linear-gradient(90deg, rgba(5,12,19,.94) 0%, rgba(5,12,19,.78) 42%, rgba(5,12,19,.4) 77%, rgba(5,12,19,.28)), linear-gradient(0deg, #07111b 1%, transparent 28%), url("./assets/hero-restaurant-ai-bg.png") center 54% / cover no-repeat; }
.hero-grid { position: absolute; inset: 0; z-index: -2; opacity: .28; background-image: linear-gradient(rgba(129,226,213,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(129,226,213,.08) 1px, transparent 1px); background-size: 74px 74px; mask-image: linear-gradient(90deg, #000, transparent 72%); }
.hero::before { content: ""; position: absolute; top: 6%; left: -20%; width: 66%; height: 70%; z-index: -1; background: radial-gradient(ellipse, rgba(74,175,168,.13), transparent 65%); filter: blur(30px); }
.hero-content { position: relative; z-index: 1; max-width: 690px; padding-bottom: 30px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #b4e5db; border: 1px solid rgba(126,226,212,.25); background: rgba(18,55,56,.23); padding: 9px 14px; border-radius: 99px; font-size: 11px; font-weight: 650; letter-spacing: .13em; }
.pulse-dot, .live-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--cyan); box-shadow: 0 0 0 5px rgba(126,226,212,.12); }
.hero h1 { font-size: clamp(52px, 5.55vw, 90px); line-height: 1.12; letter-spacing: -.07em; margin: 28px 0 26px; font-weight: 780; }
.hero h1 em { font-style: normal; color: var(--cyan); }
.hero-content > p { max-width: 540px; margin: 0; color: #d1dbd7; font-size: clamp(15px,1.35vw,19px); line-height: 1.95; }
.hero-actions { display: flex; gap: 18px; align-items: center; margin-top: 36px; }
.hero-note { display: flex; align-items: center; gap: 14px; margin-top: 53px; color: #abc3c3; font-size: 12px; letter-spacing: .04em; }
.hero-note-line { width: 24px; height: 1px; background: var(--cyan); }
.hero-showcase { width: min(100%,620px); position: relative; justify-self: end; margin-top: 50px; filter: drop-shadow(0 40px 90px rgba(0,0,0,.3)); }
.showcase-window { border: 1px solid rgba(187,232,228,.26); border-radius: 19px; overflow: hidden; background: linear-gradient(138deg, rgba(13,34,43,.94), rgba(8,20,29,.82)); backdrop-filter: blur(26px); box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 30px 85px rgba(0,0,0,.28); transform: perspective(1100px) rotateY(-8deg) rotateX(3deg); }
.window-top { min-height: 45px; padding: 0 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: #bdcdd0; font-size: 11px; letter-spacing: .05em; }
.window-dots { display: flex; gap: 5px; }.window-dots i { height: 5px; width: 5px; border-radius: 50%; background: #7ba4a4; opacity: .7; }
.window-status { color: var(--cyan); }
.showcase-inner { display: grid; grid-template-columns: 1fr .8fr; gap: 14px; padding: 22px; }
.showcase-summary, .showcase-metric, .showcase-chat { border: 1px solid var(--line); border-radius: 12px; background: rgba(13,30,40,.74); padding: 22px; }
.showcase-summary > span, .showcase-metric > span:first-child { display: block; color: #a7bdc1; font-size: 11px; }
.showcase-summary strong { display: block; font-size: clamp(35px,3.1vw,50px); letter-spacing: -.07em; margin: 17px 0 8px; font-weight: 620; }
.showcase-summary strong span { font-size: .48em; }
.showcase-summary small { color: #88a3a5; font-size: 10px; }
.showcase-metric strong { display: block; margin-top: 21px; font-size: clamp(22px,2vw,29px); font-weight: 600; letter-spacing: -.04em; }
.micro-chart { display: flex; height: 48px; gap: 7px; align-items: end; margin-top: 16px; }.micro-chart i { flex: 1; background: linear-gradient(0deg,rgba(107,213,193,.15),var(--cyan)); border-radius: 3px 3px 0 0; opacity: .7; }.micro-chart i:nth-child(1){height:35%}.micro-chart i:nth-child(2){height:55%}.micro-chart i:nth-child(3){height:41%}.micro-chart i:nth-child(4){height:64%}.micro-chart i:nth-child(5){height:50%}.micro-chart i:nth-child(6){height:73%}.micro-chart i:nth-child(7){height:63%}.micro-chart i:nth-child(8){height:79%}.micro-chart i:nth-child(9){height:94%}
.showcase-chat { grid-column: 1 / -1; min-height: 180px; }
.chat-label { display: block; color: #a7bdc1; font-size: 11px; margin-bottom: 18px; }
.chat-user { margin-left: auto; width: max-content; max-width: 85%; padding: 10px 15px; border-radius: 11px 11px 2px 11px; background: rgba(111,210,190,.21); color: #ebfff7; font-size: 12px; }
.chat-agent { display: flex; align-items: flex-start; gap: 10px; width: max-content; max-width: 90%; margin-top: 12px; padding: 10px 14px; border: 1px solid rgba(139,211,205,.14); border-radius: 11px 11px 11px 2px; background: #172e37; font-size: 12px; line-height: 1.65; }
.chat-agent small { color: #9cbfc1; font-size: 10px; }
.chat-agent-icon { color: var(--cyan); }
.floating-chip { position: absolute; bottom: 3%; left: -7%; display: flex; gap: 10px; align-items: center; padding: 13px 17px; border: 1px solid rgba(151,225,209,.34); border-radius: 11px; background: rgba(9,29,31,.9); backdrop-filter: blur(14px); font-size: 12px; box-shadow: 0 16px 36px rgba(0,0,0,.24); }
.floating-chip > span { color: var(--cyan); font-size: 22px; }.floating-chip small { display: block; color: #93acaa; margin-top: 3px; }
.showcase-caption { display: block; text-align: right; color: #acc0be; font-size: 10px; margin: 12px 10px 0; }
.hero-scroll { position: absolute; bottom: 35px; left: max(5vw,24px); display: flex; gap: 18px; color: #95acae; font-size: 10px; letter-spacing: .2em; }
.hero-scroll span { color: var(--cyan); }

.section { position: relative; padding: clamp(95px,10vw,150px) max(5vw,24px); }
.section-heading { max-width: 720px; margin-bottom: 46px; }
.section-heading h2, .trust-copy h2, .cta-section h2 { margin: 16px 0 14px; font-size: clamp(37px,4vw,62px); letter-spacing: -.065em; line-height: 1.22; }
.section-heading p, .trust-copy > p { max-width: 620px; color: var(--muted); line-height: 1.9; font-size: 15px; }
.section-intro { background: #07111b; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 17px; }
.feature-card { min-height: 350px; display: flex; flex-direction: column; position: relative; overflow: hidden; padding: 30px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(147deg,#112334,#0b1925); }
.feature-card::after { content: ""; position: absolute; top: -50%; right: -45%; height: 90%; width: 90%; border-radius: 50%; background: radial-gradient(ellipse,rgba(110,218,199,.07),transparent 70%); }
.feature-primary { border-color: rgba(126,226,212,.28); background: linear-gradient(150deg,#17403d,#0d232d 61%,#0b1925); }
.feature-icon { height: 49px; width: 49px; display: grid; place-items: center; border: 1px solid rgba(126,226,212,.3); border-radius: 10px; background: rgba(126,226,212,.08); color: var(--cyan); font-size: 25px; }
.feature-no { position: absolute; top: 34px; right: 30px; color: #718d93; font-size: 11px; letter-spacing: .14em; }
.feature-card h3 { margin: 51px 0 11px; font-size: 23px; letter-spacing: -.03em; }
.feature-card p { margin: 0; max-width: 350px; color: #abc0c4; line-height: 1.85; font-size: 13px; }
.feature-example, .feature-bottom { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); color: #e9fbf4; font-size: 12px; }
.feature-example span { display: block; color: var(--cyan); margin-top: 6px; }
.feature-bottom { display: flex; justify-content: space-between; color: #a9c4c0; }
.feature-bottom span { color: var(--cyan); }
.workflow-section { background: #0b1925; }
.workflow-line { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line-strong); }
.workflow-step { position: relative; display: flex; flex-direction: column; padding: 26px 24px 0 0; min-height: 190px; }
.workflow-step::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); position: absolute; top: -4px; left: 0; box-shadow: 0 0 0 8px rgba(126,226,212,.08); }
.step-number { color: var(--cyan); font-size: 11px; letter-spacing: .13em; }
.workflow-step h3 { margin: 37px 0 8px; font-size: 18px; }.workflow-step p { max-width: 230px; margin: 0; color: #97afb5; font-size: 12px; line-height: 1.8; }
.trust-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 9vw; background: #07111b; }
.trust-visual { width: min(100%,500px); aspect-ratio: 1; position: relative; display: grid; place-items: center; margin: 0 auto; }
.trust-ring { position: absolute; border: 1px solid rgba(126,226,212,.24); border-radius: 50%; }.ring-one { width: 66%; aspect-ratio: 1; box-shadow: inset 0 0 50px rgba(126,226,212,.05), 0 0 30px rgba(126,226,212,.04); }.ring-two { width: 100%; aspect-ratio: 1; border-style: dashed; opacity: .4; }
.trust-ring::before { content: ""; position: absolute; width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; top: 13%; right: 15%; }
.trust-center { display: grid; place-items: center; width: 31%; aspect-ratio: 1; border: 1px solid rgba(126,226,212,.5); border-radius: 22px; background: radial-gradient(circle at 50% 0,rgba(126,226,212,.2),#11272b 70%); color: var(--cyan); font-size: 44px; box-shadow: 0 0 70px rgba(126,226,212,.12); }
.trust-center small { font-size: 11px; margin-top: -36px; color: #dfefeb; }
.trust-tag { position: absolute; padding: 9px 14px; border: 1px solid rgba(126,226,212,.22); border-radius: 7px; background: #112430; color: #d4e9e6; font-size: 11px; box-shadow: 0 10px 27px rgba(0,0,0,.23); }
.tag-a { top: 15%; left: 3%; }.tag-b { bottom: 17%; right: 0; }.tag-c { bottom: 10%; left: 1%; color: var(--cyan); }
.trust-copy { max-width: 620px; }.trust-copy ul { list-style: none; padding: 0; margin: 32px 0 0; }.trust-copy li { display: flex; gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); color: #dceae6; font-size: 13px; }.trust-copy li span { color: var(--cyan); }
.cta-section { margin: 30px max(5vw,24px) 0; padding: 100px 8vw; text-align: center; border: 1px solid rgba(126,226,212,.23); border-radius: 18px; background: radial-gradient(ellipse at 50% -25%,rgba(126,226,212,.23),transparent 65%),linear-gradient(150deg,#112c32,#0c1b27); }
.cta-section p { color: #a9bfbe; font-size: 14px; margin: 0 0 28px; }.cta-section h2 { font-size: clamp(43px,4.5vw,70px); }
.site-footer { padding: 70px max(5vw,24px) 35px; display: grid; grid-template-columns: 1fr auto; gap: 17px; border-top: 1px solid var(--line); margin-top: 90px; }.site-footer > p { color: #8da4a9; margin: 0; font-size: 12px; }.site-footer > div:not(.brand) { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 25px; align-items: center; font-size: 12px; color: #b5c9c8; }.site-footer > small { grid-column: 1 / -1; color: #6b8389; font-size: 10px; margin-top: 45px; }.site-footer a:hover { color: var(--cyan); }

/* Auth and product workspace */
.workspace-page { min-height: 100svh; background: #091520; }
.auth-screen { min-height: 100svh; display: flex; align-items: center; flex-direction: column; padding: 26px 20px 36px; background: radial-gradient(ellipse at 54% 5%,rgba(53,132,132,.19),transparent 43%),linear-gradient(135deg,rgba(125,220,206,.04) 1px,transparent 1px),#07111b; background-size: auto,44px 44px,auto; }
.auth-screen > .brand { align-self: flex-start; }
.auth-card { width: min(100%,490px); margin: auto 0; padding: clamp(28px,4vw,45px); border: 1px solid rgba(130,218,207,.21); border-radius: 16px; background: rgba(12,29,40,.91); box-shadow: 0 25px 100px rgba(0,0,0,.28); }
.auth-mark { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(126,226,212,.28); border-radius: 12px; background: rgba(126,226,212,.08); color: var(--cyan); font-size: 23px; margin-bottom: 28px; }
.auth-card h1 { margin: 13px 0; font-size: 41px; line-height: 1.18; letter-spacing: -.06em; }.auth-card > p:not(.form-error) { color: #a9bdc0; line-height: 1.8; font-size: 13px; margin-bottom: 25px; }
.auth-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin-bottom: 25px; }.auth-tabs button { border: 0; background: transparent; color: #9db1b7; padding: 12px 0; border-bottom: 2px solid transparent; font-size: 13px; }.auth-tabs button.active { color: var(--cyan); border-bottom-color: var(--cyan); font-weight: 700; }
.form-stack { display: grid; gap: 17px; }.form-stack label { display: grid; gap: 8px; color: #d5e3e1; font-size: 12px; font-weight: 650; }.form-stack input, .form-stack textarea, .form-stack select { width: 100%; min-height: 44px; color: #f4f9f7; background: #0a1925; border: 1px solid rgba(154,194,198,.23); border-radius: 8px; padding: 10px 13px; outline: none; font-size: 13px; transition: border-color .15s,box-shadow .15s; }.form-stack textarea { resize: vertical; line-height: 1.8; }.form-stack select { appearance: none; background-image: linear-gradient(45deg,transparent 50%,#7ee2d4 50%),linear-gradient(135deg,#7ee2d4 50%,transparent 50%); background-position: calc(100% - 19px) 19px,calc(100% - 14px) 19px; background-size: 5px 5px; background-repeat: no-repeat; }.form-stack input:focus, .form-stack textarea:focus, .form-stack select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(126,226,212,.1); }.form-stack input::placeholder, .form-stack textarea::placeholder { color: #657e87; }.form-stack .button { margin-top: 4px; width: 100%; justify-content: space-between; }.form-error { min-height: 20px; color: #ff9f91 !important; font-size: 12px !important; margin: 12px 0 0 !important; }.auth-foot { color: #6e8c90; font-size: 11px; }
.workspace { min-height: 100svh; display: grid; grid-template-columns: 225px minmax(0,1fr); }
.sidebar { display: flex; flex-direction: column; padding: 28px 17px; border-right: 1px solid var(--line); background: #0a1824; }.sidebar .brand { margin: 0 10px 60px; }.sidebar-section-label { margin: 0 14px 16px; color: #739097; font-size: 10px; letter-spacing: .18em; }.sidebar-nav { display: grid; gap: 6px; }.sidebar-nav a { display: flex; gap: 13px; align-items: center; padding: 13px 15px; border-radius: 8px; color: #a9bdc1; font-size: 12px; }.sidebar-nav a span { width: 17px; text-align: center; font-size: 18px; }.sidebar-nav a:hover, .sidebar-nav a.active { background: rgba(126,226,212,.09); color: var(--cyan); }.sidebar-bottom { margin-top: auto; border-top: 1px solid var(--line); padding: 23px 12px 0; color: #cbdcd7; font-size: 11px; line-height: 1.7; }.sidebar-bottom .live-dot { width: 5px; height: 5px; margin-right: 8px; }.sidebar-bottom small { color: #789398; margin-left: 17px; }
.workspace-main { min-width: 0; }.workspace-header { height: 72px; display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(24px,4vw,65px); border-bottom: 1px solid var(--line); background: rgba(11,27,39,.8); }.workspace-breadcrumb { color: #78939b; font-size: 12px; }.workspace-breadcrumb span { margin: 0 10px; color: #53717c; }.workspace-breadcrumb strong { color: #d5e7e4; font-weight: 600; }.header-user { display: flex; align-items: center; gap: 23px; color: #cadcd9; font-size: 12px; }.text-button { border: 0; padding: 0; background: transparent; color: var(--cyan); font-size: 12px; }.text-button:hover { text-decoration: underline; }.workspace-content { max-width: 1450px; margin: 0 auto; padding: clamp(35px,5vw,70px) clamp(24px,4vw,65px) 90px; }
.dashboard-title { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }.dashboard-title h1 { margin: 13px 0 12px; font-size: clamp(37px,4vw,60px); line-height: 1.19; letter-spacing: -.065em; }.dashboard-title p { color: #93abb1; font-size: 13px; margin: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 20px; }.stat-card { display: flex; flex-direction: column; min-height: 180px; padding: 24px; border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(135deg,#132638,#0f1f2b); }.stat-card > span { color: #9bb3b6; font-size: 12px; }.stat-card strong { margin-top: 30px; font-size: clamp(25px,2.5vw,37px); font-weight: 670; letter-spacing: -.05em; }.stat-card small { color: #78939b; margin-top: 6px; font-size: 11px; }.stat-revenue { border-color: rgba(126,226,212,.28); background: linear-gradient(135deg,#1c4546,#102932); }.stat-revenue strong { color: #d8fff0; }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: 11px; background: #0d1d2b; padding: 25px; }.panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 25px; }.panel-heading h2 { margin: 8px 0 0; font-size: 19px; letter-spacing: -.025em; }.panel-heading a { color: var(--cyan); font-size: 12px; }.table-scroll { overflow-x: auto; }.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }.data-table th { color: #829ca3; font-weight: 500; border-bottom: 1px solid var(--line); padding: 13px 8px; white-space: nowrap; }.data-table td { border-bottom: 1px solid rgba(168,202,209,.08); padding: 16px 8px; color: #d3e1df; }.data-table tr:last-child td { border-bottom: none; }.data-table td:last-child, .data-table th:last-child { text-align: right; }.data-table .empty-row { text-align: center; color: #78949a; padding: 44px 10px; }.tag { display: inline-flex; border-radius: 5px; padding: 5px 8px; color: #a9ede1; background: rgba(126,226,212,.11); font-size: 11px; }.tag.warn { color: #f4cb99; background: rgba(234,180,119,.11); }.tag.off { color: #9caab0; background: rgba(153,171,182,.1); }
.record-layout, .admin-layout { display: grid; grid-template-columns: 1.05fr .95fr; align-items: start; gap: 18px; }.record-panel, .draft-panel { min-height: 370px; }.notice { display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; padding: 14px; border: 1px solid rgba(234,180,119,.15); border-radius: 8px; background: rgba(234,180,119,.06); color: #b8c0bd; font-size: 11px; line-height: 1.7; }.notice > span { display: grid; place-items: center; width: 19px; height: 19px; flex: 0 0 auto; border-radius: 50%; color: var(--orange); border: 1px solid currentColor; }.notice p { margin: 0; }.draft-placeholder { display: grid; place-items: center; min-height: 220px; color: #78939b; text-align: center; font-size: 12px; }.field-hint { margin: -4px 0 0; color: #8ba3a8; font-size: 11px; line-height: 1.7; }.preferences-panel { max-width: 740px; }.admin-note ul { list-style: none; padding: 0; margin: 0; }.admin-note li { padding: 12px 0; border-bottom: 1px solid var(--line); color: #d1dedb; font-size: 12px; }.admin-note li span { color: var(--cyan); margin-right: 12px; }.admin-note > p { color: #849da2; font-size: 11px; line-height: 1.7; margin-top: 22px; }.admin-layout { margin-bottom: 18px; }.invite-result { display: grid; gap: 8px; margin-top: 25px; padding: 17px; border: 1px solid rgba(126,226,212,.3); border-radius: 8px; background: rgba(126,226,212,.07); }.invite-result span,.invite-result small { color: #9cb9b6; font-size: 11px; }.invite-result strong { color: #dffef6; font-size: 16px; overflow-wrap: anywhere; }
.toast { position: fixed; z-index: 30; bottom: 25px; right: 25px; max-width: min(360px,calc(100vw - 40px)); padding: 13px 17px; border: 1px solid rgba(126,226,212,.3); border-radius: 8px; color: #dffcf7; background: #173138; box-shadow: 0 13px 35px rgba(0,0,0,.24); font-size: 12px; }
.channel-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-bottom: 18px; }
.channel-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 230px; }
.channel-card h2 { margin: 0 0 16px; font-size: 21px; }
.channel-card p { color: #9cb1b7; font-size: 13px; line-height: 1.8; flex: 1; }
.channel-card .channel-bitable-status { flex: initial; margin: 10px 0 0; color: #7ee2d4; }
.channel-group-tools { display: grid; gap: 10px; width: 100%; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.channel-group-tools p { flex: initial; margin: 0; }
.channel-group-list { display: grid; gap: 7px; }
.channel-group-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; color: #a9c4c5; font-size: 12px; }
.channel-card .button { align-self: stretch; margin-top: 18px; }
.channel-bind-result { margin: 0 0 18px; display: grid; gap: 12px; }
.channel-bind-result strong { font-size: 25px; letter-spacing: .04em; color: #dffef6; overflow-wrap: anywhere; }
.channel-bind-result p { margin: 0; color: #d4e4e1; }
.channel-bind-result small { color: #90a8aa; }
.channel-qr-panel { display: flex; align-items: center; justify-content: space-between; gap: 28px; max-width: 760px; margin: 0 0 18px; }
.channel-qr-panel h2 { margin: 9px 0; font-size: 21px; }
.channel-qr-panel p { max-width: 390px; color: #9cb1b7; font-size: 12px; line-height: 1.8; }
.channel-qr-panel img { display: block; width: 240px; height: 240px; padding: 9px; border-radius: 12px; background: #fff; image-rendering: pixelated; }
.assistant-chat-panel { display: flex; flex-direction: column; gap: 18px; min-height: 560px; max-width: 900px; }
.assistant-chat-log { display: flex; flex: 1; flex-direction: column; gap: 14px; min-height: 320px; max-height: 55vh; overflow-y: auto; padding: 8px 2px; }
.assistant-chat-empty { margin: auto; max-width: 420px; color: #9cb1b7; text-align: center; line-height: 1.8; }
.assistant-chat-message { max-width: min(78%, 660px); padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px; }
.assistant-chat-message.from-assistant { align-self: flex-start; background: #0d1a28; }
.assistant-chat-message.from-user { align-self: flex-end; background: #102b37; border-color: #22505a; }
.assistant-chat-role { color: var(--accent); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.assistant-chat-message p { margin: 7px 0 0; color: #e2eaeb; font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-chat-form { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.assistant-chat-form textarea { width: 100%; resize: vertical; }
.assistant-chat-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.assistant-chat-actions small { color: #8299a0; line-height: 1.6; }
@media (max-width: 600px) { .assistant-chat-panel { min-height: 65vh; padding: 16px; }.assistant-chat-message { max-width: 92%; }.assistant-chat-actions { align-items: flex-start; flex-direction: column; } }

/* Restaurant skill center and always available assistant */
.skills-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.skill-card { position: relative; display: flex; min-height: 248px; flex-direction: column; overflow: hidden; padding: 21px; border: 1px solid rgba(150,190,198,.15); border-radius: 12px; background: linear-gradient(145deg,rgba(20,43,58,.96),rgba(12,27,39,.98)); box-shadow: inset 0 1px rgba(255,255,255,.025); transition: transform .18s ease,border-color .18s ease,background .18s ease; }
.skill-card:hover { transform: translateY(-3px); border-color: rgba(126,226,212,.32); background: linear-gradient(145deg,#17323f,#102330); }
.skill-card-live { border-color: rgba(126,226,212,.2); }
.skill-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.skill-icon { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid rgba(126,226,212,.25); border-radius: 10px; background: rgba(126,226,212,.08); color: var(--cyan); font-size: 19px; }
.skill-status { border: 1px solid rgba(167,185,191,.15); border-radius: 999px; padding: 5px 8px; color: #a5b7bd; font-size: 9px; white-space: nowrap; }
.skill-status.is-live { border-color: rgba(126,226,212,.19); color: #9fe8d9; background: rgba(126,226,212,.06); }
.skill-status.is-limited { color: #c1c3aa; background: rgba(221,202,133,.04); }
.skill-card h2 { margin: 20px 0 9px; font-size: 16px; letter-spacing: -.025em; }
.skill-card p { margin: 0; color: #96abb1; font-size: 11px; line-height: 1.8; }
.skill-action { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-top: auto; padding: 16px 0 0; border: 0; border-top: 1px solid rgba(162,195,203,.1); background: transparent; color: #d4e9e5; text-align: left; font-size: 11px; cursor: pointer; }
.skill-action span { color: var(--cyan); font-size: 15px; transition: transform .16s ease; }
.skill-action:hover { color: var(--cyan); }.skill-action:hover span { transform: translate(2px,-2px); }
.skills-footnote { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(126,226,212,.11); border-radius: 9px; background: rgba(126,226,212,.035); color: #91a9ad; font-size: 10px; line-height: 1.7; }
.skills-footnote span { display: grid; width: 16px; height: 16px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(126,226,212,.4); border-radius: 50%; color: var(--cyan); font-size: 9px; }
.assistant-dock { position: fixed; z-index: 25; right: 24px; bottom: 22px; display: flex; align-items: flex-end; flex-direction: column; gap: 11px; }
.assistant-dock-toggle { display: inline-flex; min-height: 48px; align-items: center; gap: 10px; padding: 0 19px; border: 1px solid rgba(154,241,224,.35); border-radius: 999px; background: linear-gradient(135deg,#1c5556,#143a46); color: #e8fff8; box-shadow: 0 12px 35px rgba(0,0,0,.36),0 0 28px rgba(126,226,212,.1); font-size: 12px; font-weight: 650; cursor: pointer; backdrop-filter: blur(16px); }
.assistant-dock-toggle > span { color: #8df1dc; font-size: 18px; }
.assistant-dock-panel { display: none; width: min(390px,calc(100vw - 36px)); height: min(560px,calc(100svh - 100px)); flex-direction: column; overflow: hidden; border: 1px solid rgba(145,211,207,.23); border-radius: 16px; background: rgba(9,23,34,.98); box-shadow: 0 22px 75px rgba(0,0,0,.48),0 0 42px rgba(67,168,164,.07); backdrop-filter: blur(22px); }
.assistant-dock.is-open .assistant-dock-panel { display: flex; animation: dock-enter .18s ease-out; }
.assistant-dock.is-open .assistant-dock-toggle { display: none; }
@keyframes dock-enter { from { opacity: 0; transform: translateY(9px) scale(.985); } to { opacity: 1; transform: none; } }
.assistant-dock-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 17px; border-bottom: 1px solid rgba(155,198,204,.12); background: linear-gradient(100deg,rgba(34,85,86,.25),rgba(13,30,43,.2)); }
.assistant-dock-header > div { display: flex; align-items: center; gap: 11px; }
.assistant-dock-header strong,.assistant-dock-header small { display: block; }.assistant-dock-header strong { color: #e7f5f2; font-size: 12px; }.assistant-dock-header small { margin-top: 4px; color: #82a1a4; font-size: 9px; }
.dock-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #73ddbf; box-shadow: 0 0 13px rgba(115,221,191,.58); }
.dock-close { width: 28px; height: 28px; border: 1px solid rgba(157,195,200,.13); border-radius: 50%; background: rgba(255,255,255,.035); color: #aac1c2; font-size: 20px; line-height: 1; cursor: pointer; }
.dock-chat-log { flex: 1; min-height: 0; max-height: none; padding: 15px; }.dock-chat-log .assistant-chat-empty { font-size: 11px; }
.dock-chat-log .assistant-chat-message { max-width: 93%; padding: 10px 12px; border-radius: 11px; }.dock-chat-log .assistant-chat-message p { font-size: 11px; }
.dock-chat-form { gap: 9px; padding: 12px; border-top: 1px solid rgba(155,198,204,.12); background: rgba(14,30,42,.8); }
.dock-chat-form select { min-height: 34px; padding: 6px 10px; border: 1px solid rgba(154,194,198,.14); border-radius: 7px; background: #0c1e2a; color: #b8d0ce; font-size: 10px; }
.dock-chat-form textarea { min-height: 56px; max-height: 115px; padding: 9px 11px; border: 1px solid rgba(154,194,198,.2); border-radius: 8px; background: #091923; color: #ecf7f4; font-size: 11px; line-height: 1.6; resize: vertical; }
.dock-chat-form textarea:focus,.dock-chat-form select:focus { outline: 1px solid rgba(126,226,212,.5); }
.dock-chat-form .assistant-chat-actions { align-items: center; }.dock-chat-form .assistant-chat-actions small { max-width: 220px; font-size: 9px; }.dock-chat-form .button { min-height: 35px; padding: 0 12px; font-size: 10px; }
@media (max-width: 1000px) { .skills-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { .skills-grid { grid-template-columns: 1fr; gap: 10px; }.skill-card { min-height: 218px; padding: 18px; }.assistant-dock { right: 13px; bottom: max(13px,env(safe-area-inset-bottom)); }.assistant-dock-panel { width: min(420px,calc(100vw - 26px)); height: min(560px,calc(100svh - 84px)); }.assistant-dock-toggle { min-height: 45px; padding: 0 15px; } }
@media (prefers-reduced-motion: reduce) { .assistant-dock.is-open .assistant-dock-panel { animation: none; } }

/* Full-screen creator inspired by the supplied reference */
.workspace.studio-active .workspace-content { max-width: none; padding: 0; }
.workspace.studio-active .assistant-dock { display: none; }
.workspace.studio-active { grid-template-columns: 82px minmax(0,1fr); }
.workspace.studio-active .sidebar { align-items: stretch; padding: 19px 8px; }.workspace.studio-active .sidebar .brand { justify-content: center; margin: 0 0 26px; }.workspace.studio-active .sidebar .brand > span:last-child { display: none; }.workspace.studio-active .sidebar-section-label { margin: 0 0 10px; text-align: center; font-size: 8px; letter-spacing: .08em; }.workspace.studio-active .sidebar-nav { gap: 5px; }.workspace.studio-active .sidebar-nav a { flex-direction: column; gap: 5px; padding: 8px 2px; text-align: center; font-size: 9px; }.workspace.studio-active .sidebar-nav a span { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(137,174,145,.11); border-radius: 10px; background: rgba(255,255,255,.025); font-size: 15px; }.workspace.studio-active .sidebar-bottom { display: none; }
#view-skills.studio-page { min-height: calc(100svh - 72px); background-color: #080e0b; background-image: linear-gradient(rgba(129,177,141,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(129,177,141,.035) 1px,transparent 1px),radial-gradient(ellipse at 58% 25%,rgba(24,98,53,.11),transparent 48%); background-size: 42px 42px,42px 42px,auto; }
.studio-toolbar { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(250px,1fr) minmax(250px,370px) minmax(180px,1fr); align-items: center; gap: 18px; min-height: 68px; padding: 9px 22px; border-bottom: 1px solid rgba(142,180,154,.12); background: rgba(6,13,9,.87); }
.studio-modes { display: inline-flex; width: fit-content; gap: 4px; padding: 4px; border: 1px solid rgba(159,190,166,.13); border-radius: 11px; background: rgba(255,255,255,.025); }
.studio-modes button { display: inline-flex; min-width: 60px; min-height: 35px; align-items: center; justify-content: center; gap: 7px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; color: #93a59a; font-size: 12px; cursor: pointer; }
.studio-modes button:hover { color: #ddf0e2; background: rgba(255,255,255,.04); }.studio-modes button.active { color: #06130a; background: #58d877; font-weight: 720; box-shadow: 0 5px 18px rgba(52,202,93,.19); }
.studio-model { display: flex; min-height: 43px; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid rgba(165,187,170,.15); border-radius: 10px; background: linear-gradient(115deg,rgba(255,255,255,.045),rgba(255,255,255,.018)); }
.studio-model-icon { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(88,216,119,.29); border-radius: 8px; color: #64e182; background: rgba(88,216,119,.08); }
.studio-model strong,.studio-model small { display: block; }.studio-model strong { color: #e1ebe3; font-size: 11px; font-weight: 640; }.studio-model small { margin-top: 3px; color: #829288; font-size: 9px; }.studio-model-arrow { margin-left: auto; color: #98a69b; }
.studio-actions { display: flex; justify-content: flex-end; gap: 8px; }.studio-actions button { min-height: 37px; padding: 0 13px; border: 1px solid rgba(158,185,164,.16); border-radius: 999px; background: rgba(255,255,255,.025); color: #c0d0c3; font-size: 11px; cursor: pointer; }.studio-actions button:first-child { border-color: transparent; background: #55d774; color: #06130a; font-weight: 700; }.studio-actions button:hover { border-color: rgba(88,216,119,.4); }
.studio-layout { display: grid; grid-template-columns: minmax(0,1fr) 228px; min-height: calc(100svh - 140px); }
.studio-canvas { display: flex; min-width: 0; min-height: calc(100svh - 140px); flex-direction: column; padding: clamp(25px,4vw,50px) clamp(22px,4.5vw,68px) 20px; }
.studio-intro { width: min(100%,950px); margin: clamp(45px,10vh,122px) auto 14px; padding: 26px 31px; border: 1px solid rgba(139,176,147,.15); border-radius: 25px; background: linear-gradient(112deg,rgba(21,34,26,.9),rgba(16,34,23,.78)); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.studio-intro > span { color: #5cdb7b; font-size: 9px; font-weight: 750; letter-spacing: .17em; }
.studio-intro h1 { margin: 12px 0 8px; color: #edf4ed; font-size: clamp(27px,3.2vw,43px); font-weight: 560; letter-spacing: -.065em; line-height: 1.2; }
.studio-intro p { margin: 0; color: #98a79a; font-size: 12px; line-height: 1.7; }
.studio-presets { display: grid; width: min(100%,950px); grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 auto; }
.studio-presets button { display: grid; min-height: 77px; align-content: center; gap: 6px; padding: 12px 16px; border: 1px solid rgba(143,166,147,.16); border-radius: 17px; background: linear-gradient(120deg,rgba(22,29,24,.94),rgba(13,19,15,.95)); color: #e3eae4; text-align: left; cursor: pointer; transition: border-color .16s,background .16s,transform .16s; }
.studio-presets button:hover { transform: translateY(-2px); border-color: rgba(88,216,119,.32); background: #15231a; }.studio-presets strong { font-size: 14px; font-weight: 650; }.studio-presets span { color: #91a095; font-size: 10px; }
.studio-skill-row { display: flex; width: min(100%,950px); align-items: center; flex-wrap: wrap; gap: 7px; margin: 12px auto 0; }.studio-skill-row > span { margin-right: 3px; color: #748478; font-size: 9px; }.studio-skill-row button { min-height: 26px; padding: 0 10px; border: 1px solid rgba(140,166,145,.14); border-radius: 999px; background: rgba(255,255,255,.025); color: #9caf9e; font-size: 9px; cursor: pointer; }.studio-skill-row button:hover { border-color: rgba(88,216,119,.32); color: #b8efc3; background: rgba(88,216,119,.06); }
.studio-chat-log { display: flex; width: min(100%,950px); min-height: 70px; max-height: 220px; flex: 1; flex-direction: column; gap: 10px; overflow-y: auto; margin: 15px auto 11px; padding: 4px 2px; }
.studio-chat-log .assistant-chat-empty { margin: auto; color: #788b7e; font-size: 11px; }.studio-chat-log .assistant-chat-message { max-width: 88%; padding: 10px 13px; border-radius: 12px; background: rgba(17,28,20,.92); }.studio-chat-log .assistant-chat-message.from-user { background: rgba(27,64,38,.8); border-color: rgba(83,191,104,.18); }.studio-chat-log .assistant-chat-message p { font-size: 11px; }
.studio-composer { width: min(100%,950px); margin: 0 auto; padding: 14px 15px 11px; border: 1px solid rgba(85,197,108,.28); border-radius: 19px; background: linear-gradient(138deg,rgba(10,18,12,.98),rgba(9,15,11,.98)); box-shadow: 0 15px 48px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.025); }
.studio-composer textarea { width: 100%; min-height: 67px; max-height: 170px; resize: vertical; border: 0; outline: 0; color: #e4ece5; background: transparent; font: inherit; font-size: 13px; line-height: 1.75; }.studio-composer textarea::placeholder { color: #78877c; }
.studio-composer-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(147,172,151,.11); }
.studio-tools-left,.studio-tools-right { display: flex; align-items: center; gap: 8px; }.studio-tools-right > small { color: #708177; font-size: 9px; }
.studio-tool-button,.studio-tools-left select,.studio-enhance { display: inline-flex; min-height: 32px; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid rgba(146,174,152,.14); border-radius: 999px; background: rgba(255,255,255,.035); color: #acbdb0; font-size: 10px; cursor: pointer; }
.studio-tool-button { color: #8be39f; font-size: 18px; }.studio-tool-button span { color: #b3c4b7; font-size: 10px; }
.studio-tools-left select { outline: 0; }.studio-enhance { cursor: pointer; }.studio-enhance input { width: 12px; height: 12px; accent-color: #55d774; }
.studio-submit { display: inline-flex; min-height: 38px; align-items: center; gap: 15px; padding: 0 16px; border: 0; border-radius: 999px; background: linear-gradient(110deg,#55d774,#46c96b); color: #07130a; font-size: 11px; font-weight: 750; cursor: pointer; box-shadow: 0 6px 20px rgba(46,194,82,.15); }.studio-submit:hover { filter: brightness(1.08); }.studio-submit:disabled { opacity: .55; cursor: wait; }
.studio-attachments { display: flex; flex-wrap: wrap; gap: 9px; padding: 2px 0 10px; }
.studio-attachment { position: relative; display: flex; width: 76px; height: 82px; flex-direction: column; overflow: hidden; border: 1px solid rgba(126,226,212,.22); border-radius: 9px; background: #111b14; }
.studio-attachment img { width: 100%; height: 58px; object-fit: cover; }.studio-attachment > span { overflow: hidden; padding: 4px 5px; color: #aebbb0; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.studio-attachment > button { position: absolute; top: 3px; right: 3px; width: 19px; height: 19px; border: 0; border-radius: 50%; background: rgba(0,0,0,.73); color: white; cursor: pointer; }
.studio-capability-note { width: min(100%,950px); margin: 8px auto 0; color: #68776c; font-size: 9px; line-height: 1.5; }
.studio-recent { display: flex; min-width: 0; flex-direction: column; padding: 21px 13px 13px; border-left: 1px solid rgba(142,180,154,.12); background: rgba(8,14,10,.72); }
.studio-recent-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 14px; }.studio-recent-heading .section-index { font-size: 8px; }.studio-recent-heading h2 { margin: 3px 0 0; color: #e0e9e1; font-size: 14px; letter-spacing: -.03em; }.studio-recent-heading button { width: 26px; height: 26px; border: 1px solid rgba(149,180,154,.14); border-radius: 50%; background: transparent; color: #8fa093; font-size: 13px; cursor: pointer; }
.studio-recent-tabs { display: flex; align-items: center; gap: 5px; padding: 4px; border: 1px solid rgba(143,171,149,.13); border-radius: 9px; background: rgba(255,255,255,.025); color: #89998d; font-size: 9px; }.studio-recent-tabs span { padding: 5px 7px; }.studio-recent-tabs span.active { border-radius: 6px; background: #54d674; color: #07130a; font-size: 14px; }
.studio-recent-list { display: grid; align-content: start; gap: 10px; overflow-y: auto; margin-top: 11px; }.studio-recent-empty { display: grid; min-height: 172px; align-content: center; justify-items: center; gap: 8px; border: 1px dashed rgba(146,173,150,.15); border-radius: 14px; color: #77877a; text-align: center; }.studio-recent-empty > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 11px; background: rgba(255,255,255,.04); color: #819385; font-size: 20px; }.studio-recent-empty p { margin: 0; font-size: 10px; }.studio-recent-empty small { max-width: 130px; color: #69786c; font-size: 8px; line-height: 1.5; }
.studio-recent-item { position: relative; min-height: 120px; overflow: hidden; padding: 8px; border: 1px solid rgba(138,166,143,.13); border-radius: 11px; background: rgba(255,255,255,.025); }.studio-recent-thumb { display: grid; height: 62px; place-items: center; border: 1px solid rgba(116,166,124,.13); border-radius: 7px; background: radial-gradient(ellipse at 50% 20%,rgba(75,164,92,.19),transparent 75%),linear-gradient(145deg,#18251a,#101711); color: #70d886; font-size: 22px; }.studio-recent-label { display: block; margin-top: 7px; color: #afc0b2; font-size: 8px; }.studio-recent-item p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin: 4px 0 0; color: #7f9183; font-size: 8px; line-height: 1.5; }
.studio-recent-foot { margin-top: auto; padding: 12px 0 0; color: #647369; font-size: 8px; }
@media (max-width: 1000px) { .workspace.studio-active { grid-template-columns: 82px minmax(0,1fr); }.studio-toolbar { grid-template-columns: 1fr auto; }.studio-model { display: none; }.studio-layout { grid-template-columns: minmax(0,1fr) 190px; }.studio-intro { margin-top: clamp(35px,8vh,90px); } }
@media (max-width: 700px) { .workspace.studio-active { grid-template-columns: 1fr; }.workspace.studio-active .workspace-content { padding: 0; }.studio-toolbar { grid-template-columns: minmax(0,1fr) auto; gap: 7px; padding: 8px 10px; }.studio-modes { max-width: 100%; }.studio-modes button { min-width: 0; gap: 4px; padding: 0 8px; font-size: 11px; }.studio-modes button span { font-size: 9px; }.studio-actions { gap: 5px; }.studio-actions button { min-height: 33px; padding: 0 9px; font-size: 9px; }.studio-layout { grid-template-columns: 1fr; }.studio-canvas { min-height: calc(100svh - 134px); padding: 12px 13px 14px; }.studio-intro { margin: clamp(36px,8vh,75px) auto 11px; padding: 19px 17px; border-radius: 17px; }.studio-intro h1 { font-size: 27px; }.studio-intro p { font-size: 10px; }.studio-presets { gap: 8px; }.studio-presets button { min-height: 67px; padding: 10px 11px; border-radius: 12px; }.studio-presets strong { font-size: 12px; }.studio-presets span { font-size: 8px; }.studio-skill-row { flex-wrap: nowrap; overflow-x: auto; margin-top: 10px; padding-bottom: 3px; scrollbar-width: none; }.studio-skill-row::-webkit-scrollbar { display: none; }.studio-skill-row > span { flex: 0 0 auto; }.studio-skill-row button { flex: 0 0 auto; }.studio-chat-log { min-height: 54px; max-height: 190px; margin: 8px auto; }.studio-composer { padding: 11px; border-radius: 15px; }.studio-composer textarea { min-height: 57px; font-size: 11px; }.studio-composer-tools { align-items: flex-end; }.studio-tools-left { flex-wrap: wrap; gap: 5px; }.studio-tools-left select,.studio-enhance,.studio-tool-button { min-height: 29px; padding: 0 7px; font-size: 8px; }.studio-tools-right { flex-direction: column; align-items: flex-end; gap: 4px; }.studio-submit { min-height: 34px; padding: 0 11px; font-size: 9px; }.studio-capability-note { padding: 0 1px; font-size: 8px; }.studio-recent { display: none; } }
@media (max-width: 600px) { .channel-qr-panel { flex-direction: column-reverse; align-items: flex-start; }.channel-qr-panel img { align-self: center; width: min(72vw,240px); height: auto; } }
.admin-demo-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; border-color: rgba(126,226,212,.26); background: linear-gradient(115deg,#113038,#10212f); }
.admin-demo-panel h2 { margin: 10px 0; font-size: 22px; }
.admin-demo-panel p { margin: 0; color: #a8bfc1; font-size: 12px; line-height: 1.7; }
.admin-demo-panel .button { flex: 0 0 auto; }
.model-admin-panel { margin: 18px 0; }.model-admin-panel > p { color: #9eb6ba; font-size: 12px; line-height: 1.8; }.model-config-form { max-width: 780px; margin-top: 22px; }.model-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }.form-stack .model-form-actions .button { width: auto; justify-content: center; }.model-form-actions .text-button { padding: 10px 12px; }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr 1fr; }.hero h1 { font-size: clamp(51px,5.3vw,68px); }.showcase-window { transform: none; }.floating-chip { left: -3%; }
  .feature-grid { gap: 12px; }.feature-card { padding: 24px; }.trust-section { gap: 3vw; }
}
@media (max-width: 800px) {
  .site-header { height: 70px; }.site-header nav { display: none; }.hero { min-height: 1060px; height: auto; grid-template-columns: 1fr; padding-top: 145px; padding-bottom: 75px; }.hero-photo { background-position: 67% center; }.hero-content { max-width: 600px; }.hero h1 { font-size: clamp(51px,9vw,78px); }.hero-showcase { justify-self: center; width: min(100%,560px); margin: 48px 0 0; }.hero-scroll { bottom: 27px; }.feature-grid { grid-template-columns: 1fr; }.feature-card { min-height: 270px; }.feature-card h3 { margin-top: 30px; }.workflow-line { grid-template-columns: repeat(2,1fr); row-gap: 20px; }.trust-section { grid-template-columns: 1fr; }.trust-visual { order: 2; width: min(100%,420px); }.trust-copy { order: 1; }.workspace { grid-template-columns: 1fr; }.sidebar { flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 22px; border-right: 0; border-bottom: 1px solid var(--line); }.sidebar .brand { margin: 0; }.sidebar-section-label,.sidebar-bottom { display: none; }.sidebar-nav { display: flex; }.sidebar-nav a { padding: 10px; }.sidebar-nav a span { display: none; }.workspace-header { height: 56px; }.dashboard-title { align-items: start; }.stat-grid { gap: 9px; }.stat-card { padding: 17px; }.record-layout,.admin-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .brand strong { font-size: 16px; }.brand small { font-size: 9px; }.brand-symbol { width: 33px; height: 33px; }.header-cta { padding: 0 12px; min-height: 36px; font-size: 11px; }.site-header { padding: 0 19px; }
  .hero { min-height: 910px; padding: 121px 22px 76px; }.hero h1 { font-size: clamp(48px,12vw,66px); }.hero-content > p { font-size: 15px; }.hero-actions { align-items: stretch; flex-direction: column; gap: 8px; }.hero-actions .button { justify-content: space-between; }.hero-note { margin-top: 25px; font-size: 10px; }.hero-showcase { margin-top: 33px; }.showcase-window { border-radius: 11px; }.showcase-inner { padding: 12px; gap: 8px; }.showcase-summary,.showcase-metric,.showcase-chat { padding: 13px; }.showcase-summary strong { font-size: 29px; }.showcase-metric strong { font-size: 17px; }.showcase-chat { min-height: 150px; }.floating-chip { display: none; }.hero-scroll { display: none; }
  .section { padding: 80px 22px; }.section-heading h2,.trust-copy h2 { font-size: 37px; }.workflow-line { grid-template-columns: 1fr; }.workflow-step { min-height: 133px; }.workflow-step h3 { margin-top: 21px; }.cta-section { margin: 15px 18px 0; padding: 70px 18px; }.cta-section h2 { font-size: 43px; }.site-footer { padding: 60px 22px 35px; grid-template-columns: 1fr; }.site-footer > div:not(.brand) { grid-column: 1; grid-row: auto; }.site-footer > small { margin-top: 20px; }
  .sidebar { align-items: flex-start; gap: 13px; flex-direction: column; padding: 15px 20px 10px; }.sidebar-nav { width: 100%; justify-content: space-between; flex-wrap: wrap; }.sidebar-nav a { font-size: 11px; }.workspace-header { padding: 0 20px; }.workspace-content { padding: 32px 20px 70px; }.dashboard-title { flex-direction: column; gap: 18px; }.dashboard-title h1 { font-size: 42px; }.stat-grid { grid-template-columns: 1fr; }.stat-card { min-height: 135px; }.stat-card strong { margin-top: 14px; }.panel { padding: 18px; }.auth-screen { padding: 20px 14px; }.auth-card { padding: 26px 22px; }.channel-grid { grid-template-columns: 1fr; }.admin-demo-panel { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Owner workspace navigation rail */
.workspace.owner-workspace { grid-template-columns: 104px minmax(0,1fr); }
.owner-workspace .sidebar { align-items: center; padding: 20px 9px 15px; }
.owner-workspace .sidebar .brand { flex-direction: column; gap: 8px; margin: 0 0 34px; text-align: center; }
.owner-workspace .sidebar .brand strong { font-size: 14px; }
.owner-workspace .sidebar .brand small { margin-top: 3px; font-size: 8px; letter-spacing: .08em; }
.owner-workspace .sidebar-section-label { margin: 0 0 13px; font-size: 8px; letter-spacing: .1em; text-align: center; }
.owner-workspace .sidebar-nav { width: 100%; gap: 7px; }
.owner-workspace .sidebar-nav a { min-height: 66px; flex-direction: column; justify-content: center; gap: 5px; padding: 5px 2px; border: 1px solid transparent; border-radius: 12px; font-size: 9px; text-align: center; transition: color .16s,background .16s,border-color .16s,transform .16s; }
.owner-workspace .sidebar-nav a span { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid rgba(160,205,199,.12); border-radius: 11px; background: rgba(255,255,255,.035); font-size: 16px; transition: inherit; }
.owner-workspace .sidebar-nav a:hover { transform: translateY(-1px); background: rgba(126,226,212,.055); color: var(--cyan); }
.owner-workspace .sidebar-nav a.active { border-color: rgba(126,226,212,.13); background: rgba(126,226,212,.075); color: var(--cyan); }
.owner-workspace .sidebar-nav a.active span { border-color: transparent; background: linear-gradient(145deg,#86ead7,#4cc99f); color: #06231f; box-shadow: 0 5px 20px rgba(68,204,162,.2); }
.owner-workspace .sidebar-bottom { width: 100%; padding: 16px 0 2px; text-align: center; font-size: 0; }
.owner-workspace .sidebar-bottom .live-dot { margin: 0; }
.owner-workspace .sidebar-bottom small { display: none; }

/* Product learning center */
.classroom-view { max-width: 1120px; margin: 0 auto; }
.classroom-hero { display: flex; min-height: 225px; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 26px; padding: clamp(27px,5vw,52px); border: 1px solid rgba(126,226,212,.17); border-radius: 18px; background: radial-gradient(ellipse at 95% 5%,rgba(78,202,160,.14),transparent 38%),linear-gradient(125deg,#122c32,#0c1d29 64%,#0c211e); }
.classroom-hero h1 { margin: 14px 0 10px; font-size: clamp(35px,4.3vw,56px); line-height: 1.1; letter-spacing: -.065em; }
.classroom-hero p { max-width: 620px; margin: 0; color: #a8c0c2; font-size: 13px; line-height: 1.8; }
.classroom-hero .button { flex: 0 0 auto; }
.classroom-start { display: flex; align-items: center; gap: 18px; margin-bottom: 34px; border-color: rgba(126,226,212,.2); background: linear-gradient(115deg,rgba(21,57,54,.7),rgba(13,30,41,.9)); }
.classroom-start-icon { display: grid; width: 52px; height: 52px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(126,226,212,.31); border-radius: 14px; background: rgba(126,226,212,.1); color: var(--cyan); font-size: 14px; font-weight: 750; }
.classroom-start h2 { margin: 7px 0 5px; font-size: 19px; letter-spacing: -.03em; }
.classroom-start p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.classroom-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin: 0 0 14px; }
.classroom-heading h2 { margin: 6px 0 0; font-size: 23px; letter-spacing: -.04em; }
.classroom-heading > span { color: #78939b; font-size: 11px; }
.classroom-lessons { display: grid; gap: 10px; }
.classroom-lesson { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(115deg,rgba(16,35,48,.85),rgba(11,25,36,.9)); }
.classroom-lesson[open] { border-color: rgba(126,226,212,.25); }
.classroom-lesson summary { display: flex; min-height: 76px; align-items: center; gap: 15px; padding: 14px 19px; list-style: none; cursor: pointer; }
.classroom-lesson summary::-webkit-details-marker { display: none; }
.lesson-number { display: grid; width: 37px; height: 37px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(126,226,212,.25); border-radius: 10px; background: rgba(126,226,212,.07); color: var(--cyan); font-size: 11px; font-weight: 750; }
.classroom-lesson summary strong,.classroom-lesson summary small { display: block; }
.classroom-lesson summary strong { font-size: 14px; }
.classroom-lesson summary small { margin-top: 5px; color: #8fa7ad; font-size: 11px; }
.classroom-lesson summary i { margin-left: auto; color: #89dccc; font-size: 19px; font-style: normal; transition: transform .16s; }
.classroom-lesson[open] summary i { transform: rotate(45deg); }
.lesson-body { padding: 0 22px 20px 71px; color: #a9bdc1; font-size: 12px; line-height: 1.85; }
.lesson-body p { margin: 0 0 10px; }
.lesson-body blockquote { margin: 10px 0; padding: 11px 14px; border-left: 2px solid var(--cyan); border-radius: 0 8px 8px 0; background: rgba(126,226,212,.055); color: #d8efea; }
.lesson-body ul { display: grid; gap: 6px; margin: 8px 0 12px; padding-left: 18px; }
.lesson-note { color: #7f9b9e; font-size: 11px; }
.classroom-coming { display: flex; align-items: center; gap: 13px; margin-top: 22px; padding: 17px 19px; border: 1px dashed rgba(126,226,212,.19); border-radius: 12px; color: #a9c0bd; }
.classroom-coming > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: rgba(126,226,212,.08); color: var(--cyan); font-size: 19px; }
.classroom-coming strong { font-size: 12px; }
.classroom-coming p { margin: 4px 0 0; color: #80999d; font-size: 11px; }

@media (max-width: 760px) {
  .workspace.owner-workspace { grid-template-columns: minmax(0,1fr); }
  .owner-workspace .sidebar { position: relative; z-index: 2; flex-direction: row; justify-content: space-between; gap: 12px; padding: 9px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .owner-workspace .sidebar .brand { flex-direction: row; gap: 8px; margin: 0; text-align: left; }
  .owner-workspace .sidebar .brand small,.owner-workspace .sidebar-section-label,.owner-workspace .sidebar-bottom { display: none; }
  .owner-workspace .sidebar-nav { width: auto; min-width: 0; display: flex; flex: 1; justify-content: flex-end; gap: 3px; overflow-x: auto; scrollbar-width: none; }
  .owner-workspace .sidebar-nav::-webkit-scrollbar { display: none; }
  .owner-workspace .sidebar-nav a { min-width: 55px; min-height: 51px; flex: 0 0 auto; gap: 2px; padding: 2px; font-size: 8px; }
  .owner-workspace .sidebar-nav a span { width: 27px; height: 27px; border-radius: 8px; font-size: 13px; }
  .classroom-hero { min-height: 0; align-items: flex-start; flex-direction: column; padding: 24px; }
  .classroom-hero h1 { font-size: 36px; }
  .classroom-start { align-items: flex-start; padding: 17px; }
  .classroom-start-icon { width: 40px; height: 40px; }
  .classroom-start h2 { font-size: 16px; }
  .classroom-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .classroom-heading h2 { font-size: 20px; }
  .classroom-lesson summary { min-height: 69px; gap: 11px; padding: 12px; }
  .lesson-body { padding: 0 14px 17px 60px; }
}

/* Premium owner sign-in */
.owner-auth-screen { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto 1fr auto; min-height: 100svh; overflow: hidden; padding: 30px clamp(24px,6vw,96px) 22px; background: radial-gradient(ellipse at 20% 35%,rgba(22,106,111,.2),transparent 42%),radial-gradient(ellipse at 85% 82%,rgba(55,90,138,.16),transparent 38%),#07111b; }
.owner-auth-screen > .brand,.owner-auth-screen > .owner-auth-layout,.owner-auth-screen > .auth-foot { position: relative; z-index: 1; }
.owner-auth-screen::before { position: absolute; z-index: -1; inset: 0; content: ""; opacity: .23; background-image: linear-gradient(rgba(147,214,215,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(147,214,215,.08) 1px,transparent 1px); background-size: 66px 66px; mask-image: linear-gradient(120deg,#000 0%,transparent 75%); }
.owner-auth-screen > .brand { width: min(100%,1240px); margin: 0 auto; align-self: start; }
.owner-auth-layout { width: min(100%,1240px); margin: auto; padding: 36px 0 48px; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(370px,.8fr); align-items: center; gap: clamp(50px,8vw,130px); }
.auth-story { max-width: 650px; }
.auth-story-kicker { display: inline-flex; align-items: center; gap: 12px; color: #b0d4d3; font-size: 10px; font-weight: 700; letter-spacing: .19em; }
.auth-story-kicker .pulse-dot { width: 6px; height: 6px; }
.auth-story h1 { margin: 27px 0 19px; font-size: clamp(43px,5.15vw,75px); line-height: 1.16; letter-spacing: -.07em; font-weight: 760; }
.auth-story h1 em { color: var(--cyan); font-style: normal; text-shadow: 0 0 45px rgba(126,226,212,.2); }
.auth-story > p { max-width: 500px; margin: 0; color: #a9bdc2; font-size: 14px; line-height: 1.95; }
.auth-benefits { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 25px 0 29px; color: #c5d9d8; font-size: 11px; }
.auth-benefits span { display: inline-flex; align-items: center; gap: 7px; }
.auth-benefits i { color: var(--cyan); font-size: 9px; font-style: normal; letter-spacing: .08em; }
.auth-console { overflow: hidden; max-width: 570px; border: 1px solid rgba(155,214,215,.2); border-radius: 15px; background: linear-gradient(145deg,rgba(17,39,52,.94),rgba(9,23,34,.96)); box-shadow: 0 28px 85px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.06); transform: perspective(1000px) rotateY(3deg); }
.auth-console-top { height: 46px; display: flex; align-items: center; gap: 14px; padding: 0 17px; border-bottom: 1px solid rgba(185,216,224,.1); color: #d9e5e3; font-size: 10px; }
.auth-console-top > span { display: flex; gap: 5px; }.auth-console-top > span i { width: 6px; height: 6px; border-radius: 50%; background: #547176; }.auth-console-top > span i:first-child { background: #e7b781; }.auth-console-top b { font-weight: 600; }.auth-console-top small { margin-left: auto; color: #8fa9ae; font-size: 9px; }.auth-console-top small span,.auth-console-foot > span i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px rgba(126,226,212,.6); }
.auth-console-body { padding: 20px 22px 15px; }
.auth-console-heading { display: flex; align-items: center; justify-content: space-between; }.auth-console-heading > div { display: grid; gap: 7px; }.auth-console-heading small { color: #6f9699; font-size: 8px; letter-spacing: .16em; }.auth-console-heading strong { font-size: 14px; font-weight: 650; }.auth-console-heading > span { border: 1px solid rgba(156,202,203,.17); border-radius: 5px; padding: 6px 9px; color: #a5bec0; font-size: 9px; }
.auth-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 15px; }.auth-metrics > div { display: grid; gap: 7px; padding: 13px 14px; border: 1px solid rgba(165,209,210,.1); border-radius: 8px; background: rgba(255,255,255,.025); }.auth-metrics small,.auth-metrics span { color: #8fa8ac; font-size: 9px; }.auth-metrics strong { color: #e6f1ed; font-size: clamp(17px,2vw,24px); letter-spacing: -.04em; }.auth-metrics strong i { color: var(--cyan); font-size: 10px; font-style: normal; font-weight: 500; }
.auth-chart { height: 65px; display: flex; align-items: end; gap: 7px; margin-top: 14px; padding: 0 2px 1px; border-bottom: 1px solid rgba(165,209,210,.13); background: repeating-linear-gradient(to bottom,transparent 0 20px,rgba(165,209,210,.055) 21px); }.auth-chart span { flex: 1; height: var(--h); border: 1px solid rgba(126,226,212,.4); border-bottom: 0; border-radius: 3px 3px 0 0; background: linear-gradient(0deg,rgba(61,162,158,.19),rgba(126,226,212,.58)); box-shadow: 0 -5px 18px rgba(126,226,212,.06); }
.auth-console-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 11px; color: #9ab0b3; font-size: 9px; }.auth-console-foot > span i { width: 5px; height: 5px; }.auth-console-foot small { color: #6f898f; font-size: 8px; }
.owner-auth-screen .auth-card { width: 100%; max-width: 450px; margin: auto 0; padding: clamp(27px,3vw,39px); border-color: rgba(171,220,220,.17); border-radius: 18px; background: linear-gradient(150deg,rgba(17,37,51,.97),rgba(10,24,36,.97)); box-shadow: 0 28px 100px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.055); }
.auth-card-head .auth-mark { width: 42px; height: 42px; margin-bottom: 20px; border-radius: 12px; }.auth-card-head .section-index { font-size: 9px; }.auth-card-head h2 { margin: 10px 0 7px; font-size: 29px; letter-spacing: -.055em; }.auth-card-head p { margin: 0; color: #9fb3ba; font-size: 12px; line-height: 1.8; }
.owner-auth-screen .auth-tabs { gap: 24px; margin: 19px 0 19px; }.owner-auth-screen .auth-tabs button { padding: 10px 0; font-size: 12px; }.owner-auth-screen .form-stack { gap: 13px; }.owner-auth-screen .form-stack label { gap: 7px; font-size: 11px; }.owner-auth-screen .form-stack input { min-height: 46px; border-radius: 7px; background: rgba(4,15,25,.55); }.owner-auth-screen .form-stack .button { min-height: 47px; margin-top: 5px; }
.auth-card-foot { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 18px; color: #8ca4aa; font-size: 10px; }.auth-card-foot > span { color: var(--cyan); font-size: 15px; }.auth-card-foot i,.auth-foot i { width: 3px; height: 3px; border-radius: 50%; background: #58757b; }.owner-auth-screen > .auth-foot { width: min(100%,1240px); display: flex; align-items: center; gap: 10px; margin: 0 auto; color: #789096; font-size: 9px; letter-spacing: .04em; }

@media (max-width: 900px) {
  .owner-auth-screen { padding: 23px clamp(20px,5vw,50px) 18px; }
  .owner-auth-layout { max-width: 550px; grid-template-columns: 1fr; gap: 25px; padding: 34px 0 29px; }
  .auth-story { max-width: none; }.auth-story h1 { margin: 18px 0 12px; font-size: clamp(38px,7vw,53px); }.auth-story > p { font-size: 12px; line-height: 1.8; }.auth-benefits { margin: 15px 0 0; gap: 8px 15px; font-size: 10px; }.auth-console { display: none; }
  .owner-auth-screen .auth-card { max-width: none; padding: 25px 27px; }.auth-card-head { display: grid; grid-template-columns: 42px 1fr; column-gap: 13px; align-items: center; }.auth-card-head .auth-mark { grid-row: span 2; margin: 0; }.auth-card-head .section-index { align-self: end; }.auth-card-head h2 { align-self: start; margin: 4px 0 0; }.auth-card-head p { grid-column: 1 / -1; margin-top: 9px; }
}
@media (max-width: 560px) {
  .owner-auth-screen { min-height: 100svh; padding: 18px 17px 15px; }.owner-auth-screen > .brand { gap: 10px; }.owner-auth-screen .brand strong { font-size: 16px; }.owner-auth-screen .brand-symbol { width: 33px; height: 33px; }
  .owner-auth-layout { gap: 21px; padding: 31px 0 24px; }.auth-story-kicker { font-size: 8px; letter-spacing: .13em; }.auth-story h1 { margin: 14px 0 9px; font-size: clamp(35px,10vw,46px); }.auth-story > p { max-width: 390px; font-size: 11px; }.auth-benefits { gap: 7px 12px; margin-top: 12px; font-size: 9px; }.auth-benefits span { gap: 5px; }
  .owner-auth-screen .auth-card { padding: 22px 20px; border-radius: 14px; }.auth-card-head .auth-mark { width: 37px; height: 37px; }.auth-card-head h2 { font-size: 25px; }.auth-card-head p { font-size: 11px; }.owner-auth-screen .auth-tabs { margin: 15px 0; }.owner-auth-screen .form-stack { gap: 11px; }.owner-auth-screen .form-stack input { min-height: 43px; }.owner-auth-screen .auth-foot { font-size: 8px; }
}
.agent-gallery-page,.agent-chat-page { min-height: calc(100svh - 72px); color: #dce8de; background-color: #080e0b; background-image: linear-gradient(rgba(129,177,141,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(129,177,141,.035) 1px,transparent 1px),radial-gradient(ellipse at 60% 15%,rgba(24,98,53,.11),transparent 48%); background-size: 42px 42px,42px 42px,auto; }
.agent-gallery-page { padding: 0 22px 30px; }
.agent-gallery-heading { display:flex; min-height:126px; align-items:center; justify-content:space-between; gap:24px; padding:18px 27px; border:1px solid rgba(142,180,154,.12); border-radius:0 0 15px 15px; background:rgba(7,16,11,.92); }
.agent-gallery-heading .section-index { color:#5cdb7b; }.agent-gallery-heading h1 { margin:8px 0 5px; color:#eaf2eb; font-size:clamp(23px,2.4vw,31px); letter-spacing:-.05em; }.agent-gallery-heading p { margin:0; color:#87968b; font-size:12px; }
.agent-gallery-controls { display:flex; align-items:center; gap:10px; }.agent-gallery-tabs { display:flex; gap:4px; padding:4px; border:1px solid rgba(159,190,166,.13); border-radius:10px; background:rgba(255,255,255,.025); }.agent-gallery-tabs button { min-height:32px; padding:0 14px; border:0; border-radius:7px; background:transparent; color:#92a195; cursor:pointer; }.agent-gallery-tabs button.active { background:#55d774; color:#07130a; font-weight:700; }
.agent-search { display:flex; width:235px; min-height:38px; align-items:center; gap:8px; padding:0 11px; border:1px solid rgba(159,190,166,.15); border-radius:9px; background:rgba(255,255,255,.035); color:#63db7d; }.agent-search input { width:100%; border:0; outline:0; background:transparent; color:#dce8de; font:inherit; font-size:11px; }.agent-search input::placeholder { color:#75847a; }
.agent-gallery-body { display:grid; grid-template-columns:220px minmax(0,1fr); gap:23px; padding:24px 0; }.agent-categories { align-self:start; padding:17px 14px; border:1px solid rgba(142,180,154,.13); border-radius:13px; background:rgba(10,18,13,.87); }.agent-categories .section-index { color:#5cdb7b; font-size:9px; }.agent-categories h2 { display:flex; align-items:center; justify-content:space-between; margin:8px 0 15px; color:#dce8de; font-size:14px; }.agent-categories h2 small { padding:4px 7px; border-radius:6px; background:rgba(255,255,255,.06); color:#91a096; font-size:10px; }.agent-categories #agent-category-list { display:grid; gap:5px; }.agent-category { display:flex; min-height:36px; align-items:center; justify-content:space-between; padding:0 10px; border:1px solid transparent; border-radius:8px; background:transparent; color:#9aa99d; text-align:left; font-size:11px; cursor:pointer; }.agent-category small { color:#839187; font-size:9px; }.agent-category.active { border-color:rgba(82,206,110,.4); background:rgba(42,112,57,.22); color:#e1eee3; }.agent-category.active::before { width:6px; height:6px; margin-right:8px; border-radius:50%; background:#55d774; content:""; }.agent-category.active span { margin-right:auto; }
.agent-results { min-width:0; }.agent-results-heading { display:flex; align-items:center; justify-content:space-between; min-height:42px; margin-bottom:10px; }.agent-results-heading h2 { margin:0; color:#dce8de; font-size:17px; }.agent-results-heading > span { color:#7f8e82; font-size:10px; }.agent-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }.agent-card { display:flex; min-width:0; min-height:254px; flex-direction:column; padding:15px; border:1px solid rgba(167,145,61,.52); border-radius:12px; background:linear-gradient(145deg,rgba(30,34,23,.96),rgba(19,28,21,.96)); transition:transform .16s,border-color .16s,background .16s; }.agent-card:nth-child(3n+2) { border-color:rgba(112,154,78,.55); background:linear-gradient(145deg,rgba(24,36,25,.96),rgba(17,30,23,.96)); }.agent-card:hover { transform:translateY(-2px); border-color:#55d774; background:#1a2c1e; }.agent-card-top { display:flex; align-items:center; justify-content:space-between; }.agent-card-icon { display:grid; width:42px; height:42px; place-items:center; border:1px solid rgba(165,187,170,.2); border-radius:12px; background:rgba(255,255,255,.045); color:#dce8de; font-size:20px; }.agent-card-top > small { color:#8c9b8f; font-size:10px; }.agent-card h3 { display:-webkit-box; min-height:42px; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; margin:15px 0 3px; color:#e5eee6; font-size:15px; line-height:1.45; }.agent-card > p { display:-webkit-box; min-height:39px; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; margin:0; color:#8c9b8f; font-size:10px; line-height:1.65; }.agent-card-meta { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:auto; padding-top:12px; border-top:1px solid rgba(156,177,158,.13); }.agent-card-meta small,.agent-card-meta strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.agent-card-meta small { color:#738176; font-size:9px; }.agent-card-meta strong { margin-top:5px; color:#bac8bc; font-size:9px; font-weight:600; }.agent-card-actions { display:flex; justify-content:space-between; gap:7px; margin-top:12px; }.agent-card-actions button { min-height:29px; padding:0 9px; border:1px solid rgba(171,151,74,.4); border-radius:7px; background:rgba(255,255,255,.025); color:#a7b5a9; font-size:9px; cursor:pointer; }.agent-card-actions .agent-open { min-width:53px; color:#e4c95e; }.agent-card-actions button:hover { border-color:#55d774; color:#dff5e3; }.agent-empty { grid-column:1/-1; padding:60px 10px; color:#829187; text-align:center; font-size:12px; }
.agent-chat-page { display:flex; flex-direction:column; }.agent-chat-toolbar { display:grid; grid-template-columns:1fr minmax(220px,340px) 1fr; align-items:center; gap:15px; padding:10px 20px; border-bottom:1px solid rgba(142,180,154,.12); background:rgba(6,13,9,.78); }.agent-back { justify-self:start; min-height:39px; padding:0 14px; border:1px solid rgba(158,185,164,.15); border-radius:10px; background:rgba(255,255,255,.03); color:#d5e3d7; cursor:pointer; }.agent-back:first-letter { font-size:22px; vertical-align:-1px; }.agent-chat-toolbar .studio-model { justify-self:center; width:100%; }.agent-chat-toolbar .studio-actions { justify-self:end; }.agent-chat-canvas { display:flex; width:min(100%,980px); min-height:calc(100svh - 145px); flex:1; flex-direction:column; align-self:center; padding:20px 20px 17px; }.agent-chat-canvas .studio-intro { width:100%; margin:clamp(45px,11vh,120px) auto 14px; }.agent-guidance { width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); }.agent-guidance button { position:relative; min-height:88px; grid-template-columns:28px 1fr; align-content:center; align-items:start; column-gap:9px; }.agent-guidance button i { display:grid; width:26px; height:26px; grid-row:span 2; place-items:center; border:1px solid rgba(70,197,100,.3); border-radius:8px; color:#5cdb7b; font-size:10px; font-style:normal; }.agent-guidance button strong { align-self:center; font-size:13px; }.agent-guidance button span { grid-column:2; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; margin-top:5px; font-size:9px; text-overflow:ellipsis; }.agent-chat-canvas .studio-chat-log { width:100%; min-height:60px; max-height:245px; margin:14px auto; }.agent-chat-canvas .studio-composer { width:100%; margin-top:auto; }.agent-chat-canvas .studio-capability-note { width:100%; }
@media(max-width:1200px) { .agent-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:900px) { .agent-gallery-body { grid-template-columns:190px minmax(0,1fr); gap:14px; }.agent-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.agent-gallery-heading { align-items:flex-start; flex-direction:column; }.agent-gallery-controls { width:100%; }.agent-search { flex:1; }.agent-chat-canvas .studio-intro { margin-top:50px; } }
@media(max-width:700px) { .agent-gallery-page { padding:0 10px 20px; }.agent-gallery-heading { gap:14px; padding:18px 14px; }.agent-gallery-heading h1 { font-size:23px; }.agent-gallery-heading p { font-size:10px; }.agent-gallery-controls { align-items:stretch; flex-wrap:wrap; }.agent-search { flex-basis:100%; width:auto; }.agent-gallery-body { grid-template-columns:1fr; padding-top:13px; }.agent-categories { padding:11px; }.agent-categories h2 { margin:5px 0 9px; }.agent-categories #agent-category-list { display:flex; overflow:auto; gap:6px; }.agent-category { flex:0 0 auto; min-height:30px; padding:0 9px; font-size:9px; }.agent-category.active::before { display:none; }.agent-category.active span { margin:0; }.agent-results-heading h2 { font-size:15px; }.agent-grid { gap:8px; }.agent-card { min-height:235px; padding:11px; }.agent-card h3 { font-size:13px; }.agent-card > p { font-size:9px; }.agent-card-actions button { padding:0 6px; font-size:8px; }.agent-chat-toolbar { grid-template-columns:1fr auto; padding:8px 10px; }.agent-chat-toolbar .studio-model { display:none; }.agent-chat-canvas { min-height:calc(100svh - 110px); padding:10px; }.agent-chat-canvas .studio-intro { margin:clamp(35px,8vh,70px) auto 10px; padding:19px 16px; border-radius:17px; }.agent-chat-canvas .studio-intro h1 { font-size:25px; }.agent-chat-canvas .studio-intro p { font-size:10px; }.agent-guidance { gap:7px; }.agent-guidance button { min-height:76px; grid-template-columns:22px 1fr; column-gap:6px; padding:9px; }.agent-guidance button i { width:21px; height:21px; font-size:8px; }.agent-guidance button strong { font-size:10px; }.agent-guidance button span { font-size:8px; }.agent-chat-canvas .studio-chat-log { min-height:45px; max-height:185px; }.agent-chat-canvas .studio-composer { padding:10px; }.agent-chat-canvas .studio-composer textarea { min-height:55px; font-size:11px; }.agent-upload-note { max-width:160px; font-size:8px; }.agent-chat-canvas .studio-tools-right { flex-direction:row; align-items:center; }.agent-chat-canvas .studio-capability-note { font-size:8px; } }
.studio-file-input { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }
.studio-tool-button { cursor:pointer; }
.studio-tool-button:focus-within,.studio-tool-button:focus { outline:2px solid rgba(88,216,119,.65); outline-offset:2px; }
.studio-attachment-document { justify-content:center; padding-top:5px; }
.studio-attachment-doc-icon { display:grid; width:100%; height:48px; place-items:center; color:#68da82; font-size:13px; letter-spacing:.04em; }
.studio-attachment-document > span { padding-right:22px; }

/* Restaurant image prompt templates */
.image-gallery-page { min-height: calc(100svh - 72px); padding: 18px clamp(16px,2.3vw,34px) 45px; color: #e7eee9; background: radial-gradient(ellipse at 82% 0%,rgba(46,122,94,.1),transparent 38%),linear-gradient(135deg,rgba(112,191,153,.028) 1px,transparent 1px),#080e0b; background-size: auto,45px 45px,auto; }
.image-gallery-top { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:4px 2px 19px; }
.image-gallery-top .section-index { color:#68d985; font-size:9px; }
.image-gallery-top h1 { margin:7px 0 5px; font-size:27px; letter-spacing:-.05em; }
.image-gallery-top p { max-width:690px; margin:0; color:#93a398; font-size:11px; line-height:1.75; }
.image-gallery-top p strong { color:#c1d0c4; font-weight:600; }
.image-gallery-status { display:flex; align-items:center; gap:9px; padding:9px 12px; border:1px solid rgba(134,166,141,.13); border-radius:10px; background:rgba(255,255,255,.025); }
.image-status-dot { width:7px; height:7px; border-radius:50%; background:#e4b95d; box-shadow:0 0 12px rgba(228,185,93,.35); }
.image-gallery-status strong,.image-gallery-status small { display:block; }
.image-gallery-status strong { color:#c7d4c9; font-size:10px; }
.image-gallery-status small { margin-top:3px; color:#89968b; font-size:8px; }
.image-gallery-toolbar { display:flex; align-items:center; gap:15px; padding:0 0 13px; border-bottom:1px solid rgba(159,185,162,.12); }
.image-filter-tabs { display:flex; flex:0 0 auto; gap:5px; }
.image-filter-tabs button { min-height:32px; padding:0 13px; border:1px solid rgba(153,175,155,.12); border-radius:999px; background:rgba(255,255,255,.025); color:#9aa89c; font-size:10px; }
.image-filter-tabs button:hover,.image-filter-tabs button.active { border-color:rgba(82,211,128,.25); background:linear-gradient(110deg,#59d77f,#48ceb4); color:#082112; font-weight:700; }
.image-template-search { display:flex; min-width:180px; height:34px; flex:1; align-items:center; gap:9px; padding:0 12px; border:1px solid rgba(153,175,155,.13); border-radius:9px; background:rgba(255,255,255,.025); color:#8ca092; }
.image-template-search input { width:100%; border:0; outline:0; background:transparent; color:#e5eee7; font:inherit; font-size:10px; }
.image-template-search input::placeholder { color:#748378; }
.image-gallery-layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:17px; padding-top:15px; }
.image-gallery-sidebar { position:sticky; top:16px; align-self:start; padding:14px 11px; border:1px solid rgba(148,173,151,.12); border-radius:12px; background:rgba(10,17,12,.86); }
.image-gallery-sidebar > .section-index { color:#60d681; font-size:8px; }
.image-category-list { display:grid; gap:4px; margin-top:10px; }
.image-category { min-height:33px; padding:0 9px; border:1px solid transparent; border-radius:7px; background:transparent; color:#96a499; text-align:left; font-size:10px; cursor:pointer; }
.image-category:hover { color:#dbe8dd; background:rgba(255,255,255,.035); }
.image-category.active { border-color:rgba(85,207,113,.3); background:rgba(36,99,51,.22); color:#dcebdc; }
.image-category.active::before { display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:#5bd77a; content:""; }
.image-gallery-note { margin-top:18px; padding:11px 10px; border-top:1px solid rgba(144,167,146,.11); }
.image-gallery-note strong { color:#b8c9bb; font-size:10px; }
.image-gallery-note p { margin:6px 0 0; color:#829187; font-size:9px; line-height:1.7; }
.image-gallery-main { min-width:0; }
.image-gallery-results { display:flex; min-height:32px; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; }
.image-gallery-results h2 { margin:0; color:#dae6db; font-size:14px; }
.image-gallery-results > span { color:#7f9081; font-size:9px; }
.image-template-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start; gap:11px; }
.image-template-card { min-width:0; overflow:hidden; border:1px solid rgba(147,170,146,.14); border-radius:12px; background:linear-gradient(150deg,#141d17,#0e1510); transition:transform .16s,border-color .16s,box-shadow .16s; }
.image-template-card:hover { transform:translateY(-2px); border-color:rgba(86,215,124,.42); box-shadow:0 12px 30px rgba(0,0,0,.2); }
.image-template-art { position:relative; display:flex; min-height:145px; flex-direction:column; justify-content:flex-end; overflow:hidden; padding:15px; isolation:isolate; }
.image-template-art::before,.image-template-art::after { position:absolute; z-index:-1; content:""; }
.image-template-art::before { inset:0; opacity:.9; background:radial-gradient(ellipse at 70% 25%,rgba(255,255,255,.25),transparent 35%),linear-gradient(145deg,#405b3e,#18271e 66%,#0e1711); }
.image-template-art::after { right:-16px; top:14px; width:110px; height:110px; border:1px solid rgba(255,255,255,.22); border-radius:50%; box-shadow:0 0 0 12px rgba(255,255,255,.04),0 0 0 26px rgba(255,255,255,.025); }
.image-template-art small { color:rgba(248,255,244,.75); font-size:8px; letter-spacing:.15em; text-transform:uppercase; }
.image-template-art strong { max-width:85%; margin-top:9px; color:#fff9e8; font-size:20px; letter-spacing:-.045em; line-height:1.15; text-shadow:0 2px 14px rgba(0,0,0,.22); }
.image-template-art > span { margin-top:7px; color:rgba(248,255,244,.75); font-size:8px; }
.art-dish::before { background:radial-gradient(ellipse at 65% 37%,#f7d59d 0 10%,#d98b42 11% 17%,#ece2c6 18% 22%,transparent 23%),radial-gradient(ellipse at 70% 35%,rgba(252,226,162,.36),transparent 42%),linear-gradient(145deg,#81462c,#3a231b 65%,#171511); }
.art-new::before { background:radial-gradient(circle at 78% 25%,rgba(255,242,207,.8),transparent 24%),linear-gradient(140deg,#d47b50,#884d43 52%,#382c36); }
.art-delivery::before { background:radial-gradient(ellipse at 70% 33%,#eacb93 0 13%,#f4e6c8 14% 19%,transparent 20%),linear-gradient(145deg,#587565,#223d36 58%,#16231e); }
.art-combo::before { background:radial-gradient(circle at 72% 35%,#e9ba5f 0 8%,transparent 9%),radial-gradient(circle at 60% 42%,#c76446 0 10%,transparent 11%),radial-gradient(circle at 83% 45%,#e4d6a0 0 9%,transparent 10%),linear-gradient(145deg,#7d6537,#364132 65%,#172018); }
.art-festival::before { background:radial-gradient(circle at 73% 20%,rgba(255,215,130,.65),transparent 24%),linear-gradient(145deg,#8d4235,#492632 58%,#1b1b21); }
.art-menu::before { background:repeating-linear-gradient(0deg,transparent 0 23px,rgba(255,244,208,.14) 24px 25px),linear-gradient(145deg,#6b5944,#342e27 70%,#201d19); }
.art-brand::before { background:radial-gradient(ellipse at 72% 30%,rgba(243,197,126,.4),transparent 27%),linear-gradient(145deg,#3e6b57,#244437 57%,#172a25); }
.art-daily::before { background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(220,220,188,.12) 23px 24px),linear-gradient(145deg,#425c45,#233c30 68%,#1a2b24); }
.image-template-content { padding:11px 12px 12px; }
.image-template-tag { display:inline-flex; min-height:20px; align-items:center; padding:0 7px; border-radius:5px; background:rgba(75,186,117,.1); color:#77d994; font-size:8px; }
.image-template-content h3 { margin:8px 0 3px; color:#e2ebe3; font-size:12px; line-height:1.45; }
.image-template-content > p { margin:0; color:#829187; font-size:9px; }
.image-template-footer { display:flex; align-items:center; justify-content:space-between; gap:5px; margin-top:10px; padding-top:9px; border-top:1px solid rgba(148,169,148,.11); }
.image-template-labels { display:flex; flex-wrap:wrap; gap:4px; }
.image-template-labels span { padding:4px 5px; border-radius:4px; background:rgba(67,163,128,.1); color:#81cdb1; font-size:8px; }
.image-template-use { min-height:27px; flex:0 0 auto; padding:0 8px; border:1px solid rgba(91,210,120,.26); border-radius:7px; background:rgba(77,179,101,.08); color:#8fe0a1; font-size:8px; cursor:pointer; }
.image-template-use:hover { background:linear-gradient(110deg,#59d77f,#48ceb4); color:#092312; }
@media(max-width:1250px) { .image-template-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:980px) { .image-gallery-layout { grid-template-columns:165px minmax(0,1fr); gap:12px; }.image-template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .image-gallery-page { min-height:0; padding:14px 12px 30px; }.image-gallery-top { align-items:flex-start; flex-direction:column; gap:12px; }.image-gallery-status { align-self:flex-start; }.image-gallery-toolbar { align-items:stretch; flex-direction:column; gap:8px; }.image-filter-tabs { overflow:auto; }.image-filter-tabs button { flex:0 0 auto; }.image-gallery-layout { grid-template-columns:minmax(0,1fr); }.image-gallery-sidebar { position:static; }.image-category-list { display:flex; overflow:auto; gap:5px; scrollbar-width:none; }.image-category-list::-webkit-scrollbar { display:none; }.image-category { flex:0 0 auto; }.image-gallery-note { display:none; }.image-template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.image-template-art { min-height:125px; padding:11px; }.image-template-art strong { font-size:16px; }.image-template-footer { align-items:flex-start; flex-direction:column; }.image-template-use { width:100%; } }
@media(max-width:420px) { .image-template-grid { grid-template-columns:1fr; }.image-template-art { min-height:160px; }.image-template-footer { align-items:center; flex-direction:row; }.image-template-use { width:auto; } }