*{margin:0;padding:0;box-sizing:border-box}

:root {
    --accent:       #D23A4F;
    --accent-dark:  #B82C3E;
    --accent-light: #FDF0F2;
    --bg:           #F5F6F7;
    --white:        #FFFFFF;
    --text:         #2F3133;
    --muted:        #626A73;
    --border:       #DDE1E5;
    --footer:       #34393F;
    --grey-atom:    #AEB2B5;
    --shadow:       0 2px 8px rgba(0,0,0,0.07);

    --red:          var(--accent);
    --red-dark:     var(--accent-dark);
    --red-light:    var(--accent-light);
}

body{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    background:var(--bg);min-height:100vh;color:var(--text);
}

/* ── Institutional shell ── */
.site-header{background:var(--white);border-bottom:1px solid #ECEEF0}
.site-header-inner{
    max-width:1180px;height:72px;margin:0 auto;padding:0 1.5rem;
    display:flex;align-items:center;justify-content:space-between;
}
.site-nav{display:flex;align-items:center;gap:1.4rem}
.site-nav a{color:var(--muted);font-size:0.92rem;font-weight:600;text-decoration:none}
.site-nav a:hover,.site-nav a.active{color:var(--text)}
.site-nav a.active{font-weight:750}
.header-logos{display:flex;align-items:center;gap:1rem}
.inst-logo{height:40px;width:auto;object-fit:contain}
.tu-logo{height:36px}

.app-intro{background:#F1F2F3;border-bottom:1px solid #ECEEF0}
.app-intro-inner{
    max-width:1180px;margin:0 auto;padding:2.3rem 1.5rem 2.5rem;
    display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
}
.app-kicker{color:var(--accent-dark);font-size:0.74rem;font-weight:750;text-transform:uppercase;margin-bottom:0.55rem}
.app-intro h1{font-size:2.15rem;line-height:1.1;font-weight:780;margin:0 0 0.55rem}
.app-intro p{color:var(--muted);font-size:1rem;max-width:650px;line-height:1.55}
.intro-stats{display:flex;gap:1.6rem;white-space:nowrap;color:var(--muted);font-size:0.78rem}
.intro-stats span{display:flex;flex-direction:column;gap:0.15rem}
.intro-stats strong{color:var(--text);font-size:1.05rem}

.workspace-tabs{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.tabs{max-width:1180px;margin:0 auto;padding:0 1.5rem;display:flex;gap:0.25rem}
.tab{
    padding:0.85rem 1rem;border:none;border-bottom:3px solid transparent;
    background:transparent;color:var(--muted);
    font-size:0.88rem;font-weight:650;cursor:pointer;transition:all 0.16s;
    white-space:nowrap;outline:none;
}
.tab:hover{color:var(--text)}
.tab.active{border-bottom-color:var(--accent);color:var(--accent)}

/* ── Panels — shared layout ── */
.panel{display:none;min-height:520px}
.panel.active{display:flex;flex-direction:column;min-height:calc(100vh - 160px)}

/* Single consistent inner wrapper used by Molecules and Best Fits */
.panel-inner{
    max-width:1100px;
    margin:0 auto;
    padding:1.75rem 1.5rem 3rem;
    width:100%;
    flex:1;
}
.panel-title{font-size:0.78rem;font-weight:700;color:var(--muted);margin-bottom:1rem;text-transform:uppercase;letter-spacing:0.08em}

/* ── MOLECULE panel ── */
.mol-search-wrap{display:flex;gap:0.75rem;margin-bottom:0.5rem}
.mol-input{
    flex:1;padding:0.85rem 1.1rem;font-size:1rem;
    border:2px solid var(--border);border-radius:8px;outline:none;
    background:var(--white);transition:border-color 0.18s;
    color:var(--text);
}
.mol-input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(228,0,26,0.08)}
.mol-btn{
    padding:0.85rem 1.75rem;background:var(--red);
    color:white;border:none;border-radius:8px;
    font-size:0.95rem;font-weight:700;cursor:pointer;
    transition:background 0.16s;white-space:nowrap;
}
.mol-btn:hover{background:var(--red-dark)}
.mol-hint{font-size:0.78rem;color:#aaa;min-height:1em}

.mol-sub-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem}
.fda-toggle-btn{
    padding:0.35rem 0.85rem;border:1.5px solid var(--accent);border-radius:6px;
    background:var(--white);color:var(--accent);font-size:0.82rem;font-weight:600;
    cursor:pointer;transition:all 0.15s;white-space:nowrap;
}
.fda-toggle-btn:hover{background:var(--accent);color:white}

.fda-panel{background:var(--white);border-radius:10px;border:1px solid var(--border);margin-bottom:1rem;overflow:hidden}
.fda-search{width:100%;padding:0.7rem 1rem;border:none;border-bottom:1px solid var(--border);font-size:0.9rem;outline:none;color:var(--text)}
.fda-list{max-height:260px;overflow-y:auto}
.fda-drug-row{padding:0.6rem 1rem;cursor:pointer;border-bottom:1px solid var(--border);transition:background 0.12s}
.fda-drug-row:hover{background:var(--accent-light)}
.fda-drug-name{font-size:0.88rem;font-weight:600;color:var(--text);text-transform:capitalize;margin-bottom:0.2rem}
.fda-drug-meta{display:flex;flex-wrap:wrap;gap:0.3rem}
.fda-tag{font-size:0.7rem;padding:0.1rem 0.4rem;background:var(--bg);color:var(--muted);border-radius:4px;border:1px solid var(--border)}
.fda-tag.green{background:var(--accent-light);color:var(--accent);border-color:var(--accent);font-weight:600}
.fda-more{padding:0.5rem 1rem;font-size:0.8rem;color:var(--muted);text-align:center;background:var(--bg)}

/* Host filter bar */
.host-filter-bar{
    display:flex;flex-wrap:wrap;gap:0.4rem;align-items:center;
    padding:0.6rem 0.75rem;
    background:var(--bg);border:1px solid var(--border);
    border-radius:8px 8px 0 0;border-bottom:none;
}
.hf-input,.hf-select,.hf-num{
    padding:0.32rem 0.6rem;border:1.5px solid var(--border);
    border-radius:6px;font-size:0.8rem;background:var(--white);
    color:var(--text);outline:none;
}
.hf-input{width:160px} .hf-select{cursor:pointer} .hf-num{width:72px}
.hf-input:focus,.hf-select:focus,.hf-num:focus{border-color:var(--accent)}
.hf-label{font-size:0.75rem;color:var(--muted);font-weight:600;white-space:nowrap}
.hf-check{display:flex;align-items:center;gap:0.3rem;font-size:0.8rem;cursor:pointer;white-space:nowrap}
.hf-count{font-size:0.78rem;color:var(--muted);margin-left:auto;white-space:nowrap;font-weight:600}
.mol-hosts-table-wrap{border-top:none;border-radius:0 0 8px 8px}

/* Compatible hosts mini-table */
.mol-hosts-table-wrap{
    overflow-x:auto;overflow-y:auto;
    max-height:380px;
    border-radius:8px;
    border:1px solid var(--border);
    margin-top:0.5rem;
}
.mol-hosts-table{width:100%;border-collapse:collapse;font-size:0.82rem}
.mol-hosts-table thead{position:sticky;top:0;background:var(--accent);color:white}
.th-sort{cursor:pointer;user-select:none}
.th-sort:hover{background:var(--accent-dark)}
.sort-arrow{font-size:0.75rem;opacity:0.9}
.mol-hosts-table th{padding:0.5rem 0.75rem;text-align:left;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap}
.mol-hosts-table td{padding:0.45rem 0.75rem;border-bottom:1px solid var(--border)}
.mol-hosts-table tr:hover td{background:var(--accent-light)}
.mol-hosts-table .small{font-size:0.72rem;color:var(--muted)}

.smiles-row{display:flex;align-items:baseline;gap:0.75rem;margin-bottom:1rem;padding:0.6rem 0.9rem;background:var(--bg);border-radius:8px;border:1px solid var(--border)}
.smiles-label{font-size:0.7rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap}
.smiles-val{font-size:0.82rem;color:var(--text);word-break:break-all;cursor:help}

.mol-loading-msg{color:var(--muted);padding:1rem 0;font-size:0.95rem}
.mol-error{
    color:var(--red);padding:0.75rem 1rem;background:var(--red-light);
    border-radius:8px;border-left:4px solid var(--red);
    font-size:0.9rem;margin-top:0.75rem;
}
.mol-card{
    background:var(--white);border-radius:12px;padding:1.5rem;
    box-shadow:var(--shadow);margin-top:1rem;
    border-left:4px solid var(--red);
}
.mol-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.mol-card-name{font-size:1.2rem;font-weight:700;color:var(--text);text-transform:capitalize}
.pubchem-link{color:var(--red);font-size:0.85rem;font-weight:600;text-decoration:none}
.pubchem-link:hover{text-decoration:underline}

.mol-props{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:0.75rem;margin-bottom:1.25rem}
.prop{background:var(--bg);border-radius:8px;padding:0.75rem 0.9rem;border-left:3px solid var(--border)}
.prop.compatible{border-left-color:var(--red);background:var(--red-light)}
.prop-label{font-size:0.7rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
.prop-val{font-size:1rem;color:var(--text);font-weight:700;margin-top:0.2rem}
.prop-val.big-num{font-size:1.5rem;color:var(--red)}
.mono{font-family:'Courier New',monospace}

.hosts-label{font-size:0.7rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.6rem}
.hosts-chips{display:flex;flex-wrap:wrap;gap:0.4rem;align-items:flex-start}
.host-chip{
    padding:0.3rem 0.7rem;border:2px solid var(--red);border-radius:6px;
    background:var(--white);color:var(--red);font-size:0.78rem;font-weight:700;
    cursor:pointer;transition:all 0.16s;text-align:center;line-height:1.3;
}
.host-chip{display:flex;flex-direction:column;align-items:center}
.chip-shape{font-weight:700;font-size:0.8rem;line-height:1.2}
.chip-cbus{font-family:'Courier New',monospace;font-size:0.65rem;color:var(--muted);line-height:1.2;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-id{font-family:'Courier New',monospace;font-size:0.68rem;color:var(--muted);margin-top:0.1rem}
.host-chip:hover .chip-cbus,.host-chip:hover .chip-id{color:rgba(255,255,255,0.75)}
.host-chip:hover{background:var(--red);color:white}
.host-chip.lit{border-color:#2e7d32;color:#2e7d32}
.host-chip.lit:hover{background:#2e7d32;color:white}

.mop-id-cell{font-family:'Courier New',monospace;font-size:0.82rem;white-space:nowrap}
.mop-shape-cell{font-size:0.82rem;color:var(--text);min-width:180px}
.mop-shape-name{font-weight:600;color:var(--text)}
.mop-cbu{font-family:'Courier New',monospace;font-size:0.72rem;color:var(--muted);margin-top:0.1rem;word-break:break-word}
.lit-badge{font-size:0.85rem;cursor:help}
.more-hosts{color:#aaa;font-size:0.8rem;align-self:center}
.no-hosts{color:#aaa;font-style:italic;font-size:0.9rem;padding:0.5rem 0}

/* ── POM BROWSER panel ── */
.pom-page{padding:1.75rem 1.5rem;display:flex;flex-direction:column;gap:1.25rem;max-width:1100px;margin:0 auto;width:100%;flex:1}

.pom-search-card{
    background:var(--white);border-radius:10px;
    border:1px solid var(--border);border-left:4px solid var(--accent);
    padding:1.25rem 1.5rem;
    box-shadow:var(--shadow);
}
.pom-search-header{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:1rem;padding-bottom:0.75rem;border-bottom:1px solid var(--border);
}
.pom-search-title{font-size:0.88rem;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:0.06em}
.pom-search-actions{display:flex;align-items:center;gap:0.75rem}
.pom-count-top{font-size:0.82rem;color:var(--muted);font-weight:600}
.s-select-inline{padding:0.35rem 0.6rem;border:1.5px solid var(--border);border-radius:6px;font-size:0.82rem;color:var(--text);background:var(--white);outline:none;cursor:pointer}
.s-select-inline:focus{border-color:var(--accent)}
.pom-reset-btn{padding:0.35rem 0.85rem;border:1.5px solid var(--accent);border-radius:6px;background:var(--white);color:var(--accent);font-size:0.82rem;font-weight:600;cursor:pointer;transition:all 0.15s}
.pom-reset-btn:hover{background:var(--accent);color:white}

.pom-form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0.9rem}
.pom-field{display:flex;flex-direction:column;gap:0.3rem}
.pom-label{font-size:0.72rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:0.06em}
.pom-input{
    padding:0.5rem 0.75rem;border:1.5px solid var(--border);border-radius:7px;
    font-size:0.88rem;color:var(--text);background:var(--white);outline:none;
    transition:border-color 0.15s;
}
.pom-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(210,58,79,0.08)}

/* old sidebar — kept for reference but now unused */
.pom-layout{display:flex;height:calc(100vh - 72px - 120px - 44px);min-height:400px;overflow:hidden}
.pom-sidebar{
    width:220px;min-width:220px;
    background:var(--white);
    border-right:1px solid var(--border);
    padding:1.1rem 1rem;
    display:flex;flex-direction:column;gap:1rem;
    overflow-y:auto;
}
.sidebar-section{display:flex;flex-direction:column;gap:0.4rem}
.sidebar-label{
    font-size:0.68rem;color:var(--muted);font-weight:700;
    text-transform:uppercase;letter-spacing:0.09em;
}

.pill-row{display:flex;flex-wrap:wrap;gap:0.3rem}
.pill{
    padding:0.28rem 0.65rem;border-radius:20px;
    border:1.5px solid var(--border);
    background:var(--white);color:var(--text);
    font-size:0.8rem;font-weight:600;cursor:pointer;transition:all 0.14s;
}
.pill:hover{border-color:var(--accent);color:var(--accent)}
.pill.active{background:var(--accent);border-color:var(--accent);color:white}

.s-select{
    padding:0.42rem 0.6rem;border:1.5px solid var(--border);
    border-radius:6px;font-size:0.82rem;color:var(--text);
    background:var(--white);outline:none;cursor:pointer;width:100%;
}
.s-select:focus{border-color:var(--accent)}

input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}
.range-row{display:flex;gap:0.4rem}
.pom-text-search{
    width:100%;padding:0.42rem 0.65rem;
    border:1.5px solid var(--border);border-radius:6px;
    font-size:0.82rem;outline:none;color:var(--text);background:var(--white);
}
.pom-text-search:focus{border-color:var(--accent)}
.reset-btn{
    padding:0.5rem;border:1.5px solid var(--border);border-radius:6px;
    background:var(--white);color:var(--muted);
    font-size:0.82rem;font-weight:600;cursor:pointer;transition:all 0.14s;
    margin-top:auto;
}
.reset-btn:hover{border-color:var(--accent);color:var(--accent)}
.pom-count{font-size:0.74rem;color:#bbb;text-align:center;padding-top:0.2rem}

/* POM detail panel */
.pom-detail-panel{display:flex;flex-direction:column;gap:0.75rem}
.pom-detail-header{display:flex;align-items:center;justify-content:space-between;padding:0.5rem 0}
.pom-detail-title{font-family:'Courier New',monospace;font-size:1rem;font-weight:700;color:var(--accent)}
.pom-detail-close{padding:0.35rem 0.9rem;border:1.5px solid var(--border);border-radius:6px;background:var(--white);color:var(--muted);font-size:0.82rem;font-weight:600;cursor:pointer;transition:all 0.15s}
.pom-detail-close:hover{border-color:var(--accent);color:var(--accent)}
.pom-detail-info{display:flex;flex-wrap:wrap;gap:0.4rem;align-items:center}
.pom-detail-chip{padding:0.25rem 0.6rem;background:var(--bg);border:1px solid var(--border);border-radius:6px;font-size:0.82rem;font-family:'Courier New',monospace}
.pom-detail-chip.green{background:var(--accent-light);color:var(--accent);border-color:var(--accent);font-weight:700}

/* POM table */
.pom-table-wrap{
    background:var(--white);border-radius:10px;
    border:1px solid var(--border);overflow:auto;
    max-height:calc(100vh - 420px);min-height:300px;
}
.pom-table{width:100%;border-collapse:collapse;font-size:0.85rem}
.pom-table thead{position:sticky;top:0;background:var(--accent);color:white}
.pom-table th{padding:0.6rem 0.9rem;text-align:left;font-size:0.78rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap}
.pom-table td{padding:0.5rem 0.9rem;border-bottom:1px solid var(--border)}
.pom-table tr:hover td{background:var(--accent-light)}
.pom-td-id{color:var(--accent);font-weight:700}
.pom-td-hosts{color:var(--accent);font-weight:700}
.pom-formula{font-family:'Courier New',monospace;font-size:0.82rem}

/* ── Browse POMs: MOP host filter section ── */
.pom-mop-filter-section{border-top:1px solid var(--border);margin-top:1rem;padding-top:0.85rem}
.pom-mop-filter-label{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--muted);margin-bottom:0.65rem}

/* ── Browse MOPs panel ── */
.mop-browse-page{padding:1.75rem 1.5rem;display:flex;flex-direction:column;gap:1.25rem;max-width:1100px;margin:0 auto;width:100%;flex:1}
.mop-table-wrap{background:var(--white);border-radius:10px;border:1px solid var(--border);overflow:auto;max-height:calc(100vh - 420px);min-height:300px}
.mop-form-extra{padding:0.5rem 0 0.25rem;display:flex;align-items:center;gap:1rem;font-size:0.85rem}
/* ── Browse POM@MOPs mode toggle ── */
.pom-mode-bar{
    display:flex;gap:0;border-bottom:2px solid var(--border);background:var(--white);
    padding-left:max(1rem, calc((100% - 1180px) / 2 + 1.5rem));
    padding-right:max(1rem, calc((100% - 1180px) / 2 + 1.5rem));
    flex-shrink:0;
}
.mode-btn{appearance:none;-webkit-appearance:none;background:none;border:none;border-bottom:3px solid transparent;outline:none;padding:0.85rem 1.6rem;font-size:0.85rem;font-weight:600;color:var(--muted);cursor:pointer;margin-bottom:-2px;transition:color .15s,border-color .15s;line-height:1}
.mode-btn:hover{color:var(--text);background:none}
.mode-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.pom-panel-view{flex:1;display:flex;flex-direction:column;overflow-y:auto;min-height:0}

.pom-sort-bar{display:flex;align-items:center;gap:0.4rem;padding:0.5rem 0;flex-wrap:wrap}
.pom-sort-label{font-size:0.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;white-space:nowrap}
.pom-sort-btn{
    padding:0.28rem 0.7rem;border:1.5px solid var(--border);border-radius:20px;
    background:var(--white);color:var(--muted);font-size:0.78rem;font-weight:600;
    cursor:pointer;transition:all 0.15s;white-space:nowrap;outline:none;
}
.pom-sort-btn:hover{border-color:var(--accent);color:var(--accent)}
.pom-sort-btn.active{background:var(--accent);border-color:var(--accent);color:white}

.pom-main{flex:1;overflow-y:auto;padding:1rem 1.1rem}
.pom-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:0.6rem}
.pom-card{
    background:var(--white);border-radius:8px;padding:0.85rem;
    text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:0.25rem;
    border:1px solid var(--border);transition:all 0.16s;
}
.pom-card:hover{border-color:var(--red);box-shadow:0 4px 14px rgba(228,0,26,0.12);transform:translateY(-1px)}
.c-id{font-family:'Courier New',monospace;font-weight:700;color:var(--red);font-size:0.85rem}
.c-formula{font-family:'Courier New',monospace;font-size:0.72rem;color:var(--muted);word-break:break-all;line-height:1.35}
.c-meta{display:flex;flex-wrap:wrap;gap:0.22rem;margin-top:0.15rem}
.chip{padding:0.12rem 0.4rem;background:var(--red);color:white;border-radius:4px;font-size:0.65rem;font-weight:600}
.tag{padding:0.12rem 0.35rem;background:var(--bg);color:var(--muted);border-radius:4px;font-size:0.65rem;border:1px solid var(--border)}
.green{background:#FFF0F1;color:var(--red);border-color:#ffcdd2;font-weight:700}

.load-more{display:flex;justify-content:center;padding:1rem 0}
.load-more button{
    padding:0.6rem 1.8rem;border:2px solid var(--red);
    background:var(--white);color:var(--red);
    border-radius:7px;font-size:0.88rem;font-weight:600;cursor:pointer;transition:all 0.16s;
}
.load-more button:hover{background:var(--red);color:white}

/* ── BEST FITS panel — uses shared .panel-inner ── */
.fits-controls{display:flex;gap:0.75rem;margin-bottom:1rem;align-items:center}
.fits-search{
    width:260px;flex:none;
    padding:0.6rem 0.85rem;border:1.5px solid var(--border);
    border-radius:8px;font-size:0.9rem;outline:none;background:var(--white);color:var(--text);
}
.fits-search:focus{border-color:var(--red)}
#fitsSort{width:220px;flex:none}

.fits-table-wrap{
    background:var(--white);border-radius:10px;
    box-shadow:var(--shadow);overflow:auto;
    max-height:calc(100vh - 220px);
    border:1px solid var(--border);
}
.fits-table{width:100%;border-collapse:collapse;font-size:0.88rem}
.fits-table thead{position:sticky;top:0;background:var(--red);color:white}
.fits-table th{padding:0.65rem 1rem;text-align:left;font-weight:600;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.05em}
.fits-table td{padding:0.5rem 1rem;border-bottom:1px solid var(--border)}
.fits-table tr:hover td{background:var(--red-light)}

.fill-badge{padding:0.2rem 0.6rem;border-radius:20px;font-weight:700;font-size:0.82rem;font-family:'Courier New',monospace}
.fill-high{background:#ffcdd2;color:#b71c1c}
.fill-med{background:#ffe0b2;color:#e65100}
.fill-low{background:#fff9c4;color:#827717}

.view3d-btn{
    padding:0.22rem 0.65rem;border:1.5px solid var(--red);border-radius:5px;
    background:white;color:var(--red);font-size:0.78rem;font-weight:600;cursor:pointer;transition:all 0.15s;
}
.view3d-btn:hover{background:var(--red);color:white}

/* ── 3D modal ── */
.mol-modal{position:fixed;inset:0;background:rgba(0,0,0,0.65);display:none;justify-content:center;align-items:center;z-index:9999}
.modal-box{
    background:var(--white);width:90%;max-width:1100px;max-height:88vh;
    border-radius:12px;overflow:hidden;display:flex;flex-direction:column;
    box-shadow:0 24px 48px rgba(0,0,0,0.3);position:relative;
}
.modal-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:0.75rem 1.2rem;
    background:var(--bg);
    border-bottom:1px solid var(--border);
    flex-shrink:0;
    position:sticky;
    top:0;
    z-index:9999;
}
.modal-title{font-family:'Courier New',monospace;font-size:0.9rem;font-weight:700;color:var(--text)}
.modal-actions{display:flex;align-items:center;gap:0.75rem}

.modal-download-btn{
    padding:0.35rem 0.9rem;
    border:1.5px solid var(--accent);
    border-radius:6px;
    background:white;
    color:var(--accent);
    font-size:0.82rem;
    font-weight:600;
    cursor:pointer;
    transition:all 0.15s;
    white-space:nowrap;
    outline:none;
}
.modal-download-btn:hover{background:var(--accent);color:white}

.modal-close{
    background:none;
    border:none;
    font-size:1.6rem;
    font-weight:400;
    color:var(--muted);
    cursor:pointer;
    transition:color 0.15s;
    outline:none;
    line-height:1;
    padding:0 0.2rem;
}
.modal-close:hover{color:var(--accent)}

/* Remove float close — use header close button instead */
#mol-viewer{width:100%;flex:1;min-height:400px;background:white}
.mol-loading{
    position:absolute;
    /* starts BELOW the header — header is ~48px tall */
    top:48px;left:0;right:0;bottom:0;
    background:white;
    display:flex;align-items:center;justify-content:center;
    color:var(--muted);gap:0.75rem;
    z-index:5;
}
.mol-loading::before{content:'';width:20px;height:20px;border:3px solid var(--border);border-top-color:var(--red);border-radius:50%;animation:spin 0.7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.site-footer{background:var(--footer);color:#F2F3F4}
.site-footer-inner{
    max-width:1180px;margin:0 auto;padding:1.6rem 1.5rem;
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    font-size:0.8rem;
}
.footer-meta{color:#C8CDD2}

@media(max-width:700px){
    .site-header-inner{height:62px;padding:0 1rem}
    .site-nav{gap:1rem}
    .app-intro-inner{padding:1.6rem 1rem 1.8rem;align-items:flex-start;flex-direction:column;gap:1.25rem}
    .app-intro h1{font-size:1.7rem}
    .intro-stats{width:100%;justify-content:space-between;gap:0.75rem}
    .tabs{padding:0 0.5rem;overflow-x:auto}
    .tab{padding:0.75rem 0.7rem;font-size:0.8rem}
    .pom-layout{flex-direction:column;height:auto}
    .pom-sidebar{width:100%;min-width:0}
    .pom-grid{grid-template-columns:1fr 1fr}
    .mol-props{grid-template-columns:1fr 1fr}
    .mol-search-wrap{flex-direction:column}
    .mol-btn{width:100%}
    .site-footer-inner{align-items:flex-start;flex-direction:column}
}

@media(max-width:430px){
    .tu-wordmark{display:none}
    .pom-grid,.mol-props{grid-template-columns:1fr}
}