:root { --el-navy:#102d3f; --el-blue:#176a83; --el-teal:#0f7c78; --el-ink:#18313d; --el-muted:#637782; --el-paper:#f5f8f9; --el-line:#d8e2e6; --el-warn:#9b341f; --el-gold:#b87813; }
* { box-sizing:border-box; }
body { margin:0; color:var(--el-ink); background:#edf3f4; font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; }
.el-header { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:1rem clamp(1rem,4vw,4rem); color:white; background:linear-gradient(135deg,#0c2738,#15465b); }
.el-brand { display:flex; align-items:center; gap:.8rem; color:inherit; text-decoration:none; }
.el-brand img { width:52px; height:52px; object-fit:contain; }
.el-brand span { display:grid; gap:.08rem; }
.el-brand strong { font-size:1.15rem; }
.el-brand small { color:#c7dde6; }
.el-header nav { display:flex; gap:.6rem; flex-wrap:wrap; }
.el-header nav a { color:white; text-decoration:none; border:1px solid #ffffff42; border-radius:999px; padding:.55rem .9rem; }
.beta-badge { width:max-content; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:#fff2c7; }
main { width:min(1380px,calc(100% - 2rem)); margin:0 auto; padding:1.4rem 0 3rem; }
.el-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2rem; align-items:center; padding:clamp(1.5rem,4vw,3rem); border-radius:24px; color:white; background:linear-gradient(135deg,#123b50,#0c716e); box-shadow:0 18px 45px #123b5025; }
.eyebrow { margin:0 0 .35rem; color:#0e746f; font-size:.76rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.el-hero .eyebrow { color:#bfece8; }
.el-hero h1 { max-width:850px; margin:.2rem 0 .8rem; font-size:clamp(2rem,4.5vw,4rem); line-height:1.02; }
.el-hero p:last-child { max-width:820px; margin:0; color:#e1f1f3; font-size:1.05rem; line-height:1.65; }
.el-stats { display:grid; grid-template-columns:repeat(2,minmax(110px,1fr)); gap:.7rem; margin:0; }
.el-stats div { min-width:120px; padding:1rem; border:1px solid #ffffff38; border-radius:16px; background:#ffffff12; }
.el-stats dt { font-size:1.65rem; font-weight:800; }
.el-stats dd { margin:.15rem 0 0; color:#d6e8ec; font-size:.76rem; }
.el-safety { display:flex; gap:1rem; align-items:flex-start; margin:1rem 0; padding:1rem 1.2rem; border-left:5px solid #b13c25; border-radius:14px; background:#fff0ec; color:#6f2a1c; }
.el-safety strong { white-space:nowrap; }
.el-safety p { margin:0; line-height:1.5; }
.el-search-panel { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(360px,1.4fr); gap:1rem 2rem; align-items:end; margin:1rem 0; padding:1.3rem; border:1px solid var(--el-line); border-radius:20px; background:white; }
.el-search-panel h2,.el-view-heading h2 { margin:.1rem 0; color:var(--el-navy); }
#elSearchForm { display:flex; gap:.5rem; }
#elSearchForm input { flex:1; min-width:0; border:1px solid #afc3cb; border-radius:12px; padding:.9rem 1rem; font:inherit; }
#elSearchForm button,.el-chapter-controls button,.el-secondary,.el-article-toolbar button { border:0; border-radius:11px; padding:.75rem 1rem; font-weight:750; cursor:pointer; }
#elSearchForm button,.el-chapter-controls button { color:white; background:var(--el-blue); }
.el-search-examples { grid-column:2; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; color:var(--el-muted); font-size:.85rem; }
.el-search-examples button { border:1px solid var(--el-line); border-radius:999px; padding:.35rem .65rem; color:var(--el-blue); background:#f5fafb; cursor:pointer; }
.el-tabs { position:sticky; top:0; z-index:10; display:flex; gap:.45rem; overflow:auto; margin:1rem 0; padding:.55rem; border:1px solid var(--el-line); border-radius:16px; background:#ffffffee; backdrop-filter:blur(10px); }
.el-tabs button { flex:1; min-width:max-content; border:0; border-radius:11px; padding:.75rem 1rem; color:#46616d; background:transparent; font-weight:750; cursor:pointer; }
.el-tabs button[aria-selected="true"] { color:white; background:var(--el-navy); }
.el-view,.el-tools-section,.el-related { margin:1rem 0; padding:1.3rem; border:1px solid var(--el-line); border-radius:20px; background:white; }
.el-view-heading { display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-bottom:1rem; }
.el-view-heading p:not(.eyebrow) { margin:.4rem 0 0; color:var(--el-muted); }
.el-overall-progress { display:grid; grid-template-columns:auto auto; gap:.35rem .8rem; min-width:min(320px,100%); padding:1rem; border:1px solid var(--el-line); border-radius:15px; background:#f7fbfb; }
.el-overall-progress span { color:var(--el-muted); font-size:.8rem; }
.el-overall-progress strong { justify-self:end; color:var(--el-navy); }
.el-overall-progress button { grid-column:1 / -1; border:0; border-radius:10px; padding:.65rem .8rem; color:white; background:var(--el-blue); font-weight:750; cursor:pointer; }
.el-overall-progress button:disabled { opacity:.5; cursor:not-allowed; }
.el-progress-track,.el-module-progress { overflow:hidden; height:7px; border-radius:999px; background:#dce8eb; }
.el-progress-track { grid-column:1 / -1; }
.el-progress-track i,.el-module-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--el-blue),var(--el-teal)); }
.el-card-grid,.el-group-grid,.el-module-grid,.el-tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.el-route-card,.el-group-card,.el-module-card,.el-tool-card { display:flex; flex-direction:column; gap:.55rem; min-width:0; padding:1rem; border:1px solid var(--el-line); border-radius:16px; background:linear-gradient(180deg,#fff,#f8fbfb); }
.el-route-card h3,.el-group-card h3,.el-module-card h3,.el-tool-card h3 { margin:0; color:var(--el-navy); }
.el-route-card p,.el-group-card p,.el-module-card p,.el-tool-card p { margin:0; color:var(--el-muted); line-height:1.48; }
.el-route-card button,.el-group-card button,.el-module-card button,.el-tool-card a { margin-top:auto; border:0; border-radius:10px; padding:.65rem .75rem; color:white; background:var(--el-teal); text-align:center; text-decoration:none; font-weight:750; cursor:pointer; }
.el-route-flow { display:flex; gap:.3rem; flex-wrap:wrap; }
.el-route-flow span { padding:.28rem .45rem; border-radius:7px; color:#2e5967; background:#e8f2f4; font-size:.73rem; }
.el-group-card { border-top:4px solid var(--el-teal); }
.el-module-card { position:relative; }
.el-module-progress { margin:.15rem 0; }
.el-module-badge { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.el-module-icon { display:grid; place-items:center; min-width:44px; height:44px; padding:.25rem; border-radius:12px; color:white; background:linear-gradient(135deg,var(--el-blue),var(--el-teal)); font-size:.7rem; font-weight:900; }
.el-module-meta { color:#6a7f88; font-size:.75rem; }
.el-filters { display:flex; gap:1rem; margin-bottom:1rem; }
.el-filters label { display:grid; gap:.3rem; color:#4c6671; font-size:.8rem; font-weight:700; }
.el-filters select,.el-chapter-nav select { min-width:220px; border:1px solid #b8c9d0; border-radius:10px; padding:.65rem; background:white; }
.el-results { border-top:5px solid var(--el-blue); }
#elLookupView .el-search-panel { margin:0; padding:0; border:0; border-radius:0; background:transparent; }
.el-saved-summary { display:grid; grid-template-columns:repeat(2,minmax(0,220px)); gap:1rem; margin-bottom:1rem; }
.el-saved-summary div { display:grid; gap:.2rem; padding:1rem; border:1px solid var(--el-line); border-radius:14px; background:#f7fbfb; }
.el-saved-summary strong { color:var(--el-navy); font-size:1.65rem; }
.el-saved-summary span { color:var(--el-muted); font-size:.82rem; }
#elResultsList,#elSavedList { display:grid; gap:.7rem; }
.el-result { width:100%; padding:1rem; border:1px solid var(--el-line); border-radius:13px; background:#fafcfc; text-align:left; cursor:pointer; }
.el-result strong { display:block; color:var(--el-navy); }
.el-result span { display:block; margin-top:.25rem; color:var(--el-muted); }
.el-secondary { color:var(--el-blue); background:#e9f3f5; }
.el-reader { margin:1rem 0; }
.el-reader-top { display:flex; align-items:center; gap:1rem; margin-bottom:.8rem; }
#elBreadcrumb { color:var(--el-muted); font-size:.85rem; }
.el-module-header { padding:1.3rem; border-radius:20px; color:white; background:linear-gradient(135deg,#123b50,#146e74); }
.el-module-header h1 { margin:.25rem 0 .5rem; }
.el-module-header p { max-width:850px; margin:0; color:#d9ecee; }
.el-editorial-notes { display:grid; gap:.45rem; margin:.8rem 0; }
.el-editorial-notes p { margin:0; padding:.75rem 1rem; border-left:4px solid var(--el-gold); border-radius:10px; background:#fff6e5; color:#66480e; }
.el-reader-layout { display:grid; grid-template-columns:310px minmax(0,1fr); gap:1rem; align-items:start; }
.el-chapter-nav,.el-article { border:1px solid var(--el-line); border-radius:18px; background:white; }
.el-chapter-nav { position:sticky; top:74px; padding:1rem; }
.el-chapter-nav label { display:block; margin-bottom:.35rem; font-weight:800; }
.el-chapter-nav select { width:100%; min-width:0; }
#elChapterList { display:grid; gap:.25rem; max-height:65vh; overflow:auto; margin-top:.7rem; }
#elChapterList button { border:0; border-radius:8px; padding:.55rem .65rem; color:#46616d; background:transparent; text-align:left; cursor:pointer; }
#elChapterList button.active { color:white; background:var(--el-blue); }
.el-article { min-width:0; padding:clamp(1rem,3vw,2rem); }
.el-article-toolbar { display:flex; justify-content:space-between; align-items:center; color:var(--el-muted); font-size:.82rem; }
.el-article h2 { margin:.9rem 0 1.2rem; color:var(--el-navy); font-size:clamp(1.55rem,3vw,2.35rem); }
#elChapterContent { line-height:1.7; }
#elChapterContent h3 { margin:1.5rem 0 .5rem; color:var(--el-blue); }
#elChapterContent img { display:block; max-width:100%; max-height:620px; margin:1rem auto; cursor:zoom-in; }
.el-figure { margin:1rem 0; padding:.7rem; border:1px solid var(--el-line); border-radius:13px; background:#f8fbfc; }
.el-figure figcaption { color:var(--el-muted); font-size:.82rem; text-align:center; }
.el-callout { margin:1rem 0; padding:.85rem 1rem; border-left:4px solid var(--el-blue); border-radius:10px; background:#eef6f8; }
.el-callout.warning { border-color:#b33c26; background:#fff0ec; color:#6f2a1c; }
.el-callout.important { border-color:#c08016; background:#fff7e8; }
.el-callout.tip { border-color:#2c8a61; background:#eef9f4; }
.el-table-wrap { overflow:auto; margin:1rem 0; border:1px solid var(--el-line); border-radius:12px; }
.el-table-wrap table { width:100%; border-collapse:collapse; font-size:.88rem; }
.el-table-wrap th,.el-table-wrap td { padding:.62rem .7rem; border-bottom:1px solid var(--el-line); text-align:left; vertical-align:top; }
.el-table-wrap th { color:white; background:var(--el-navy); }
.el-chapter-controls { display:flex; justify-content:space-between; gap:.5rem; margin-top:1.5rem; }
.el-related,.el-sources { margin-top:1rem; }
.el-sources { padding:1rem; border:1px solid var(--el-line); border-radius:14px; background:white; }
.el-sources summary { cursor:pointer; font-weight:800; }
#elSources { display:grid; gap:.45rem; margin-top:.8rem; overflow-wrap:anywhere; }
#elSources a { color:var(--el-blue); }
#elFigureDialog { max-width:min(1100px,94vw); border:0; border-radius:14px; padding:1rem; }
#elFigureDialog::backdrop { background:#061822c7; }
#elFigureDialog button { float:right; border:0; background:transparent; font-size:2rem; cursor:pointer; }
#elFigureDialog img { display:block; max-width:100%; max-height:80vh; margin:auto; }
#elFigureDialog p { text-align:center; }
footer { padding:2rem 1rem; color:#d5e3e8; background:#102d3f; text-align:center; }
footer a { color:white; }
.st-legal-links { display:flex; justify-content:center; gap:1rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[hidden] { display:none !important; }
@media (max-width:980px) { .el-hero { grid-template-columns:1fr; } .el-stats { grid-template-columns:repeat(4,1fr); } .el-card-grid,.el-group-grid,.el-module-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .el-reader-layout { grid-template-columns:1fr; } .el-chapter-nav { position:static; } #elChapterList { display:none; } }
@media (max-width:680px) { main { width:min(100% - 1rem,1380px); } .el-header { align-items:flex-start; } .el-header nav { display:none; } .el-hero { border-radius:18px; } .el-stats { grid-template-columns:repeat(2,1fr); } .el-search-panel { grid-template-columns:1fr; } .el-search-examples { grid-column:1; } #elSearchForm { flex-direction:column; } .el-card-grid,.el-group-grid,.el-module-grid,.el-tool-grid { grid-template-columns:1fr; } .el-filters { flex-direction:column; } .el-filters select { width:100%; } .el-safety { display:block; } .el-safety strong { display:block; margin-bottom:.35rem; } .el-view-heading { align-items:flex-start; flex-direction:column; } .el-overall-progress { width:100%; } .el-saved-summary { grid-template-columns:1fr 1fr; } .el-chapter-controls { display:grid; grid-template-columns:1fr 1fr; } #elComplete { grid-column:1 / -1; grid-row:1; } }