.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:999999;padding:20px}
    .modal-backdrop.show{display:flex}
    .modal{width:min(1100px,96vw);height:min(760px,92vh);background:#0f172a;color:var(--text);border:1px solid #334155;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(0,0,0,.5)}
    .modal.small{width:min(760px,96vw);height:min(620px,92vh)}
    #previewModalBackdrop.device-mobile .modal{width:min(430px,96vw);height:min(860px,92vh)}
    #previewModalBackdrop.device-tablet .modal{width:min(820px,96vw);height:min(900px,92vh)}
    #previewModalBackdrop.device-mobile .modal-body,
    #previewModalBackdrop.device-tablet .modal-body{align-items:center;background:#020617;padding:12px}
    #previewModalBackdrop.device-mobile .preview-frame{width:390px;max-width:100%;height:100%;border-radius:18px;box-shadow:0 0 0 1px rgba(148,163,184,.24);overflow:hidden}
    #previewModalBackdrop.device-tablet .preview-frame{width:768px;max-width:100%;height:100%;border-radius:14px;box-shadow:0 0 0 1px rgba(148,163,184,.24);overflow:hidden}
    .modal-header{height:52px;min-height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid #334155;background:#111827}
    .modal-title{font-size:15px;font-weight:700}
    .modal-body{flex:1;min-height:0;display:flex;flex-direction:column}
    .modal-toolbar{display:flex;gap:8px;padding:10px;border-bottom:1px solid #334155;flex-wrap:wrap}
    .modal-fill{flex:1;min-height:0}
    .project-name-input{flex:1;min-width:220px}
    .project-search-input{flex:1;min-width:220px}
    .project-sort-select{min-width:170px}
    .project-list{height:100%;overflow:auto;padding:12px;display:grid;gap:10px;align-content:start}
    .project-empty{border:1px dashed #334155;border-radius:10px;padding:14px;color:var(--muted);font-size:12px;background:#0b1220}
    .project-item{border:1px solid #334155;border-radius:10px;padding:12px;background:#111827;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
    .project-name{font-size:13px;font-weight:700;color:#f8fafc}
    .project-meta{font-size:12px;color:var(--muted);margin-top:4px}
    .project-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
    .code-area,.import-area,.preview-frame{width:100%;height:100%;border:0;outline:0;resize:none;background:#020617;color:#e2e8f0;font-family:Consolas,"Courier New",monospace;font-size:13px;line-height:1.5;padding:14px}
    .preview-frame{padding:0;background:#fff}
    .result-pass{color:#86efac}.result-warn{color:#fde68a}.result-fail{color:#fca5a5}
    input[type="file"]{display:none}

/* URL website import panel */
.import-url-panel{border-bottom:1px solid #334155;background:linear-gradient(135deg,rgba(15,23,42,.98),rgba(30,41,59,.92));padding:12px 14px;display:grid;gap:10px}
.import-url-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.import-url-title{font-size:13px;font-weight:800;color:#f8fafc;letter-spacing:.01em}
.import-url-note{font-size:12px;color:#94a3b8;margin-top:2px;line-height:1.35}
.import-url-badge{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#bfdbfe;background:rgba(59,130,246,.16);border:1px solid rgba(147,197,253,.25);border-radius:999px;padding:5px 8px;white-space:nowrap}
.import-url-row{display:flex;gap:8px;align-items:center}
.import-url-input{flex:1;min-width:220px;height:36px;border:1px solid #334155;border-radius:10px;background:#020617;color:#e2e8f0;padding:0 12px;font-size:13px;outline:none}
.import-url-input:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(59,130,246,.16)}
.import-url-options{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.import-url-check{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#cbd5e1}
.import-url-check input{accent-color:#3b82f6}
.import-url-status{min-height:16px;font-size:12px;color:#93c5fd}
.import-url-status.error{color:#fca5a5}
.import-url-status.success{color:#86efac}
@media (max-width:720px){.import-url-row{align-items:stretch;flex-direction:column}.import-url-input{width:100%}.import-url-header{flex-direction:column}.import-url-badge{align-self:flex-start}}