@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{font-family:Inter,system-ui,sans-serif;color:#1e293b;background:#f3f6fb;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}a{text-decoration:none}.studio{height:100dvh;display:flex;flex-direction:column;min-height:610px}.toolbar{height:72px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:12px 22px;gap:16px;background:#fff;border-bottom:1px solid #e4eaf1;z-index:2}.identity{display:flex;gap:11px;align-items:center}.mark{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#152e43;color:#fff;font-size:24px;font-weight:800}.mark span{color:#13bfd0}.identity strong,.identity small{display:block}.identity strong{font-size:16px;letter-spacing:-.03em}.identity small{font-size:15px;margin-top:4px;color:#6b7b92}.live-indicator{font-size:15px;color:#567084;background:#f3f8fc;padding:9px 12px;border-radius:24px}.pulse{display:inline-block;background:#17a77a;width:8px;height:8px;border-radius:100%;margin-right:6px}.toolbar-actions{display:flex;gap:9px;align-items:center}.toolbar a{font-size:15px;font-weight:700;padding:11px 14px;border-radius:9px}.ghost{color:#30475f;border:1px solid #dbe3ec}.solid{background:#172f46;color:white}.workspace{flex:1;min-height:0;display:grid;grid-template-columns:340px minmax(0,1fr)}.sidebar{background:white;border-right:1px solid #e0e7f0;display:flex;flex-direction:column;min-height:0}.intro{padding:22px 22px 14px}.kicker{font-size:15px;letter-spacing:.18em;color:#1985a9;font-weight:800}.intro h1{font-size:22px;letter-spacing:-.05em;margin:8px 0}.intro p,.helper{font-size:15px;line-height:1.6;color:#728297;margin:0}.sections{display:flex;gap:4px;flex-wrap:wrap;padding:4px 16px 12px;border-bottom:1px solid #e8edf3}.tab{border:1px solid transparent;border-radius:8px;background:#f5f8fc;color:#405b71;font-size:15px;padding:8px 11px}.tab.active{background:#e4f7fa;color:#087e91;border-color:#c6e9ed;font-weight:750}.panels{flex:1;min-height:0;overflow:auto;padding:20px}.panel{display:none}.panel.shown{display:block}.panel h2{font-size:16px;letter-spacing:-.03em;margin:0 0 9px}.panel .helper{margin-bottom:19px}.looks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.look{min-width:0;border:2px solid #e4e9f0;padding:8px;border-radius:13px;background:white;text-align:left}.look.active{border-color:#04b8cb;background:#f4fcfe}.look-swatches{height:53px;border-radius:8px;overflow:hidden;display:grid;grid-template-columns:42% 29% 29%;gap:3px;background:#fff;margin-bottom:9px}.look-swatches span{display:block}.look b{font-size:15px;display:block}.look small{font-size:15px;color:#748297;display:block;margin-top:3px}.note{background:#f6f9fc;border:1px solid #e4edf4;border-radius:13px;margin-top:17px;padding:15px;font-size:15px;line-height:1.55;color:#53687e}.note strong{font-size:15px;color:#29465b}.note p{margin:8px 0;color:#718196}.copyline{display:flex;gap:6px;align-items:center;margin:9px 0}.copyline code,.copyline input{border:1px solid #dbe5ef;background:white;padding:10px;border-radius:8px;font-size:15px;flex:1;min-width:0}.copyline button,.wide,.control-grid button{border:1px solid #cbdce8;background:white;color:#285b72;border-radius:9px;padding:10px;font-weight:700;font-size:15px}.wide{width:100%;display:block;margin-top:9px}.panel>label{display:block;font-size:15px;color:#3d5267;font-weight:650;margin-bottom:16px}.panel input:not([type=range]):not([type=checkbox]):not([type=file]),.panel select,.panel textarea{display:block;width:100%;padding:10px 11px;margin-top:7px;border:1px solid #dce5ef;border-radius:9px;background:white;color:#273f52;font-size:15px;outline:none}.panel textarea{resize:vertical}.panel input:focus,.panel select:focus,.panel textarea:focus{border-color:#05a6c0;box-shadow:0 0 0 3px #01bed014}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.control-grid label{font-size:15px;color:#415b70}.control-grid input[type=color]{width:100%;margin:8px 0 18px;height:44px;border:1px solid #d9e5ee;padding:4px;background:white;border-radius:10px}.panel input[type=range]{width:100%;margin:12px 0;accent-color:#00adbd}.fieldval{float:right;color:#168ca0;font-weight:800}.checkbox{display:flex!important;align-items:center;gap:8px}.checkbox input{accent-color:#00adbd}.panel .upload{display:block;border:1px dashed #9bb9ca;border-radius:10px;padding:14px;background:#f7fbfd;font-size:15px;cursor:pointer}.upload input{display:block;width:100%;margin:10px 0}.thumb{display:block;width:100%;aspect-ratio:1.5;object-fit:cover;margin:10px 0 18px;border-radius:11px;border:1px solid #e4ecf4;background:linear-gradient(125deg,#e0eff5,#f6f7fd)}.smallprint{font-size:15px;line-height:1.6;color:#8190a1;margin:22px 0}.sidebarbottom{border-top:1px solid #e9eef3;padding:12px 18px;color:#58758a;font-size:15px}.preview{display:flex;flex-direction:column;min-width:0;min-height:0}.previewbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 23px;flex:none;border-bottom:1px solid #e6ecf3;background:#fff}.pretitle b,.pretitle small{display:block}.pretitle b{font-size:15px}.pretitle small{font-size:15px;color:#8698a9;margin-top:4px}.routecontrol,.devices{display:flex;gap:4px;background:#f0f4f8;padding:4px;border-radius:10px}.routecontrol button,.devices button{border:0;background:transparent;padding:8px 10px;border-radius:7px;color:#667b8c;font-size:15px}.routecontrol button.selected,.devices button.selected{background:white;color:#18374b;box-shadow:0 2px 7px #1a3c5812;font-weight:800}.previewcanvas{flex:1;min-height:0;overflow:auto;padding:25px;display:flex;justify-content:center;align-items:flex-start;background-image:radial-gradient(#c4d0de 1px,transparent 1px);background-size:18px 18px}.deviceframe{width:100%;max-width:1500px;height:100%;min-height:470px;background:#fff;border-radius:14px;box-shadow:0 14px 40px #27405620;overflow:hidden;border:1px solid #dce6f2;transition:width .25s ease}.deviceframe.tablet{width:800px}.deviceframe.mobile{width:390px}.deviceframe iframe{width:100%;height:100%;border:0}.previewfooter{padding:12px 22px;background:#fff;color:#7990a1;font-size:15px;display:flex;justify-content:space-between;gap:8px}@media(max-width:1050px){.workspace{grid-template-columns:305px minmax(0,1fr)}.live-indicator{display:none}.previewbar{flex-wrap:wrap}}@media(max-width:720px){.studio{height:auto;min-height:100dvh}.toolbar{height:auto;flex-wrap:wrap}.workspace{display:flex;flex-direction:column}.sidebar{min-height:500px}.panels{max-height:560px}.preview{height:650px}.previewcanvas{padding:10px}.previewbar{padding:12px;gap:9px}.previewfooter{flex-wrap:wrap}.deviceframe.mobile{max-width:100%}}

/* Live card inspector — Web Templates WS */
.select-mode{border:1px solid #cbd7ea;border-radius:9px;background:#fff;color:#304a72;font:inherit;font-size:15px;font-weight:750;padding:9px 11px;cursor:pointer;white-space:nowrap}
.select-mode.selected{background:#e7f1ff;border-color:#4187f5;color:#1258be}
.inspector-note,.crop-editor{border:1px solid #d9e5f5;border-radius:13px;background:#f9fcff;padding:12px;margin:12px 0}
.inspector-note p,.crop-editor p{font-size:15px;color:#64748b;margin:7px 0 12px;line-height:1.5}
.selected-record{font-size:15px;line-height:1.4;background:white;border-radius:8px;padding:8px 10px;word-wrap:break-word}
.crop-editor{background:#fff}.crop-editor strong{display:block;margin-bottom:5px}.crop-editor output{font-weight:800;color:#145ab4}.crop-editor textarea{width:100%;font:15px/1.6 ui-monospace,SFMono-Regular,monospace;resize:vertical;border-radius:8px;margin:8px 0}
.crop-editor input[type=range]{width:100%;accent-color:#1269f5}
@media(max-width:900px){.select-mode{font-size:15px}}

/* Inline repeater-card content inspector */
.card-content-editor{border:1px solid #d6e4f6;border-radius:13px;background:#fff;padding:13px;margin:12px 0}
.card-content-editor strong{display:block;margin-bottom:4px}.card-content-editor p{font-size:15px;color:#64748b;line-height:1.5;margin:5px 0 12px}
.card-content-editor label{display:block;margin:12px 0}.card-content-editor input,.card-content-editor textarea{width:100%;box-sizing:border-box}
.card-content-editor #cardFieldsJSON{font:15px/1.5 ui-monospace,SFMono-Regular,monospace;resize:vertical;background:#f8fafd}

/* WS locale inspector */
.ws-language-choice{display:inline-flex;align-items:center;gap:7px;font:700 15px Inter,Arial,sans-serif;color:#496079;white-space:nowrap}
.ws-language-choice select{max-width:130px;min-height:32px;padding:5px 8px;border-radius:9px;border:1px solid #cbd9e9;background:#fff;color:#18314e}
@media(max-width:760px){.ws-language-choice{font-size:15px}.ws-language-choice select{max-width:95px}}


/* Visual Studio responsive app shell: preview-first, mobile accordion and slide-up tools. */
.mobile-sheet-handle,.mobile-dock,.mobile-sheet-backdrop,.mobile-toolbar-toggle,.mobile-controls-toggle{display:none}
.mobile-extra-controls{display:contents}
.ws-home-icon:hover,.ws-home-icon:focus-visible{background:#e9f8fa!important;color:#075a70!important}
@media(max-width:820px){
 html,body{width:100%;height:100%;overflow:hidden}
 .studio{height:100dvh;min-height:0;overflow:hidden;background:#f0f7fa}
 .toolbar{height:auto;min-height:66px;padding:9px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 9px;z-index:40;box-shadow:0 2px 16px #152d3910}
 .identity{min-width:0;gap:7px}.identity strong{font-size:18px}.identity small{font-size:15px;line-height:1.2;margin-top:1px;overflow-wrap:anywhere}
 .identity .mark,.identity .mark img{width:37px!important;height:37px!important;min-width:37px!important}
 .toolbar .live-indicator{display:none}
 .toolbar-actions{min-width:0;gap:7px;flex-wrap:wrap;justify-content:flex-end}
 .toolbar-actions .ws-home-icon{width:44px!important;height:44px!important;flex:0 0 44px!important;padding:8px!important}
 .toolbar-actions .ws-home-icon svg{width:27px;height:27px}
 .mobile-toolbar-toggle{display:inline-flex;justify-content:center;align-items:center;width:44px;height:44px;min-width:44px;padding:0;border:1px solid #d7e6eb;border-radius:10px;color:#195b71;background:#fff;cursor:pointer;font-size:18px}
 .toolbar-actions .ws-language-choice,.toolbar-actions>.ghost,.toolbar-actions>.solid{display:none}
 .mobile-top-open .toolbar-actions{grid-column:1/-1}
 .mobile-top-open .toolbar-actions .ws-language-choice,.mobile-top-open .toolbar-actions>.ghost,.mobile-top-open .toolbar-actions>.solid{display:flex;flex:1 1 40%;min-height:44px;justify-content:center;align-items:center;font-size:15px}
 .mobile-top-open .toolbar-actions .ws-language-choice{order:3;flex:1 1 100%;padding:3px 0}
 .mobile-top-open .toolbar-actions .ws-language-choice select{font-size:16px;max-width:none;min-height:44px}
 .mobile-top-open .toolbar-actions>.ghost{order:4}.mobile-top-open .toolbar-actions>.solid{order:5}
 .mobile-top-open .toolbar-actions .ws-home-icon{order:1}.mobile-top-open .mobile-toolbar-toggle{order:2}
 .workspace{display:flex;flex-direction:column;min-height:0;min-width:0;position:relative;flex:1;padding-bottom:calc(64px + env(safe-area-inset-bottom,0px));overflow:hidden}
 .preview{order:0;min-width:0;min-height:0;height:100%;flex:1;display:flex}
 .previewbar{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:9px 12px;gap:9px}
 .pretitle{flex:1 1 45%}.pretitle b{font-size:16px}.pretitle small{font-size:15px;line-height:1.25}
 .mobile-controls-toggle{display:inline-flex;align-items:center;justify-content:center;gap:9px;flex:0 0 auto;border:1px solid #cddfe9;color:#075e73;background:#fff;border-radius:10px;padding:9px 12px;min-height:44px;font-weight:700;font-size:15px}
 .mobile-controls-toggle[aria-expanded=true] span{transform:rotate(180deg)}
 .mobile-extra-controls{display:none;flex-basis:100%;grid-template-columns:1fr;gap:8px;min-width:0}
 .mobile-controls-open .mobile-extra-controls{display:grid}
 .previewbar .routecontrol,.previewbar .devices{width:100%;justify-content:space-between;min-width:0}
 .previewbar .routecontrol button,.previewbar .devices button{flex:1 1 0;min-width:0;min-height:44px;font-size:15px}
 .previewbar .select-mode{min-height:44px;width:100%;font-size:15px}
 .previewcanvas{padding:10px 9px 6px;overflow:auto;justify-content:center;align-items:stretch;min-height:0;flex:1}
 .deviceframe,.deviceframe.tablet,.deviceframe.mobile{height:100%;min-height:0;max-width:100%;width:100%}
 .deviceframe iframe{display:block;width:100%;height:100%;min-height:0}
 .previewfooter{display:none}
 .mobile-sheet-backdrop{display:block;position:fixed;inset:0;background:rgba(10,24,39,.34);z-index:45;opacity:0;pointer-events:none;transition:opacity .18s}
 .mobile-panel-open .mobile-sheet-backdrop{opacity:1;pointer-events:auto}
 .sidebar{order:1;position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom,0px));top:auto;height:min(74dvh,680px);max-height:calc(100dvh - 118px);min-height:0;width:100%;border-right:0;border-radius:19px 19px 0 0;z-index:50;display:flex;flex-direction:column;box-shadow:0 -15px 45px #163a5733;transform:translateY(110%);transition:transform .22s cubic-bezier(.2,.8,.2,1);pointer-events:none;visibility:hidden}
 .mobile-panel-open .sidebar{transform:translateY(0);pointer-events:auto;visibility:visible}
 .mobile-sheet-handle{display:flex;align-items:center;gap:12px;padding:12px 17px;border-bottom:1px solid #e6eef5;min-height:64px;flex:none}
 .mobile-sheet-grip{width:5px;height:35px;background:#b8d5df;border-radius:6px;flex:none}
 .mobile-sheet-handle>div{min-width:0;flex:1}.mobile-sheet-handle strong{display:block;color:#153449;font-size:17px}.mobile-sheet-handle small{display:block;margin-top:2px;color:#627f8e;font-size:15px}
 .mobile-sheet-handle button{width:44px;height:44px;flex:none;border:1px solid #d5e5ed;border-radius:11px;background:white;color:#183b52;font-size:19px}
 .sidebar .intro{padding:11px 18px 8px;flex:none}.sidebar .intro .kicker{font-size:15px;letter-spacing:.1em}.sidebar .intro h1{font-size:21px;margin:4px 0}.sidebar .intro p{font-size:15px;line-height:1.35}
 .sections{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;gap:7px;padding:9px 15px;flex:none;scroll-snap-type:x proximity}
 .sections .tab{flex:0 0 auto;min-height:44px;font-size:15px;padding:9px 13px;scroll-snap-align:start}
 .panels{flex:1;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;padding:17px 18px calc(28px + env(safe-area-inset-bottom,0px))}
 .panel h2{font-size:20px}.panels .panel{max-width:680px;margin:0 auto}.panel .helper{font-size:15px}
 .looks{grid-template-columns:repeat(2,minmax(0,1fr))}.look{min-height:118px;padding:9px}.look b,.look small{font-size:15px}
 .panel input:not([type=range]):not([type=checkbox]):not([type=file]),.panel select,.panel textarea{font-size:16px;min-height:46px}
 .panel button,.panel label{font-size:15px;min-height:44px}
 .sidebarbottom{flex:none;padding:9px 16px;max-height:65px;overflow:auto}
 .mobile-dock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;height:calc(64px + env(safe-area-inset-bottom,0px));padding:5px 6px env(safe-area-inset-bottom,0px);background:#fff;border-top:1px solid #d7e4ed;box-shadow:0 -6px 22px #173a5314;z-index:60;gap:2px}
 .mobile-dock button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:52px;border:0;border-radius:12px;background:transparent;color:#50697b;font-weight:700;font-size:15px;cursor:pointer}
 .mobile-dock button.active{color:#06708a;background:#e7f8fa}
 .mobile-dock-icon{font-size:22px;line-height:1}
 .mobile-dock button:focus-visible,.mobile-controls-toggle:focus-visible,.mobile-toolbar-toggle:focus-visible{outline:3px solid #087d9a;outline-offset:2px}
}
@media(max-width:390px){
 .toolbar{padding:7px 9px}.identity small{max-width:168px}.toolbar-actions{gap:4px}
 .mobile-dock button{font-size:15px;letter-spacing:-.035em}
 .mobile-sheet-handle{padding:10px 12px}.panels{padding:12px 13px 23px}
 .previewbar{padding:7px 10px}.pretitle small{max-width:195px;overflow-wrap:anywhere}
}
@media(hover:none) and (pointer:coarse){.mobile-dock button,.sections .tab,.mobile-sheet-handle button{touch-action:manipulation}}
@media(prefers-reduced-motion:reduce){.sidebar,.mobile-sheet-backdrop{transition:none!important}}


/* Wix Dashboard-inspired Website Appearance panel — collapse / slide in and out.
   Desktop and tablet landscape only; native mobile bottom sheet stays unchanged. */
.appearance-toggle{display:none}
@media(min-width:821px){
 .studio .workspace{position:relative;--ws-appearance-width:340px;grid-template-columns:var(--ws-appearance-width) minmax(0,1fr);transition:grid-template-columns .24s ease}
 .studio .workspace>.sidebar{min-width:0;overflow:hidden;transition:opacity .16s ease,visibility .16s ease}
 .studio .workspace>.preview{min-width:0}
 .studio .appearance-toggle{display:flex;align-items:center;justify-content:center;position:absolute;top:14px;left:max(8px,calc(var(--ws-appearance-width) - 19px));z-index:12;width:40px;height:40px;padding:0;color:#075e73;background:#fff;border:1px solid #c7dce6;border-radius:11px;box-shadow:0 3px 12px rgba(12,46,65,.12);cursor:pointer;transition:left .24s ease,background .17s ease}
 .studio .appearance-toggle svg{width:22px;height:22px;transition:transform .2s ease}
 .studio .appearance-toggle:hover{background:#eaf8fa;border-color:#6bbac9}
 .studio .appearance-toggle:focus-visible{outline:3px solid #077f9d;outline-offset:3px}
 .studio.appearance-collapsed .workspace{--ws-appearance-width:0px}
 .studio.appearance-collapsed .workspace>.sidebar{opacity:0;visibility:hidden;pointer-events:none}
 .studio.appearance-collapsed .appearance-toggle svg{transform:rotate(180deg)}
 .studio.appearance-collapsed .previewbar{padding-left:55px}
}
@media(min-width:821px) and (max-width:1050px){
 .studio .workspace{--ws-appearance-width:305px}
 .studio.appearance-collapsed .workspace{--ws-appearance-width:0px}
}
@media(max-width:820px){.appearance-toggle{display:none!important}}
@media(prefers-reduced-motion:reduce){
 .studio .workspace,.studio .workspace>.sidebar,.studio .appearance-toggle,.studio .appearance-toggle svg{transition:none!important}
}