.podo-studio {
    --podo-surface: #fff;
    --podo-border: #e7e5eb;
    --podo-muted: #77717f;
    --podo-tint: #f6f3fb;
    max-width: 1184px;
    margin: 0 auto;
    padding: 48px 24px 88px;
}
.dark .podo-studio { --podo-surface: #18181b; --podo-border: #333038; --podo-muted: #aaa3b2; --podo-tint: #24202e; }
.podo-intro { margin-bottom: 32px; }
.podo-eyebrow { color: #8b5cf6; font-size: 13px; font-weight: 700; margin-bottom: 10px; letter-spacing: .03em; }
.podo-eyebrow span { margin-right: 5px; }
.podo-intro h1 { font-size: clamp(27px, 3.6vw, 40px); line-height: 1.25; font-weight: 800; letter-spacing: -.04em; }
.podo-subtitle { margin-top: 12px; color: var(--podo-muted); font-size: 15px; line-height: 1.7; max-width: 720px; }
.podo-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 24px; }
.podo-card { background: var(--podo-surface); border: 1px solid var(--podo-border); border-radius: 20px; }
.podo-board-card { min-width: 0; overflow: hidden; box-shadow: 0 8px 30px #27174404; }
.podo-board-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 24px 16px; }
.podo-studio h2 { font-weight: 700; font-size: 16px; letter-spacing: -.02em; }
.podo-dimensions { font-size: 12px; color: var(--podo-muted); font-variant-numeric: tabular-nums; padding: 4px 9px; border: 1px solid var(--podo-border); border-radius: 7px; }
.podo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 24px; }
.podo-tool-group { display: flex; background: var(--podo-tint); border-radius: 10px; padding: 4px; }
.podo-tool { min-height: 36px; font-size: 13px; font-weight: 600; color: var(--podo-muted); padding: 6px 17px; border-radius: 7px; }
.podo-tool.is-selected { background: var(--podo-surface); color: #8b5cf6; box-shadow: 0 1px 4px #0001; }
.podo-history { display: flex; gap: 6px; }
.podo-icon-button { width: 38px; height: 38px; display: grid; place-items: center; font-size: 25px; line-height: 1; border: 1px solid var(--podo-border); border-radius: 10px; }
.podo-icon-button:disabled { opacity: .3; cursor: default; }
.podo-palette { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 20px 16px; }
.podo-swatch { width: 33px; height: 33px; border-radius: 50%; border: 1px solid #0000000d; position: relative; transition: transform .15s; }
.podo-swatch:hover { transform: translateY(-2px); }
.podo-swatch[aria-pressed="true"]::after { content: ""; position: absolute; inset: -5px; border: 2px solid #a78bfa; border-radius: 50%; }
.podo-canvas-wrap { padding: 0 24px 24px; }
#podoCanvas { display: block; width: 100%; max-width: 544px; aspect-ratio: 1; margin: 0 auto; border-radius: 12px; touch-action: none; cursor: crosshair; background: #fff; outline-offset: 5px; scroll-margin-top: 80px; }
.podo-board-footer { display: flex; justify-content: space-between; gap: 12px; padding: 16px 24px; background: var(--podo-tint); color: var(--podo-muted); font-size: 11px; }
.podo-controls { display: grid; gap: 16px; min-width: 0; }
.podo-settings, .podo-text-panel { padding: 22px; }
.podo-settings h2, .podo-text-panel h2 { margin-bottom: 18px; }
.podo-studio label:not(.sr-only) { display: block; color: var(--podo-muted); font-size: 12px; margin: 14px 0 7px; }
.podo-studio select, .podo-studio textarea { display: block; width: 100%; min-width: 0; background: var(--podo-surface); border: 1px solid var(--podo-border); border-radius: 10px; font-size: 13px; padding: 10px 12px; color: inherit; }
.podo-studio select { min-height: 42px; }
.podo-studio textarea { resize: vertical; min-height: 90px; font-size: 18px; font-weight: 600; line-height: 1.5; }
.podo-studio textarea::placeholder { color: #b4a9c5; }
.podo-setting-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.podo-button { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; width: 100%; border-radius: 11px; font-size: 13px; font-weight: 650; transition: background .15s, transform .15s; }
.podo-button:hover { transform: translateY(-1px); }
.podo-button:disabled { opacity: .5; cursor: wait; }
.podo-button-primary { background: #f97316; color: white; box-shadow: 0 5px 14px #f9731626; }
.podo-button-primary:hover { background: #ea580c; }
.podo-button-outlined { background: var(--podo-surface); border: 1px solid var(--podo-border); }
.podo-button-muted { background: var(--podo-tint); color: var(--podo-muted); margin-top: 18px; }
.podo-help { color: var(--podo-muted); font-size: 11px; line-height: 1.6; margin: 10px 0 14px; }
.podo-export { display: grid; gap: 10px; }
.podo-button-gallery { background: #7c3aed; color: #fff; }
.podo-button-gallery:hover { background: #6d28d9; }
.podo-publish-notice { color: var(--podo-muted); font-size: 11px; line-height: 1.5; text-align: center; margin-bottom: 6px; }
.podo-draft-status { text-align: center; color: var(--podo-muted); font-size: 11px; }
.podo-status { font-size: 12px; color: #8b5cf6; line-height: 1.6; overflow-wrap: anywhere; }
.podo-status:empty { display: none; }
.podo-templates { margin-top: 40px; }
.podo-section-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.podo-section-heading p { color: var(--podo-muted); font-size: 13px; margin-top: 6px; }
.podo-section-heading > span { font-size: 32px; color: #b69bd7; }
.podo-template-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.podo-template { min-width: 0; display: flex; align-items: center; gap: 18px; padding: 16px; text-align: left; transition: border-color .15s, transform .15s; }
.podo-template:hover { border-color: #b69bd7; transform: translateY(-2px); }
.podo-template canvas { width: 72px; height: 72px; border-radius: 7px; flex-shrink: 0; }
.podo-template span { font-size: 13px; font-weight: 600; }
.podo-how { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--podo-border); }
.podo-gallery { margin-top: 40px; }
.podo-gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.podo-gallery-card { min-width: 0; padding: 14px; }
.podo-gallery-preview { width: 100%; display: block; }
.podo-gallery-preview canvas { display: block; width: 100%; aspect-ratio: 1; border-radius: 10px; }
.podo-gallery-meta { display: flex; justify-content: space-between; gap: 8px; margin: 12px 0 8px; font-size: 11px; color: var(--podo-muted); }
.podo-gallery-meta strong { color: inherit; font-weight: 600; }
.podo-gallery-action { font-size: 11px; color: #8b5cf6; }
.podo-gallery-hide { float: right; color: #dc2626; font-size: 11px; }
.podo-gallery-status { padding: 24px 0; text-align: center; color: var(--podo-muted); font-size: 13px; }
#podoGalleryMore { max-width: 240px; margin: 0 auto; }
#podoGalleryMore[hidden] { display: none; }
.podo-how ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 20px; }
.podo-how li { display: flex; align-items: start; gap: 10px; color: var(--podo-muted); font-size: 13px; line-height: 1.6; }
.podo-how li > span { width: 23px; height: 23px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; background: var(--podo-tint); color: #a78bfa; font-size: 11px; font-weight: 700; }
.podo-privacy { font-size: 12px; color: var(--podo-muted); line-height: 1.7; margin-top: 28px; }
.podo-studio button:focus-visible, .podo-studio select:focus-visible, .podo-studio textarea:focus-visible, #podoCanvas:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 3px; }
.podo-page #siteFabGroup, .podo-page #visitorCounter { position: static; display: flex; margin: 12px auto; max-width: 1184px; padding: 0 24px; }
@media (max-width: 900px) {
    .podo-workspace { grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; }
    .podo-settings, .podo-text-panel { padding: 18px; }
    .podo-template { flex-direction: column; gap: 10px; text-align: center; }
}
@media (max-width: 700px) {
    .podo-studio { padding: 30px 16px 56px; }
    .podo-intro { margin-bottom: 24px; }
    .podo-subtitle { font-size: 13px; }
    .podo-workspace { grid-template-columns: minmax(0, 1fr); }
    .podo-board-header { padding: 18px 16px 14px; }
    .podo-toolbar { padding: 0 16px; }
    .podo-palette { gap: 13px; padding: 18px 12px; }
    .podo-swatch { width: 28px; height: 28px; }
    .podo-canvas-wrap { padding: 0 14px 18px; }
    .podo-board-footer { padding: 13px 16px; font-size: 10px; }
    .podo-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .podo-settings, .podo-text-panel { padding: 16px; }
    .podo-export, .podo-status, .podo-draft-status { grid-column: 1 / -1; }
    .podo-export { grid-template-columns: 1fr 1fr; }
    .podo-button-gallery, .podo-publish-notice { grid-column: 1 / -1; }
    .podo-template-grid { gap: 8px; }
    .podo-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .podo-gallery-card { padding: 10px; }
    .podo-template { padding: 12px 5px; border-radius: 12px; }
    .podo-template canvas { width: 54px; height: 54px; }
    .podo-template span { font-size: 11px; }
    .podo-how ol { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 380px) {
    .podo-controls { grid-template-columns: 1fr; }
    .podo-palette { gap: 11px; }
}