:root {
    --bg: #14141f;
    --bg-elevated: #1a1a28;
    --panel-bg: #1e1e2e;
    --panel-bg-2: #232336;
    --border: #2d2d44;
    --border-strong: #3a3a55;
    --text: #e4e4ec;
    --text-secondary: #8b8ba7;
    --text-muted: #6b6b85;
    --accent: #7c8fff;
    --accent-hover: #6b7fff;
    --accent-soft: rgba(124,143,255,0.12);
    --danger: #ef4f63;
    --danger-soft: rgba(239,79,99,0.12);
    --success: #4ade80;
    --warning: #fbbf24;
    --input-bg: #16161f;
    --input-bg-focus: #1a1a28;
    --card-bg: #262638;
    --hover-bg: #2c2c42;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
    --shadow: 0 4px 14px rgba(0,0,0,0.35);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
    --radius: 10px;
    --radius-sm: 6px;
    --radius-xs: 4px;
    --transition: all 0.16s cubic-bezier(0.4,0,0.2,1);
    --font-mono: 'SF Mono','Cascadia Code','Consolas',monospace;
    --font-sans: -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang TC','Microsoft JhengHei',sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; }
@media screen and (orientation: landscape) and (max-width: 900px) {
    #left-panel { width: 220px; min-width: 220px; }
    #right-panel { width: 280px; min-width: 280px; }
    #preview-frame-wrapper { padding: 12px; }
    #preview-frame { max-width: 100%; }
    .prop-grid-2 { grid-template-columns: 1fr 1fr; }
    #component-library { grid-template-columns: 1fr 1fr; }
}
@media screen and (orientation: landscape) and (max-width: 700px) {
    #left-panel { width: 180px; min-width: 180px; }
    #right-panel { width: 220px; min-width: 220px; }
    #left-panel .panel-header { font-size: 13px; padding: 10px 12px; }
    #right-panel .panel-header { font-size: 13px; padding: 10px 12px; }
    #preview-toolbar { padding: 6px 10px; flex-wrap: wrap; gap: 4px; }
    #preview-toolbar .page-indicator { font-size: 11px; }
    .btn { font-size: 10px; padding: 4px 8px; }
    .btn.sm { font-size: 9px; padding: 3px 6px; }
    .prop-group input, .prop-group textarea, .prop-group select { font-size: 11px; padding: 5px 7px; }
    .prop-section-header { font-size: 12px; padding: 8px 10px; }
    #preview-frame-wrapper { padding: 8px; }
}
@media screen and (orientation: landscape) and (max-width: 550px) {
    #left-panel { width: 140px; min-width: 140px; }
    #right-panel { width: 180px; min-width: 180px; }
    #left-panel .panel-header .logo-icon { width: 22px; height: 22px; font-size: 11px; }
    #left-panel .panel-header { font-size: 11px; padding: 6px 8px; }
    #right-panel .panel-header { font-size: 11px; padding: 6px 8px; }
    #component-library .comp-btn { font-size: 10px; padding: 6px 4px; }
    .section-title { font-size: 10px; padding: 8px 4px 4px; }
    #preview-toolbar .btn { font-size: 8px; padding: 2px 5px; }
    .prop-grid-2 { grid-template-columns: 1fr; }
    #component-library { grid-template-columns: 1fr 1fr; }
}
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#3a3a55; border-radius:5px; border:2px solid var(--panel-bg); }
::-webkit-scrollbar-thumb:hover { background:#4a4a6a; }
body { font-family:var(--font-sans); background:var(--bg); color:var(--text); height:100vh; width:100vw; overflow:hidden; display:flex; user-select:none; font-size:13px; -webkit-font-smoothing:antialiased; }
#left-panel { width:288px; min-width:288px; background:var(--panel-bg); border-right:1px solid var(--border); display:flex; flex-direction:column; height:100vh; z-index:10; overflow:hidden; }
#left-panel .panel-header { padding:14px 16px; border-bottom:1px solid var(--border); font-weight:700; font-size:16px; background:linear-gradient(135deg,#1c1c2c 0%,#22223a 100%); display:flex; align-items:center; gap:10px; flex-shrink:0; letter-spacing:0.2px; }
#left-panel .panel-header .logo-icon { width:30px; height:30px; background:linear-gradient(135deg,var(--accent) 0%,#a78bfa 100%); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff; box-shadow:0 4px 12px rgba(124,143,255,0.35); }
#left-panel .scroll-area { flex:1; overflow-y:auto; padding:10px 10px 20px; display:flex; flex-direction:column; gap:4px; }
.section-title { font-size:12px; text-transform:uppercase; letter-spacing:1.4px; color:var(--text-muted); padding:14px 8px 6px; font-weight:700; display:flex; align-items:center; gap:6px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 14px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--card-bg); color:var(--text); cursor:pointer; font-size:12.5px; font-weight:500; font-family:var(--font-sans); transition:var(--transition); white-space:nowrap; }
.btn:hover { background:var(--hover-bg); border-color:var(--border-strong); transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn.accent { background:linear-gradient(135deg,var(--accent) 0%,#6b7fff 100%); border-color:var(--accent); color:#fff; font-weight:600; box-shadow:0 4px 14px rgba(124,143,255,0.35); }
.btn.accent:hover { background:linear-gradient(135deg,var(--accent-hover) 0%,#5a6fff 100%); box-shadow:0 6px 18px rgba(124,143,255,0.45); }
.btn.danger { border-color:rgba(239,79,99,0.4); color:var(--danger); background:var(--danger-soft); }
.btn.danger:hover { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn.ghost { background:transparent; border-color:transparent; color:var(--text-secondary); }
.btn.ghost:hover { background:var(--hover-bg); color:var(--text); }
.btn.sm { padding:5px 10px; font-size:11px; }
.btn.xs { padding:3px 8px; font-size:10px; border-radius:var(--radius-xs); }
.btn.icon-only { padding:3px 6px; min-width:24px; }
.btn-row { display:flex; gap:6px; flex-wrap:wrap; }
#page-list { display:flex; flex-direction:column; gap:3px; }
#page-list .page-item { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-radius:var(--radius-sm); cursor:pointer; background:var(--card-bg); border:1px solid transparent; transition:var(--transition); gap:6px; font-size:12.5px; }
#page-list .page-item:hover { background:var(--hover-bg); }
#page-list .page-item.active { border-color:var(--accent); background:linear-gradient(135deg,rgba(124,143,255,0.15) 0%,rgba(124,143,255,0.08) 100%); box-shadow:0 0 0 1px rgba(124,143,255,0.2); }
#page-list .page-item .page-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; font-weight:500; }
#page-list .page-item .page-actions { display:flex; gap:2px; flex-shrink:0; opacity:0.65; transition:var(--transition); }
#page-list .page-item:hover .page-actions { opacity:1; }
#component-library { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:2px 0; }
#component-library .comp-btn { padding:10px 10px; font-size:13px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--card-bg); color:var(--text); cursor:pointer; transition:var(--transition); text-align:left; font-weight:500; }
#component-library .comp-btn:hover { background:var(--accent-soft); border-color:var(--accent); color:#fff; transform:translateY(-1px); }
#menu-editor { display:flex; flex-direction:column; gap:2px; }
#menu-editor .menu-item-row { display:flex; align-items:center; gap:4px; padding:4px 2px; font-size:12px; border-radius:var(--radius-xs); flex-wrap:nowrap; overflow:hidden; }
#menu-editor .menu-item-row:hover { background:rgba(124,143,255,0.06); }
#menu-editor .menu-item-row input[type="text"] { flex:1; min-width:40px; max-width:72px; padding:5px 7px; border-radius:var(--radius-xs); border:1px solid var(--border); background:var(--input-bg); color:var(--text); font-size:11px; }
#menu-editor .menu-item-row select { padding:4px 6px; border-radius:var(--radius-xs); border:1px solid var(--border); background:var(--input-bg); color:var(--text); font-size:11px; max-width:78px; }
#menu-editor .menu-item-row input[type="color"] { width:22px; height:22px; padding:0; border:none; margin:0 2px; flex-shrink:0; border-radius:var(--radius-xs); cursor:pointer; }
#menu-editor .menu-children { margin-left:14px; border-left:2px solid var(--border-strong); padding-left:8px; display:flex; flex-direction:column; gap:2px; }
#preview-area { flex:1; display:flex; flex-direction:column; background:#2a2a3a; min-width:300px; }
#preview-toolbar { padding:10px 16px; background:linear-gradient(180deg,#252538 0%,#1f1f30 100%); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; flex-shrink:0; font-size:12px; color:var(--text-secondary); }
#preview-toolbar .page-indicator { font-weight:600; color:var(--text); font-size:13px; display:flex; align-items:center; gap:6px; }
#preview-toolbar .page-indicator::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--success); box-shadow:0 0 8px rgba(74,222,128,0.6); }
#preview-frame-wrapper { flex:1; overflow:auto; padding:24px; display:flex; justify-content:center; align-items:flex-start; }
#preview-frame { width:100%; max-width:900px; background:#fff; box-shadow:var(--shadow-lg); border-radius:6px; overflow:visible; position:relative; }
#preview-frame .preview-component { position:relative; cursor:pointer; transition:outline 0.12s; outline:2px solid transparent; }
#preview-frame .preview-component:hover { outline:2px dashed rgba(124,143,255,0.7); }
#preview-frame .preview-component.selected { outline:2px solid var(--accent)!important; z-index:5; box-shadow:0 0 0 6px rgba(124,143,255,0.22); }
#preview-frame .comp-label { position:absolute; top:-26px; left:0px; font-size:11px; background:var(--accent); color:#fff; padding:4px 10px; border-radius:6px; pointer-events:none; opacity:0; transition:opacity 0.15s; z-index:10; white-space:nowrap; font-weight:600; box-shadow:0 4px 12px rgba(124,143,255,0.4); }
#preview-frame .preview-component.selected .comp-label, #preview-frame .preview-component:hover .comp-label { opacity:1; }
#right-panel { width:340px; min-width:340px; background:var(--panel-bg); border-left:1px solid var(--border); display:flex; flex-direction:column; height:100vh; z-index:10; overflow:hidden; }
#right-panel .panel-header { padding:14px 16px; border-bottom:1px solid var(--border); font-weight:700; font-size:16px; background:linear-gradient(135deg,#1c1c2c 0%,#22223a 100%); flex-shrink:0; display:flex; align-items:center; gap:8px; letter-spacing:0.2px; }
#right-panel .scroll-area { flex:1; overflow-y:auto; padding:12px 12px 24px; display:flex; flex-direction:column; gap:8px; }
#right-panel .empty-state { text-align:center; color:var(--text-muted); padding:60px 20px; font-size:13px; line-height:1.7; }
#right-panel .empty-state .empty-icon { font-size:40px; display:block; margin-bottom:12px; opacity:0.5; }
.props-header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; background:linear-gradient(135deg,rgba(124,143,255,0.16) 0%,rgba(124,143,255,0.06) 100%); border:1px solid rgba(124,143,255,0.3); border-radius:var(--radius); margin-bottom:4px; }
.props-header .comp-type-tag { display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:700; color:#fff; }
.prop-section { border:1px solid var(--border); border-radius:var(--radius); background:var(--panel-bg-2); overflow:hidden; transition:var(--transition); }
.prop-section:hover { border-color:var(--border-strong); }
.prop-section-header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; cursor:pointer; user-select:none; font-size:14px; font-weight:600; color:var(--text); letter-spacing:0.3px; transition:var(--transition); }
.prop-section-header:hover { background:var(--hover-bg); }
.prop-section-header .ps-title { display:flex; align-items:center; gap:8px; }
.prop-section-header .ps-icon { font-size:16px; opacity:0.9; }
.prop-section-header .ps-chevron { font-size:10px; color:var(--text-muted); transition:transform 0.2s; }
.prop-section.collapsed .ps-chevron { transform:rotate(-90deg); }
.prop-section-body { padding:4px 12px 12px; display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--border); }
.prop-section.collapsed .prop-section-body { display:none; }
.prop-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.prop-group { display:flex; flex-direction:column; gap:5px; }
.prop-group label { font-size:12px; font-weight:600; color:var(--text-secondary); letter-spacing:0.3px; text-transform:uppercase; }
.prop-group input, .prop-group textarea, .prop-group select { padding:9px 11px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--input-bg); color:var(--text); font-size:13.5px; font-family:var(--font-sans); resize:vertical; transition:var(--transition); }
.prop-group input:focus, .prop-group textarea:focus, .prop-group select:focus { outline:none; border-color:var(--accent); background:var(--input-bg-focus); box-shadow:0 0 0 3px rgba(124,143,255,0.15); }
.prop-group textarea { min-height:64px; font-family:var(--font-mono); font-size:12.5px; line-height:1.5; }
.prop-group input[type="color"] { padding:3px; height:34px; cursor:pointer; min-width:46px; max-width:46px; border-radius:var(--radius-sm); }
.prop-group .img-upload-row { display:flex; gap:6px; align-items:center; }
.prop-group .img-upload-row input[type="text"] { flex:1; }
.color-row { display:flex; gap:6px; align-items:center; }
.color-row input[type="text"] { flex:1; font-family:var(--font-mono); font-size:11.5px; }
.item-card { border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px; background:var(--input-bg); display:flex; flex-direction:column; gap:6px; }
.item-card-head { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--text-secondary); font-weight:600; }
.sub-group-title { font-size:12px; font-weight:700; color:var(--accent); letter-spacing:1px; text-transform:uppercase; margin-top:6px; padding-bottom:4px; border-bottom:1px solid var(--border); }
.tag { display:inline-block; padding:3px 9px; border-radius:12px; font-size:10px; font-weight:600; background:var(--card-bg); color:var(--text-secondary); }
.tag.active { background:var(--accent); color:#fff; }
#toast { position:fixed; bottom:28px; right:28px; z-index:999; background:#262638; color:#fff; padding:12px 20px; border-radius:var(--radius); font-size:13px; font-weight:500; opacity:0; pointer-events:none; transition:all 0.25s cubic-bezier(0.4,0,0.2,1); box-shadow:var(--shadow-lg); border:1px solid var(--border-strong); transform:translateY(8px); }
#toast.show { opacity:1; transform:translateY(0); }
.nav-submenu { display:none; position:absolute; top:100%; left:0; box-shadow:0 4px 8px rgba(0,0,0,0.2); border:2px solid #bbb; border-radius:6px; min-width:140px; z-index:20; padding:6px 0; flex-direction:column; background:#fff; }
.nav-submenu.open { display:flex; }
.nav-parent-toggle { cursor:pointer; }
.site-title-text { cursor:pointer; }
.footer-three-col { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.footer-three-col > div { flex: 1; min-width: 200px; }
.list-item-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #eee; }
.list-item-date { font-weight: 600; min-width: 90px; }
.list-item-content { flex: 1; }
.video-container { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.youtube-two-col { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.youtube-two-col > div:first-child { flex: 1 1 60%; min-width: 300px; }
.youtube-two-col > div:last-child { flex: 1 1 35%; min-width: 250px; padding: 10px; }
@media (max-width: 768px) { .youtube-two-col { flex-direction: column !important; } .youtube-two-col > div { width: 100% !important; min-width: auto !important; flex: auto !important; } }
.color-clear-btn { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 4px 6px; line-height: 1; border-radius:var(--radius-xs); transition:var(--transition); }
.color-clear-btn:hover { color: var(--danger); background:var(--danger-soft); }
.sidebar-collapse-btn { cursor: pointer; }
.carousel-container { user-select: none; -webkit-user-select: none; }
.carousel-slides-wrapper { touch-action: pan-y pinch-zoom; }
.carousel-slides-track { display: flex; transition: transform 0s; will-change: transform; }
.carousel-slides-track.animating { transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.carousel-slide-item { flex: 0 0 100%; width: 100%; }
.carousel-slide-item img { width: 100%; height: auto; display: block; pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.toggle-switch { position: relative; display: inline-block; width: 34px; height: 20px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4a4a66; transition: 0.3s; border-radius: 20px; }
.toggle-slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; box-shadow:0 2px 4px rgba(0,0,0,0.3); }
.toggle-switch input:checked + .toggle-slider { background-color: var(--accent); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(14px); }
.toggle-row { display: flex; align-items: center; gap: 10px; }
.toggle-label { font-size: 11px; color: var(--text-secondary); line-height: 1.3; }
.timeline-left .timeline-item { display:flex; gap:20px; margin-bottom:20px; }
.timeline-left .timeline-item .timeline-content { flex:1; }
.timeline-center .timeline-item { display:flex; flex-direction:column; align-items:center; margin-bottom:20px; }
.timeline-center .timeline-content { max-width:80%; }
.timeline-center .timeline-item:nth-child(odd) .timeline-content { align-self:flex-start; }
.timeline-center .timeline-item:nth-child(even) .timeline-content { align-self:flex-end; }
.split-scroll-container { display:flex; gap:0; }
.split-left { flex:0 0 auto; position:sticky; top:0; height:100vh; overflow:hidden; }
.split-right { flex:1; overflow-y:auto; max-height:100vh; }
.product-card { border:1px solid #ddd; border-radius:8px; overflow:hidden; background:#fff; }
.product-card .product-title { padding:12px; font-weight:bold; text-align:center; }
.product-card .product-image img { width:100%; height:auto; display:block; }
.product-card .product-body { padding:12px; }
.product-card .product-price { font-size:1.2em; font-weight:bold; color:#e74c3c; padding:0 12px 8px; }
.product-card .product-offer { color:#27ae60; padding:0 12px 8px; }
.product-card .product-more { padding:0 12px 12px; }
.carousel-no-border .carousel-slides-wrapper { border:none!important; border-radius:0!important; }
.carousel-with-border .carousel-slides-wrapper { border:1px solid #ccc; border-radius:8px; }
@media (max-width:768px) { .split-scroll-container { flex-direction:column; } .split-left { position:relative; height:auto; width:100%!important; } .split-right { max-height:none; } .timeline-center .timeline-item:nth-child(odd) .timeline-content, .timeline-center .timeline-item:nth-child(even) .timeline-content { align-self:center; } .timeline-left .timeline-item .timeline-image { display:none; } }
#template-select { padding:8px 10px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--input-bg); color:var(--text); font-size:13px; width:100%; cursor:pointer; }
#template-select option { background:var(--panel-bg); color:var(--text); }
.export-options { display:flex; gap:6px; flex-wrap:wrap; }
.export-options .btn { flex:1; }
.export-settings-group { padding:0 8px 12px; display:flex; flex-direction:column; gap:6px; }
.export-settings-group .prop-group { margin-bottom:0; }

/* ============================================================
   手機模式 - 解鎖滑動（不影響桌機）
   ============================================================ */

/* 手機裝置 - 強制解除 overflow:hidden */
@media screen and (max-width: 1024px) {
    html, body {
        overflow: auto !important;
        height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;
    }
    
    body {
        display: block !important;
        padding: 10px !important;
        background: var(--bg) !important;
        user-select: auto !important;
    }
    
    #left-panel,
    #preview-area,
    #right-panel {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        border: none !important;
        border-radius: var(--radius) !important;
        margin-bottom: 16px !important;
        overflow: visible !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: auto !important;
    }
    
    #left-panel {
        background: var(--panel-bg);
        border: 1px solid var(--border) !important;
        padding-bottom: 10px;
    }
    
    #left-panel .panel-header {
        font-size: 15px;
        padding: 12px 16px;
    }
    
    #left-panel .panel-header .logo-icon {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
    
    #left-panel .scroll-area {
        max-height: 350px !important;
        overflow-y: auto !important;
        padding: 10px !important;
        height: auto !important;
        flex: none !important;
    }
    
    #preview-area {
        background: var(--bg-elevated);
        border: 1px solid var(--border) !important;
        min-width: unset !important;
        flex: none !important;
    }
    
    #preview-toolbar {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 10px 14px !important;
        border-bottom: 1px solid var(--border) !important;
        background: var(--panel-bg-2) !important;
    }
    
    #preview-toolbar .btn {
        font-size: 12px !important;
        padding: 5px 10px !important;
    }
    
    #preview-toolbar .btn.sm {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
    
    #preview-toolbar .page-indicator {
        font-size: 13px !important;
    }
    
    #preview-frame-wrapper {
        padding: 12px !important;
        overflow: auto !important;
        max-height: 500px !important;
        flex: none !important;
        height: auto !important;
    }
    
    #preview-frame {
        max-width: 100% !important;
        border-radius: 6px !important;
        box-shadow: var(--shadow) !important;
        margin: 0 auto !important;
    }
    
    #right-panel {
        background: var(--panel-bg);
        border: 1px solid var(--border) !important;
        margin-bottom: 0 !important;
    }
    
    #right-panel .panel-header {
        font-size: 15px;
        padding: 12px 16px;
    }
    
    #right-panel .scroll-area {
        max-height: 400px !important;
        overflow-y: auto !important;
        padding: 12px !important;
        height: auto !important;
        flex: none !important;
    }
    
    #component-library {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    
    #component-library .comp-btn {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
    
    .prop-grid-2 {
        grid-template-columns: 1fr 1fr !important;
    }
    
    .prop-section-body {
        padding: 6px 10px 12px !important;
    }
    
    .prop-group input,
    .prop-group textarea,
    .prop-group select {
        font-size: 13px !important;
        padding: 8px 10px !important;
    }
    
    .prop-group label {
        font-size: 11px !important;
    }
    
    .btn {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
    
    .btn.sm {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
    
    .btn.xs {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }
    
    #page-list .page-item {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    
    #menu-editor .menu-item-row {
        font-size: 11px !important;
        flex-wrap: wrap !important;
    }
    
    #menu-editor .menu-item-row input[type="text"] {
        font-size: 11px !important;
        padding: 4px 6px !important;
        min-width: 30px !important;
        max-width: 60px !important;
    }
    
    #menu-editor .menu-item-row select {
        font-size: 11px !important;
        padding: 4px 6px !important;
        max-width: 60px !important;
    }
    
    #toast {
        bottom: 16px !important;
        right: 16px !important;
        left: 16px !important;
        font-size: 13px !important;
        padding: 12px 18px !important;
        max-width: calc(100% - 32px) !important;
        text-align: center !important;
    }
    
    .export-options {
        flex-wrap: wrap !important;
    }
    
    .export-options .btn {
        flex: 1 1 auto !important;
        min-width: 80px !important;
    }
    
    .desktop-hint {
        display: none !important;
    }
    .mobile-hint {
        display: inline-block !important;
    }
    
    #preview-frame .comp-label {
        font-size: 10px !important;
        padding: 3px 8px !important;
        top: -22px !important;
    }
    
    .card-grid-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .timeline-left .timeline-item {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .timeline-left .timeline-item .timeline-image {
        flex: none !important;
        width: 100% !important;
    }
    
    .two-column-container {
        flex-direction: column !important;
    }
    
    .two-column-container > div {
        width: 100% !important;
        min-width: unset !important;
    }
    
    .youtube-two-col {
        flex-direction: column !important;
    }
    
    .youtube-two-col > div {
        width: 100% !important;
        min-width: unset !important;
        flex: auto !important;
    }
    
    .product-card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media screen and (max-width: 480px) {
    body {
        padding: 6px !important;
    }
    
    #left-panel .panel-header {
        font-size: 13px !important;
        padding: 8px 12px !important;
    }
    
    #left-panel .panel-header .logo-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 11px !important;
    }
    
    #left-panel .scroll-area {
        max-height: 280px !important;
        padding: 6px !important;
    }
    
    #preview-frame-wrapper {
        max-height: 400px !important;
        padding: 8px !important;
    }
    
    #preview-toolbar {
        padding: 6px 10px !important;
    }
    
    #preview-toolbar .btn {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }
    
    #right-panel .scroll-area {
        max-height: 300px !important;
        padding: 8px !important;
    }
    
    #component-library {
        grid-template-columns: 1fr 1fr !important;
    }
    
    #component-library .comp-btn {
        font-size: 11px !important;
        padding: 6px 8px !important;
    }
    
    .prop-grid-2 {
        grid-template-columns: 1fr !important;
    }
    
    .prop-group input,
    .prop-group textarea,
    .prop-group select {
        font-size: 12px !important;
        padding: 6px 8px !important;
    }
    
    .section-title {
        font-size: 11px !important;
        padding: 10px 4px 4px !important;
    }
    
    .card-grid-container {
        grid-template-columns: 1fr !important;
    }
    
    .product-card-grid {
        grid-template-columns: 1fr !important;
    }
}

@media screen and (orientation: landscape) and (max-width: 900px) {
    #left-panel .scroll-area {
        max-height: 300px !important;
    }
    
    #preview-frame-wrapper {
        max-height: 450px !important;
    }
    
    #right-panel .scroll-area {
        max-height: 350px !important;
    }
    
    #component-library {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
}

.mobile-hint {
    display: none;
}

.mobile-device .mobile-hint {
    display: inline-block !important;
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--accent-soft);
    padding: 4px 12px;
    border-radius: 12px;
    border: 1px solid rgba(124, 143, 255, 0.3);
}