:root {
    color-scheme: dark;
    --bg: #080a0f;
    --surface: #0f1219;
    --surface-2: #151922;
    --surface-3: #1b202b;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.14);
    --text: #f4f6fb;
    --muted: #8d96a8;
    --muted-2: #626b7d;
    --accent: #7c5cff;
    --accent-hover: #927aff;
    --accent-soft: rgba(124, 92, 255, 0.14);
    --green: #38d996;
    --danger: #ff6376;
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    --editor-width: 43%;
    --font-xs: 0.75rem;
    --font-sm: 0.8125rem;
    --font-ui: 0.875rem;
    --font-control: 0.9375rem;
    --font-body: 1rem;
    --font-body-lg: 1.0625rem;
    --font-title-sm: 1.125rem;
    --font-title: 1.1875rem;
}

body.light-theme {
    color-scheme: light;
    --bg: #edf0f6;
    --surface: #ffffff;
    --surface-2: #f7f8fb;
    --surface-3: #edf0f6;
    --line: rgba(23, 29, 45, 0.09);
    --line-strong: rgba(23, 29, 45, 0.16);
    --text: #171b26;
    --muted: #687084;
    --muted-2: #979eac;
    --accent-soft: rgba(103, 75, 225, 0.1);
    --shadow: 0 20px 60px rgba(38, 43, 63, 0.12);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
    margin: 0;
    min-width: 320px;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: var(--font-body);
    line-height: 1.5;
}

button, input, textarea, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.app-shell {
    height: 100%;
    display: grid;
    grid-template-rows: 64px minmax(0, 1fr) auto;
}

.app-shell:has(.account-strike-banner:not([hidden])) {
    grid-template-rows: 64px auto minmax(0, 1fr) auto;
}

.topbar {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(14px, 2vw, 30px);
    padding: 0 18px 0 22px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(18px);
    z-index: 10;
}
.main-nav { display: flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.nav-button { height: 29px; padding: 0 13px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-size:var(--font-control); font-weight: 650; }
.nav-button:hover { color: var(--text); }
.nav-button.active { background: var(--surface-3); color: var(--text); box-shadow: 0 2px 7px rgba(0,0,0,.14); }

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--text);
    text-decoration: none;
}

.brand-mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(151, 127, 255, 0.5);
    border-radius: 11px;
    background: linear-gradient(145deg, #8c72ff, #5a3ddb);
    color: white;
    box-shadow: 0 8px 24px rgba(99, 71, 218, 0.3);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size:var(--font-body);
    font-weight: 800;
}

.brand strong, .brand small { display: block; }
.brand strong { font-size:var(--font-title-sm); letter-spacing: -0.01em; }
.brand small { margin-top: 1px; color: var(--muted); font-size:var(--font-control); letter-spacing: .09em; text-transform: uppercase; }

.topbar-actions, .preview-actions, .device-switcher {
    display: flex;
    align-items: center;
    gap: 7px;
}
.topbar-actions { min-width: 0; justify-self: end; }

.button, .icon-button, .device-button, .pane-action, .text-button {
    border: 0;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.button {
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    background: var(--surface-2);
    font-size:var(--font-body);
    font-weight: 650;
}

.button:hover { background: var(--surface-3); border-color: var(--muted-2); }
.button.primary { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 7px 22px rgba(124,92,255,.24); }
.button.primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.button kbd { padding: 2px 5px; border-radius: 4px; background: rgba(255,255,255,.15); font-size:var(--font-ui); font-family: inherit; }
.button.login-button { border-color: rgba(124,92,255,.35); background: var(--accent-soft); color: var(--accent-hover); }
.button.login-button:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
.button.loading { pointer-events: none; opacity: .72; }
.button.loading svg { animation: spin .7s linear infinite; }

.icon-button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    position: relative;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    background: var(--surface-2);
}

.icon-button:hover { background: var(--surface-3); }
.icon-button.small { width: 30px; height: 30px; border-color: transparent; background: transparent; color: var(--muted); }
.icon-button.small:hover { background: var(--surface-3); color: var(--text); }
.icon-button.tiny { width: 24px; height: 24px; border: 0; background: transparent; font-size: 20px; color: var(--muted); }
.moon-icon { display: none; }
.light-theme .sun-icon { display: none; }
.light-theme .moon-icon { display: block; }

.save-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: 4px;
    color: var(--muted);
    font-size:var(--font-body);
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(56,217,150,.1); }
.save-state.saving .status-dot { background: #ffbd4a; box-shadow: 0 0 0 4px rgba(255,189,74,.1); }

.workspace {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(320px, var(--editor-width)) 8px minmax(340px, 1fr);
    background: var(--bg);
}

.editor-panel, .preview-panel { min-width: 0; min-height: 0; background: var(--surface); }

.editor-panel {
    display: grid;
    grid-template-rows: 64px minmax(0, 1fr);
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 0 18px;
    border-bottom: 1px solid var(--line);
}
.visibility-switch{display:inline-flex;flex-shrink:0;align-items:center;gap:8px;margin-left:auto;color:var(--muted);font-size:var(--font-control);font-weight:650;cursor:pointer}.visibility-switch input{position:absolute;opacity:0;pointer-events:none}.visibility-switch.private{color:var(--accent-hover)}

.eyebrow { color: var(--accent-hover); font-size:var(--font-ui); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.project-name-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
#project-title { width: min(240px, 28vw); margin-left: -5px; padding: 2px 5px; border: 1px solid transparent; border-radius: 5px; outline: 0; background: transparent; color: var(--text); font-size:var(--font-title); font-weight: 700; letter-spacing: -.01em; }
#project-title:hover { border-color: var(--line); background: var(--surface-2); }
#project-title:focus { border-color: rgba(124,92,255,.5); background: var(--surface-2); box-shadow: 0 0 0 3px var(--accent-soft); }
.cloud-indicator { width: 20px; height: 20px; display: grid; place-items: center; color: var(--muted-2); }
.cloud-indicator svg { width: 13px; height: 13px; }
.cloud-indicator.synced { color: var(--green); }
.cloud-indicator.dirty { color: #ffbd4a; }
.switch-label { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; color: var(--muted); font-size:var(--font-body); cursor: pointer; }
.switch-label input,.visibility-switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch { width: 32px; height: 18px; position: relative; border-radius: 99px; background: var(--surface-3); border: 1px solid var(--line-strong); transition: .2s; }
.switch::after { content: ""; width: 12px; height: 12px; position: absolute; top: 2px; left: 2px; border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s; }
.switch-label input:checked + .switch,.visibility-switch input:checked + .switch { background: var(--accent-soft); border-color: rgba(124,92,255,.55); }
.switch-label input:checked + .switch::after,.visibility-switch input:checked + .switch::after { transform: translateX(14px); background: var(--accent-hover); }

.editors {
    min-height: 0;
    display: grid;
    grid-template-rows: repeat(3, minmax(132px, 1fr));
    gap: 1px;
    background: var(--line);
    overflow: auto;
}

.code-pane { min-height: 132px; display: grid; grid-template-rows: 34px minmax(0, 1fr); overflow: hidden; background: var(--surface); }
.pane-header { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.language-label { display: flex; align-items: center; gap: 8px; font-size:var(--font-body); font-weight: 700; }
.language-icon { width: 21px; height: 19px; display: grid; place-items: center; border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:var(--font-sm); font-weight: 900; }
.html-icon { color: #ff816f; background: rgba(255,112,92,.12); }
.css-icon { color: #66b6ff; background: rgba(79,159,255,.12); font-size:var(--font-body-lg); }
.js-icon { color: #f9d65c; background: rgba(249,214,92,.11); }
.code-meta { margin-left: 5px; color: var(--muted-2); font-size:var(--font-ui); font-weight: 500; }
.project-tags-input{width:min(330px,100%);margin-top:7px;padding:5px 0;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--muted);font-size:var(--font-sm);outline:0}.project-tags-input:focus{border-color:var(--accent);color:var(--text)}
.pane-action { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 6px; background: transparent; color: var(--muted-2); }
.pane-action:hover { color: var(--text); background: var(--surface-3); }
.pane-action svg { width: 14px; height: 14px; }

.CodeMirror {
    height: 100%;
    background: var(--surface) !important;
    color: var(--text);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size:var(--font-body);
    line-height: 1.58;
}
.CodeMirror-gutters { border-right: 1px solid var(--line) !important; background: var(--surface) !important; }
.CodeMirror-linenumber { color: var(--muted-2) !important; padding: 0 8px 0 6px; }
.CodeMirror-lines { padding: 8px 0; }
.CodeMirror-cursor { border-left-color: var(--accent-hover) !important; }
.CodeMirror-selected { background: var(--accent-soft) !important; }
.light-theme .CodeMirror { color: #252a37; }
.light-theme .cm-s-material-darker .cm-tag, .light-theme .cm-s-material-darker .cm-keyword { color: #8c50d8; }
.light-theme .cm-s-material-darker .cm-attribute, .light-theme .cm-s-material-darker .cm-property { color: #087ea4; }
.light-theme .cm-s-material-darker .cm-string { color: #0b7a4d; }
.light-theme .cm-s-material-darker .cm-number { color: #b35d00; }
.CodeMirror-hints { z-index: 10000; max-height: 240px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); box-shadow: 0 14px 35px rgba(0,0,0,.3); font-family: "SFMono-Regular", Consolas, monospace; font-size:var(--font-body); }
.CodeMirror-hint { padding: 5px 9px; border-radius: 5px; color: var(--muted); }
li.CodeMirror-hint-active { background: var(--accent); color: #fff; }

.resizer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    background: var(--bg);
    cursor: col-resize;
    touch-action: none;
    z-index: 5;
}
.resizer span { width: 1px; height: 22px; border-radius: 2px; background: var(--muted-2); opacity: .45; }
.resizer:hover span, .resizer.dragging span { background: var(--accent); opacity: 1; }
body.is-resizing { user-select: none; cursor: col-resize; }

.preview-panel { position: relative; display: grid; grid-template-rows: 47px minmax(0, 1fr); overflow: hidden; }
.preview-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.preview-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size:var(--font-body); }
.preview-title strong { white-space: nowrap; }
.live-dot { width: 7px; height: 7px; border: 2px solid rgba(56,217,150,.22); border-radius: 50%; background: var(--green); box-sizing: content-box; }
.preview-time { color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:var(--font-ui); }
.preview-actions { justify-self: end; }

.device-switcher { gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.device-button { width: 29px; height: 24px; display: grid; place-items: center; border-radius: 5px; background: transparent; color: var(--muted-2); }
.device-button svg { width: 14px; height: 14px; }
.device-button:hover { color: var(--text); }
.device-button.active { background: var(--surface-3); color: var(--accent-hover); box-shadow: 0 1px 4px rgba(0,0,0,.15); }

.preview-stage { min-height: 0; padding: 18px; display: flex; align-items: stretch; justify-content: center; overflow: auto; background-color: var(--surface-2); background-image: radial-gradient(var(--line-strong) .8px, transparent .8px); background-size: 16px 16px; }
.browser-frame { height: 100%; width: 100%; min-height: 260px; display: grid; grid-template-rows: 32px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; box-shadow: var(--shadow); transition: width .3s ease, max-width .3s ease; }
.browser-frame.device-tablet { width: min(768px, 100%); }
.browser-frame.device-mobile { width: min(390px, 100%); }
.browser-chrome { display: grid; grid-template-columns: 62px minmax(80px, 320px) 1fr; align-items: center; gap: 12px; padding: 0 10px; background: var(--surface-3); color: var(--muted-2); }
.traffic-lights { display: flex; gap: 5px; }
.traffic-lights i { width: 7px; height: 7px; border-radius: 50%; background: #ff6b67; }
.traffic-lights i:nth-child(2) { background: #ffbd4a; }
.traffic-lights i:nth-child(3) { background: #38c957; }
.address-bar { height: 20px; display: flex; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); overflow: hidden; color: var(--muted); font-size:var(--font-ui); white-space: nowrap; }
.address-bar span { color: var(--green); }
.chrome-menu { justify-self: end; letter-spacing: 2px; font-size:var(--font-control); }
#output { width: 100%; height: 100%; border: 0; background: white; }

.console-drawer { height: min(240px, 38%); position: absolute; right: 0; bottom: 0; left: 0; display: grid; grid-template-rows: 36px minmax(0, 1fr); visibility: hidden; pointer-events: none; border-top: 1px solid var(--line-strong); background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(16px); opacity: 0; transform: translateY(105%); transition: transform .25s ease, opacity .2s ease, visibility 0s linear .25s; z-index: 8; box-shadow: 0 -10px 30px rgba(0,0,0,.18); }
.console-drawer.open { visibility: visible; pointer-events: auto; opacity: 1; transform: translateY(0); transition-delay: 0s; }
.console-drawer > header { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 14px; border-bottom: 1px solid var(--line); font-size:var(--font-control); text-transform: uppercase; letter-spacing: .08em; }
.console-drawer > header div { display: flex; align-items: center; gap: 6px; }
.text-button { padding: 4px 7px; border-radius: 5px; background: transparent; color: var(--muted); font-size:var(--font-ui); text-transform: none; letter-spacing: 0; }
.text-button:hover { background: var(--surface-3); color: var(--text); }
.console-output { padding: 8px 12px; overflow: auto; font-family: "SFMono-Regular", Consolas, monospace; font-size:var(--font-control); line-height: 1.6; }
.console-empty { color: var(--muted-2); }
.console-line { display: grid; grid-template-columns: 44px 1fr; gap: 8px; margin: 0; padding: 3px 0; border-bottom: 1px solid var(--line); word-break: break-word; }
.console-line .type { color: var(--muted-2); text-transform: uppercase; font-size:var(--font-sm); }
.console-line.error { color: var(--danger); }
.console-line.warn { color: #e9ad3b; }
.error-badge { min-width: 14px; height: 14px; position: absolute; top: -2px; right: -2px; display: grid; place-items: center; padding: 0 3px; border-radius: 99px; background: var(--danger); color: #fff; font-size:var(--font-sm); }

.statusbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 12px; border-top: 1px solid var(--line); background: var(--surface); color: var(--muted-2); font-size:var(--font-ui); }
.statusbar span { white-space: nowrap; }
.online-dot { width: 5px; height: 5px; display: inline-block; margin-right: 5px; border-radius: 50%; background: var(--green); }

.toast-region { position: fixed; right: 18px; bottom: 42px; display: grid; gap: 8px; z-index: 50; pointer-events: none; }
.toast { padding: 10px 13px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface-3); color: var(--text); box-shadow: var(--shadow); font-size:var(--font-body); animation: toast-in .2s ease both; }
@keyframes toast-in { from { transform: translateY(6px); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

.user-menu { position: relative; }
.user-button { height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 8px 0 5px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface-2); color: var(--text); cursor: pointer; }
.user-button:hover { background: var(--surface-3); }
.user-button > svg { width: 13px; height: 13px; color: var(--muted); }
.avatar { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: linear-gradient(145deg, #8c72ff, #5a3ddb); color: #fff; font-size:var(--font-control); font-weight: 800; text-transform: uppercase; }
.user-name { max-width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:var(--font-body); font-weight: 650; }
.user-dropdown { width: 220px; position: absolute; top: calc(100% + 8px); right: 0; padding: 7px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow); z-index: 30; }
.user-summary { padding: 8px 9px 11px; border-bottom: 1px solid var(--line); }
.user-summary strong, .user-summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-summary strong { font-size:var(--font-body); }
.user-summary small { margin-top: 3px; color: var(--muted); font-size:var(--font-ui); }
.membership-pill { width: fit-content; display: block; margin-top: 8px; padding: 3px 6px; border-radius: 99px; background: var(--surface-3); color: var(--muted); font-size:var(--font-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.membership-pill.premium { background: var(--accent-soft); color: var(--accent-hover); }
.user-dropdown button { width: 100%; display: flex; align-items: center; gap: 8px; margin-top: 5px; padding: 8px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--danger); cursor: pointer; text-align: left; font-size:var(--font-control); }
.user-dropdown button:hover { background: rgba(255,99,118,.08); }
.user-dropdown .settings-menu-button{color:var(--text)}.user-dropdown .settings-menu-button:hover{background:var(--surface-3)}
.user-theme-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:5px;padding:8px 9px;border-radius:7px;color:var(--text);cursor:pointer;font-size:var(--font-control)}.user-theme-toggle:hover{background:var(--surface-3)}.theme-menu-copy{display:flex;align-items:center;gap:8px}.theme-menu-copy svg{width:14px;height:14px}.user-theme-toggle input{position:absolute;opacity:0;pointer-events:none}.user-theme-toggle .switch{width:30px;height:17px}.user-theme-toggle .switch:after{width:11px;height:11px}.user-theme-toggle input:checked+.switch{border-color:rgba(124,92,255,.55);background:var(--accent-soft)}.user-theme-toggle input:checked+.switch:after{transform:translateX(13px);background:var(--accent-hover)}
.user-dropdown button svg { width: 14px; height: 14px; }

.modal { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 22px; border: 0; background: transparent; color: var(--text); }
.modal[open] { display: grid; place-items: center; }
.modal::backdrop { background: rgba(4,5,9,.76); backdrop-filter: blur(7px); }
.modal-card { width: min(420px, 100%); position: relative; padding: 32px; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--surface); box-shadow: 0 28px 90px rgba(0,0,0,.45); animation: modal-in .2s ease both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.modal-close { width: 30px; height: 30px; position: absolute; top: 13px; right: 13px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 22px; }
.modal-close:hover { background: var(--surface-3); color: var(--text); }
.modal-close.static { position: static; flex: 0 0 auto; }
.app-confirm-card { width: min(440px, 100%); text-align: center; }
.confirm-icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 17px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-hover); font-size: 21px; font-weight: 900; }
.app-confirm-card h2 { margin: 7px 0 10px; font-size: 25px; letter-spacing: -.04em; }
.app-confirm-card p { max-width: 340px; margin: 0 auto; color: var(--muted); font-size:var(--font-control); line-height: 1.7; }
.app-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 25px; }
.app-confirm-actions .button { justify-content: center; min-height: 40px; }
.app-confirm-modal[data-tone="danger"] .confirm-icon { background: rgba(255,93,113,.12); color: #ff6b7e; }
.app-confirm-modal[data-tone="danger"] #app-confirm-accept { background: #df4058; box-shadow: 0 8px 22px rgba(223,64,88,.22); }
.app-confirm-modal[data-tone="warning"] .confirm-icon { background: rgba(249,190,72,.12); color: #f2b944; }
.notification-count{min-width:18px;height:18px;display:grid;place-items:center;margin-left:auto;border-radius:99px;background:#ff526b;color:#fff;font-size:var(--font-sm)}.community-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.community-tools select{height:36px;padding:0 28px 0 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted);font-size:var(--font-ui)}.community-card-info{min-width:0}.profile-link{border:0;background:transparent;color:inherit;cursor:pointer}.project-tags,.tag-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.project-tags span,.tag-row span{padding:3px 6px;border-radius:99px;background:var(--surface-3);color:var(--muted);font-size:var(--font-xs)}.social-counts{display:flex;align-items:center;gap:10px;margin-top:9px;color:var(--muted-2);font-size:var(--font-sm)}.social-counts button,.detail-stats button{border:0;background:transparent;color:inherit;cursor:pointer}.social-counts button.active,.detail-stats button.active{color:#ff6b87}.community-card-actions>[data-social]{width:27px;height:27px;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer}.community-card-actions>[data-social]:hover{background:var(--surface-3);color:var(--text)}
.social-modal-card{width:min(960px,100%);height:min(820px,calc(100vh - 44px));padding:0;overflow:auto}.social-modal-card>#social-modal-content{padding:38px 42px}.social-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}.social-heading h2,.public-profile h2,.collections-view h2,.templates-view h2,.share-view h2{margin:7px 0 4px;font-size:31px;letter-spacing:-.045em}.detail-stats{display:flex;gap:8px}.detail-stats>*{min-width:48px;padding:9px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:var(--font-control)}.detail-preview{width:100%;height:390px;margin-top:17px;border:1px solid var(--line);border-radius:12px;background:#fff}.detail-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:15px 0 28px}.detail-actions .report-project{margin-left:auto;color:#e66c7c}.comments{border-top:1px solid var(--line);padding-top:25px}.comments h3,.remix-list h3{font-size:var(--font-body-lg)}.comments h3 span{color:var(--muted)}#comment-form{display:grid;gap:8px;margin:15px 0}#comment-form textarea,.share-view input,.collections-view input,.public-profile input,.public-profile textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--text);resize:vertical}#comment-form>div{display:flex;justify-content:space-between;align-items:center}.comment{display:flex;gap:10px;padding:14px 0;border-top:1px solid var(--line)}.comment>span,.activity-icon{width:31px;height:31px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;background:var(--accent-soft);color:var(--accent-hover);font-weight:800}.comment.reply{margin-left:40px}.comment strong{font-size:var(--font-ui)}.comment p{margin:5px 0;color:var(--muted);font-size:var(--font-control);line-height:1.5}.comment small{color:var(--muted-2);font-size:var(--font-xs)}.comment button{margin-left:9px;border:0;background:transparent;color:var(--accent-hover);font-size:var(--font-xs);cursor:pointer}.remix-list{margin-top:25px}.remix-list>button,.profile-projects>button{width:100%;display:flex;justify-content:space-between;padding:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);cursor:pointer}.remix-list>button+button,.profile-projects>button+button{border-top:0}.remix-list span,.profile-projects span{color:var(--muted);font-size:var(--font-sm)}.social-empty{padding:25px;color:var(--muted);text-align:center;font-size:var(--font-control)}
.public-profile>header{display:flex;align-items:center;gap:17px}.public-profile>header>div{flex:1}.public-profile header p{margin:7px 0;color:var(--muted);font-size:var(--font-control)}.public-profile header a{color:var(--accent-hover);font-size:var(--font-ui)}.profile-avatar-xl{width:68px;height:68px;display:grid;place-items:center;border-radius:20px;background:linear-gradient(145deg,#937cff,#583bce);color:#fff;font-size:25px;font-weight:900}.profile-stats{display:flex;gap:8px;margin:24px 0}.profile-stats span{flex:1;padding:14px;border:1px solid var(--line);border-radius:9px;color:var(--muted);font-size:var(--font-ui)}.profile-stats b{display:block;margin-bottom:4px;color:var(--text);font-size:18px}.public-profile form{display:grid;gap:12px;margin-top:25px;padding-top:20px;border-top:1px solid var(--line)}.public-profile form label{display:grid;gap:6px;color:var(--muted);font-size:var(--font-ui)}
.social-list>button{width:100%;display:flex;gap:12px;padding:14px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);text-align:left;cursor:pointer}.social-list>button:hover{background:var(--surface-2)}.social-list>button b{font-size:var(--font-control)}.social-list>button p{margin:4px 0;color:var(--muted);font-size:var(--font-ui)}.social-list>button small{color:var(--muted-2);font-size:var(--font-xs)}.collections-view form{display:flex;gap:8px;margin:20px 0}.collection-grid,.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.collection-grid button,.template-grid button{min-height:120px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:17px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);color:var(--text);text-align:left;cursor:pointer}.collection-grid button:hover,.template-grid button:hover{border-color:var(--accent)}.collection-grid button>span{margin-bottom:auto;color:var(--accent-hover);font-size:22px}.collection-grid small,.template-grid small{margin-top:6px;color:var(--muted);font-size:var(--font-sm)}.template-grid button>span{margin-bottom:auto;color:var(--accent-hover);font-size:var(--font-xs);letter-spacing:.15em}.template-grid button b{font-size:var(--font-body-lg)}.report-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:14px;border-bottom:1px solid var(--line)}.report-row p{margin:4px 0;color:var(--muted);font-size:var(--font-ui)}.report-row small{font-size:var(--font-xs);color:var(--muted-2)}.report-row button{padding:7px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--muted);cursor:pointer}.share-view p{color:var(--muted);font-size:var(--font-control)}
.admin-panel .social-heading p{margin:7px 0 0;color:var(--muted);font-size:var(--font-ui)}.admin-kpi{min-width:80px;padding:12px;border:1px solid var(--line);border-radius:10px;text-align:center}.admin-kpi b,.admin-kpi span{display:block}.admin-kpi b{font-size:20px}.admin-kpi span{color:var(--muted);font-size:var(--font-xs)}.admin-nav{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}.admin-nav button{flex:1;padding:9px;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;font-size:var(--font-ui)}.admin-nav button.active{background:var(--surface);color:var(--text);box-shadow:0 3px 12px rgba(0,0,0,.12)}.admin-search{height:39px;display:flex;align-items:center;gap:8px;margin:14px 0;padding:0 12px;border:1px solid var(--line);border-radius:8px;color:var(--muted)}.admin-search input{width:100%;border:0;background:transparent;color:var(--text);outline:0;font-size:var(--font-ui)}.admin-table{border:1px solid var(--line);border-radius:10px;overflow:hidden}.admin-table-head,.admin-row{display:grid;grid-template-columns:minmax(210px,2fr) .7fr .8fr .8fr .55fr 25px;align-items:center;gap:10px;padding:10px 13px}.admin-table-head{background:var(--surface-2);color:var(--muted-2);font-size:var(--font-xs);text-transform:uppercase;letter-spacing:.08em}.admin-row{width:100%;border:0;border-top:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;text-align:left}.admin-row:hover{background:var(--surface-2)}.admin-row>span:first-child{display:grid;grid-template-columns:30px 1fr;column-gap:9px}.admin-row>span:first-child i{grid-row:1/3;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--accent-soft);color:var(--accent-hover);font-style:normal;font-weight:800}.admin-row b{font-size:var(--font-ui)}.admin-row small{color:var(--muted);font-size:var(--font-xs)}.plan-chip,.status-chip{width:max-content;padding:4px 7px;border-radius:99px;font-size:var(--font-xs);font-weight:800;text-transform:uppercase}.plan-chip{background:var(--surface-3);color:var(--muted)}.plan-chip.annual,.plan-chip.lifetime{background:var(--accent-soft);color:var(--accent-hover)}.status-chip.active{background:rgba(56,217,150,.1);color:var(--green)}.status-chip.blocked{background:rgba(249,190,72,.12);color:#e7a92e}.status-chip.permanent{background:rgba(255,93,113,.12);color:#ff6b7e}.strike-meter{display:flex;gap:4px}.strike-meter i{width:8px;height:8px;border-radius:50%;background:var(--surface-3)}.strike-meter i.on{background:#ff5d71}.admin-project-list article,.admin-owned-projects article{display:flex;align-items:center;gap:10px;padding:13px;border-bottom:1px solid var(--line)}.admin-project-list article>div,.admin-owned-projects article>div{min-width:0;flex:1}.admin-project-list b,.admin-owned-projects b{display:block;font-size:var(--font-ui)}.admin-project-list div span,.admin-owned-projects div span{display:block;margin-top:4px;color:var(--muted);font-size:var(--font-xs)}.admin-project-list em{padding:3px 6px;border-radius:99px;background:rgba(255,93,113,.1);color:#ff6b7e;font-size:var(--font-xs);font-style:normal}.admin-project-list article>button,.admin-owned-projects article>button{padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;font-size:var(--font-sm)}.admin-audit article{display:flex;gap:12px;padding:12px;border-bottom:1px solid var(--line)}.admin-audit article>span{width:105px;color:var(--accent-hover);font-size:var(--font-sm);font-weight:800}.admin-audit b{font-size:var(--font-ui)}.admin-audit p{margin:3px 0;color:var(--muted);font-size:var(--font-sm)}.admin-audit small{color:var(--muted-2);font-size:var(--font-xs)}
.admin-user-detail>header{display:flex;align-items:center;gap:15px;margin:22px 0}.admin-user-detail>header>div{flex:1}.admin-user-detail>header h2{margin:6px 0 4px;font-size:28px}.admin-user-detail>header p{margin:0;color:var(--muted);font-size:var(--font-sm)}.admin-user-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.admin-user-summary span{padding:13px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:var(--font-sm)}.admin-user-summary b{display:block;margin-bottom:3px;color:var(--text);font-size:16px}.blocked-reason{padding:11px;border:1px solid rgba(255,93,113,.2);border-radius:8px;background:rgba(255,93,113,.06);color:#ff8190;font-size:var(--font-sm)}.admin-user-detail h3{margin:25px 0 12px;font-size:var(--font-body)}.admin-form-grid{display:grid;grid-template-columns:1fr 1fr .8fr;gap:9px;margin:18px 0 10px}.admin-form-grid label,.admin-sanctions>label{display:grid;gap:6px;color:var(--muted);font-size:var(--font-sm)}.admin-form-grid input,.admin-form-grid select,.admin-sanctions textarea,.admin-password-reset input{width:100%;padding:10px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);color:var(--text);outline:0}.admin-sanctions{margin-top:25px;padding-top:4px;border-top:1px solid var(--line)}.admin-sanctions textarea{min-height:65px;resize:vertical}.sanction-actions{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}.sanction-actions button{padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;font-size:var(--font-sm)}.sanction-actions button:hover{border-color:#e7a92e;color:#e7a92e}.sanction-actions button.danger:hover{border-color:#ff5d71;color:#ff5d71}.sanction-actions button:disabled{opacity:.35;cursor:not-allowed}.admin-password-reset{display:grid;grid-template-columns:1fr 1.1fr auto auto;gap:7px;align-items:center;margin-top:14px;padding:13px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2)}.admin-password-reset b,.admin-password-reset span{display:block}.admin-password-reset b{font-size:var(--font-ui)}.admin-password-reset span{margin-top:4px;color:var(--muted);font-size:var(--font-xs)}.admin-password-reset button{padding:9px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--text);cursor:pointer;font-size:var(--font-sm)}.admin-user-audit p{padding:8px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:var(--font-sm)}.admin-user-audit p b{color:var(--text)}.admin-user-audit small{display:block;margin-top:4px;color:var(--muted-2)}
.account-strike-banner{min-height:28px;display:flex;align-items:center;gap:9px;padding:3px 4vw;border-bottom:1px solid rgba(249,190,72,.25);background:rgba(249,190,72,.09);color:#e8b74d;font-size:var(--font-sm);line-height:1.2}.account-strike-banner[hidden]{display:none}.account-strike-banner strong{white-space:nowrap}.account-strike-banner span{overflow:hidden;color:var(--muted);font-size:var(--font-xs);text-overflow:ellipsis;white-space:nowrap}.account-strike-banner button{min-height:22px;margin-left:auto;padding:3px 8px;border:1px solid rgba(249,190,72,.3);border-radius:5px;background:transparent;color:#e8b74d;cursor:pointer;font-size:var(--font-xs);white-space:nowrap}.my-project-card.moderation-blocked{border-color:rgba(255,93,113,.38)}.my-project-card.moderation-blocked .my-project-preview iframe{filter:grayscale(1);opacity:.3}.blocked-project-overlay{position:absolute;inset:0;z-index:2;display:grid;place-content:center;text-align:center;pointer-events:none;background:rgba(18,13,20,.65);color:#fff}.blocked-project-overlay b{font-size:var(--font-body)}.blocked-project-overlay span{margin-top:5px;color:#ff9baa;font-size:var(--font-sm)}.visibility-badge.blocked{background:rgba(255,93,113,.12);color:#ff6b7e}.moderation-project-note{max-width:260px;margin:7px 0 0;color:#ff788b;font-size:var(--font-sm);line-height:1.45}.social-list>button.moderation-notice{border:1px solid rgba(255,93,113,.2);background:rgba(255,93,113,.05)}.social-list>button.moderation-notice .activity-icon{background:rgba(255,93,113,.12);color:#ff6b7e}
@media(max-width:700px){.social-modal-card>#social-modal-content{padding:30px 18px}.detail-preview{height:280px}.collection-grid,.template-grid{grid-template-columns:1fr 1fr}.public-profile>header,.admin-user-detail>header{align-items:flex-start;flex-wrap:wrap}.profile-stats{display:grid;grid-template-columns:1fr 1fr}.social-heading{display:block}.detail-stats{margin-top:14px}.comment.reply{margin-left:20px}.admin-table-head{display:none}.admin-row{grid-template-columns:1fr auto auto}.admin-row>span:nth-child(4),.admin-row>span:nth-child(5),.admin-row>span:last-child{display:none}.admin-form-grid{grid-template-columns:1fr}.admin-password-reset{grid-template-columns:1fr}.admin-nav{overflow:auto}.admin-nav button{min-width:85px}.account-strike-banner{gap:6px;padding-inline:12px}.account-strike-banner span{display:none}.account-strike-banner button{margin-left:auto}}
.modal-brand { margin-bottom: 20px; }
.modal-copy h2, .projects-header h2 { margin: 5px 0 8px; font-size: 24px; letter-spacing: -.035em; }
.modal-copy p, .projects-header p { margin: 0; color: var(--muted); font-size:var(--font-body); line-height: 1.6; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 24px 0 18px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.auth-tabs button { height: 31px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-size:var(--font-control); font-weight: 650; }
.auth-tabs button.active { background: var(--surface-3); color: var(--text); box-shadow: 0 2px 6px rgba(0,0,0,.13); }
#auth-form { display: grid; gap: 13px; }
.form-field { display: grid; gap: 6px; color: var(--muted); font-size:var(--font-control); font-weight: 650; }
.form-field > input, .password-wrap { height: 41px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface-2); }
.form-field > input, .password-wrap input { width: 100%; padding: 0 12px; border: 0; outline: 0; background: transparent; color: var(--text); font-size:var(--font-body); }
.form-field > input:focus, .password-wrap:focus-within { border-color: rgba(124,92,255,.65); box-shadow: 0 0 0 3px var(--accent-soft); }
.password-wrap { display: grid; grid-template-columns: 1fr 38px; align-items: center; }
.password-wrap button { height: 100%; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.password-wrap button:hover { color: var(--text); }
.password-wrap button svg { width: 15px; height: 15px; }
.password-generator { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 9px; margin-top: -3px; }
.password-generator button { min-height: 29px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid rgba(124,92,255,.28); border-radius: 7px; background: var(--accent-soft); color: var(--accent-hover); cursor: pointer; font-size:var(--font-ui); font-weight: 700; }
.password-generator button:hover { border-color: rgba(124,92,255,.55); background: rgba(124,92,255,.2); }
.password-generator button svg { width: 13px; height: 13px; }
.password-generator small { color: var(--muted-2); font-size:var(--font-sm); line-height: 1.45; }
.generator-status { min-height: 12px; grid-column: 1 / -1; color: var(--green); font-size:var(--font-sm); }
.submit-button { width: 100%; height: 42px; margin-top: 3px; }
.form-error { margin: 0; padding: 9px 10px; border: 1px solid rgba(255,99,118,.2); border-radius: 8px; background: rgba(255,99,118,.08); color: var(--danger); font-size:var(--font-control); line-height: 1.5; }
.security-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 17px 0 0; color: var(--muted-2); font-size:var(--font-ui); }
.security-note svg { width: 12px; height: 12px; }

/* Configuración de cuenta */
.settings-card{width:min(980px,100%);height:min(720px,calc(100vh - 44px));display:grid;grid-template-columns:235px minmax(0,1fr);padding:0;overflow:hidden}.settings-card>.modal-close{z-index:4}.settings-sidebar{display:flex;flex-direction:column;padding:26px 16px 18px;border-right:1px solid var(--line);background:var(--surface-2)}.settings-account{display:flex;align-items:center;gap:11px;padding:0 8px 23px;border-bottom:1px solid var(--line)}.settings-account>div{min-width:0}.settings-account strong,.settings-account small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.settings-account strong{font-size:var(--font-body)}.settings-account small{margin-top:4px;color:var(--muted);font-size:var(--font-sm)}.settings-avatar{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:11px;background:linear-gradient(145deg,#8c72ff,#5a3ddb);color:#fff;font-size:var(--font-body-lg);font-weight:850;text-transform:uppercase;box-shadow:0 8px 20px rgba(124,92,255,.25)}.settings-avatar.large{width:54px;height:54px;border-radius:15px;font-size:18px}.settings-nav{display:grid;gap:4px;margin-top:18px}.settings-nav button{height:38px;display:flex;align-items:center;gap:10px;padding:0 11px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;font-size:var(--font-control);text-align:left}.settings-nav button:hover{background:var(--surface-3);color:var(--text)}.settings-nav button.active{background:var(--accent-soft);color:var(--accent-hover);font-weight:750}.settings-nav svg{width:15px;height:15px}.settings-version{margin:auto 8px 0;color:var(--muted-2);font-size:var(--font-xs);letter-spacing:.12em}.settings-content{min-width:0;overflow:auto;padding:38px 45px}.settings-panel{width:min(620px,100%);margin:0 auto}.settings-panel header{margin-bottom:28px;padding-right:25px}.settings-panel header h2{margin:7px 0 7px;font-size:29px;letter-spacing:-.04em}.settings-panel header p{margin:0;color:var(--muted);font-size:var(--font-control);line-height:1.6}.settings-form{display:grid;gap:15px}.settings-form .form-field>span:first-child{display:flex;justify-content:space-between;gap:10px}.settings-form .form-field>span small{color:var(--muted-2);font-size:var(--font-sm);font-weight:400}.settings-avatar-row{display:flex;align-items:center;gap:13px;margin-bottom:5px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}.settings-avatar-row strong,.settings-avatar-row small{display:block}.settings-avatar-row strong{font-size:var(--font-body)}.settings-avatar-row small{margin-top:4px;color:var(--muted);font-size:var(--font-sm)}.settings-form-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:4px}.settings-form-actions>span{color:var(--green);font-size:var(--font-ui)}.settings-form-actions .button{min-width:145px}.account-metadata{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}.account-metadata div{padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2)}.account-metadata span,.account-metadata strong{display:block}.account-metadata span{color:var(--muted);font-size:var(--font-sm)}.account-metadata strong{margin-top:5px;font-size:var(--font-body)}.settings-password-generator{margin:0}.security-tip{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid rgba(56,217,150,.2);border-radius:10px;background:rgba(56,217,150,.06)}.security-tip svg{width:21px;color:var(--green)}.security-tip strong,.security-tip span{display:block}.security-tip strong{font-size:var(--font-control)}.security-tip span{margin-top:3px;color:var(--muted);font-size:var(--font-sm)}.membership-summary-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;border:1px solid rgba(124,92,255,.3);border-radius:14px;background:radial-gradient(circle at 80% 10%,rgba(124,92,255,.2),transparent 45%),var(--surface-2)}.membership-summary-card>div{display:flex;align-items:center;gap:14px}.membership-plan-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:13px;background:var(--accent);color:#fff;font-size:19px}.membership-summary-card small{color:var(--accent-hover);font-size:var(--font-xs);font-weight:800;letter-spacing:.13em}.membership-summary-card h3{margin:4px 0 3px;font-size:19px}.membership-summary-card p{margin:0;color:var(--muted);font-size:var(--font-sm)}.membership-status{padding:5px 8px;border-radius:99px;background:rgba(56,217,150,.1);color:var(--green);font-size:var(--font-sm);font-weight:800;text-transform:uppercase}.membership-includes{margin-top:25px}.membership-includes h3{margin:0 0 12px;font-size:var(--font-body)}.membership-includes ul{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0;padding:0;list-style:none}.membership-includes li{position:relative;padding:11px 11px 11px 31px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--muted);font-size:var(--font-ui)}.membership-includes li:before{content:'✓';position:absolute;left:11px;color:var(--green);font-weight:900}.membership-includes li.locked{opacity:.5}.membership-includes li.locked:before{content:'—';color:var(--muted)}.membership-offer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;padding:16px;border:1px solid var(--line);border-radius:11px}.membership-offer strong,.membership-offer span{display:block}.membership-offer strong{font-size:var(--font-body)}.membership-offer span{margin-top:4px;color:var(--muted);font-size:var(--font-sm)}.membership-offer .button{flex:0 0 auto}.preference-list{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden}.preference-row{min-height:70px;position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 17px;background:var(--surface-2)}.preference-row+.preference-row{border-top:1px solid var(--line)}.preference-row strong,.preference-row small{display:block}.preference-row strong{font-size:var(--font-body)}.preference-row small{margin-top:5px;color:var(--muted);font-size:var(--font-sm)}.preference-row select{min-width:155px;height:34px;padding:0 9px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--text);font-size:var(--font-ui)}.switch-input{width:42px;height:23px;position:absolute;right:17px;opacity:0;cursor:pointer;z-index:2}.switch-control{width:42px;height:23px;position:relative;flex:0 0 auto;border-radius:99px;background:var(--surface-3);transition:.2s}.switch-control:after{content:'';width:17px;height:17px;position:absolute;top:3px;left:3px;border-radius:50%;background:var(--muted);transition:.2s}.switch-input:checked+.switch-control{background:var(--accent)}.switch-input:checked+.switch-control:after{left:22px;background:#fff}.preferences-note{margin-top:14px;color:var(--muted-2);font-size:var(--font-sm)}
.membership-status.expired{background:rgba(255,99,118,.08);color:var(--danger)}
.settings-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.settings-plan-card{min-width:0;display:flex;flex-direction:column;padding:16px 14px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2);transition:.2s}.settings-plan-card.featured:not(.current){border-color:rgba(124,92,255,.35)}.settings-plan-card.current{border-color:var(--accent);background:linear-gradient(160deg,var(--accent-soft),var(--surface-2) 65%);box-shadow:0 12px 32px rgba(124,92,255,.12)}.settings-plan-top{min-height:17px;display:flex;align-items:center;justify-content:space-between;gap:6px}.settings-plan-top>span{color:var(--accent-hover);font-size:var(--font-xs);font-weight:850;letter-spacing:.1em}.current-plan-badge{display:none;padding:3px 5px;border-radius:99px;background:var(--accent);color:#fff;font-size:var(--font-xs);font-style:normal;font-weight:850;letter-spacing:.06em;white-space:nowrap}.settings-plan-card.current .current-plan-badge{display:inline-flex}.settings-plan-card h3{margin:12px 0 5px;font-size:17px}.settings-plan-price{min-height:43px;display:flex;align-items:flex-end;gap:5px;padding-bottom:14px;border-bottom:1px solid var(--line)}.settings-plan-price strong{font-size:27px;letter-spacing:-.06em}.settings-plan-price span{padding-bottom:4px;color:var(--muted);font-size:var(--font-xs)}.settings-plan-card ul{display:grid;gap:8px;min-height:82px;margin:14px 0 16px;padding:0;list-style:none;color:var(--muted);font-size:var(--font-sm);line-height:1.35}.settings-plan-card li{position:relative;padding-left:14px}.settings-plan-card li:before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:850}.settings-plan-card li.not-included{opacity:.5}.settings-plan-card li.not-included:before{content:'—';color:var(--muted)}.settings-plan-action{width:100%;min-height:34px;margin-top:auto;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer;font-size:var(--font-sm);font-weight:800}.settings-plan-action:hover:not(:disabled){border-color:var(--accent);color:var(--accent-hover)}.settings-plan-action.primary{border-color:var(--accent);background:var(--accent);color:#fff}.settings-plan-action:disabled{background:var(--accent-soft);color:var(--accent-hover);cursor:default}.current-plan-note{display:none;margin-top:9px;color:var(--green);font-size:var(--font-xs);text-align:center}.settings-plan-card.current .current-plan-note{display:block}.membership-change-note{margin:16px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--muted);font-size:var(--font-sm);line-height:1.5}

.projects-card { width: min(760px, 100%); min-height: 470px; max-height: min(720px, calc(100vh - 44px)); display: grid; grid-template-rows: auto auto minmax(0, 1fr); padding: 0; overflow: hidden; }
.projects-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 26px 28px 20px; border-bottom: 1px solid var(--line); }
.projects-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.search-box { height: 36px; min-width: 220px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--muted); }
.search-box svg { width: 14px; height: 14px; justify-self: end; }
.search-box input { min-width: 0; height: 100%; padding: 0 9px; border: 0; outline: 0; background: transparent; color: var(--text); font-size:var(--font-body); }
.projects-list { min-height: 0; padding: 14px 18px 20px; overflow: auto; }
.project-card { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px; border: 1px solid transparent; border-radius: 10px; transition: .17s; }
.project-card:hover { border-color: var(--line); background: var(--surface-2); }
.project-card-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-soft); color: var(--accent-hover); }
.project-card-icon svg { width: 16px; height: 16px; }
.project-card-copy { min-width: 0; }
.project-card-copy strong, .project-card-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-card-copy strong { font-size:var(--font-body); }
.project-card-copy small { margin-top: 4px; color: var(--muted); font-size:var(--font-ui); }
.project-card-actions { display: flex; gap: 4px; }
.project-card-actions button { width: 31px; height: 31px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.project-card-actions button:hover { background: var(--surface-3); color: var(--text); }
.project-card-actions button.delete:hover { background: rgba(255,99,118,.08); color: var(--danger); }
.project-card-actions button svg { width: 14px; height: 14px; }
.empty-state, .loading-state { min-height: 270px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: var(--muted); text-align: center; font-size:var(--font-body); }
.empty-state svg { width: 32px; height: 32px; color: var(--muted-2); }
.empty-state strong { color: var(--text); font-size:var(--font-body-lg); }
.empty-state p { max-width: 260px; margin: 0; line-height: 1.55; }
.spinner { width: 20px; height: 20px; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }

/* Comunidad */
.community-home, .plans-view { min-height: 0; overflow: auto; background: var(--bg); scroll-behavior: smooth; }
.community-hero { min-height: 480px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 520px); align-items: center; gap: clamp(40px, 7vw, 100px); padding: clamp(52px, 7vw, 96px) max(6vw, 24px); border-bottom: 1px solid var(--line); background: radial-gradient(circle at 75% 45%, rgba(124,92,255,.12), transparent 35%), linear-gradient(180deg, var(--surface), var(--bg)); }
.hero-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-hover); font-size:var(--font-control); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(56,217,150,.09); }
.hero-copy h1, .plans-hero h1 { max-width: 720px; margin: 18px 0 20px; font-size: clamp(42px, 6vw, 78px); line-height: .96; letter-spacing: -.06em; }
.hero-copy h1 em, .plans-hero h1 em { color: var(--accent-hover); font-style: normal; }
.hero-copy > p, .plans-hero > p { max-width: 590px; margin: 0; color: var(--muted); font-size:var(--font-title-sm); line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 30px; }
.button.large { height: 43px; padding-inline: 18px; }
.hero-actions a { color: var(--muted); font-size:var(--font-body); text-decoration: none; }
.hero-actions a:hover { color: var(--text); }
.hero-code-card { min-height: 315px; position: relative; overflow: visible; border: 1px solid var(--line-strong); border-radius: 18px; background: #0d1018; box-shadow: 0 35px 80px rgba(0,0,0,.35), 0 0 70px rgba(124,92,255,.1); transform: rotate(1.5deg); }
.mini-window-bar { height: 39px; display: flex; align-items: center; gap: 6px; padding: 0 13px; border-bottom: 1px solid rgba(255,255,255,.07); color: #697185; font-size:var(--font-ui); }
.mini-window-bar i { width: 7px; height: 7px; border-radius: 50%; background: #ff6b67; }.mini-window-bar i:nth-child(2){background:#ffbd4a}.mini-window-bar i:nth-child(3){background:#38c957}.mini-window-bar span{margin-left:9px}
.hero-code-card pre { margin: 0; padding: 38px 34px; color: #c8cede; font: 13px/1.8 "SFMono-Regular", Consolas, monospace; }
.hero-code-card code b { color: #c49bff; }.hero-code-card code span{color:#8fe1bd}.hero-code-card code em{color:#5f697d;font-style:normal}
.floating-chip { position: absolute; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-size:var(--font-ui); font-weight: 700; transform: rotate(-1.5deg); }
.chip-one { top: 70px; right: -25px; }.chip-two{bottom:32px;left:-31px}
.gallery-section { padding: 72px max(5vw, 22px) 90px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: 1320px; margin: 0 auto 27px; }
.section-heading h2 { margin: 6px 0 7px; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.04em; }.section-heading p{margin:0;color:var(--muted);font-size:var(--font-body)}
.gallery-search { width: min(300px, 100%); height: 38px; display: grid; grid-template-columns: 34px 1fr; align-items: center; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--muted); }
.gallery-search svg { width: 14px; height: 14px; justify-self: end; }.gallery-search input{height:100%;min-width:0;padding:0 10px;border:0;outline:0;background:transparent;color:var(--text);font-size:var(--font-control)}
.community-grid { max-width: 1320px; min-height: 300px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0 auto; }
.community-grid > .loading-state, .community-grid > .empty-state { grid-column: 1 / -1; }
.gallery-pagination{max-width:1320px;display:flex;align-items:center;justify-content:center;gap:5px;margin:30px auto 0}.gallery-pagination[hidden]{display:none}.pagination-summary{margin-right:10px;color:var(--muted);font-size:var(--font-ui)}.page-button{min-width:34px;height:34px;display:grid;place-items:center;padding:0 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted);cursor:pointer;font-size:var(--font-control);transition:.18s}.page-button:hover:not(:disabled){border-color:var(--accent);color:var(--accent-hover);transform:translateY(-1px)}.page-button.active{border-color:var(--accent);background:var(--accent);color:#fff;font-weight:800}.page-button:disabled{cursor:not-allowed;opacity:.35}.page-ellipsis{min-width:20px;color:var(--muted-2);text-align:center;font-size:var(--font-control)}
.community-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: transform .2s, border-color .2s, box-shadow .2s; }
.community-card:hover { border-color: var(--line-strong); box-shadow: 0 18px 44px rgba(0,0,0,.2); transform: translateY(-3px); }
.community-card-preview { height: 220px; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: #fff; cursor: pointer; }
.community-card-preview iframe { width: 200%; height: 200%; border: 0; pointer-events: none; transform: scale(.5); transform-origin: top left; }
.community-card-preview::after { content:"";position:absolute;inset:0;background:linear-gradient(transparent 75%,rgba(0,0,0,.09)); }
.community-card-body { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 14px; }
.community-card-body h3{margin:0 0 7px;font-size:var(--font-body)}.community-author{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:var(--font-ui)}.author-avatar{width:21px;height:21px;display:grid;place-items:center;border-radius:6px;background:var(--accent-soft);color:var(--accent-hover);font-weight:800;text-transform:uppercase}
.community-card-actions{display:flex;gap:4px}.community-card-actions button{width:31px;height:31px;display:grid;place-items:center;border:0;border-radius:7px;background:var(--surface-2);color:var(--muted);cursor:pointer}.community-card-actions button:hover{background:var(--accent-soft);color:var(--accent-hover)}.community-card-actions svg{width:14px;height:14px}
.community-cta { margin: 0 max(5vw,22px) 80px; padding: 58px 24px; border: 1px solid rgba(124,92,255,.25); border-radius: 20px; background: radial-gradient(circle at 50% 120%,rgba(124,92,255,.23),transparent 52%),var(--surface); text-align:center; }.community-cta h2{margin:9px 0;font-size:34px;letter-spacing:-.04em}.community-cta p{margin:0 0 23px;color:var(--muted);font-size:var(--font-body)}
.community-preview-card{width:min(1050px,100%);height:min(760px,calc(100vh - 44px));display:grid;grid-template-rows:auto minmax(0,1fr);padding:0;overflow:hidden}.community-preview-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 20px;border-bottom:1px solid var(--line)}.community-preview-header h2{margin:4px 0 2px;font-size:18px}.community-preview-header p{margin:0;color:var(--muted);font-size:var(--font-ui)}.community-preview-actions{display:flex;align-items:center;gap:8px}#community-preview-frame{width:100%;height:100%;border:0;background:#fff}

/* Membresías */
.plans-view { padding-bottom: 55px; background: radial-gradient(circle at 50% 20%,rgba(124,92,255,.12),transparent 32%),var(--bg); }
.plans-hero { padding: 65px 22px 40px; text-align:center; }.plans-hero .hero-kicker{justify-content:center}.plans-hero h1{margin-inline:auto;font-size:clamp(42px,5vw,66px)}.plans-hero > p{margin-inline:auto}
.demo-notice { width:fit-content;display:flex;align-items:center;gap:9px;margin:24px auto 0;padding:8px 11px;border:1px solid rgba(255,189,74,.22);border-radius:8px;background:rgba(255,189,74,.07);color:#d8a844;font-size:var(--font-ui)}.demo-notice span{color:var(--muted)}
.pricing-grid { max-width: 1000px; display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:0 auto;padding:20px;align-items:stretch}.pricing-card{position:relative;display:flex;flex-direction:column;padding:27px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.pricing-card.featured{border-color:rgba(124,92,255,.55);box-shadow:0 22px 60px rgba(124,92,255,.13);transform:translateY(-8px)}.popular-tag{position:absolute;top:-11px;left:50%;padding:5px 9px;border-radius:99px;background:var(--accent);color:#fff;font-size:var(--font-sm);font-weight:800;letter-spacing:.08em;transform:translateX(-50%);white-space:nowrap}.plan-label{color:var(--accent-hover);font-size:var(--font-sm);font-weight:800;letter-spacing:.12em}.pricing-card h2{margin:8px 0 17px;font-size:20px}.price{display:flex;align-items:flex-end;gap:7px;padding-bottom:21px;border-bottom:1px solid var(--line)}.price strong{font-size:36px;letter-spacing:-.05em}.price span{padding-bottom:5px;color:var(--muted);font-size:var(--font-ui)}.pricing-card ul{display:grid;gap:12px;margin:22px 0 26px;padding:0;list-style:none;color:var(--muted);font-size:var(--font-control)}.pricing-card li.muted{color:var(--muted-2)}.plan-button{width:100%;margin-top:auto}.pricing-footnote{text-align:center;color:var(--muted-2);font-size:var(--font-ui)}
.checkout-card{width:min(390px,100%);text-align:center}.checkout-icon{width:52px;height:52px;display:grid;place-items:center;margin:0 auto 18px;border-radius:15px;background:var(--accent-soft);color:var(--accent-hover)}.checkout-icon svg{width:24px;height:24px}.checkout-card h2{margin:7px 0 12px;font-size:25px}.checkout-price{display:flex;align-items:flex-end;justify-content:center;gap:7px;margin:0 0 21px}.checkout-price strong{font-size:39px;letter-spacing:-.05em}.checkout-price span{padding-bottom:7px;color:var(--muted);font-size:var(--font-ui)}.checkout-card ul{display:grid;gap:9px;margin:0 0 20px;padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);list-style:none;color:var(--muted);text-align:left;font-size:var(--font-control)}.checkout-card li::before{content:'✓';margin-right:8px;color:var(--green)}.checkout-card p{margin:0 0 17px;color:var(--muted-2);font-size:var(--font-ui);line-height:1.55}.cancel-checkout{margin-top:9px}

/* Galería personal */
.my-projects-view{min-height:0;overflow:auto;background:var(--bg)}.my-projects-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:58px max(5vw,22px) 35px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 75% 30%,rgba(124,92,255,.1),transparent 30%),linear-gradient(180deg,var(--surface),var(--bg))}.my-projects-hero h1{margin:12px 0 8px;font-size:clamp(36px,5vw,62px);letter-spacing:-.055em}.my-projects-hero p{margin:0;color:var(--muted);font-size:var(--font-body)}.project-stats{display:flex;gap:8px}.project-stats span{min-width:82px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--muted);font-size:var(--font-sm);text-transform:uppercase;letter-spacing:.06em}.project-stats strong{display:block;margin-bottom:4px;color:var(--text);font-size:18px;letter-spacing:-.03em}.my-projects-content{max-width:1380px;margin:0 auto;padding:25px max(3vw,18px) 80px}.my-projects-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:22px}.my-projects-toolbar .gallery-search{margin-right:auto}.project-filters{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}.project-filters button{height:29px;padding:0 10px;border:0;border-radius:5px;background:transparent;color:var(--muted);cursor:pointer;font-size:var(--font-ui)}.project-filters button.active{background:var(--surface-3);color:var(--text)}.my-projects-grid{min-height:320px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.my-projects-grid>.loading-state,.my-projects-grid>.empty-state{grid-column:1/-1}.my-project-card{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:.2s}.my-project-card:hover{border-color:var(--line-strong);box-shadow:0 18px 44px rgba(0,0,0,.2);transform:translateY(-2px)}.my-project-preview{height:230px;position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:#fff}.my-project-preview iframe{width:200%;height:200%;border:0;pointer-events:none;transform:scale(.5);transform-origin:top left}.preview-open{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px;border:0;background:rgba(7,8,12,.02);color:transparent;cursor:pointer;transition:.18s;font-size:var(--font-control);font-weight:750}.preview-open svg{width:15px;height:15px}.my-project-card:hover .preview-open,.preview-open:focus-visible{background:rgba(7,8,12,.56);color:#fff;backdrop-filter:blur(2px)}.my-project-body{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px}.my-project-copy{min-width:0}.my-project-copy h3{margin:6px 0 4px;overflow:hidden;font-size:var(--font-body);text-overflow:ellipsis;white-space:nowrap}.my-project-copy small{color:var(--muted);font-size:var(--font-sm)}.visibility-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 6px;border-radius:99px;font-size:var(--font-xs);font-weight:800;text-transform:uppercase;letter-spacing:.07em}.visibility-badge.public{background:rgba(56,217,150,.1);color:var(--green)}.visibility-badge.private{background:var(--accent-soft);color:var(--accent-hover)}.visibility-badge::before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor}.my-project-actions{display:flex;gap:4px}.my-project-actions button{width:31px;height:31px;display:grid;place-items:center;border:0;border-radius:7px;background:var(--surface-2);color:var(--muted);cursor:pointer}.my-project-actions button:hover{background:var(--surface-3);color:var(--text)}.my-project-actions button.delete:hover{background:rgba(255,99,118,.08);color:var(--danger)}.my-project-actions svg{width:14px;height:14px}

.preview-panel:fullscreen { background: var(--surface); }
.preview-panel:fullscreen .preview-stage { padding: 24px; }

@media (max-width: 860px) {
    body { overflow: auto; }
    .app-shell { min-height: 100%; height: auto; grid-template-rows: 58px auto 28px; }
    .app-shell:has(.account-strike-banner:not([hidden])) { grid-template-rows: 58px auto auto 28px; }
    .workspace { grid-template-columns: 1fr; grid-template-rows: minmax(620px, 66vh) 7px minmax(520px, 80vh); }
    .resizer { cursor: row-resize; }
    .resizer span { width: 22px; height: 1px; }
    .editor-panel { min-height: 620px; }
    .preview-panel { min-height: 520px; }
    .topbar { padding: 0 12px; }
    .save-state, .button.ghost.desktop-action { display: none; }
    .button kbd { display: none; }
    .statusbar .shortcut-hint { display: none; }
    .nav-button { padding-inline: 9px; }
    .community-hero { grid-template-columns: 1fr; }.hero-code-card{display:none}.community-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pricing-grid{grid-template-columns:1fr;max-width:480px}.pricing-card.featured{transform:none}.my-projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.my-projects-hero{align-items:flex-start;flex-direction:column}.project-stats{width:100%}.project-stats span{flex:1}
}

@media (max-width: 1500px) and (min-width: 861px) {
    .topbar { gap: 12px; padding-inline: 12px; }
    .save-state, .desktop-action { display: none !important; }
    .topbar-actions .button.ghost span { display: none; }
    .topbar-actions .button.ghost { width: 36px; padding: 0; }
    .button kbd { display: none; }
    .topbar-actions .button.primary { padding-inline: 11px; }
}

@media (max-width: 1100px) and (min-width: 861px) {
    .brand small { display: none; }
    .topbar-actions .button.primary span { display: none; }
    .topbar-actions .button.primary { width: 36px; padding: 0; }
    .user-name, .user-button > svg { display: none; }
    .user-button { width: 36px; padding: 0; justify-content: center; }
}

@media (max-width: 560px) {
    .brand small, .topbar .button.primary span { display: none; }
    .topbar .button.primary { width: 38px; padding: 0; }
    .topbar-actions { gap: 5px; }
    .topbar-actions .button.ghost span, .user-name, .user-button > svg { display: none; }
    .topbar-actions .button.ghost { width: 36px; padding: 0; }
    .user-button { width: 36px; padding: 0; justify-content: center; }
    #project-title { width: 200px; max-width: 55vw; }
    .panel-heading { padding-inline: 12px; }
    .preview-toolbar { grid-template-columns: 1fr auto; }
    .device-switcher { display: none; }
    .preview-title .preview-time { display: none; }
    .preview-stage { padding: 10px; }
    .browser-chrome { grid-template-columns: 56px minmax(70px, 1fr) 18px; gap: 6px; padding-inline: 8px; }
    .statusbar { justify-content: space-between; }
    .modal { padding: 10px; }
    .modal-card { padding: 25px 20px; border-radius: 16px; }
    .settings-card{height:calc(100vh - 20px);grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding:0}.settings-sidebar{padding:15px;border-right:0;border-bottom:1px solid var(--line)}.settings-account{padding:0 42px 13px 2px}.settings-nav{display:flex;overflow-x:auto;margin-top:12px}.settings-nav button{flex:0 0 auto;padding-inline:10px}.settings-version{display:none}.settings-content{padding:26px 20px}.settings-form-actions{align-items:stretch;flex-direction:column}.settings-form-actions .button{width:100%}.account-metadata{grid-template-columns:1fr}.membership-includes ul{grid-template-columns:1fr}.membership-offer{align-items:stretch;flex-direction:column}.membership-offer .button{width:100%}.settings-plan-grid{grid-template-columns:1fr}.settings-plan-card ul{min-height:0}.settings-plan-price{min-height:0}
    .projects-card { padding: 0; min-height: calc(100vh - 20px); max-height: calc(100vh - 20px); }
    .projects-header { padding: 22px 18px 16px; }
    .projects-toolbar { align-items: stretch; }
    .search-box { min-width: 0; flex: 1; }
    .projects-toolbar .button { width: 38px; padding: 0; font-size: 0; }
    .projects-list { padding-inline: 9px; }
    .main-nav { gap: 1px; padding: 2px; }.nav-button{padding-inline:5px;font-size:var(--font-xs)}.nav-button[data-view="plans"]{display:none}
    .community-hero{min-height:440px;padding:48px 22px}.hero-copy h1{font-size:44px}.hero-actions{align-items:flex-start;flex-direction:column;gap:14px}.section-heading{align-items:stretch;flex-direction:column}.gallery-search{width:100%}.community-grid{grid-template-columns:1fr}.community-card-preview{height:210px}.community-preview-header{align-items:flex-start;flex-direction:column}.community-preview-actions{width:100%;justify-content:space-between}.community-preview-card{height:calc(100vh - 20px)}.gallery-pagination{flex-wrap:wrap}.pagination-summary{width:100%;margin:0 0 5px;text-align:center}
    .panel-heading{flex-wrap:wrap;height:auto;padding-block:7px}.editor-panel{grid-template-rows:78px minmax(0,1fr)}.visibility-switch{margin-left:auto}
    .my-projects-hero{padding:38px 18px 25px}.project-stats{gap:5px}.project-stats span{min-width:0;padding:9px}.my-projects-toolbar{align-items:stretch;flex-wrap:wrap}.my-projects-toolbar .gallery-search{width:100%;margin:0}.project-filters{flex:1}.project-filters button{flex:1;padding-inline:5px}.my-projects-toolbar>.button{width:38px;padding:0;font-size:0}.my-projects-grid{grid-template-columns:1fr}.my-project-preview{height:215px}
}

@media (max-width: 860px) {
    .topbar { grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; }
    .brand small { display: none; }
    .main-nav { justify-self: start; }
    .topbar-actions .button span, .topbar-actions .user-name, .topbar-actions .user-button > svg { display: none; }
    .topbar-actions .button, .topbar-actions .user-button { width: 36px; padding: 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}