@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root { --ink:#262825; --muted:#7b7f75; --line:#e6e6df; --paper:#f7f7f3; --white:#fff; --accent:#d9f46a; --sage:#a6b49d; --dark:#2a2e28; --serif:'Playfair Display',Georgia,serif; --sans:'DM Sans',Arial,sans-serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:14px; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }
.muted { color:var(--muted); }
.small { font-size:11px; }
.eyebrow,.sidebar-label { color:var(--muted); font:500 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.login-view { min-height:100vh; display:grid; grid-template-columns:44% 56%; background:#fbfbf8; }
.login-card { align-self:center; padding:12vw 9vw; max-width:620px; }
.login-card h1 { margin:22px 0 15px; font:500 clamp(44px,5vw,76px)/.98 var(--serif); letter-spacing:-.05em; }
.login-card h1 em { color:#8d9d82; }
.login-card > .muted { max-width:310px; line-height:1.6; }
.stack-form { display:grid; gap:16px; margin-top:52px; max-width:340px; }
label { display:grid; gap:7px; color:var(--muted); font-size:11px; }
input,textarea { width:100%; border:1px solid var(--line); border-radius:2px; background:var(--white); color:var(--ink); padding:11px 12px; outline:none; resize:vertical; }
input:focus,textarea:focus { border-color:#98a88f; box-shadow:0 0 0 3px rgba(166,180,157,.18); }
.button { border:0; border-radius:2px; padding:12px 16px; font-size:12px; font-weight:600; display:inline-flex; align-items:center; justify-content:space-between; gap:18px; transition:transform .15s,background .15s; }
.button:hover { transform:translateY(-1px); }
.button-dark { background:var(--dark); color:#fff; }
.button-light { background:#fff; border:1px solid var(--line); color:var(--ink); }
.button-accent { background:var(--accent); color:var(--ink); }
.full-width { width:100%; }
.form-error,.chat-feedback { min-height:16px; margin:0; color:#b64c43; font-size:11px; }
.login-note { margin-top:48px; color:#aaa; font:10px var(--mono); }
.login-art { min-height:100vh; background:linear-gradient(140deg,rgba(35,53,40,.16),rgba(20,35,24,.05)),url('https://images.unsplash.com/photo-1505881502353-a1986add3762?auto=format&fit=crop&w=1600&q=85') center/cover; position:relative; }
.art-caption { position:absolute; left:10%; bottom:9%; color:#fff; font:500 14px var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.art-caption span { font:italic 48px var(--serif); letter-spacing:-.04em; text-transform:none; }
.dashboard-view { min-height:100vh; display:grid; grid-template-columns:220px minmax(0,1fr) 348px; }
.sidebar { background:#f0f1ec; border-right:1px solid var(--line); padding:28px 20px 22px; display:flex; flex-direction:column; }
.brand-lockup { display:flex; align-items:center; gap:9px; font:600 16px var(--serif); margin:0 4px 66px; }
.brand-mark { display:grid; place-items:center; width:24px; height:24px; color:#fff; background:var(--dark); border-radius:50%; font:500 12px var(--serif); }
.brand-dot { color:#9fb15e; }
.sidebar-label { margin-bottom:13px; padding:0 6px; }
.site-list { display:grid; gap:5px; }
.add-client-button { border:1px dashed #c4c9bd; background:transparent; color:#6a7565; padding:10px; margin:13px 0 0; text-align:left; font-size:11px; }
.add-client-button span { font-size:16px; vertical-align:-1px; margin-right:4px; }
.site-item { width:100%; text-align:left; border:0; padding:12px 10px; background:transparent; border-radius:2px; display:flex; align-items:center; gap:10px; color:var(--ink); }
.site-item.active { background:#fff; box-shadow:0 3px 14px rgba(40,50,40,.04); }
.site-item strong { display:block; font-size:12px; font-weight:600; }
.site-item small,.connection-card small { display:block; color:var(--muted); font-size:10px; margin-top:3px; }
.site-avatar { display:grid; place-items:center; width:30px; height:30px; background:#c7d1c2; color:#40503f; font:italic 17px var(--serif); }
.sidebar-bottom { margin-top:auto; display:grid; gap:20px; }
.connection-card { display:flex; gap:9px; align-items:flex-start; padding:12px 8px; border-top:1px solid #dfe1da; border-bottom:1px solid #dfe1da; }
.connection-card strong { display:block; font-size:11px; }
.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#7d9b61; flex:0 0 auto; margin-top:4px; }
.text-button { border:0; background:transparent; color:var(--muted); padding:0 8px; text-align:left; font-size:11px; }
.main-column { min-width:0; background:#f8f8f5; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:25px 30px 18px; border-bottom:1px solid var(--line); }
.topbar h2 { margin:6px 0 0; font:500 24px var(--serif); letter-spacing:-.03em; }
.topbar-actions { display:flex; align-items:center; gap:9px; }
.save-state { color:var(--muted); font:10px var(--mono); margin-right:7px; }
.workspace-toolbar { display:flex; justify-content:space-between; align-items:center; padding:14px 30px; }
.toolbar-left { display:flex; gap:12px; align-items:center; }
.status-pill { display:flex; align-items:center; gap:7px; font-size:11px; }
.divider { height:16px; width:1px; background:var(--line); }
.view-switcher { display:flex; border:1px solid var(--line); background:#fff; border-radius:2px; overflow:hidden; }
.view-button { border:0; background:#fff; color:var(--muted); font:10px var(--mono); padding:8px 12px; }
.view-button.active { color:var(--ink); background:#eceee9; }
.preview-frame { margin:0 30px 30px; min-height:calc(100vh - 150px); display:flex; align-items:flex-start; justify-content:center; background:#e9eae5; padding:27px; overflow:auto; }
.site-preview { width:100%; max-width:980px; background:#f7f2ea; box-shadow:0 12px 28px rgba(31,40,28,.1); color:#334032; min-height:650px; transition:max-width .25s; }
.mobile-preview .site-preview { max-width:375px; }
.site-nav { padding:21px 32px; display:flex; justify-content:space-between; align-items:center; font-size:10px; letter-spacing:.11em; text-transform:uppercase; }
.site-logo { font:italic 21px var(--serif); letter-spacing:-.04em; text-transform:none; }
.site-nav-link { display:flex; gap:20px; color:#687265; }
.site-hero { position:relative; min-height:310px; padding:64px 11%; display:flex; align-items:flex-end; background:linear-gradient(90deg,rgba(28,49,35,.7),rgba(28,49,35,.1)),var(--hero-image) center/cover; color:#fff; }
.site-hero h1 { font:500 clamp(38px,5vw,66px)/.95 var(--serif); letter-spacing:-.05em; margin:0 0 12px; max-width:580px; }
.site-hero p { margin:0; max-width:380px; font-size:13px; line-height:1.5; color:#e4eade; }
.site-body { padding:42px 11%; }
.site-body h3 { margin:0 0 25px; font:500 29px var(--serif); letter-spacing:-.03em; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.service-card { border-top:1px solid #aebaab; padding-top:13px; }
.service-card strong { font:500 18px var(--serif); display:block; }
.service-card p { color:#7c867b; font-size:11px; line-height:1.5; min-height:37px; }
.service-card span { color:#677568; font:10px var(--mono); }
.site-footer { margin:10px 11% 0; padding:18px 0 30px; border-top:1px solid #cdd4c8; display:flex; justify-content:space-between; color:#788476; font:10px var(--mono); }
.editor-panel { background:#fff; border-left:1px solid var(--line); min-width:0; }
.panel-tabs { display:flex; border-bottom:1px solid var(--line); padding:0 20px; }
.panel-tab { position:relative; border:0; background:transparent; color:var(--muted); padding:20px 8px 15px; margin-right:16px; font-size:11px; }
.panel-tab.active { color:var(--ink); }
.panel-tab.active:after { content:''; position:absolute; bottom:-1px; left:8px; right:8px; height:2px; background:var(--ink); }
.panel-content { padding:22px 20px 30px; max-height:calc(100vh - 58px); overflow:auto; }
.assistant-intro { display:flex; gap:11px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.assistant-orb { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:var(--accent); font-size:14px; }
.assistant-intro strong { font-size:12px; }
.assistant-intro p { margin:5px 0 0; color:var(--muted); font-size:11px; line-height:1.4; }
.chat-form { display:grid; gap:8px; padding:16px 0 3px; }
.chat-form textarea { background:#f8f8f5; border-color:#ededeb; font-size:11px; }
.chat-form .button { justify-self:end; padding:9px 12px; font-size:11px; }
.chat-feedback { margin:4px 0 17px; color:#68815d; }
.section-heading { display:flex; align-items:center; gap:9px; margin:17px 0 15px; color:var(--muted); font:10px var(--mono); text-transform:uppercase; letter-spacing:.1em; }
.section-heading.compact { margin-top:27px; }
.section-rule { height:1px; background:var(--line); flex:1; }
.editor-form { display:grid; gap:12px; }
.editor-form label { font-size:10px; }
.editor-form input,.editor-form textarea { font-size:11px; padding:9px 10px; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.service-editor { padding:12px 0; border-top:1px solid var(--line); display:grid; gap:8px; }
.service-editor-title { display:flex; justify-content:space-between; align-items:center; font-size:11px; font-weight:600; }
.service-editor-title span { color:var(--muted); font:10px var(--mono); }
.media-chip { display:flex; gap:9px; align-items:center; padding:8px; border:1px solid var(--line); background:#fbfbf9; }
.media-thumb { width:34px; height:34px; background:linear-gradient(135deg,rgba(46,70,44,.2),rgba(46,70,44,.05)),url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=100&q=70') center/cover; }
.media-chip strong,.media-chip small { display:block; font-size:10px; }
.media-chip small { color:var(--muted); margin-top:3px; }
.history-heading h3 { margin:8px 0 8px; font:500 24px var(--serif); }
.history-heading p { font-size:11px; line-height:1.5; }
.history-list { display:grid; gap:9px; margin:25px 0 28px; }
.history-card { border:1px solid var(--line); padding:12px; }
.history-card.current { border-color:#9cac91; background:#f7faf2; }
.history-card strong { display:block; font-size:11px; }
.history-card small { display:block; color:var(--muted); margin-top:5px; font-size:10px; }
.history-card button { border:0; padding:6px 0 0; background:transparent; color:#627558; font-size:10px; }
.change-summary { padding-top:18px; border-top:1px solid var(--line); }
.change-summary ul { margin:12px 0 0; padding-left:17px; color:var(--muted); font-size:11px; line-height:1.7; }
.setup-card { border:1px solid #dfe6d5; background:#f7faf2; padding:14px; margin-bottom:27px; }
.setup-card h4 { margin:7px 0 5px; font:500 20px var(--serif); }
.setup-card p { margin:0 0 12px; color:var(--muted); font-size:10px; line-height:1.5; }
.setup-form { display:grid; gap:10px; margin:15px 0 16px; }
.setup-form input { background:#fff; font-size:10px; padding:9px 10px; }
.setup-actions { display:flex; flex-wrap:wrap; gap:7px; }
.setup-actions .button { font-size:10px; padding:9px 10px; }
.setup-results { display:grid; gap:5px; margin:0 0 13px; }
.setup-check { margin:0 !important; padding:7px 8px; border-left:2px solid #a8b99d; background:#fff; color:#64765c !important; }
.setup-check.credentials_missing,.setup-check.needs_setup,.setup-check.schema_mismatch,.setup-check.access_denied,.setup-check.error { border-color:#c99664; color:#986b3f !important; }
.setup-card [data-sync-site] { margin-top:14px; font-size:10px; }
.setup-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.setup-list li { display:flex; gap:7px; align-items:flex-start; color:#596653; font-size:10px; line-height:1.35; }
.setup-list li:before { content:'○'; color:#9ba993; font-size:14px; line-height:10px; }
.setup-list li.ready:before { content:'✓'; color:#6c8a59; }
.setup-list li.required:before { content:'!'; color:#b08a43; font-weight:600; }
.setup-url { display:block; margin-top:11px; color:#607354; font:10px var(--mono); overflow-wrap:anywhere; }
.modal { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:20px; background:rgba(30,35,29,.28); backdrop-filter:blur(4px); }
.modal-card { width:min(600px,100%); max-height:calc(100vh - 40px); overflow:auto; background:#fff; padding:26px; box-shadow:0 20px 60px rgba(28,35,26,.18); }
.modal-heading { display:flex; justify-content:space-between; gap:20px; margin-bottom:25px; }
.modal-heading h3 { margin:8px 0 7px; font:500 31px var(--serif); letter-spacing:-.03em; }
.modal-heading p { margin:0; color:var(--muted); font-size:11px; line-height:1.5; max-width:410px; }
.close-button { border:0; background:transparent; color:var(--muted); font-size:25px; line-height:1; padding:0; height:25px; }
.optional { color:#a7aaa1; font-size:9px; margin-left:3px; }
.setup-note { display:grid; gap:6px; padding:12px; border-left:2px solid var(--accent); background:#fafbf7; color:var(--muted); font-size:10px; line-height:1.45; }
.setup-note strong { color:var(--ink); font-size:11px; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 20px); opacity:0; pointer-events:none; padding:12px 16px; background:var(--dark); color:#fff; font-size:11px; transition:opacity .2s,transform .2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:1100px) { .dashboard-view { grid-template-columns:190px minmax(0,1fr); } .editor-panel { grid-column:1 / -1; border-left:0; border-top:1px solid var(--line); } .panel-content { max-height:none; } }
@media (max-width:700px) { .login-view { grid-template-columns:1fr; } .login-art { display:none; } .login-card { padding:22vw 10vw; } .dashboard-view { display:block; } .sidebar { padding:17px 18px; display:block; } .brand-lockup { margin:0 0 18px; } .site-list { display:flex; overflow:auto; } .site-item { width:auto; flex:0 0 auto; } .add-client-button { width:100%; margin-bottom:10px; } .sidebar-bottom { display:none; } .topbar { padding:20px; align-items:flex-start; gap:12px; flex-direction:column; } .topbar-actions { width:100%; flex-wrap:wrap; } .save-state { width:100%; } .workspace-toolbar { padding:12px 20px; } .preview-frame { margin:0 20px 20px; padding:12px; } .service-grid { grid-template-columns:1fr; } .site-nav { padding:18px; } .site-nav-link { display:none; } .site-hero { padding:48px 8%; } .site-body { padding:32px 8%; } .site-footer { margin-left:8%; margin-right:8%; } .modal-card { padding:20px; } .modal-heading h3 { font-size:26px; } }