/* VenueOS: layered blue-night surfaces, luminous violet actions, live content. */
html.dark .venue-workspace .vos-main,.venue-control { background:radial-gradient(ellipse at 78% 0%,#42409c20,transparent 48%),#11131e; }
html.dark .venue-workspace .vos-hero { border:1px solid #7775ed40; border-radius:22px; background:radial-gradient(ellipse at 85% 20%,#7773ff40,transparent 55%),linear-gradient(115deg,#222440,#151726 72%); box-shadow:0 18px 46px #05061155,inset 0 1px #ffffff0f; }
.venue-workspace .vos-hero-content { padding:32px; }
html.dark .venue-workspace .vos-hero::before { display:block; width:290px; height:290px; left:auto; right:-40px; top:-110px; border:1px solid #a5a1ff24; border-radius:50%; background:none; box-shadow:0 0 0 35px #9692ff08,0 0 0 70px #9692ff06; }
.venue-workspace .vos-hero-title { font-size:clamp(2rem,3.5vw,3.25rem); }
html.dark .venue-workspace .data-card { background:linear-gradient(155deg,#22253a,#181b29 65%); border:1px solid #777da028; box-shadow:0 8px 24px #03061330,inset 0 1px #ffffff09; }
html.dark .venue-workspace .data-card-head { background:linear-gradient(90deg,#6d68dd0c,transparent); }
.venue-workspace .data-card { transition:box-shadow .25s,border-color .25s; }
.venue-workspace .data-card:hover { border-color:#8580eb55; box-shadow:0 14px 32px #05091a30; }
.venue-workspace :is(.menu-add-btn,.vos-hero-btn-primary,.login-btn),.venue-control .btn-brand,.vg-primary { box-shadow:0 4px 14px #6863fa40,inset 0 1px #ffffff26; }
.venue-workspace :is(.menu-add-btn,.vos-hero-btn-primary):hover,.venue-control .btn-brand:hover,.vg-primary:hover { transform:translateY(-2px); box-shadow:0 7px 22px #6863fa60; }
.venue-workspace .qrm-stat { background:linear-gradient(145deg,#4b458326,#ffffff03); box-shadow:inset 0 1px #c6c0ff14,0 10px 22px #07081725; border-radius:16px; }
.venue-control .app-header { background:linear-gradient(115deg,#222439,#171925); box-shadow:0 8px 30px #080a1740; position:relative; z-index:3; }
.venue-control .list-item { transition:transform .2s,background .2s,border-color .2s; }
.venue-control .list-item:hover { transform:translateX(3px); }
.venue-control .list-item.active { background:linear-gradient(110deg,#6d64d938,#24253a); box-shadow:inset 3px 0 #9990ff,0 8px 16px #06081330; }
.venue-control .edit-form-wrap { background:linear-gradient(160deg,#20223880,transparent 65%); }
.venue-control .edit-footer { box-shadow:0 -8px 28px #090b1840; }
.cc-guest-active :is(.app-tabs,.app-content) { display:none!important; }
.cc-guest-active :is(#sync-btn,#publish-btn) { display:none; }
#cc-guest-workspace { flex:1; min-height:0; overflow:auto; padding:30px clamp(18px,3vw,48px) 60px; background:radial-gradient(ellipse at 85% 5%,#4f4ac323,transparent 42%); }
#cc-guest-workspace[hidden] { display:none; }
.vg-hero { display:flex; align-items:center; justify-content:space-between; position:relative; overflow:hidden; padding:36px 40px; border:1px solid #8780f34a; border-radius:22px; background:radial-gradient(ellipse at 85% 25%,#6860e83d,transparent 58%),linear-gradient(110deg,#242642,#161927); box-shadow:0 20px 46px #05071455,inset 0 1px #ffffff12; }
.vg-eyebrow { display:block; font-size:10px; font-weight:700; letter-spacing:.16em; color:#aba5ff; margin-bottom:12px; }
.vg-hero h1 { font:700 clamp(28px,3.4vw,48px)/1.1 'Syne',sans-serif; letter-spacing:-.045em; margin:0 0 14px; color:#f4f2ff; }
.vg-hero p { color:#b7bad3; font-size:14px; margin:0; }
.vg-hero-meta { display:flex; align-items:center; gap:8px; margin-top:24px; font-size:11px; color:#b8b9ce; }
.vg-dot { width:6px; height:6px; border-radius:50%; background:#8ad9bd; box-shadow:0 0 12px #5be0b780; }
.vg-hero-art { width:190px; height:150px; position:relative; flex-shrink:0; display:grid; place-items:center; }
.vg-hero-art b { display:grid; place-items:center; width:64px; height:64px; border:1px solid #b5b0ff66; background:linear-gradient(135deg,#6c65eb60,#201e4c); border-radius:20px; font:800 28px 'Syne'; box-shadow:0 18px 35px #05061255,inset 0 1px #ffffff50; transform:rotate(-8deg); }
.vg-hero-art span { position:absolute; width:140px; height:140px; border:1px solid #a6a0ff30; border-radius:50%; transform:rotateX(40deg) rotate(-25deg); }
.vg-hero-art span:nth-child(2) { width:200px; height:200px; border-style:dashed; border-color:#a6a0ff20; }
.vg-tabs { display:flex; gap:28px; overflow-x:auto; border-bottom:1px solid #343850; margin:20px 0 0; }
.vg-tab { background:none; color:#a4abc5; white-space:nowrap; padding:20px 0 16px; border:0; border-bottom:2px solid transparent; font:600 12px 'Inter',sans-serif; cursor:pointer; transition:color .2s; }
.vg-tab.active { color:#bab3ff; border-color:#9b90ff; text-shadow:0 0 18px #988cff55; }
.vg-notice { min-height:30px; padding-top:9px; color:#86d6b4; font-size:12px; }
.vg-notice.error { color:#ffacae; }
.vg-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.vg-metric { overflow:hidden; position:relative; padding:24px; border:1px solid #7076a032; border-radius:16px; background:linear-gradient(135deg,#2c2d4b,#1d2032); box-shadow:0 8px 24px #070a1a35,inset 0 1px #ffffff10; }
.vg-metric strong { display:block; font-size:38px; line-height:1.2; letter-spacing:-.045em; color:#f2f0ff; margin-bottom:10px; font-weight:600; }
.vg-metric>span:last-of-type { color:#b4bad3; font-size:12px; }
.vg-metric-index { position:absolute; top:18px; right:20px; font:11px monospace; color:#8d8aae; }
.vg-metric i { position:absolute; height:3px; bottom:0; left:24px; right:24px; background:linear-gradient(90deg,#9b90ff,transparent); border-radius:6px; }
.vg-metric:nth-child(2) i { background:linear-gradient(90deg,#68c4a8,transparent); }
.vg-metric:nth-child(3) i { background:linear-gradient(90deg,#d9ae78,transparent); }
.vg-overview-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:24px; align-items:start; }
.vg-panel,.vg-editor { padding:26px; background:linear-gradient(150deg,#23263a,#191d2d); border:1px solid #737ba22d; border-radius:18px; box-shadow:0 12px 32px #05081835,inset 0 1px #ffffff09; }
.vg-feature { min-height:340px; display:grid; grid-template-columns:1fr .8fr; overflow:hidden; border:1px solid #8680d344; border-radius:18px; background:linear-gradient(120deg,#302a51,#1c2034); box-shadow:0 18px 40px #06081550; }
.vg-feature-copy { padding:36px; position:relative; z-index:1; }
.vg-feature h2 { font:700 32px/1.1 'Syne'; letter-spacing:-.04em; margin:25px 0 18px; color:#f0edff; }
.vg-feature p { font-size:13px; line-height:1.8; color:#b5b8d1; margin-bottom:24px; }
.vg-feature>img { width:100%; height:100%; object-fit:cover; min-height:340px; mask-image:linear-gradient(90deg,#0006,#000 25%); }
.vg-empty-art { display:grid; place-items:center; font:800 120px 'Syne'; color:#9c95ff33; }
.vg-primary { display:inline-flex; align-items:center; justify-content:space-between; gap:20px; border:1px solid #a198ff55; border-radius:9px; padding:12px 17px; background:linear-gradient(135deg,#766bfb,#4d4cbf); color:white; font:600 12px 'Inter'; cursor:pointer; transition:transform .2s,box-shadow .2s; }
.vg-primary:disabled { opacity:.4; cursor:not-allowed; }
.vg-section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.vg-section-heading h2 { color:#eeeefa; font:700 20px 'Syne'; letter-spacing:-.03em; margin:0; }
.vg-section-heading p { color:#a4abc4; margin:8px 0 0; font-size:12px; }
.vg-pill { font-size:10px; border:1px solid #9992e42e; border-radius:5px; padding:5px 8px; color:#b9b4e5; white-space:nowrap; }
.vg-category-list { max-height:340px; overflow:auto; }
.vg-category-list button { display:flex; justify-content:space-between; align-items:center; width:100%; background:none; color:#c6cbe0; border:0; border-bottom:1px solid #8088aa18; padding:14px 0; cursor:pointer; text-align:left; }
.vg-category-list button:hover { color:#c2baff; }
.vg-category-list b { font:12px monospace; color:#aba4ed; padding:4px 8px; background:#8d82e518; border-radius:4px; }
.vg-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.vg-toolbar input { flex:1; }
.vg-toolbar :is(input,select),.vg-field :is(input,textarea,select),.vg-hours-row>input { color:#e2e4f2; background:#111524; border:1px solid #3c405c; border-radius:8px; padding:12px; font:12px 'Inter'; min-width:0; }
.vg-toolbar>span { color:#939cb7; font-size:11px; white-space:nowrap; }
.vg-catalogue-layout { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,.9fr); gap:24px; align-items:start; }
.vg-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.vg-item { position:relative; overflow:hidden; padding:0; text-align:left; color:#eeeefa; border:1px solid #656e9635; border-radius:14px; background:linear-gradient(140deg,#262a40,#1a1e30); box-shadow:0 8px 22px #03061530; cursor:pointer; transition:transform .22s,border-color .22s,box-shadow .22s; }
.vg-item:hover { transform:translateY(-4px); border-color:#a196ff88; box-shadow:0 16px 28px #04061760; }
.vg-item.selected { border-color:#b0a4ff; box-shadow:0 0 0 2px #988bff22,0 12px 26px #02051845; }
.vg-item>img,.vg-item-placeholder { width:100%; height:145px; object-fit:cover; }
.vg-item-placeholder { display:grid; place-items:center; font:700 46px 'Syne'; color:#b8afff50; background:radial-gradient(circle at 60% 25%,#6f62cb35,transparent 65%),linear-gradient(135deg,#30334e,#1d2235); }
.vg-item-copy { padding:18px; }
.vg-item-copy small { color:#aaa3d6; font-size:9px; text-transform:uppercase; letter-spacing:.09em; }
.vg-item-copy h3 { font:600 14px/1.45 'Inter'; margin:7px 0 9px; padding-right:12px; }
.vg-item-copy p { color:#a9b1ca; font-size:11px; line-height:1.6; margin-bottom:13px; }
.vg-availability { font-size:10px; color:#8ad7bc; }
.vg-availability:before { content:''; display:inline-block; width:5px; height:5px; background:currentColor; border-radius:50%; margin-right:6px; }
.vg-availability.out { color:#e4b17d; }
.vg-item-arrow { position:absolute; right:16px; bottom:17px; color:#b4aaff; }
.vg-editor { position:sticky; top:0; max-height:calc(100dvh - 180px); overflow:auto; scroll-margin-top:18px; }
.vg-editor-heading { display:flex; align-items:start; justify-content:space-between; gap:14px; margin-bottom:24px; }
.vg-editor-heading h2 { font:700 20px/1.35 'Syne'; margin:0; color:#f3f0ff; }
.vg-editor-heading button { border:0; background:#ffffff08; color:#d1caff; border-radius:6px; padding:4px 10px; font-size:22px; cursor:pointer; }
.vg-editor-empty { text-align:center; padding:65px 10px; color:#979fbc; }
.vg-editor-empty>span { display:block; font-size:44px; color:#a596ff; margin-bottom:20px; }
.vg-editor-empty h3 { color:#d5d6eb; margin-bottom:10px; }
.vg-field { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.vg-field>span { font-size:10px; font-weight:600; color:#a8b0cd; letter-spacing:.035em; }
.vg-field :is(input,textarea,select) { width:100%; }
.vg-field textarea { resize:vertical; line-height:1.7; }
.vg-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.vg-allergens,.vg-tiers { border:1px solid #747da12c; padding:16px; border-radius:9px; margin-bottom:20px; }
.vg-allergens legend,.vg-tiers legend { color:#acb1ce; font-size:10px; padding:0 6px; }
.vg-allergens label { display:inline-flex; gap:5px; align-items:center; font-size:9px; margin:5px; color:#b6bdd7; }
.vg-help { font-size:10px; color:#9aa3be; line-height:1.7; margin:16px 0; }
.vg-translations { font-size:11px; color:#bfc3d9; line-height:1.7; padding:12px 0; }
.vg-translations summary { cursor:pointer; color:#b8adff; }
.vg-translations div { padding:12px 0; border-bottom:1px solid #555c752b; }
.vg-save { width:100%; position:sticky; bottom:0; }
.vg-site-form { max-width:920px; }
.vg-site-form h3 { margin:12px 0 22px; color:#e0e2f2; }
.vg-hours-row { display:grid; grid-template-columns:100px 90px 1fr; align-items:center; gap:16px; padding:12px 0; border-bottom:1px solid #69728f24; font-size:12px; }
.vg-hours-row label { font-size:11px; color:#a9b0c9; }
.vg-site-form>.vg-primary { margin-top:24px; }
.vg-promo-layout { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.vg-promo-preview { background:radial-gradient(ellipse at top,#6f58a338,transparent),#202035; border:1px solid #a298d447; border-radius:20px; padding:32px; box-shadow:0 20px 40px #06071345; }
.vg-promo-preview img { width:100%; max-height:240px; object-fit:cover; border-radius:10px; margin:10px 0 24px; }
.vg-promo-preview h2 { font:700 30px/1.1 'Syne'; color:#f0ecff; margin-bottom:16px; }
.vg-promo-preview p { color:#b7b6d1; line-height:1.8; margin-bottom:24px; }
.vg-promo-preview strong { display:block; font-size:26px; color:#c2b3ff; margin-bottom:22px; }
.vg-switch { display:flex; align-items:center; gap:12px; color:#d2cee8; padding-bottom:24px; font-size:12px; }
.vg-analytics-bottom { display:grid; grid-template-columns:1.2fr 1fr; gap:30px; margin-top:36px; }
#vg-analytics h3 { margin:20px 0; font:600 14px 'Inter'; color:#c6cce1; }
.vg-empty,.vg-loading { padding:90px 24px; text-align:center; color:#9ea7c3; }
.vg-empty h2,.vg-loading h2 { color:#e2dff9; margin:20px 0 10px; font-family:'Syne'; }
.vg-loading>span { display:block; width:44px; height:44px; margin:auto; border:2px solid #635fa140; border-top-color:#ac9cff; border-radius:50%; animation:vg-spin 1s linear infinite; }
@keyframes vg-spin { to { transform:rotate(360deg); } }
@keyframes vg-enter { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:no-preference) { .vg-body { animation:vg-enter .35s ease-out both; } .vg-metric:nth-child(2) { animation:vg-enter .45s ease-out both; } .vg-metric:nth-child(3) { animation:vg-enter .55s ease-out both; } .vg-metric:nth-child(4) { animation:vg-enter .65s ease-out both; } }
@media(min-width:1100px) { .venue-workspace .vos-hero-actions { right:32px; bottom:34px; } }
@media(max-width:1100px) { .vg-cards { grid-template-columns:1fr; } .vg-overview-grid { grid-template-columns:1fr; } }
@media(max-width:800px) { .vg-hero { padding:26px; } .vg-hero-art { display:none; } .vg-metrics { grid-template-columns:1fr 1fr; gap:12px; } .vg-catalogue-layout,.vg-promo-layout,.vg-analytics-bottom { grid-template-columns:1fr; } .vg-cards { grid-template-columns:1fr 1fr; } .vg-editor { position:static; max-height:none; } .vg-tabs { gap:22px; } .vg-toolbar { flex-wrap:wrap; } .vg-toolbar input { flex-basis:100%; } .vg-hours-row { grid-template-columns:80px 1fr; } .vg-hours-row>input { grid-column:1/-1; } .vg-feature { grid-template-columns:1fr; } .vg-feature>img { height:200px; min-height:0; } .vg-feature-copy { padding:26px; } .vg-section-heading { align-items:start; flex-wrap:wrap; } .vg-metric { padding:20px; } .vg-metric strong { font-size:32px; } }
@media(max-width:480px) { .vg-cards { grid-template-columns:1fr; } .vg-item { display:grid; grid-template-columns:100px 1fr; } .vg-item>img,.vg-item-placeholder { height:100%; min-height:145px; } .vg-form-grid { grid-template-columns:1fr; gap:0; } }
.vd-pulse { display:grid; grid-template-columns:1.6fr 1fr; gap:22px; margin:0 0 28px; }
.vd-pulse[hidden] { display:none; }
.vd-activity,.vd-menu-health { border:1px solid var(--border); border-radius:18px; padding:26px; background:var(--card); box-shadow:0 12px 24px #080b181c; }
html.dark .vd-activity { background:radial-gradient(ellipse at 100% 0%,#7770ee1a,transparent 60%),linear-gradient(145deg,#23263b,#191c2b); }
html.dark .vd-menu-health { background:linear-gradient(150deg,#373052,#202337); border-color:#978dd645; }
.vd-heading { display:flex; justify-content:space-between; align-items:start; gap:18px; }
.vd-pulse h2 { font:700 20px/1.3 'Syne',sans-serif; letter-spacing:-.035em; margin:0 0 22px; color:var(--text); }
.vd-period { font-size:10px; color:var(--dim); white-space:nowrap; padding:6px 8px; border:1px solid var(--border); border-radius:6px; }
.vd-activity-content { position:relative; min-height:180px; color:var(--dim); font-size:13px; }
.vd-metric strong { display:block; font-size:36px; color:var(--text); font-weight:600; letter-spacing:-.055em; line-height:1.1; }
.vd-metric>span { display:block; color:var(--dim); font-size:11px; margin-top:8px; }
.vd-chart { margin-top:10px; }
.vd-chart .vos-chart-plot { height:125px; }
.vd-menu-metrics { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin:18px 0 28px; }
.vd-menu-metrics .vd-metric:first-child { grid-column:1/-1; }
.vd-menu-metrics .vd-metric:first-child strong { font-size:52px; }
.vd-menu-metrics .vd-metric:not(:first-child) strong { font-size:28px; }
.vd-menu-link { width:100%; }
.vd-detail-link { display:inline-block; margin-top:25px; color:var(--brand); font-size:11px; text-decoration:none; }
@media(max-width:1050px) { .vd-pulse { grid-template-columns:1fr; } .vd-menu-metrics { grid-template-columns:1fr 1fr 1fr; } .vd-menu-metrics .vd-metric:first-child { grid-column:auto; } .vd-menu-metrics .vd-metric:first-child strong { font-size:28px; } }
@media(max-width:600px) { .vd-heading { flex-wrap:wrap; gap:0; } .vd-period { margin-bottom:20px; } .vd-activity,.vd-menu-health { padding:20px; } .venue-workspace .vos-hero-content { padding:24px; } }