:root{color:#201f1b;background:#ecebe5;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,textarea{font:inherit}button{cursor:pointer}.appShell{min-height:100vh;padding:22px;background:linear-gradient(180deg,#ffffffb8,#ecebe5d6),#ecebe5}.topBar,.editorTopBar{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:58px}.logoBug{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:720;letter-spacing:0;color:#2a2925}.logoBug img{width:34px;height:34px;object-fit:cover;border-radius:6px}.logoBugCompact span{display:none}.dashboardHero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:36px 2px 20px}.dashboardHero h1,.loginPanel h1,.modalPanel h2,.clientSidePanel h1{margin:0;font-size:clamp(28px,4vw,56px);line-height:.95;letter-spacing:0}.eyebrow{margin:0 0 8px;color:#757166;font-size:12px;font-weight:760;text-transform:uppercase;letter-spacing:.08em}.primaryButton,.ghostButton,.dangerButton,.iconButton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;border:0;border-radius:8px;font-weight:700;transition:transform .12s ease,background .12s ease,border-color .12s ease}.primaryButton{padding:0 16px;background:#201f1b;color:#faf9f4;box-shadow:0 14px 32px #201f1b2e}.primaryButton:disabled{opacity:.58}.ghostButton{padding:0 12px;background:#ffffffad;color:#2a2925;border:1px solid rgba(32,31,27,.1)}.dangerButton{width:100%;padding:0 12px;background:#fff1ef;color:#922c21;border:1px solid #f3c3bb}.iconButton{width:34px;min-height:34px;background:#f4f2ec;color:#292824;border:1px solid rgba(32,31,27,.08)}.primaryButton:hover,.ghostButton:hover,.iconButton:hover,.dangerButton:hover{transform:translateY(-1px)}.toolbar{display:flex;align-items:center;gap:10px;max-width:680px;min-height:46px;padding:0 14px;border-radius:8px;background:#ffffffb8;border:1px solid rgba(32,31,27,.08);box-shadow:0 16px 40px #2f2d260f}.toolbar input{width:100%;border:0;outline:0;background:transparent}.cardGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:22px}.mockupCard{padding:0;overflow:hidden;text-align:left;border:1px solid rgba(32,31,27,.08);border-radius:8px;background:#ffffffb8;box-shadow:0 22px 60px #2d2b2414}.thumbFrame{position:relative;display:grid;place-items:center;height:190px;background:#dedbd1;color:#918d82}.thumbFrame img{width:100%;height:100%;object-fit:cover}.statusPill{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:0}.statusPill.draft{background:#1f1e1a;color:#f4f2ec}.thumbFrame .statusPill{position:absolute;top:10px;right:10px}.cardBody{padding:15px}.cardBody h3{margin:0 0 5px;font-size:17px}.cardBody p,.cardMeta,.muted{color:#716d63}.cardBody p{margin:0 0 14px}.cardMeta{display:flex;justify-content:space-between;gap:10px;font-size:12px}.loginShell,.clientLoginShell{display:grid;place-items:center;min-height:100vh;padding:24px;background:radial-gradient(circle at 50% 10%,#fff 0,#eeede7 46%,#d8d4ca)}.loginPanel,.modalPanel{width:min(440px,100%);padding:26px;border-radius:8px;background:#ffffffd6;border:1px solid rgba(32,31,27,.08);box-shadow:0 30px 90px #28261f29}.loginPanel{display:grid;gap:20px}.loginPanel p{margin:8px 0 0;color:#6e6a60}.field{display:grid;gap:7px}.field span,.sliderRow span,.colorRow span{color:#6f6b61;font-size:12px;font-weight:760}.field input,.field textarea{width:100%;min-height:40px;padding:10px 11px;color:#22211d;background:#ffffffbd;border:1px solid rgba(32,31,27,.12);border-radius:8px;outline:0}.field textarea{min-height:88px;resize:vertical}.error{padding:11px 12px;border-radius:8px;color:#7c2018;background:#fff0ed;border:1px solid #efc1b8}.modalBackdrop{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:#1c1b1861;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.modalPanel{position:relative;display:grid;gap:14px}.closeButton{position:absolute;top:16px;right:16px}.emptyState,.loading{display:grid;place-items:center;gap:8px;min-height:340px;color:#777267;text-align:center}.editorShell{min-height:100vh;background:#dfddd4}.editorTopBar{position:sticky;top:0;z-index:10;min-height:62px;padding:10px 14px;background:#efeee7d1;border-bottom:1px solid rgba(32,31,27,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.editorActions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}.editorGrid{display:grid;grid-template-columns:320px minmax(420px,1fr) 330px;gap:12px;height:calc(100vh - 62px);padding:12px}.controlRail{display:flex;flex-direction:column;gap:12px;overflow:auto}.panelSection{padding:15px;border-radius:8px;background:#faf9f4d6;border:1px solid rgba(32,31,27,.08);box-shadow:0 16px 42px #2a28220f}.panelSection h2,.panelSection h3{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:15px}.panelSection h2{font-size:20px}.sectionTitle{display:flex;align-items:center;justify-content:space-between}.variantList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}.variantChip{min-height:90px;padding:7px;border-radius:8px;border:1px solid rgba(32,31,27,.1);background:#f4f2ec;color:#292824}.variantChip.active{border-color:#23221e;box-shadow:inset 0 0 0 1px #23221e}.variantChip img,.variantChip span{display:block;width:100%;height:52px;object-fit:cover;border-radius:6px;background:#dbd8cf}.variantChip b{display:block;margin-top:6px;font-size:12px}.dropZone{display:flex;align-items:center;justify-content:center;gap:8px;min-height:64px;margin-bottom:10px;padding:12px;color:#555149;border:1px dashed rgba(32,31,27,.26);border-radius:8px;background:#ffffff8a}.viewerStage{position:relative;overflow:hidden;min-height:480px;border-radius:8px;background:#efeee9;border:1px solid rgba(32,31,27,.08);box-shadow:0 22px 70px #2a28221a}.canViewer{width:100%;height:100%;min-height:360px}.viewPresets{position:absolute;left:14px;right:14px;bottom:14px;display:flex;justify-content:center;gap:6px;flex-wrap:wrap;pointer-events:none}.viewPresets button{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 9px;border-radius:8px;border:1px solid rgba(32,31,27,.12);background:#faf9f4b8;color:#37342e;font-size:12px;font-weight:760;pointer-events:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.viewPresets button.active{background:#24231f;color:#f6f4ee}.sliderRow{display:grid;grid-template-columns:1fr 132px 42px;align-items:center;gap:10px;min-height:34px}.sliderRow input{accent-color:#24231f}.sliderRow b{text-align:right;font-size:12px;color:#3d3a33}.colorRow{display:grid;grid-template-columns:1fr 48px auto;align-items:center;gap:10px}.colorRow input{width:48px;height:34px;padding:0;border:0;background:transparent}code{display:block;overflow-wrap:anywhere;padding:8px;border-radius:8px;color:#403d36;background:#201f1b0f;font-size:12px}.sharePanel{display:grid;gap:9px}.shareLine{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:#6e6a60}.shareLine button,.historyItem button{display:inline-flex;align-items:center;gap:5px;min-height:28px;border:0;border-radius:8px;background:#e7e4da;color:#292824}.historyList{display:grid;gap:8px}.historyItem{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px;border-radius:8px;background:#201f1b0d}.historyItem b,.historyItem span{display:block;font-size:12px}.historyItem span{color:#716d63}.clientViewerShell{display:grid;grid-template-columns:minmax(0,1fr) 360px;min-height:100vh;background:#e9e7df}.clientCanvas{min-height:100vh}.clientSidePanel{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:24px;background:#faf9f4d1;border-left:1px solid rgba(32,31,27,.08);box-shadow:-24px 0 80px #2a282214;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.clientSidePanel h1{margin:0 0 22px;font-size:34px}.clientSidePanel dl{display:grid;gap:12px;margin:0}.clientSidePanel dt{color:#7a756b;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.clientSidePanel dd{margin:2px 0 0;font-weight:720}.clientNotes{margin-top:22px;color:#4e4a42;line-height:1.48;white-space:pre-wrap}.clientVariants{display:grid;gap:9px}.clientVariants h2{margin:0 0 2px;font-size:14px}.clientVariants button{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:10px;padding:7px;text-align:left;border-radius:8px;border:1px solid rgba(32,31,27,.1);background:#ffffff8a}.clientVariants button.active{border-color:#24231f;background:#fff}.clientVariants img{width:54px;height:54px;border-radius:6px;object-fit:cover;background:#dad7ce}@media(max-width:1120px){.editorGrid{grid-template-columns:300px minmax(360px,1fr);height:auto}.controlRail:last-child{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.viewerStage{min-height:620px}}@media(max-width:760px){.appShell{padding:14px}.dashboardHero,.topBar,.editorTopBar{align-items:flex-start;flex-direction:column}.editorGrid,.clientViewerShell{grid-template-columns:1fr}.controlRail:last-child{grid-template-columns:1fr}.viewerStage,.clientCanvas{min-height:520px}.clientSidePanel{border-left:0;border-top:1px solid rgba(32,31,27,.08)}.sliderRow{grid-template-columns:1fr}}