/* FOOD VIBES Step 19: compact admin navigation, quick categories and design studio */
.fv-admin-header { display:flex!important; align-items:center!important; flex-wrap:wrap!important; gap:14px!important; position:relative; z-index:100; min-height:82px; padding:14px 28px!important; max-width:none!important; }
.fv-admin-header>.brand { display:inline-flex; align-items:baseline; gap:6px; flex-shrink:0; }
.fv-admin-header .brand span { font-size:12px; font-weight:800; margin-left:4px; letter-spacing:0; color:#45666a; }
.fv-admin-quick { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-left:auto; }
.fv-admin-quick a { display:inline-flex; align-items:center; white-space:nowrap; padding:9px 13px; font-size:14px; font-weight:700; color:#385b5e; text-decoration:none; border-radius:10px; }
.fv-admin-quick a:hover,.fv-admin-quick a.is-active { color:var(--fv-primary,#12b8b0)!important; background:#e9faf6; }
.fv-admin-menu { flex-shrink:0; }
.fv-admin-menu summary { display:flex; align-items:center; gap:9px; list-style:none; border:1px solid var(--fv-border,#f5aaaa); border-radius:12px; color:#185d5e; background:#f5fcfa; padding:10px 14px; cursor:pointer; font-size:14px; font-weight:800; white-space:nowrap; }
.fv-admin-menu summary::-webkit-details-marker { display:none; }
.fv-admin-menu summary:hover,.fv-admin-menu[open] summary { background:#e6f7f3; border-color:var(--fv-primary,#12b8b0); }
.fv-menu-chevron { margin-left:8px; font-weight:900; }
.fv-admin-menu[open] .fv-menu-chevron { transform:rotate(180deg); }
.fv-admin-dropdown { position:absolute; top:calc(100% - 1px); left:50%; transform:translateX(-50%); width:min(1000px,calc(100vw - 28px)); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; padding:24px; border:1px solid var(--fv-border,#f5aaaa); background:white; box-shadow:0 24px 60px rgba(8,69,67,.17); border-radius:0 0 18px 18px; z-index:1000; }
.fv-admin-links-group { min-width:0; }
.fv-admin-links-group h2 { color:#143c3e; font-size:13px; letter-spacing:.025em; margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid #e7f0ee; }
.fv-admin-links-group a { display:block; margin:2px 0; padding:9px 8px; border-radius:9px; color:#355e60!important; text-decoration:none; font-size:13px; font-weight:600; }
.fv-admin-links-group a:hover,.fv-admin-links-group a.is-active { color:#0a746e!important; background:#e8f8f4; }
.fv-admin-tools { display:flex; align-items:center; gap:12px; }
.fv-admin-tools form.logout,.fv-admin-tools form.logout button { margin:0; }
.fv-admin-tools .fv-notify-widget { gap:6px; }
.fv-admin-tools .fv-notify-latest { display:none; }
.fv-admin-tools .fv-notify-bell { border-color:var(--fv-border,#f5aaaa); }
.fv-admin-header .btn-dark { padding:9px 13px; min-height:40px; }
.fv-category-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.fv-category-title label { margin-bottom:0!important; }
.fv-manage-link { font-size:12px; font-weight:800; white-space:nowrap; color:#087c76; }
.fv-inline-category-button { display:inline-flex; align-items:center; width:auto; border:0; padding:8px 2px; background:none!important; color:#087c76!important; box-shadow:none!important; font-size:13px; font-weight:800; cursor:pointer; }
.fv-inline-category-button:hover { text-decoration:underline; }
.fv-inline-category-box { background:#f2fbf9; border:1px solid var(--fv-border,#f5aaaa); border-radius:12px; padding:14px; margin:4px 0 12px; }
.fv-inline-category-box[hidden] { display:none!important; }
.fv-add-category-row { display:flex; gap:8px; align-items:center; }
.fv-add-category-row input { min-width:0; flex:1; }
.fv-add-category-row button { flex-shrink:0; }
.fv-category-feedback { color:#36615f; font-size:12px; min-height:1.3em; line-height:1.5; }
.fv-category-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.fv-design-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:15px; margin:0 0 24px; }
.fv-design-heading h1 { margin:5px 0; font-size:clamp(24px,3vw,32px); }
.fv-design-heading p { margin-bottom:0; }
.fv-design-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(290px,.85fr); gap:22px; align-items:start; }
.fv-design-section { padding:24px!important; }
.fv-design-section h2 { margin:5px 0 22px; font-size:20px; }
.fv-design-section label { display:block; font-size:13px; font-weight:800; margin:16px 0 7px; }
.fv-design-section input:not([type=checkbox]):not([type=color]):not([type=range]),.fv-design-section textarea,.fv-design-section select { width:100%; }
.fv-color-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fv-color-row input[type=color] { width:100%; height:52px; border-radius:11px; padding:5px; background:white; border:1px solid #e3e9e8; cursor:pointer; }
.fv-current-background img { margin-top:16px; width:100%; max-height:190px; object-fit:cover; border-radius:12px; border:1px solid var(--fv-border,#f5aaaa); }
.fv-design-section .fv-removal-choice { display:flex; align-items:center; gap:8px; }
.fv-removal-choice input { width:18px; height:18px; }
.fv-overlay-row { display:flex; align-items:center; gap:16px; }
.fv-overlay-row input { flex:1; cursor:pointer; accent-color:var(--fv-primary,#12b8b0); }
.fv-overlay-row output { font-weight:800; font-size:13px; white-space:nowrap; }
.fv-design-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 30px; }
.fv-design-preview-wrap { position:sticky; top:25px; }
.fv-design-preview-label { font-size:13px; font-weight:800; margin:0 0 12px; color:#335f60; }
.fv-design-preview { --fv-preview-main:#12b8b0; --fv-preview-border:#f5aaaa; border:1px solid var(--fv-preview-border); background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 13px 35px rgba(19,59,53,.1); background-size:cover; }
.fv-design-preview-top { background:#fff; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 20px; }
.fv-design-preview-top strong { color:var(--fv-preview-main); font-size:20px; font-weight:900; }
.fv-design-preview-top span { font-size:11px; color:#5c7575; white-space:nowrap; }
.fv-design-preview-hero { margin:16px; padding:30px 22px; min-height:280px; background:linear-gradient(125deg,#e7fbf5,#fff5f3); border:1px solid var(--fv-preview-border); border-radius:14px; }
.fv-design-preview-hero small { color:#127f79; font-weight:800; font-size:10px; }
.fv-design-preview-hero h2 { color:#153c40; font-size:clamp(21px,2.4vw,30px); line-height:1.17; margin:14px 0 8px; }
.fv-design-preview-hero p { font-size:13px; color:#486b6b; margin:10px 0 16px; }
.fv-preview-button { display:inline-block; padding:10px 14px; color:#fff; background:var(--fv-preview-main); border-radius:9px; font-size:12px; font-weight:750; }
.fv-design-preview-cards { display:flex; gap:10px; padding:0 16px 20px; }
.fv-design-preview-cards span { display:block; height:65px; flex:1; background:linear-gradient(140deg,#fff,#e3f6f2); border:1px solid var(--fv-preview-border); border-radius:12px; }
@media(max-width:1150px) { .fv-admin-quick { margin-left:0; } .fv-admin-header .brand { margin-right:auto; } .fv-admin-tools { margin-left:auto; } }
@media(max-width:950px) { .fv-admin-dropdown { grid-template-columns:repeat(2,minmax(0,1fr)); } .fv-design-layout { grid-template-columns:1fr; } .fv-design-preview-wrap { position:static; order:-1; } }
@media(max-width:650px) { .fv-admin-header { padding:12px 14px!important; gap:10px!important; } .fv-admin-quick { display:none; } .fv-admin-header>.brand { width:auto; max-width:100%; } .fv-admin-header .brand { font-size:20px!important; } .fv-admin-tools { width:100%; justify-content:space-between; } .fv-admin-dropdown { grid-template-columns:1fr; max-height:68vh; overflow-y:auto; gap:10px; padding:16px; } .fv-color-row { grid-template-columns:1fr 1fr; } .fv-design-section { padding:18px!important; } }

/* STEP 34 — Website Design Studio: logo and live dark preview */
.fv-current-logo { margin:12px 0; display:flex; justify-content:flex-start; align-items:center; min-height:98px; padding:14px; border:1px solid var(--fv-border,#f5aaaa); border-radius:12px; background:linear-gradient(135deg,#fff,#eef8f5); }
.fv-current-logo img { display:block; object-fit:contain; width:auto; max-width:100%; height:auto; max-height:110px; }
.fv-preview-identity { display:flex; min-width:0; gap:9px; align-items:center; }
.fv-preview-identity img { max-width:52px; max-height:43px; width:auto; height:auto; object-fit:contain; }
.fv-preview-identity img[hidden] { display:none!important; }
.fv-preview-dark { color:#e9f3f1; background-color:#111e25; }
.fv-preview-dark .fv-design-preview-top { background:#17272f; }
.fv-preview-dark .fv-design-preview-top span { color:#b9caca; }
.fv-preview-dark .fv-design-preview-hero { background:linear-gradient(125deg,#1c3338,#34272d); }
.fv-preview-dark .fv-design-preview-hero small { color:#5bd6cb; }
.fv-preview-dark .fv-design-preview-hero h2 { color:#f1f8f7; }
.fv-preview-dark .fv-design-preview-hero p { color:#d0e0dd; }
.fv-preview-dark .fv-design-preview-cards span { background:linear-gradient(140deg,#24373b,#1b292e); }
@media(max-width:520px) { .fv-preview-identity img { max-width:38px; max-height:34px; } .fv-preview-identity strong { font-size:15px; } }