.splash-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,#1e293b 0%,#0f172a 100%);display:flex;justify-content:center;align-items:center;z-index:9999;transition:transform .8s cubic-bezier(.77,0,.175,1) , opacity .6s ease}.splash-screen.hidden{transform:translateY(-100%);opacity:0;pointer-events:none}.splash-content{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.splash-logo{position:relative;width:120px;height:120px;background:rgba(255,255,255,.03);border-radius:35px;display:flex;justify-content:center;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.2);animation:splashPulse 2.5s infinite ease-in-out;overflow:hidden}.splash-img{width:70%;height:70%;object-fit:contain;z-index:2;filter:drop-shadow(0 0 10px rgba(255,255,255,.3))}.splash-shimmer{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 0%,rgba(255,255,255,.05) 50%,transparent 100%);animation:splashShimmer 3s infinite linear;z-index:1}.splash-text{overflow:hidden}.splash-title{color:#fff;font-size:2.2rem;font-weight:800;margin:0;letter-spacing:.05em;opacity:0;transform:translateY(20px);animation:splashSlideIn .8s forwards .3s}.splash-subtitle{color:#94a3b8;font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;margin:5px 0 0 0;opacity:0;transform:translateY(10px);animation:splashSlideIn .8s forwards .5s}.splash-loader{width:180px;height:3px;background:rgba(255,255,255,.1);border-radius:10px;overflow:hidden;margin-top:1rem;opacity:0;animation:fadeIn .5s forwards .7s}.loader-bar{height:100%;width:0%;background:linear-gradient(90deg,#3b82f6,#8b5cf6);box-shadow:0 0 10px rgba(59,130,246,.5);transition:none}@keyframes splashPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 15px 45px rgba(59, 130, 246, 0.2);
    }
}@keyframes splashSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}.sidebar{display:flex;flex-direction:column;gap:1.5rem;justify-content:flex-start}.sidebar-group{margin-bottom:0!important;margin-top:0!important;flex:0 0 auto}.sidebar-section.sidebar-section-gap{margin-top:1rem!important;border-top:1px solid #e2e8f0;padding-top:1.5rem}.sidebar-label{font-size:.75rem;font-weight:800;color:#94a3b8;margin-bottom:.8rem;letter-spacing:.05em;text-transform:uppercase}.btn-sidebar-action{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:1rem;border-radius:12px;font-weight:700;color:#fff!important;border:none;cursor:pointer;transition:all .3s cubic-bezier(.25,.8,.25,1);box-shadow:0 4px 6px rgba(0,0,0,.1);text-align:left}.btn-sidebar-action:hover{transform:translateY(-2px);box-shadow:0 8px 12px rgba(0,0,0,.15);color:#fff!important}.btn-sidebar-action .icon{font-size:1.2rem}.btn-sidebar-action.template-btn{background:linear-gradient(135deg,#f97316 0%,#c2410c 100%);border-left:none!important}.btn-sidebar-action.lab-btn{background:linear-gradient(135deg,#8b5cf6 0%,#4f46e5 100%);border-left:none!important}.btn-deploy-main{background:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%)!important;color:#fff!important;font-weight:700;box-shadow:0 4px 10px rgba(37,99,235,.3);border:none!important}.btn-deploy-main:hover:not(:disabled) {background:linear-gradient(135deg,#2563eb 0%,#1e40af 100%)!important;transform:translateY(-2px);box-shadow:0 6px 14px rgba(37,99,235,.4);color:#fff!important}.btn-check-clean{background:#f1f5f9!important;color:#475569!important;border:1px solid #cbd5e1!important;font-weight:600;box-shadow:0 2px 4px rgba(0,0,0,.05)}.btn-check-clean:hover{background:#e2e8f0!important;color:#1e293b!important;border-color:#94a3b8!important}.deploy-chips-container{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.chip-btn{position:relative;padding:6px 12px;font-size:.8rem;background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0;border-radius:20px;cursor:pointer;transition:all .2s;user-select:none;padding-right:12px}.chip-btn.removable{padding-right:28px}.chip-btn:hover{background:#e2e8f0;color:#334155}.chip-btn.active{background:#eff6ff;color:#2563eb;border-color:#bfdbfe;font-weight:700}.chip-remove{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:14px;color:#94a3b8;opacity:0;transition:opacity .2s}.chip-btn:hover .chip-remove{opacity:1}.chip-remove:hover{background:rgba(0,0,0,.1);color:#ef4444}.chip-add-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px dashed #cbd5e1;color:#64748b;background:transparent;cursor:pointer;transition:all .2s}.chip-add-btn:hover{border-color:#3b82f6;color:#3b82f6;background:#eff6ff}.chip-input-wrapper{display:none;align-items:center;gap:4px}.chip-input-wrapper.active{display:flex}.chip-input-mini{padding:2px 8px;font-size:.8rem;border:1px solid #3b82f6;border-radius:12px;width:100px;outline:none}.deploy-error-area{margin-top:15px;font-size:.8rem;color:#ef4444;background:#fef2f2;border:1px solid #fecaca;padding:10px;border-radius:6px;display:none}.deploy-error-area.active{display:block}.site-status{margin-top:12px;margin-bottom:20px}.btn-sidebar-action.template-btn:hover{background:linear-gradient(135deg,#ea580c 0%,#9a3412 100%)!important;transform:translateY(-2px);box-shadow:0 8px 16px rgba(194,65,12,.4)}.btn-sidebar-action.lab-btn:hover{background:linear-gradient(135deg,#7c3aed 0%,#4338ca 100%)!important;transform:translateY(-2px);box-shadow:0 8px 16px rgba(124,58,237,.4)}.btn-deploy-main:hover:not(:disabled) {background:linear-gradient(135deg,#2563eb 0%,#1e3a8a 100%)!important;transform:translateY(-2px);box-shadow:0 8px 16px rgba(37,99,235,.4)}.sidebar-section{margin-bottom:2rem!important;position:relative}.sidebar-label{font-size:.75rem;font-weight:800;color:#94a3b8;margin-bottom:.8rem;letter-spacing:.05em;text-transform:uppercase}.btn-sidebar-action{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:1rem;border-radius:12px;font-weight:700;color:#fff!important;border:none;cursor:pointer;transition:all .3s cubic-bezier(.25,.8,.25,1);box-shadow:0 4px 6px rgba(0,0,0,.1);text-align:left}.btn-sidebar-action:hover{transform:translateY(-2px);box-shadow:0 8px 12px rgba(0,0,0,.15)}.btn-sidebar-action .icon{font-size:1.2rem}.btn-sidebar-action.template-btn{background:linear-gradient(135deg,#f97316 0%,#c2410c 100%);border-left:none!important}.btn-sidebar-action.lab-btn{background:linear-gradient(135deg,#8b5cf6 0%,#4f46e5 100%);border-left:none!important}.btn-deploy-main{background:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%)!important;color:#fff!important;font-weight:700;box-shadow:0 4px 10px rgba(37,99,235,.3);border:none!important}.btn-deploy-main:hover:not(:disabled) {background:linear-gradient(135deg,#2563eb 0%,#1e40af 100%)!important;transform:translateY(-2px);box-shadow:0 6px 14px rgba(37,99,235,.4)}.btn-check-clean{background:#f1f5f9!important;color:#475569!important;border:1px solid #cbd5e1!important;font-weight:600;box-shadow:0 2px 4px rgba(0,0,0,.05)}.btn-check-clean:hover{background:#e2e8f0!important;color:#1e293b!important;border-color:#94a3b8!important}.deploy-chips-container{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.chip-btn{position:relative;padding:6px 12px;font-size:.8rem;background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0;border-radius:20px;cursor:pointer;transition:all .2s;user-select:none;padding-right:12px}.chip-btn.removable{padding-right:28px}.chip-btn:hover{background:#e2e8f0;color:#334155}.chip-btn.active{background:#eff6ff;color:#2563eb;border-color:#bfdbfe;font-weight:700}.chip-remove{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:14px;color:#94a3b8;opacity:0;transition:opacity .2s}.chip-btn:hover .chip-remove{opacity:1}.chip-remove:hover{background:rgba(0,0,0,.1);color:#ef4444}.chip-add-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px dashed #cbd5e1;color:#64748b;background:transparent;cursor:pointer;transition:all .2s}.chip-add-btn:hover{border-color:#3b82f6;color:#3b82f6;background:#eff6ff}.chip-input-wrapper{display:none;align-items:center;gap:4px}.chip-input-wrapper.active{display:flex}.chip-input-mini{padding:2px 8px;font-size:.8rem;border:1px solid #3b82f6;border-radius:12px;width:100px;outline:none}.deploy-error-area{margin-top:8px;font-size:.8rem;color:#ef4444;background:#fef2f2;border:1px solid #fecaca;padding:8px;border-radius:6px;display:none}.deploy-error-area.active{display:block}.btn-sidebar-action{width:100%;padding:.85rem;border:1px solid var(--border);border-radius:var(--radius-md);background:#fff;font-weight:700;color:var(--primary);cursor:pointer;display:flex;align-items:center;justify-content:flex-start;gap:.75rem;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 2px rgba(0,0,0,.05)}.btn-sidebar-action:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px);box-shadow:0 4px 6px -1px rgba(0,0,0,.05)}.btn-sidebar-action .icon{font-size:1.2rem}.template-btn{border-left:3px solid #f59e0b}.lab-btn{border-left:3px solid #6366f1;background:linear-gradient(to right,#fbfbfe,#fff)}.refined-deploy{display:flex;flex-direction:column;gap:.75rem}.quick-deploy-chips{display:flex;gap:.4rem;flex-wrap:wrap}.chip-btn{flex:1;font-size:.7rem;padding:4px 2px;background:#f1f5f9;border:1px solid var(--border);border-radius:4px;color:var(--text-dim);cursor:pointer;transition:all .2s;text-align:center;white-space:nowrap}.chip-btn:hover{background:#e2e8f0;color:var(--primary)}.chip-btn:active,.chip-btn.active{background:#e0e7ff;color:#4338ca;border-color:#c7d2fe;font-weight:700}.sidebar-input.deploy-input{font-size:.85rem;padding:.6rem;background:#f8fafc}.clean-install-section{margin-bottom:12px}.toggle-switch-wrapper{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,#fff 0%,#f8fafc 100%);border:1.5px solid #e2e8f0;border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.toggle-switch-wrapper::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(59,130,246,.1),transparent);transition:left .6s}.toggle-switch-wrapper:hover{border-color:#cbd5e1;box-shadow:0 4px 12px rgba(15,23,42,.08);transform:translateY(-1px)}.toggle-switch-wrapper:hover::before{left:100%}.toggle-input{display:none}.toggle-slider{position:relative;width:48px;height:26px;background:linear-gradient(135deg,#e2e8f0 0%,#cbd5e1 100%);border-radius:13px;transition:all .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;box-shadow:inset 0 2px 4px rgba(0,0,0,.1)}.toggle-slider::before{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;background:linear-gradient(135deg,#fff 0%,#f8fafc 100%);border-radius:50%;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px rgba(0,0,0,.2)}.toggle-input:checked+.toggle-slider{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);box-shadow:inset 0 2px 4px rgba(0,0,0,.15) , 0 0 0 3px rgba(59,130,246,.1)}.toggle-input:checked+.toggle-slider::before{transform:translateX(22px);background:linear-gradient(135deg,#fff 0%,#e0f2fe 100%)}.toggle-content{display:flex;align-items:center;gap:10px;flex:1}.toggle-icon{font-size:1.3rem;filter:grayscale(.3);transition:all .3s}.toggle-input:checked~.toggle-content .toggle-icon {filter:grayscale(0);transform:scale(1.1)}.toggle-text{display:flex;flex-direction:column;gap:2px}.toggle-title{font-size:.9rem;font-weight:600;color:var(--text-main);line-height:1.2}.toggle-desc{font-size:.75rem;color:var(--text-dim);opacity:.75;line-height:1.2}.toggle-input:checked~.toggle-content .toggle-title {color:var(--primary)}.toggle-input:checked~.toggle-content .toggle-desc {opacity:.9}.detected-path-container{margin-bottom:12px;min-height:28px;display:flex;align-items:center}.detected-path-text{font-size:.72rem;color:var(--text-dim);opacity:.7;background:#f1f5f9;padding:6px 10px;border-radius:6px;border-left:3px solid #cbd5e1;word-break:break-all;line-height:1.4;transition:all .3s;width:100%}.detected-path-text:not(:empty) {opacity:1;border-left-color:#3b82f6;background:linear-gradient(135deg,#eff6ff 0%,#f1f5f9 100%)}.deploy-actions-row{display:flex;gap:.5rem}.btn-check-clean{flex:0 0 auto;width:30%;padding:.7rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-dim);font-weight:600;font-size:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.3rem;transition:all .2s}.btn-check-clean:hover{background:#f8fafc;border-color:#cbd5e1;color:var(--primary)}.btn-deploy-main{flex:1;padding:.7rem;background:var(--primary);border:none;border-radius:var(--radius-sm);color:#fff;font-weight:700;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 4px 6px rgba(15,23,42,.2);transition:all .2s}.btn-deploy-main:hover{background:#1d4ed8;transform:translateY(-1px);box-shadow:0 6px 12px rgba(15,23,42,.25)}.btn-deploy-main:disabled{background:#cbd5e1;cursor:not-allowed;transform:none;box-shadow:none}.nav-btn.admin-hidden{background:transparent;border:none;padding:.4rem;font-size:1.2rem;cursor:default;transition:opacity .3s ease , color .3s}.nav-btn.admin-hidden:hover{opacity:1!important;color:#64748b!important;cursor:pointer;background:#f1f5f9;border-radius:50%}@keyframes splashLoad {
    0% {
        width: 0;
    }

    30% {
        width: 40%;
    }

    60% {
        width: 45%;
    }

    80% {
        width: 90%;
    }

    100% {
        width: 100%;
    }
}@keyframes splashShimmer {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}@keyframes fadeIn {
    to {
        opacity: 1;
    }
}:root{--primary:#0f172a;--primary-light:#1e293b;--accent:#3b82f6;--accent-glow:rgba(59,130,246,.15);--success:#10b981;--bg-app:#f1f5f9;--bg-side:#fff;--border:#e2e8f0;--text-main:#334155;--text-dim:#64748b;--white:#fff;--shadow-sm:0 1px 2px rgba(0,0,0,.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,.1) , 0 2px 4px -2px rgba(0,0,0,.1);--radius-sm:6px;--radius-md:10px;--radius-lg:16px}*{box-sizing:border-box}body{margin:0;font-family:'Inter','Noto Sans JP',sans-serif;background-color:var(--bg-app);color:var(--text-main);height:100vh;overflow:hidden}.premium-app{display:flex;flex-direction:column;height:100vh}.lab-mode-switch{display:flex;gap:8px;background:#e2e8f0;padding:6px;border-radius:10px;margin-right:20px}.mode-btn{background:transparent;border:none;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;color:#64748b;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s}.mode-btn:hover{color:#334155;background:rgba(255,255,255,.5)}.mode-btn.active{background:#fff;color:#2563eb;box-shadow:0 2px 4px rgba(0,0,0,.05)}:root{--preview-primary:#2563eb;--preview-bg:#fff;--preview-text:#1e293b;--preview-surface:#f8fafc}.mock-content{display:flex;flex-direction:column;height:100%;background:var(--preview-bg);color:var(--preview-text);font-family:inherit}.mock-header{background:var(--preview-primary);color:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center}.mock-logo{font-weight:700;opacity:.95}.mock-nav{display:flex;gap:10px;font-size:.8em;opacity:.8}.mock-hero{background:linear-gradient(135deg,var(--preview-surface) 0%,#fff 100%);padding:24px 16px;text-align:center;border-bottom:1px solid #e2e8f0}.mock-hero h1{margin:0 0 10px 0;color:var(--preview-primary)}.mock-hero p{margin-bottom:16px;opacity:.8}.mock-btn{background:var(--preview-primary);color:#fff;border:none;padding:8px 16px;border-radius:99px;font-weight:bold;font-size:.9em;cursor:pointer;display:inline-block}.mock-grid{padding:16px;display:grid;gap:16px;background:var(--preview-surface);flex:1}.mock-card{background:#fff;border-radius:8px;padding:12px;box-shadow:0 2px 4px rgba(0,0,0,.05);border:1px solid #e2e8f0;border-left:4px solid var(--preview-primary)}.mock-device.mobile .mock-grid{grid-template-columns:1fr}.mock-device.tablet .mock-grid{grid-template-columns:1fr 1fr}.mock-device.desktop .mock-grid{grid-template-columns:1fr 1fr 1fr}.hue-slider{-webkit-appearance:none;appearance:none;width:200px;height:8px;border-radius:4px;background:linear-gradient(to right,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#00f 83%,red 100%);outline:none}.hue-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #cbd5e1;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.2);margin-top:-6px}.hue-slider::-webkit-slider-runnable-track{height:8px}.hud-group.wide{flex:2;min-width:250px}.btn-save-color{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 50%,#1d4ed8 100%);color:#fff;border:none;padding:10px 24px;border-radius:8px;font-weight:600;cursor:pointer;box-shadow:0 4px 15px rgba(59,130,246,.3);transition:all .3s ease}.btn-save-color:hover{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 50%,#1e40af 100%);transform:translateY(-2px);box-shadow:0 6px 20px rgba(59,130,246,.4)}.btn-save-color:active{transform:scale(.96);transform:translateY(0)}.lab-scope-mobile,.lab-scope-tablet,.lab-scope-desktop{transition:background-color .3s , color .3s}.top-nav{height:70px;background:var(--white);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;padding:0 2rem;z-index:100}.logo{display:flex;align-items:center;gap:.75rem}.logo-icon{font-size:1.5rem}.logo-text h1{margin:0;font-size:1.1rem;font-weight:800;color:var(--primary);line-height:1}.logo-text span{font-size:.75rem;color:var(--text-dim);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.search-wrapper{width:450px}#previewText{width:100%;padding:.75rem 1.25rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:#f8fafc;font-size:.95rem;transition:all .2s}#previewText:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--accent-glow)}.nav-right{display:flex;gap:1rem;align-items:center}.divider-vertical{width:1px;height:24px;background:#e2e8f0;margin:0 4px}.template-change-btn{background:#fff;color:#64748b;border:1px solid #e2e8f0}.template-change-btn:hover{background:#f8fafc;color:#334155;border-color:#cbd5e1}.nav-btn{padding:.6rem 1.2rem;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;cursor:pointer;border:1px solid var(--border);background:var(--white);transition:all .2s cubic-bezier(.4,0,.2,1)}.nav-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px);box-shadow:0 4px 6px -1px rgba(0,0,0,.05)}.nav-btn:active{transform:translateY(0);box-shadow:none}.nav-btn.preview-launch{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;padding-left:1.2rem;padding-right:1.2rem;box-shadow:0 4px 12px rgba(99,102,241,.3);display:flex;align-items:center;gap:.5rem}.nav-btn.preview-launch:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(99,102,241,.4);background:linear-gradient(135deg,#5b5ee0,#7c4df0)}.nav-btn.preview-launch .shortcut{display:none}.shortcut{font-size:.7rem;opacity:.6;padding:1px 4px;border:1px solid rgba(255,255,255,.3);border-radius:3px}.app-body{flex:1;display:flex;overflow:hidden}.app-sidebar{width:320px;background:var(--bg-side);border-right:1px solid var(--border);padding:1.25rem;display:flex;flex-direction:column;gap:.75rem;overflow-y:auto}.sidebar-group{margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:none}.sidebar-group:last-child{border-bottom:none}.sidebar-group h3{font-size:.65rem;text-transform:uppercase;color:var(--text-dim);letter-spacing:.1em;margin-bottom:.4rem;font-weight:800}.sidebar-project-meta{margin-bottom:.35rem;display:flex;gap:.35rem}.input-row{flex:1;display:flex;flex-direction:column;gap:.2rem}.input-row label{font-size:.65rem;font-weight:700;color:var(--text-dim);text-transform:uppercase}.sidebar-input{width:100%;padding:.45rem .6rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.8rem;color:var(--primary);transition:all .2s}.sidebar-input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.05)}.path-display-area{margin-top:.35rem;display:flex;flex-direction:column;gap:.35rem}.path-card{background:#f8fafc;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.4rem .6rem}.path-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}.path-card-head label{font-size:.65rem;font-weight:800;color:var(--text-dim);text-transform:uppercase}.mini-copy-btn{background:var(--primary);color:#fff;border:none;border-radius:4px;font-size:.6rem;padding:2px 6px;cursor:pointer;font-weight:700;transition:all .2s}.mini-copy-btn:hover{background:var(--primary-light);transform:scale(1.05)}.mini-copy-btn:active{transform:scale(.95)}.path-card code{display:block;font-size:.7rem;line-height:1.4;color:var(--primary);word-break:break-all;font-family:'JetBrains Mono','Consolas',monospace}.db-update-box{display:flex;flex-direction:column;gap:.8rem}.btn-db-update{width:100%;padding:.8rem;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);font-weight:700;color:var(--primary);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .2s}.btn-db-update:hover{background:#f1f5f9;border-color:var(--accent)}.selected-summary{display:flex;flex-direction:column;gap:.25rem;padding:.25rem 0}.sel-item{display:flex;align-items:center;gap:.4rem;font-size:.75rem;line-height:1.2}.dot{width:8px;height:8px;border-radius:50%}.dot.heading{background:var(--accent)}.dot.body{background:var(--success)}.sel-item span:last-child{font-weight:700;color:var(--primary)}.btn-save{width:100%;padding:1rem;background:var(--success);color:#fff;border:none;border-radius:var(--radius-md);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.75rem;box-shadow:0 4px 6px rgba(16,185,129,.2);transition:all .2s}.btn-save:hover{filter:brightness(1.1);transform:translateY(-1px)}.drop-stack{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.5rem}.premium-drop{display:flex;align-items:center;gap:.75rem;padding:.6rem .8rem;border:1.5px dashed var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;background:#fff}.premium-drop:hover{border-color:var(--accent);background:#f8fafc}.premium-drop.loaded{border-style:solid;border-color:var(--success);background:#f0fdf4}.premium-drop.drag-active{border-color:var(--accent);border-style:solid;background:#eff6ff;transform:scale(1.02);box-shadow:0 0 0 4px var(--accent-glow)}.premium-drop.error{border-color:#ef4444;background:#fef2f2;animation:shake .3s ease-in-out}@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}.drop-icon{font-size:1.1rem}.drop-info strong{display:block;font-size:.8rem;color:var(--primary)}.drop-info span{font-size:.65rem;color:var(--text-dim)}.workspace{flex:1;display:flex;flex-direction:column;padding:1.5rem 2rem;overflow:hidden}.workspace-header{margin-bottom:1.5rem}.category-pills{display:flex;gap:.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border);flex-wrap:wrap}.pill-btn{background:#f1f5f9;border:1px solid transparent;padding:.5rem 1rem;border-radius:99px;font-size:.85rem;font-weight:600;color:var(--text-dim);cursor:pointer;transition:all .2s}.pill-btn:hover{background:#e2e8f0;color:var(--primary)}.pill-btn.active{background:var(--accent);color:#fff;box-shadow:0 4px 6px rgba(59,130,246,.3);border-color:var(--accent)}.grid-scroll{flex:1;overflow-y:auto;padding:.5rem .8rem 0 0}.font-premium-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;padding:10px 0 2rem 0}.font-premium-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem;transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-sm);cursor:pointer;position:relative}.active-card{border:2px solid var(--accent)!important;background:#f0fdf9!important;box-shadow:0 6px 16px rgba(16,185,129,.25)!important}.card-selected-badge{position:absolute;bottom:1rem;right:1rem;background:#ecfdf5;color:#059669;font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:99px;display:inline-flex;align-items:center;gap:4px;box-shadow:0 2px 6px rgba(5,150,105,.1);z-index:2}.card-selected-badge::before{content:'✓';font-weight:900}.font-premium-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-md)}.card-meta{display:flex;justify-content:space-between;align-items:center}.card-name{font-size:.8rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}.no-preview-font{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"!important}.card-footer{display:flex;flex-direction:column;gap:.5rem}.card-kanji-row{display:flex;align-items:center;gap:.3rem;cursor:help}.kanji-label{font-size:.65rem;color:var(--text-dim);font-weight:600}.kanji-stars{font-size:.65rem;color:#f59e0b;letter-spacing:-1px}.card-main-preview{font-size:1.1rem;line-height:1.4;color:var(--primary);min-height:45px;display:flex;align-items:center;word-break:break-all;padding:.4rem 0}.card-btns{display:flex;gap:.5rem}.btn-assign{flex:1;padding:.6rem;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:transparent;font-size:.85rem;font-weight:700;color:var(--text-dim);cursor:pointer;transition:all .2s}.btn-assign:hover{border-color:var(--text-dim);color:var(--primary)}.btn-assign[data-type="heading"].active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 6px rgba(59,130,246,.3)}.btn-assign[data-type="body"].active{background:var(--success);color:#fff;border-color:var(--success);box-shadow:0 4px 6px rgba(16,185,129,.3)}.confirm-modal{max-width:420px}.confirm-text{text-align:center;font-size:1rem;line-height:1.8;color:var(--text-main);margin-bottom:1.5rem}.confirm-btns{display:flex;gap:1rem;justify-content:center;margin-top:1.5rem}.btn-cancel{padding:.75rem 1.5rem;background:#f1f5f9;border:1px solid var(--border);border-radius:var(--radius-sm);font-weight:600;color:var(--text-dim);cursor:pointer;transition:all .2s}.btn-cancel:hover{background:#e2e8f0}.btn-confirm{padding:.75rem 1.5rem;background:var(--accent);border:none;border-radius:var(--radius-sm);font-weight:700;color:#fff;cursor:pointer;transition:all .2s}.btn-confirm:hover{filter:brightness(1.1)}.result-modal{max-width:500px}.result-content{background:#f8fafc;border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem 1.5rem;font-size:.9rem;line-height:1.8;color:var(--text-main);margin-bottom:1.5rem;word-break:break-all}.modal-hr{border:none;border-top:1px solid var(--border);margin:1.5rem 0}.kanji-legend h3{font-size:.9rem;color:var(--primary);margin-bottom:.75rem}.kanji-legend ul{list-style:none;padding:0;margin:0;font-size:.8rem;color:var(--text-dim)}.kanji-legend li{margin-bottom:.4rem;font-feature-settings:"tnum"}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(15,23,42,.5);backdrop-filter:blur(8px);display:none;justify-content:center;align-items:center;z-index:1000}#resultModal,#dbConfirmModal,#helpModal,#labCloseConfirmModal,#themeAnalysisModal{z-index:2000}.lab-container{width:100%;height:100%;background:#fff;display:flex;flex-direction:column;overflow:hidden;position:relative}.import-list{max-height:400px;overflow-y:auto;border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc}.import-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #e2e8f0;background:#fff;transition:background .2s}.import-item:last-child{border-bottom:none}.import-item:hover{background:#f1f5f9}.import-meta{display:flex;flex-direction:column;gap:4px}.import-key{font-weight:600;color:#1e293b;font-size:.95rem}.import-font-val{font-size:.85rem;color:#64748b}.import-actions{position:relative}.import-select{appearance:none;-webkit-appearance:none;background-color:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:8px 32px 8px 12px;font-size:.9rem;color:#334155;cursor:pointer;font-family:inherit;font-weight:500;transition:all .2s ease;box-shadow:0 1px 2px rgba(0,0,0,.05);background-image:url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ fill=\'none\'\ viewBox=\'0\ 0\ 24\ 24\'\ stroke=\'%2364748b\'%3E%3Cpath\ stroke-linecap=\'round\'\ stroke-linejoin=\'round\'\ stroke-width=\'2\'\ d=\'M19\ 9l-7\ 7-7-7\'%3E%3C/path%3E%3C/svg%3E);background-repeat:no-repeat;background-position:right 8px center;background-size:16px}.import-select:hover{border-color:#94a3b8;box-shadow:0 2px 4px rgba(0,0,0,.05)}.import-select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15)}.import-item.unclassified{background:#fffbeb}.import-item.unclassified:hover{background:#fef3c7}.badge-warn{display:inline-flex;align-items:center;font-size:.75rem;background:#fef3c7;color:#d97706;padding:2px 8px;border-radius:99px;margin-left:8px;font-weight:600;border:1px solid #fcd34d}.lab-toolbar{padding:.7rem 2rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--white);z-index:100}.lab-workspace{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#e5eaf0}.badge{margin-left:.75rem;font-size:.7rem;background:#eff6ff;color:var(--accent);padding:2px 8px;border-radius:4px;font-weight:700}.lab-tabs{display:flex;align-items:center;gap:8px}.tab-group{background:#f1f5f9;padding:4px;border-radius:8px;display:flex}.tab-group button{border:none;padding:.4rem 1.2rem;font-size:.85rem;font-weight:600;color:var(--text-dim);border-radius:6px;cursor:pointer;transition:all .2s}.tab-group button.active{background:#fff;color:var(--accent);box-shadow:var(--shadow-sm)}.tab-divider{width:1px;height:24px;background:var(--border)}.lab-close{background:#f8fafc;border:1px solid var(--border);padding:.5rem 1.2rem;border-radius:6px;cursor:pointer;font-weight:600}.lab-workspace{flex:1;display:flex;overflow:hidden;background:#f1f5f9}.lab-footer-hud{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.5);box-shadow:0 10px 40px -10px rgba(0,0,0,.15) , 0 0 0 1px rgba(0,0,0,.05);border-radius:99px;padding:.6rem 1.5rem;z-index:1000;width:auto;max-width:95%;white-space:nowrap}.hud-input{width:60px;background:transparent;border:none;border-bottom:1px solid var(--border);font-size:.9rem;font-weight:700;font-family:inherit;color:var(--primary);text-align:right;padding:0 4px;outline:none;transition:border-color .2s}.hud-input:focus{border-bottom-color:var(--primary)}.hud-inner{display:flex;align-items:center;gap:1.5rem}.hud-group{display:flex;flex-direction:column;gap:.5rem;min-width:140px}.hud-group label{font-size:.75rem;font-weight:700;color:var(--text-dim);display:flex;justify-content:space-between}.hud-divider{width:1px;height:30px;background:var(--border)}.lab-viewport{flex:1;overflow:hidden;padding:2rem 2rem 100px;background:#e5eaf0;display:flex;align-items:center;justify-content:center;position:relative;width:100%}.device-showcase{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;justify-content:center;gap:2rem;padding:0;width:auto;transform-origin:center center;transition:transform .1s ease-out}.device-wrapper{display:flex;flex-direction:column;align-items:center;gap:1.5rem;flex-shrink:0;transition:all .3s ease}.lab-viewport.view-mode-mobile .device-wrapper:not(:nth-child(1)) {display:none}.lab-viewport.view-mode-mobile .mock-device.mobile{transform:scale(1.0);margin:0}.lab-viewport.view-mode-mobile .device-showcase{justify-content:center;padding:2rem}.lab-viewport.view-mode-tablet .device-wrapper:not(:nth-child(2)) {display:none}.lab-viewport.view-mode-tablet .mock-device.tablet{transform:scale(.85);margin:0 -58px -154px}.lab-viewport.view-mode-tablet .device-showcase{justify-content:center}.lab-viewport.view-mode-desktop .device-wrapper:not(:nth-child(3)) {display:none}.lab-viewport.view-mode-desktop .mock-device.desktop{transform:scale(.9);margin:0 -60px -80px}.lab-viewport.view-mode-desktop .device-showcase{justify-content:center}.device-label{font-size:.75rem;font-weight:800;color:var(--text-dim);text-transform:uppercase;letter-spacing:.15em;background:#fff;padding:4px 14px;border-radius:99px;box-shadow:0 2px 8px rgba(0,0,0,.05)}#themeAnalysisModal .modern-modal{background:rgba(255,255,255,.95);padding:3.5rem;border-radius:24px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);text-align:center;max-width:580px;width:95%;transform:translateY(20px);transition:all .4s cubic-bezier(.16,1,.3,1);opacity:0;position:relative;overflow:hidden}.premium-visual-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;display:flex;align-items:center;justify-content:center}.premium-orb{width:200px;height:200px;border-radius:50%;filter:blur(80px) saturate(200%);opacity:.5;animation:orb-breathe 6s ease-in-out infinite alternate}@keyframes orb-breathe {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.4) rotate(180deg);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.1) rotate(360deg);
        opacity: 0.4;
    }
}.mock-device{background:#fff;border:8px solid #334155;box-sizing:content-box;border-radius:20px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);position:relative;overflow:hidden;transform-origin:top center;transition:all .4s cubic-bezier(.4,0,.2,1)}.mock-device::before{content:'';display:block;height:24px;background:#334155;border-bottom:1px solid #1e293b;width:100%}.screen{background:#fff;width:100%;height:calc(100% - 24px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}.screen.has-live-iframe{overflow:hidden}.screen.has-live-iframe .live-preview-iframe{display:block;width:100%;height:100%}.mock-device.mobile{width:375px;height:667px;transform:scale(.7);margin:0 -56px -200px}.mock-device.tablet{width:768px;height:1024px;transform:scale(.45);margin:0 -211px -563px}.mock-device.desktop{width:1440px;height:900px;transform:scale(.5);margin:0 -360px -450px}.device-showcase{display:flex;justify-content:center;align-items:flex-end;gap:1.5rem;padding:2rem;transform-origin:top center;transition:all .4s cubic-bezier(.4,0,.2,1)}.device-wrapper{display:flex;flex-direction:column;align-items:center;opacity:1;transform:scale(1) translateX(0);transition:width .6s cubic-bezier(.34,1.56,.64,1) , opacity .5s ease , transform .6s cubic-bezier(.34,1.56,.64,1) , margin .6s ease , padding .6s ease}.lab-viewport.view-mode-mobile .device-wrapper:not(:has(.mobile)),
.lab-viewport.view-mode-tablet .device-wrapper:not(:has(.tablet)),
.lab-viewport.view-mode-desktop .device-wrapper:not(:has(.desktop)) {position:absolute;opacity:0;transform:scale(.8) translateY(30px);pointer-events:none;z-index:0}.lab-viewport.view-mode-mobile .device-wrapper:has(.mobile),
.lab-viewport.view-mode-tablet .device-wrapper:has(.tablet),
.lab-viewport.view-mode-desktop .device-wrapper:has(.desktop) {position:relative;z-index:10;animation:deviceEnter .5s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes deviceEnter {
    0% {
        opacity: 0;
        transform: scale(0.85) translateY(40px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}@keyframes devicePulse {

    0%,
    100% {
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }

    50% {
        box-shadow: 0 35px 60px -15px rgba(59, 130, 246, 0.3);
    }
}.lab-viewport.view-mode-mobile .mock-device.mobile,.lab-viewport.view-mode-tablet .mock-device.tablet,.lab-viewport.view-mode-desktop .mock-device.desktop{animation:devicePulse 1.5s ease-in-out .3s}.lab-viewport.view-mode-mobile .device-wrapper:has(.mobile),
.lab-viewport.view-mode-tablet .device-wrapper:has(.tablet),
.lab-viewport.view-mode-desktop .device-wrapper:has(.desktop) {justify-content:center;align-items:center;padding:0;width:100%;height:100%}.lab-viewport.view-mode-mobile .mock-device.mobile{margin:0;transform:scale(.80);transform-origin:center center}.lab-viewport.view-mode-tablet .mock-device.tablet{margin:0;transform:scale(.45);transform-origin:center center}.lab-viewport.view-mode-desktop .mock-device.desktop{margin:0;transform:scale(.55);transform-origin:center center}.lab-viewport.view-mode-mobile .device-label,.lab-viewport.view-mode-tablet .device-label,.lab-viewport.view-mode-desktop .device-label{display:none}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.modern-modal{background:#fff;width:500px;padding:2rem;border-radius:var(--radius-lg)}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.close-icon{border:none;background:none;font-size:1.5rem;cursor:pointer;color:var(--text-dim);transition:all .2s;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%}.close-icon:hover{color:var(--primary);background:#f1f5f9;transform:rotate(90deg)}.close-icon:active{transform:rotate(90deg) scale(.9)}.guide-step{display:flex;align-items:center;gap:1.5rem;margin-bottom:1.5rem}.step-num{width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex-shrink:0}.guide-step p{margin:0;font-size:.95rem;line-height:1.5}.toast-notification{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(30,41,59,.9);backdrop-filter:blur(4px);color:#fff;padding:.8rem 1.5rem;border-radius:99px;font-size:.9rem;font-weight:600;opacity:0;transition:all .3s cubic-bezier(.16,1,.3,1);z-index:10000;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.15)}.toast-notification.active{opacity:1;transform:translateX(-50%) translateY(0)}.import-modal-content{background:#fff;border-radius:16px;padding:30px;width:650px;max-width:90vw;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:20px;max-height:85vh}.import-header{border-bottom:1px solid #e2e8f0;padding-bottom:15px}.import-header h2{font-size:1.4rem;font-weight:800;color:var(--primary);margin:0 0 5px 0;display:flex;align-items:center;gap:10px}.import-list{display:flex;flex-direction:column;gap:10px;overflow-y:auto;padding-right:10px;max-height:400px}.import-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;transition:all .2s}.import-item:hover{border-color:var(--accent);background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.05)}.import-item.unclassified{border-left:4px solid #f59e0b;background:#fffbeb}.import-meta{display:flex;flex-direction:column;gap:4px}.import-key{font-size:.85rem;font-weight:700;color:var(--primary);font-family:'JetBrains Mono',monospace}.import-font-val{font-size:.75rem;color:var(--text-dim)}.import-actions{position:relative}.import-select{appearance:none;-webkit-appearance:none;background-color:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:8px 32px 8px 12px;font-size:.9rem;color:#334155;cursor:pointer;font-family:inherit;font-weight:500;transition:all .2s ease;box-shadow:0 1px 2px rgba(0,0,0,.05);background-image:url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ fill=\'none\'\ viewBox=\'0\ 0\ 24\ 24\'\ stroke=\'%2364748b\'%3E%3Cpath\ stroke-linecap=\'round\'\ stroke-linejoin=\'round\'\ stroke-width=\'2\'\ d=\'M19\ 9l-7\ 7-7-7\'%3E%3C/path%3E%3C/svg%3E);background-repeat:no-repeat;background-position:right 8px center;background-size:16px;min-width:140px}.import-select:hover{border-color:#94a3b8;box-shadow:0 2px 4px rgba(0,0,0,.05)}.import-select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15)}.badge-warn{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;color:#b45309;font-weight:700;background:#fef3c7;padding:2px 8px;border-radius:99px}.import-footer{display:flex;justify-content:flex-end;gap:12px;padding-top:15px;border-top:1px solid #e2e8f0}.btn-save,.btn-generate{background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#fff;width:100%;border:none;padding:.8rem;border-radius:8px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .3s ease;box-shadow:0 4px 15px rgba(16,185,129,.3)}.btn-save:hover,.btn-generate:hover{background:linear-gradient(135deg,#059669 0%,#047857 100%);transform:translateY(-2px);box-shadow:0 6px 20px rgba(16,185,129,.4)}.btn-save-color{white-space:nowrap!important;min-width:100px;padding:.6rem 1.5rem!important}.btn-db-update,.btn-confirm,.glow-btn{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 50%,#1d4ed8 100%)!important;color:#fff!important;border:none!important;box-shadow:0 4px 15px rgba(59,130,246,.3)!important;transition:all .3s ease!important}.btn-db-update:hover,.btn-confirm:hover,.glow-btn:hover{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 50%,#1e40af 100%)!important;transform:translateY(-2px);box-shadow:0 6px 20px rgba(59,130,246,.4)!important}.btn-action,.action-btn,.hud-control button{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 50%,#1d4ed8 100%);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px rgba(59,130,246,.3)}.lab-close,.btn-cancel,.tab-btn,.adj-device-btn,.mode-btn{transition:all .2s cubic-bezier(.4,0,.2,1)!important}.lab-close:hover,.btn-cancel:hover,.tab-btn:hover,.adj-device-btn:hover,.mode-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}.lab-close:active,.btn-cancel:active,.tab-btn:active,.adj-device-btn:active,.mode-btn:active{transform:translateY(0) scale(.98)}.lab-close,.btn-cancel{background:var(--white);border:1px solid var(--border);padding:.6rem 1.2rem;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;color:var(--text-main);cursor:pointer}#btnUndo,#btnRedo{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e2e8f0;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:all .2s cubic-bezier(.4,0,.2,1)}#btnUndo:hover:not(:disabled),
#btnRedo:hover:not(:disabled) {background:#f8fafc;border-color:var(--accent);color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}#btnUndo:disabled,#btnRedo:disabled{opacity:.3;cursor:not-allowed;filter:grayscale(1)}#btnUndo .icon,#btnRedo .icon{line-height:1}.lab-close:hover,.btn-cancel:hover{background:#f8fafc;border-color:#cbd5e1;color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 6px -1px rgba(0,0,0,.05)}.toast-notification{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(30,41,59,.95);color:#fff;padding:12px 24px;border-radius:8px;font-size:.95rem;font-weight:500;box-shadow:0 10px 25px -5px rgba(0,0,0,.3);opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:2000;pointer-events:none;display:flex;align-items:center;gap:8px;backdrop-filter:blur(4px)}.toast-notification.active{opacity:1;transform:translateX(-50%) translateY(0)}.toast-notification .icon{font-size:1.2rem}.mini-copy-btn{background:transparent;border:1px solid #cbd5e1;color:#64748b;padding:4px 10px;border-radius:6px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .1s ease;filter:none;box-shadow:none;outline:none}.mini-copy-btn:hover{background:#f1f5f9;color:#3b82f6;border-color:#3b82f6;box-shadow:none;transform:none}.mini-copy-btn:active{background:#e2e8f0}@media screen and (max-height: 800px) or (max-width: 1400px) {
    .lab-footer-hud {
        bottom: 1rem;
        padding: 0.4rem 1rem;
        transform: translateX(-50%) scale(0.9);
    }

    .hud-inner {
        gap: 0.8rem;
    }

    .hud-group {
        min-width: 110px;
    }

    .hud-group label {
        font-size: 0.65rem;
    }

    .hud-input {
        width: 45px;
        font-size: 0.8rem;
    }

    .lab-viewport.view-mode-desktop .mock-device.desktop {
        transform: scale(0.65);
    }

    .lab-viewport.view-mode-tablet .mock-device.tablet {
        transform: scale(0.5);
    }

    .lab-viewport.view-mode-mobile .mock-device.mobile {
        transform: scale(0.85);
    }

    .lab-viewport:not([class*="view-mode-"]) .mock-device.mobile {
        transform: scale(0.5);
        margin: 0 -80px -250px;
    }

    .lab-viewport:not([class*="view-mode-"]) .mock-device.tablet {
        transform: scale(0.35);
        margin: 0 -250px -500px;
    }

    .lab-viewport:not([class*="view-mode-"]) .mock-device.desktop {
        transform: scale(0.45);
        margin: 0 -300px -350px;
    }
}@media screen and (max-width:1200px){.lab-footer-hud{scale:.8;max-width:98%}.hud-divider{display:none}.hud-group{min-width:90px}}.live-preview-box{display:flex;flex-direction:column;gap:.8rem}.btn-fetch-site{width:100%;padding:.8rem;background:linear-gradient(135deg,#0ea5e9 0%,#0284c7 100%);border:none;border-radius:var(--radius-md);font-weight:700;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .2s;box-shadow:0 4px 6px rgba(14,165,233,.2)}.btn-fetch-site:hover{transform:translateY(-1px);box-shadow:0 6px 12px rgba(14,165,233,.3)}.btn-fetch-site:active{transform:translateY(0)}.btn-fetch-site:disabled{opacity:.6;cursor:not-allowed;transform:none}.site-status{font-size:.75rem;color:var(--text-dim);padding:.5rem;border-radius:var(--radius-sm);background:#f8fafc;display:none}.site-status.visible{display:block}.site-status.success{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}.site-status.error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}.lab-source-switch{display:flex;gap:6px;background:#1e293b;padding:4px;border-radius:8px;margin-right:20px}.source-btn{background:transparent;border:none;padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;color:#94a3b8;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s}.source-btn:hover{color:#e2e8f0;background:rgba(255,255,255,.1)}.source-btn.active{background:#3b82f6;color:#fff;box-shadow:0 2px 8px rgba(59,130,246,.3)}.source-btn.active[data-source="live"]{background:linear-gradient(135deg,#10b981 0%,#059669 100%);box-shadow:0 2px 8px rgba(16,185,129,.3)}.source-btn .icon{font-size:14px}.live-preview-container{width:100%;height:100%;overflow:auto;background:#fff;border-radius:8px}.live-preview-container.hidden{display:none}.live-preview-iframe{width:100%;height:100%;min-height:500px;border:none}.mock-device .screen{height:calc(100% - 24px);min-height:inherit}.gvm-highlight{outline:3px solid #3b82f6!important;outline-offset:2px!important;cursor:pointer!important}.gvm-selected{outline:3px solid #10b981!important;outline-offset:2px!important;background-color:rgba(16,185,129,.1)!important}.hud-target-row{display:flex;align-items:center;justify-content:center;min-width:90px}.target-label{display:none}.target-badge{font-size:.8rem;font-weight:800;padding:4px 12px;border-radius:99px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.9);transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid rgba(255,255,255,.1)}.target-badge.active{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(37,99,235,.4)}.deploy-box{display:flex;flex-direction:column;gap:.75rem;margin-top:.5rem}.input-with-action{display:flex;gap:.5rem}.btn-check{padding:0 .75rem;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.btn-check:hover{background:var(--accent)}.btn-check:disabled{opacity:.5;cursor:not-allowed}.path-info-box{background:#f1f5f9;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem;animation:slideDown .3s ease-out}.path-info-box label{display:block;font-size:.6rem;font-weight:800;color:var(--text-dim);text-transform:uppercase;margin-bottom:3px}.path-info-box code{font-size:.7rem;word-break:break-all;color:var(--primary)}.checkbox-label{display:flex;align-items:center;gap:8px;font-size:.8rem;cursor:pointer;color:var(--text-main)}.btn-deploy{width:100%;padding:.9rem;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:none;border-radius:var(--radius-md);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.6rem;box-shadow:0 4px 12px rgba(217,119,6,.2);transition:all .3s cubic-bezier(.4,0,.2,1)}.btn-deploy:hover:not(:disabled) {transform:translateY(-2px);box-shadow:0 6px 16px rgba(217,119,6,.3);filter:brightness(1.05)}.btn-deploy:disabled{background:#cbd5e1;color:#94a3b8;cursor:not-allowed;box-shadow:none}@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}.lab-btn.disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.2)}.premium-progress-area{width:100%;margin-top:0;padding:20px;background:rgba(255,255,255,.05);border-radius:12px;border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:15px;animation:slideDown .4s cubic-bezier(.16,1,.3,1);box-shadow:inset 0 0 20px rgba(0,0,0,.1);position:relative}.progress-status-row{display:flex;justify-content:space-between;align-items:center;color:#e2e8f0;font-size:.85rem;font-weight:600}.step-text{color:#94a3b8;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}.percent-text{font-family:'Inter',sans-serif;font-weight:800;color:#3b82f6}.premium-progress-track{width:100%;height:12px;background:rgba(0,0,0,.4);border-radius:99px;overflow:hidden;position:relative;box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}.premium-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#3b82f6 0%,#8b5cf6 50%,#ec4899 100%);border-radius:99px;transition:width .4s cubic-bezier(.2,.8,.2,1);position:relative;box-shadow:0 0 10px rgba(59,130,246,.5)}.bar-shimmer{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg) translateX(-150%);animation:progressShimmer 1.5s infinite}.progress-message{text-align:center;font-size:.9rem;color:#64748b;min-height:1.4em;font-weight:500;text-shadow:none}@keyframes progressShimmer {
    0% {
        transform: skewX(-20deg) translateX(-150%);
    }

    100% {
        transform: skewX(-20deg) translateX(150%);
    }
}.premium-progress-area{display:none;flex-direction:column;gap:1rem;padding:1.5rem;background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);border-radius:12px;margin-top:1rem}.progress-status-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.step-text{font-size:.9rem;font-weight:600;color:#334155}.percent-text{font-size:.9rem;font-weight:700;color:#3b82f6}.premium-progress-track{width:100%;height:8px;background:#e2e8f0;border-radius:10px;overflow:hidden;position:relative}.premium-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#3b82f6,#8b5cf6);border-radius:10px;transition:width .3s ease;position:relative;box-shadow:0 0 10px rgba(59,130,246,.5)}.bar-shimmer{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:progressShimmer 1.5s infinite}.text-edit-mode .text-editable{outline:2px dashed #10b981;cursor:text!important;transition:all .2s ease;border-radius:4px}.text-edit-mode .text-editable:hover{outline:2px solid #10b981;background:rgba(16,185,129,.05)}.text-editing{outline:2px solid #10b981!important;background:rgba(16,185,129,.1)!important;min-width:10px;caret-color:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.1);z-index:100;position:relative}.text-modified{position:relative}.text-action-btn{display:flex;align-items:center;gap:8px;padding:.6rem 1.2rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid #e2e8f0;background:#fff;color:#475569;box-shadow:0 1px 2px rgba(0,0,0,.05)}.text-action-btn .icon{font-size:1.1rem}.text-action-btn:hover:not(:disabled) {background:#f8fafc;color:#1e293b;border-color:#cbd5e1;transform:translateY(-1px);box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.text-action-btn:disabled{opacity:.5;cursor:not-allowed;background:#f1f5f9;box-shadow:none;transform:none}.text-status-badge{background:#f0fdf4;padding:4px 12px;border-radius:20px;font-size:.8rem;color:#15803d;border:1px solid #bbf7d0;font-weight:700;letter-spacing:.02em}.tab-group,.adj-device-btn{transition:opacity .3s ease , transform .3s ease , visibility .3s}.layout-preserved-hidden{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:scale(.95)}.template-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:#f8fafc;z-index:9000;display:flex;flex-direction:column;transition:transform .5s ease , opacity .5s ease}.template-screen.hidden{transform:translateY(-20px);opacity:0;pointer-events:none}.template-header{background:#fff;padding:1.5rem 2rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-sm);flex-shrink:0}.template-title h2{margin:0;font-size:1.5rem;color:var(--primary)}.template-title p{margin:.2rem 0 0 0;font-size:.9rem;color:var(--text-dim)}.template-controls{display:flex;gap:1rem}.template-grid-scroll{flex:1;overflow-y:auto;padding:2rem;background:#f1f5f9}.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem;max-width:1400px;margin:0 auto}.demo-wrapper{background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);transition:all .3s ease;cursor:pointer;position:relative;border:1px solid transparent}.demo-wrapper:hover{transform:translateY(-5px);box-shadow:0 10px 20px rgba(0,0,0,.1);border-color:var(--accent)}.demo-thumbnail-wrapper{height:240px;overflow:hidden;position:relative;background:#e2e8f0}.demo-thumbnail-wrapper img{width:100%;height:auto;display:block;transition:transform 1.5s ease-in-out}.demo-wrapper:hover .demo-thumbnail-wrapper img{transform: translateY(calc(-100% + 240px))}.demo-info{padding:1rem;border-top:1px solid #f1f5f9}.demo-name{font-weight:700;font-size:1rem;color:var(--primary);margin:0 0 .2rem 0}.demo-tags{display:flex;gap:.3rem;flex-wrap:wrap}.demo-tag{font-size:.7rem;color:#64748b;background:#f1f5f9;padding:2px 6px;border-radius:4px}.demo-preview-btn{position:absolute;top:10px;right:10px;width:36px;height:36px;background:rgba(255,255,255,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.15);opacity:0;transition:opacity .2s , transform .2s;z-index:10;color:var(--accent);text-decoration:none}.demo-wrapper:hover .demo-preview-btn{opacity:1}.demo-preview-btn:hover{transform:scale(1.1);background:#fff}.demo-wrapper.custom-card{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;border:2px dashed #cbd5e1;color:#64748b;min-height:300px}.demo-wrapper.custom-card:hover{border-color:var(--accent);color:var(--accent);background:#f8fafc}.custom-icon{font-size:3rem;margin-bottom:1rem}.large-input{font-size:1rem;padding:.8rem}