@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { color-scheme: dark; --bg:#080a0f; --surface:#10131a; --line:rgba(255,255,255,.09); --muted:#858b99; --text:#f4f5f7; --green:#3ddc97; font-family:"Manrope",system-ui,sans-serif; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--bg); }
body { min-height:100vh; margin:0; overflow-x:clip; color:var(--text); background:radial-gradient(circle at 78% 18%,rgba(139,92,246,.08),transparent 27rem),radial-gradient(circle at 15% 60%,rgba(34,211,238,.035),transparent 30rem),var(--bg); }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
.auth-shell { position:relative; isolation:isolate; min-height:100vh; padding:clamp(24px,5vw,72px); display:grid; grid-template-rows:1fr auto; place-items:center; overflow:hidden; background:linear-gradient(145deg,#07090e 0%,#0a0c13 55%,#0d0b17 100%); }
.auth-ambient { position:absolute; z-index:-1; border-radius:50%; filter:blur(2px); pointer-events:none; }
.auth-ambient-one { width:min(64vw,760px); aspect-ratio:1; top:-38%; right:-15%; background:radial-gradient(circle,rgba(139,92,246,.15),transparent 68%); }
.auth-ambient-two { width:min(55vw,640px); aspect-ratio:1; bottom:-38%; left:-18%; background:radial-gradient(circle,rgba(34,211,238,.07),transparent 70%); }
.auth-card { width:min(460px,100%); padding:clamp(28px,4vw,40px); background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018)); border:1px solid rgba(255,255,255,.11); border-radius:22px; box-shadow:0 32px 90px rgba(0,0,0,.4); }
.auth-brand { display:flex; align-items:center; justify-content:center; gap:13px; font-size:.85rem; font-weight:800; letter-spacing:.22em; }
.auth-login-button { min-height:55px; margin-top:48px; padding:0 18px 0 21px; display:flex; align-items:center; justify-content:space-between; color:#080a0f; background:#f0f1f4; border-radius:12px; font-size:.82rem; font-weight:700; transition:transform .2s ease,background .2s ease,box-shadow .2s ease; }
.auth-login-button:hover { background:#fff; box-shadow:0 12px 32px rgba(0,0,0,.28); transform:translateY(-2px); }
.auth-login-button i { font-size:1.1rem; font-style:normal; }
.auth-note { margin-top:17px; display:flex; align-items:center; gap:8px; color:#5d6470; font-size:.63rem; }
.auth-note .mud-icon-root { font-size:.9rem; }
.auth-footer { width:100%; padding-top:32px; display:flex; justify-content:space-between; color:#414753; font:500 .57rem/1 "DM Mono",monospace; letter-spacing:.09em; }
.admin-access-denied { text-align:center; }
.admin-access-denied-icon { margin-top:42px; color:#8b5cf6; font-size:2.4rem; filter:drop-shadow(0 0 18px rgba(139,92,246,.28)); }
.admin-access-denied h1 { margin:18px 0 8px; font-size:1.45rem; letter-spacing:-.035em; }
.admin-access-denied p { margin:0; color:#777e8b; font-size:.78rem; line-height:1.55; }
.admin-access-denied .auth-login-button { text-align:left; }
.auth-loading { width:34px; height:34px; margin:45vh auto 0; border:2px solid rgba(255,255,255,.08); border-top-color:#8b5cf6; border-radius:50%; animation:spin 1s linear infinite; }
.session-button:hover { transform:none; }
@media (max-width:600px) {
    .auth-shell { padding:16px; }
    .auth-card { padding:27px 22px; border-radius:17px; }
    .auth-footer { padding-inline:4px; }
}
.dashboard-shell { width:min(1440px,100%); min-height:100vh; margin:0 auto; padding:0 clamp(24px,5vw,80px); display:flex; flex-direction:column; }
.topbar { height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:13px; font-size:.85rem; font-weight:800; letter-spacing:.22em; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.28); border-radius:10px; background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.025)); font-size:.8rem; letter-spacing:0; }
.topbar-actions { display:flex; align-items:center; gap:14px; }
.desktop-dashboard-action { display:contents; }
.desktop-session-action { display:contents; }
.mobile-dashboard-menu { display:none; }
.network-selector .mud-button-root { min-width:0; padding:7px 10px; color:#8b919c; background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:9px; font-family:"DM Mono",monospace; font-size:.62rem; font-weight:500; letter-spacing:.02em; text-transform:none; }
.network-selector .mud-button-root:hover { color:#fff; border-color:rgba(255,255,255,.17); background:rgba(255,255,255,.04); }
.icon-button { width:38px; height:38px; display:grid; place-items:center; color:#b6bac4; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:10px; cursor:pointer; transition:.2s ease; }
.icon-button:hover { color:#fff; border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.08); box-shadow:0 0 18px rgba(139,92,246,.12); }
main { flex:1; padding-top:40px; }
.hero { padding:clamp(64px,9vw,118px) 0 clamp(50px,7vw,88px); }
.eyebrow { display:flex; align-items:center; gap:9px; margin-bottom:25px; color:#a4a9b4; font-family:"DM Mono",monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.live-dot { width:6px; height:6px; display:inline-block; border-radius:50%; background:var(--green); box-shadow:0 0 14px rgba(61,220,151,.8); }
.hero h1 { max-width:820px; margin:0; font-size:clamp(3rem,7.1vw,7rem); line-height:.94; letter-spacing:-.07em; font-weight:700; }
.hero h1 span { color:#555b68; }
.hero p { max-width:490px; margin:28px 0 0; color:var(--muted); font-size:clamp(.96rem,1.5vw,1.08rem); line-height:1.7; }
.controls { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px; }
.search { width:min(360px,100%); height:48px; display:flex; align-items:center; gap:12px; padding:0 14px; color:var(--muted); background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:12px; transition:border-color .2s; }
.search:focus-within { border-color:rgba(255,255,255,.24); }
.search input { min-width:0; flex:1; color:var(--text); background:transparent; border:0; outline:0; }
.search input::placeholder { color:#666c78; }
kbd { padding:4px 7px; color:#666c78; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:5px; font-family:"DM Mono",monospace; font-size:.62rem; }
.categories { min-width:0; display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; }
.service-search { width:42px; height:42px; margin-left:auto; display:flex; align-items:center; justify-content:flex-end; overflow:hidden; color:var(--muted); background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:11px; transition:width .25s ease,border-color .2s,background .2s; }
.service-search.expanded { width:min(280px,38vw); border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.035); }
.service-search.has-value { border-color:color-mix(in srgb,#8b5cf6 40%,var(--line)); }
.service-search-field { width:0; min-width:0; flex:1; overflow:hidden; opacity:0; pointer-events:none; transition:opacity .15s ease; }
.service-search.expanded .service-search-field { width:auto; opacity:1; pointer-events:auto; }
.service-search-field input { width:100%; height:40px; padding:0 4px 0 14px; color:var(--text); background:transparent; border:0; outline:0; font:500 .76rem/1 "Manrope",system-ui,sans-serif; }
.service-search-field input::placeholder { color:#666c78; }
.service-search-toggle { width:40px; height:40px; padding:0; display:grid; flex:0 0 40px; place-items:center; color:#858b99; background:transparent; border:0; border-radius:10px; cursor:pointer; transition:color .2s,background .2s; }
.service-search-toggle:hover { color:#fff; background:rgba(255,255,255,.055); }
.service-search-toggle .mud-icon-root { font-size:1.1rem; }
.category-pill { flex:0 0 auto; padding:9px 14px; color:#747a87; background:transparent; border:1px solid transparent; border-radius:9px; font-size:.76rem; font-weight:600; cursor:pointer; }
.category-pill:hover { color:#c5c8d0; }
.category-pill.active { color:#fff; background:rgba(255,255,255,.055); border-color:var(--line); }
.services-section { padding:22px 0 90px; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; }
.services-heading { margin-bottom:16px; padding-top:26px; border-top:1px solid var(--line); }
.section-heading h2 { margin:0; font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.section-heading span { color:#636976; font-family:"DM Mono",monospace; font-size:.7rem; }
.service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:230px; gap:13px; }
.service-card { --accent:#8b5cf6; position:relative; min-width:0; min-height:0; height:100%; padding:20px 24px; display:flex; flex-direction:column; overflow:hidden; background:linear-gradient(150deg,rgba(255,255,255,.045),rgba(255,255,255,.018)); border:1px solid var(--line); border-radius:15px; transition:transform .25s ease,border-color .25s ease,background .25s ease; }
.service-card-click-target { position:absolute; z-index:1; inset:0; border-radius:inherit; }
.service-card-click-target:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.service-card.is-clickable { cursor:pointer; }
.service-card .status,.service-card .service-links,.service-card .service-network-unavailable { position:relative; z-index:2; }
.service-card .service-extra-slot { z-index:3; }
.service-card:has(.integration-widget[open]) { z-index:4; overflow:visible; }
.service-card:has(.integration-widget[open]) .card-topline { inset-inline:14px; border-radius:999px; }
.service-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 35%,rgba(255,255,255,.1)); background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 8%,#12151d),#0e1117); }
.card-topline { position:absolute; inset:0 20% auto 20%; height:1px; opacity:0; background:var(--accent); box-shadow:0 0 22px var(--accent); transition:.25s; }
.service-card:hover .card-topline { inset-inline:0; opacity:.85; }
.card-header,.card-footer { display:flex; align-items:flex-start; justify-content:space-between; }
.service-identity { min-width:0; display:flex; align-items:center; gap:16px; }
.service-icon { width:64px; height:64px; flex:0 0 64px; display:grid; place-items:center; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); border-radius:15px; font-family:"DM Mono",monospace; font-size:1.15rem; font-weight:500; }
.service-icon-image { width:76%; height:76%; display:block; object-fit:contain; }
.service-icon-glyph { display:grid; place-items:center; line-height:1; }
.status { width:18px; height:18px; flex:0 0 18px; display:grid; place-items:center; color:#686e7a; cursor:help; }
.status i { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 10px color-mix(in srgb,currentColor 55%,transparent); }
.status.online { color:var(--green); }
.status.offline { color:#ef6672; }
.status.checking i { animation:pulse 1s infinite alternate; }
@keyframes pulse { to { opacity:.25; } }
.card-content { min-width:0; }
.category-label { margin-bottom:5px; color:#646a76; font-family:"DM Mono",monospace; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; }
.card-content h3 { margin:0 0 5px; overflow:hidden; font-size:1.12rem; letter-spacing:-.025em; text-overflow:ellipsis; white-space:nowrap; }
.card-content p { min-height:1.4em; margin:0; display:block; overflow:hidden; color:#777d89; font-size:.76rem; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }
.service-extra-slot { min-height:32px; margin-top:13px; }
.jellyfin-compact,.jellyfin-widget summary { height:32px; padding:0 10px; display:flex; align-items:center; gap:14px; overflow:hidden; color:#737985; background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:8px; font-size:.58rem; }
.jellyfin-widget summary { list-style:none; cursor:pointer; transition:border-color .2s,background .2s; }
.jellyfin-widget summary::-webkit-details-marker { display:none; }
.jellyfin-widget summary:hover { background:color-mix(in srgb,var(--accent) 5%,rgba(255,255,255,.025)); border-color:color-mix(in srgb,var(--accent) 28%,var(--line)); }
.jellyfin-widget summary span { white-space:nowrap; }
.jellyfin-widget summary strong { margin-right:3px; color:#cbd0d9; font-family:"DM Mono",monospace; font-weight:500; }
.jellyfin-widget summary i { margin-left:auto; color:var(--accent); font-size:.85rem; font-style:normal; transition:transform .2s; }
.jellyfin-widget[open] summary i { transform:rotate(180deg); }
.jellyfin-popover { position:absolute; z-index:3; top:115px; right:16px; bottom:auto; left:16px; padding:12px; display:grid; align-content:center; gap:10px; background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 8%,#151820),#101319); border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line)); border-radius:11px; box-shadow:0 14px 35px rgba(0,0,0,.38); }
.jellyfin-server { display:flex; align-items:baseline; justify-content:space-between; gap:10px; color:#aeb3bd; font-size:.7rem; }
.jellyfin-server small { color:#565c68; font-family:"DM Mono",monospace; font-size:.58rem; }
.jellyfin-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; overflow:hidden; color:#666d79; font-size:.58rem; }
.jellyfin-stats span { min-width:0; white-space:nowrap; }
.jellyfin-stats strong { display:block; margin-bottom:2px; color:#d9dbe0; font-family:"DM Mono",monospace; font-size:.72rem; font-weight:500; }
.jellyfin-server-name { color:#aeb3bd; }
.jellyfin-hint { margin-left:auto; color:#5f6570; font-size:.58rem; white-space:nowrap; }
.jellyfin-compact.loading span { width:22%; height:6px; background:rgba(255,255,255,.05); border-radius:4px; animation:pulse 1s infinite alternate; }
.integration-widget summary { gap:10px; }
.integration-widget summary span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.integration-popover { align-content:start; overflow:visible; }
.integration-details { min-height:38px; display:grid; grid-template-columns:repeat(auto-fit,minmax(72px,1fr)); gap:9px 12px; align-items:start; overflow:visible; }
.integration-detail { min-width:0; display:flex; flex-direction:column; gap:3px; }
.integration-detail strong { overflow:hidden; color:#d9dbe0; font:500 .72rem/1.2 "DM Mono",monospace; text-overflow:ellipsis; white-space:nowrap; }
.integration-detail small { overflow:hidden; color:#666d79; font-size:.58rem; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.integration-widget.is-stale summary { border-color:color-mix(in srgb,#e5a84b 42%,var(--line)); }
.integration-stale-mark { width:16px; height:16px; margin-left:auto; display:grid; flex:0 0 16px; place-items:center; color:#e5a84b; background:rgba(229,168,75,.1); border:1px solid rgba(229,168,75,.25); border-radius:50%; font:600 .58rem/1 "DM Mono",monospace; }
.integration-stale-mark+.integration-chevron { margin-left:0; }
.integration-refresh-meta { margin-top:auto; padding-top:8px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--line); }
.integration-freshness { display:flex; align-items:center; gap:6px; color:#69707c; font:500 .57rem/1.3 "DM Mono",monospace; }
.integration-freshness i,.integration-unavailable span i { width:6px; height:6px; display:inline-block; flex:0 0 6px; background:var(--green); border-radius:50%; box-shadow:0 0 8px color-mix(in srgb,var(--green) 50%,transparent); }
.integration-freshness.stale { color:#b18a50; }
.integration-freshness.stale i,.integration-unavailable span i { background:#e5a84b; box-shadow:0 0 8px rgba(229,168,75,.35); }
.integration-refresh-button { width:25px; height:25px; display:grid; flex:0 0 25px; place-items:center; color:#89909c; background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:7px; cursor:pointer; font:500 1rem/1 system-ui,sans-serif; transition:.2s ease; }
.integration-refresh-button:hover:not(:disabled) { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); background:color-mix(in srgb,var(--accent) 7%,transparent); }
.integration-refresh-button:disabled { opacity:.45; cursor:wait; animation:spin 1s linear infinite; }
.integration-error { padding:7px 8px; color:#d2967d; background:rgba(210,105,75,.07); border:1px solid rgba(210,105,75,.15); border-radius:7px; font-size:.6rem; line-height:1.4; }
.integration-unavailable { height:32px; padding:0 7px 0 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; color:#a47d6d; background:rgba(210,105,75,.045); border:1px solid rgba(210,105,75,.16); border-radius:8px; font:500 .59rem/1 "DM Mono",monospace; }
.integration-unavailable span { display:flex; align-items:center; gap:7px; }
@keyframes spin { to { transform:rotate(360deg); } }
.integration-stats { grid-template-columns:repeat(auto-fit,minmax(72px,1fr)); row-gap:12px; }
.card-footer { margin-top:auto; padding-top:14px; align-items:center; }
.latency { color:#565c68; font-family:"DM Mono",monospace; font-size:.65rem; }


.service-network-unavailable { display:flex; align-items:center; gap:7px; color:#5e6571; font-size:.68rem; font-weight:600; cursor:help; }
.service-network-unavailable .mud-icon-root { color:#6d7480; font-size:.95rem; }
.service-links { width:max-content; max-width:100%; min-height:29px; margin-top:auto; padding-top:8px; display:flex; align-self:flex-start; align-items:center; gap:7px; }
.service-links+.card-footer { margin-top:12px; padding-top:0; }
.service-resource-link { width:29px; height:29px; display:grid; place-items:center; color:#777d89; background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:8px; transition:.2s ease; }
.service-resource-link:hover { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); background:color-mix(in srgb,var(--accent) 8%,transparent); }
.service-resource-link .mud-icon-root { font-size:.95rem; }
.card-footer a span { color:var(--accent); font-size:1rem; }
.empty-state { min-height:280px; display:grid; place-content:center; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:15px; }
.empty-state>div { font-size:2rem; }
.empty-state h3 { margin:12px 0 5px; color:#d9dbe0; }
.empty-state p { margin:0; font-size:.82rem; }
footer { min-height:75px; display:grid; grid-template-columns:repeat(3,1fr); align-items:center; color:#464c57; border-top:1px solid var(--line); font-family:"DM Mono",monospace; font-size:.61rem; letter-spacing:.08em; }
footer span:nth-child(2) { text-align:center; }
footer span:last-child { text-align:right; }
footer .live-dot { margin-right:7px; }
.viewer-shell { height:100vh; display:flex; flex-direction:column; background:#080a0f; }
.viewer-bar { min-height:72px; padding:0 22px; display:flex; align-items:center; gap:18px; background:#0e1117; border-bottom:1px solid var(--line); }
.viewer-back { width:38px; height:38px; display:grid; place-items:center; color:#aeb2bc; border:1px solid var(--line); border-radius:10px; }
.viewer-title { min-width:0; flex:1; display:flex; align-items:center; gap:12px; }
.viewer-icon { --accent:#8b5cf6; width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border-radius:9px; }
.viewer-title div { min-width:0; }
.viewer-title strong,.viewer-title small { display:block; }
.viewer-title strong { font-size:.85rem; }
.viewer-title small { max-width:50vw; margin-top:3px; overflow:hidden; color:var(--muted); font-family:"DM Mono",monospace; font-size:.6rem; text-overflow:ellipsis; white-space:nowrap; }
.external-link { padding:10px 13px; color:#d8dae0; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:9px; font-size:.72rem; }
.frame-notice { padding:7px 20px; color:#8a8f9a; background:#12151c; border-bottom:1px solid var(--line); font-size:.67rem; text-align:center; }
.viewer-shell iframe { width:100%; flex:1; background:#fff; border:0; }
.viewer-error { min-height:100vh; display:grid; place-content:center; text-align:center; }
.viewer-error a { color:var(--green); }
#blazor-error-ui { display:none; position:fixed; z-index:1000; inset:auto 16px 16px 16px; padding:14px 48px 14px 16px; color:#fff; background:#32161b; border:1px solid #74323b; border-radius:10px; }
#blazor-error-ui .reload { margin-left:8px; text-decoration:underline; }
#blazor-error-ui .dismiss { position:absolute; right:15px; cursor:pointer; }
.blazor-error-boundary { padding:1rem; color:#fff; background:#6b2029; }
h1:focus { outline:none; }
@media (max-width:900px) { .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .service-search.expanded { width:min(280px,46vw); } }
@media (max-width:600px) { .dashboard-shell { padding-inline:18px; } .topbar { height:72px; } main { padding-top:28px; } .hero { padding:58px 0 54px; } .hero h1 { font-size:clamp(2.7rem,14vw,4rem); } .controls { gap:10px; } .controls.search-open { grid-template-columns:1fr; } .controls.search-open .categories { display:none; } .controls.search-open .service-search { width:100%; } .categories { width:100%; padding-bottom:3px; scroll-padding-inline:0; scroll-snap-type:x proximity; } .category-pill { scroll-snap-align:start; } .services-section { padding:20px 0 70px; } .section-heading { margin-bottom:16px; } .service-grid { grid-template-columns:1fr; grid-auto-rows:auto; gap:12px; } .service-card { height:auto; min-height:176px; padding:18px; border-radius:13px; } .service-card.has-links { min-height:208px; } .service-card.has-extra { min-height:220px; } .service-card:hover { transform:none; } .service-identity { gap:14px; } .service-icon { width:56px; height:56px; flex-basis:56px; border-radius:13px; } .card-content h3 { font-size:1.05rem; } .card-content p { font-size:.72rem; -webkit-line-clamp:1; } .service-extra-slot { margin-top:12px; } .jellyfin-popover { top:104px; right:12px; bottom:auto; left:12px; } .service-links { padding-top:7px; } .card-footer { padding-top:12px; } footer { grid-template-columns:1fr auto; } footer span:nth-child(2) { display:none; } kbd { display:none; } .external-link { font-size:0; } .external-link::after { content:"↗"; font-size:1rem; } }
@media (max-width:400px) { .dashboard-shell { padding-inline:12px; } .service-card { padding:16px; } .service-identity { gap:12px; } .service-icon { width:52px; height:52px; flex-basis:52px; } .jellyfin-compact,.jellyfin-widget summary { gap:8px; padding-inline:8px; } .jellyfin-popover { top:96px; right:10px; bottom:auto; left:10px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }


/* MudBlazor integration: keep the dashboard's original visual language. */
.mud-popover-provider { font-family:"Manrope",system-ui,sans-serif; }
.mud-tooltip { font-family:"Manrope",system-ui,sans-serif; font-size:.7rem; background:#20242d; border:1px solid var(--line); }
.search .mud-icon-root { flex:0 0 auto; color:#858b99; }
.search .search-input { min-width:0; flex:1; margin:0; }
.search .mud-input-control { margin:0; }
.search .mud-input { margin:0; padding:0; color:var(--text); font-size:.86rem; }
.search .mud-input:before,.search .mud-input:after { display:none!important; }
.search .mud-input-slot { padding:0!important; }
.mud-button-root.category-pill { min-width:0; padding:9px 14px; color:#747a87; border:1px solid transparent; border-radius:9px; font-family:"Manrope",system-ui,sans-serif; font-size:.76rem; font-weight:600; line-height:1; text-transform:none; }
.mud-button-root.category-pill:hover { color:#c5c8d0; background:rgba(255,255,255,.025); }
.mud-button-root.category-pill.active { color:#fff; background:rgba(255,255,255,.055); border-color:var(--line); }
.mud-icon-button.icon-button { padding:0; color:#b6bac4; }
.mud-icon-button.icon-button:hover { color:#fff; background:rgba(255,255,255,.08); }
.card-footer a .mud-icon-root { color:var(--accent); font-size:1rem; }
.mud-snackbar { color:#f4f5f7; background:#171b23; border:1px solid var(--line); box-shadow:0 18px 50px rgba(0,0,0,.35); }

/* Administration */
.admin-shell { width:min(1480px,100%); min-height:100vh; margin:0 auto; padding:0 clamp(20px,4vw,64px); }
.admin-topbar { height:80px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); }
.admin-back { width:max-content; display:flex; align-items:center; gap:8px; color:#8b919d; font-size:.76rem; transition:color .2s; }
.admin-back:hover { color:#fff; }
.admin-brand { display:flex; align-items:center; gap:12px; font-size:.75rem; font-weight:800; letter-spacing:.2em; }
.admin-topbar>.primary-action { justify-self:end; }
.mud-button-root.primary-action { color:#080a0f; background:#f0f1f4; border-radius:9px; box-shadow:none; text-transform:none; }
.mud-button-root.primary-action:hover { color:#080a0f; background:#fff; box-shadow:0 8px 24px rgba(255,255,255,.12); }
.admin-main { padding:54px 0 80px; }
.admin-heading { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:34px; }
.admin-kicker { color:#7f8490; font-family:"DM Mono",monospace; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; }
.admin-heading h1 { margin:7px 0 6px; font-size:clamp(2.1rem,4vw,3.4rem); letter-spacing:-.055em; }
.admin-heading p { margin:0; color:#7d838f; font-size:.86rem; }
.service-total { color:#5f6570; font-family:"DM Mono",monospace; font-size:.67rem; }
.configuration-actions { display:flex; align-items:center; justify-content:flex-end; gap:9px; flex-wrap:wrap; }
.configuration-actions .service-total { margin-right:6px; }
.configuration-actions .mud-button-root { text-transform:none; }
.configuration-file-input { display:none; }
.admin-workspace { min-height:650px; display:grid; grid-template-columns:minmax(260px,330px) minmax(0,1fr); overflow:hidden; background:rgba(255,255,255,.018); border:1px solid var(--line); border-radius:16px; }
.service-list-panel { padding:22px 13px; background:rgba(0,0,0,.12); border-right:1px solid var(--line); }
.panel-label { padding:0 11px 14px; color:#5f6570; font-family:"DM Mono",monospace; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; }
.admin-service-list { display:flex; flex-direction:column; gap:4px; }
.admin-service-item { position:relative; width:100%; min-width:0; display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; color:inherit; background:transparent; border:1px solid transparent; border-radius:11px; transition:opacity .18s ease,background .18s ease,border-color .18s ease,transform .18s ease; }
.admin-service-item:hover { background:rgba(255,255,255,.03); }
.admin-service-item.selected { background:rgba(255,255,255,.055); border-color:var(--line); }
.admin-service-item.dragging { opacity:.38; }
.admin-service-item.drag-target { border-color:rgba(255,255,255,.38); transform:translateY(2px); }
.admin-service-select { min-width:0; padding:11px 5px; display:flex; align-items:center; gap:11px; color:inherit; text-align:left; background:transparent; border:0; cursor:pointer; }
.service-drag-handle { width:22px; height:38px; display:grid; place-items:center; color:#4f5560; cursor:grab; touch-action:none; transition:color .18s ease; }
.service-drag-handle:hover { color:#d5d8df; }
.service-drag-handle:active { cursor:grabbing; }
.service-drag-handle .mud-icon-root { font-size:1.05rem; }
.service-ordering-active { cursor:grabbing; user-select:none; }
.service-order-actions { padding-right:4px; display:flex; opacity:0; pointer-events:none; transition:opacity .18s ease; }
.admin-service-item:hover .service-order-actions,.admin-service-item:focus-within .service-order-actions { opacity:1; pointer-events:auto; }
.service-order-actions .mud-icon-button { width:25px; height:25px; padding:3px; color:#777e89; }
.service-order-actions .mud-icon-button:hover { color:#fff; background:rgba(255,255,255,.07); }
.admin-service-icon { --accent:#8b5cf6; width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 20%,transparent); border-radius:10px; font-family:"DM Mono",monospace; font-size:.76rem; }
.admin-service-copy { min-width:0; flex:1; }
.admin-service-copy strong,.admin-service-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-service-copy strong { color:#dddfe4; font-size:.78rem; }
.admin-service-copy small { margin-top:3px; color:#666c77; font-size:.64rem; }
.mini-status { width:6px; height:6px; flex:0 0 auto; border-radius:50%; background:#565c67; }
.mini-status.online { background:var(--green); box-shadow:0 0 10px rgba(61,220,151,.5); }
.mini-status.offline { background:#ef6672; }
.mini-status.checking { animation:pulse 1s infinite alternate; }
.disabled-badge { padding:3px 5px; color:#6f7580; border:1px solid var(--line); border-radius:5px; font-family:"DM Mono",monospace; font-size:.52rem; text-transform:uppercase; }
.editor-panel { min-width:0; padding:clamp(25px,4vw,48px); }
.editor-placeholder { min-height:520px; display:flex; align-items:center; justify-content:center; flex-direction:column; color:#5f6570; text-align:center; }
.editor-placeholder h2 { margin:18px 0 7px; color:#d8dae0; font-size:1.1rem; }
.editor-placeholder p { margin:0 0 22px; font-size:.78rem; }
.editor-heading { min-height:60px; padding-bottom:26px; display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--line); }
.editor-preview { --accent:#8b5cf6; width:48px; height:48px; display:grid; place-items:center; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 24%,transparent); border-radius:12px; }
.editor-heading>div:nth-child(2) { min-width:0; flex:1; }
.editor-heading span { color:#666c77; font-family:"DM Mono",monospace; font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; }
.editor-heading h2 { margin:3px 0 0; overflow:hidden; font-size:1.2rem; text-overflow:ellipsis; white-space:nowrap; }
.mud-icon-button.delete-button { color:#d4616c; }
.mud-icon-button.delete-button:hover { background:rgba(239,102,114,.1); }
.form-section { padding:27px 0 4px; }
.form-section+.form-section { margin-top:14px; border-top:1px solid var(--line); }
.form-section h3 { margin:0 0 18px; color:#8d929d; font-family:"DM Mono",monospace; font-size:.63rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase; }
.form-section-heading { min-height:34px; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.form-section-heading h3 { margin:0; }
.form-section-heading .mud-button-root { text-transform:none; }
.card-type-description { margin-top:11px; padding:13px 14px; display:flex; align-items:center; gap:11px; color:#818793; background:rgba(255,255,255,.018); border:1px solid var(--line); border-radius:10px; }
.card-type-description .mud-icon-root { color:#9b79ee; }
.card-type-description strong,.card-type-description span { display:block; }
.card-type-description strong { color:#d3d5db; font-size:.75rem; }
.card-type-description span { margin-top:3px; font-size:.65rem; }
.integration-settings { margin-top:16px; }
.api-diagnostic-panel { margin-top:16px; padding:15px; background:rgba(255,255,255,.015); border:1px solid var(--line); border-radius:11px; }
.api-diagnostic-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.api-diagnostic-heading>div { min-width:0; }
.api-diagnostic-heading strong,.api-diagnostic-heading span { display:block; }
.api-diagnostic-heading strong { color:#cfd2d8; font-size:.74rem; }
.api-diagnostic-heading span { margin-top:4px; color:#606773; font-size:.63rem; line-height:1.4; }
.api-diagnostic-heading .mud-button-root { flex:0 0 auto; text-transform:none; }
.api-diagnostic-result { margin-top:14px; padding:13px; background:rgba(0,0,0,.13); border:1px solid var(--line); border-radius:9px; }
.api-diagnostic-result.success { border-color:rgba(61,220,151,.2); }
.api-diagnostic-result.failure { border-color:rgba(239,102,114,.22); }
.api-diagnostic-address>span,.api-diagnostic-grid span { display:block; margin-bottom:5px; color:#59606c; font:500 .55rem/1 "DM Mono",monospace; letter-spacing:.07em; text-transform:uppercase; }
.api-diagnostic-address code { display:block; overflow:hidden; color:#aeb3bd; font:.64rem/1.4 "DM Mono",monospace; text-overflow:ellipsis; white-space:nowrap; }
.api-diagnostic-grid { margin-top:12px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.api-diagnostic-grid>div { min-width:0; padding:10px; background:rgba(255,255,255,.018); border-radius:7px; }
.api-diagnostic-grid strong { color:#cfd2d8; font-size:.68rem; }
.api-diagnostic-grid .auth-success { color:var(--green); }
.api-diagnostic-grid .auth-failure { color:#ef6672; }
.api-diagnostic-grid .auth-unknown { color:#d4a157; }
.api-diagnostic-metrics { margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
.api-diagnostic-metrics span { padding:5px 7px; color:#747b87; background:rgba(255,255,255,.022); border:1px solid var(--line); border-radius:6px; font-size:.58rem; }
.api-diagnostic-metrics strong { margin-right:3px; color:#c9cdd5; font-family:"DM Mono",monospace; font-weight:500; }
.api-diagnostic-error { margin-top:10px; padding:8px 9px; color:#d99191; background:rgba(239,102,114,.055); border-radius:7px; font-size:.64rem; line-height:1.45; }
@media (max-width:600px) { .api-diagnostic-heading { align-items:flex-start; flex-direction:column; } .api-diagnostic-heading .mud-button-root { width:100%; } .api-diagnostic-grid { grid-template-columns:1fr; } }
.links-empty-state { padding:19px; color:#656b77; background:rgba(255,255,255,.015); border:1px dashed var(--line); border-radius:10px; font-size:.72rem; text-align:center; }
.link-editor-list { display:flex; flex-direction:column; gap:10px; }
.link-editor-item { padding:14px; background:rgba(255,255,255,.018); border:1px solid var(--line); border-radius:11px; }
.link-editor-title { min-height:28px; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; }
.link-editor-title>span { color:#6f7581; font-family:"DM Mono",monospace; font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; }
.link-editor-title .mud-icon-button { color:#767c87; }
.link-columns { grid-template-columns:.78fr 1fr 1.55fr; }
.link-editor-item>.mud-input-control { margin-top:13px; }
.form-grid { display:grid; gap:15px; }
.form-grid.two-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-grid.three-columns { grid-template-columns:1.25fr .65fr .8fr; }
.form-grid+.mud-input-control,.mud-input-control+.form-grid,.form-grid+.form-grid { margin-top:15px; }
.form-bottom-row { align-items:center; }
.display-settings-grid { align-items:start; }
.icon-upload-field { margin:18px 0 5px; padding:16px; background:rgba(255,255,255,.018); border:1px solid var(--line); border-radius:11px; }
.field-label,.field-help,.field-error { display:block; }
.field-label { margin-bottom:11px; color:#777d88; font-size:.76rem; }
.field-help { margin-top:8px; color:#555b67; font-size:.62rem; }
.field-error { margin-top:7px; color:#ef6672; font-size:.68rem; }
.icon-upload-control { display:flex; align-items:center; gap:12px; }
.icon-upload-preview { --accent:#8b5cf6; width:52px; height:52px; flex:0 0 auto; display:grid; place-items:center; overflow:hidden; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 24%,transparent); border-radius:12px; }
.icon-upload-button { min-height:38px; padding:8px 13px; display:inline-flex; align-items:center; gap:8px; color:#c7cad1; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:9px; font-size:.73rem; cursor:pointer; transition:.2s ease; }
.icon-upload-button:hover { color:#fff; border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.055); }
.icon-file-input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; clip-path:inset(50%); }
.icon-upload-field .mud-button-root { text-transform:none; }
.editor-panel .mud-input-control>.mud-input-control-input-container>.mud-input-label { color:#777d88; font-size:.8rem; }
.editor-panel .mud-input-outlined-border { border-color:var(--line); border-radius:10px; }
.editor-panel .mud-input-outlined:hover .mud-input-outlined-border { border-color:rgba(255,255,255,.18); }
.editor-panel .mud-input-outlined.mud-input-focused .mud-input-outlined-border { border-color:#8b5cf6; }
.editor-panel .mud-input { font-family:"Manrope",system-ui,sans-serif; font-size:.82rem; }
.editor-panel .mud-input-helper-text { color:#555b67; font-size:.62rem; }
.test-alert { margin-top:15px; }
.form-actions { margin-top:32px; padding-top:24px; display:flex; align-items:center; justify-content:flex-end; gap:9px; border-top:1px solid var(--line); }
.form-actions .mud-button-root { text-transform:none; }
.admin-shell .mud-alert { border-radius:10px; font-size:.76rem; }
.admin-shell .mud-switch-label { color:#a1a6b0; font-size:.78rem; }
@media (max-width:850px) { .admin-workspace { grid-template-columns:1fr; } .service-list-panel { border-right:0; border-bottom:1px solid var(--line); } .admin-service-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .editor-placeholder { min-height:260px; } }
@media (max-width:600px) { .admin-shell { padding-inline:14px; } .admin-topbar { grid-template-columns:auto 1fr auto; gap:8px; } .admin-brand { justify-self:center; } .admin-brand>span:last-child,.admin-back span,.admin-topbar>.primary-action .mud-button-label { font-size:0; } .admin-topbar>.primary-action { min-width:40px; padding:10px; } .admin-heading { align-items:flex-start; flex-direction:column; gap:12px; } .configuration-actions { width:100%; justify-content:flex-start; } .configuration-actions .service-total { width:100%; margin:0 0 2px; } .admin-service-list { grid-template-columns:1fr; } .editor-panel { padding:24px 17px; } .form-grid.two-columns,.form-grid.three-columns { grid-template-columns:1fr; } .form-actions { align-items:stretch; flex-direction:column-reverse; } .form-actions .mud-button-root { width:100%; } .icon-upload-control { align-items:flex-start; flex-wrap:wrap; } .link-columns { grid-template-columns:1fr; } .form-section-heading { align-items:flex-start; flex-direction:column; } }

/* Monitoring */
.status.degraded,.table-status.degraded { color:#f0a34a; }
.status.unauthorized,.table-status.unauthorized { color:#c98cf5; }
.status.certificateerror,.table-status.certificateerror { color:#f06f8c; }
.status.offline,.table-status.offline { color:#ef6672; }
.live-dot.problem { background:#ef6672; box-shadow:0 0 14px rgba(239,102,114,.7); }
.system-health { display:flex; align-items:center; gap:8px; padding:7px 10px; color:#8b919c; background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:9px; font-family:"DM Mono",monospace; font-size:.62rem; transition:.2s ease; }
.system-health:hover { color:#fff; border-color:rgba(255,255,255,.17); }
.system-health-dot { width:6px; height:6px; border-radius:50%; background:#707682; }
.system-health.healthy .system-health-dot { background:var(--green); box-shadow:0 0 10px rgba(61,220,151,.6); }
.system-health.problem { color:#d77a83; }
.system-health.problem .system-health-dot { background:#ef6672; box-shadow:0 0 10px rgba(239,102,114,.55); }
.system-health.checking .system-health-dot { background:#d8a44d; animation:pulse 1s infinite alternate; }
.monitoring-shell { width:min(1480px,100%); min-height:100vh; margin:0 auto; padding:0 clamp(20px,4vw,64px); }
.monitoring-actions { justify-self:end; display:flex; gap:8px; }
.monitoring-main { padding:54px 0 90px; }
.health-overview { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.metric-card { min-height:145px; padding:22px; display:flex; flex-direction:column; background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.016)); border:1px solid var(--line); border-radius:14px; }
.metric-card>span { color:#676d78; font-family:"DM Mono",monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; }
.metric-card strong { margin:auto 0 3px; font-size:2.35rem; line-height:1; letter-spacing:-.06em; }
.metric-card strong em { margin-left:3px; color:#686e79; font-family:"DM Mono",monospace; font-size:.72rem; font-style:normal; letter-spacing:0; }
.metric-card small { color:#666c77; font-size:.68rem; }
.metric-card.healthy strong { color:var(--green); }
.metric-card.problem { border-color:rgba(239,102,114,.22); background:linear-gradient(145deg,rgba(239,102,114,.07),rgba(255,255,255,.012)); }
.metric-card.problem strong { color:#ef6672; }
.monitoring-panel { overflow:hidden; background:rgba(255,255,255,.018); border:1px solid var(--line); border-radius:15px; }
.monitoring-section-title { min-height:76px; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.monitoring-section-title h2 { margin:0 0 4px; font-size:.84rem; letter-spacing:.01em; }
.monitoring-section-title p { margin:0; color:#626874; font-size:.66rem; }
.health-table { width:100%; }
.health-table-header,.health-table-row { display:grid; grid-template-columns:1.4fr 1fr .85fr 1fr 1.15fr; align-items:center; gap:16px; }
.health-table-header { min-height:42px; padding:0 22px; color:#535965; background:rgba(0,0,0,.13); border-bottom:1px solid var(--line); font-family:"DM Mono",monospace; font-size:.57rem; letter-spacing:.07em; text-transform:uppercase; }
.health-table-row { width:100%; min-height:68px; padding:9px 22px; color:#aeb2bb; text-align:left; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.055); cursor:pointer; transition:.18s ease; }
.health-table-row:last-child { border-bottom:0; }
.health-table-row:hover,.health-table-row.selected { background:rgba(255,255,255,.032); }
.health-table-row.selected { box-shadow:inset 2px 0 #8b5cf6; }
.health-service { min-width:0; display:flex; align-items:center; gap:10px; }
.health-service .admin-service-icon { width:35px; height:35px; font-style:normal; }
.health-service b { overflow:hidden; color:#d9dbe0; font-size:.75rem; text-overflow:ellipsis; white-space:nowrap; }
.table-status { display:flex; align-items:center; gap:7px; color:#6f7580; font-family:"DM Mono",monospace; font-size:.6rem; text-transform:uppercase; }
.table-status i { width:5px; height:5px; border-radius:50%; background:currentColor; }
.table-status.online { color:var(--green); }
.table-status.checking i { animation:pulse 1s infinite alternate; }
.table-mono { color:#747a86; font-family:"DM Mono",monospace; font-size:.61rem; }
.uptime-cell { display:grid; grid-template-columns:45px 1fr; align-items:center; gap:9px; }
.uptime-cell b { color:#9ba0aa; font-family:"DM Mono",monospace; font-size:.62rem; font-weight:400; }
.uptime-cell .mud-progress-linear { height:3px; border-radius:3px; }
.monitoring-lower-grid { margin-top:18px; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.75fr); gap:18px; }
.history-panel,.settings-panel { min-height:430px; }
.history-empty { min-height:320px; display:grid; place-items:center; color:#5e6470; font-size:.72rem; }
.history-timeline { height:72px; padding:24px 22px; display:flex; align-items:stretch; gap:3px; border-bottom:1px solid var(--line); }
.history-mark { min-width:3px; flex:1; max-width:12px; background:#5b616d; border-radius:2px; }
.history-mark.online { background:var(--green); }
.history-mark.degraded { background:#f0a34a; }
.history-mark.unauthorized { background:#c98cf5; }
.history-mark.certificateerror,.history-mark.offline { background:#ef6672; }
.history-list { padding:8px 22px 18px; }
.history-row { min-height:42px; display:grid; grid-template-columns:135px 1fr auto; align-items:center; gap:14px; border-bottom:1px solid rgba(255,255,255,.05); color:#757b86; font-size:.65rem; }
.history-row:last-child { border-bottom:0; }
.history-row time { color:#565c67; font-family:"DM Mono",monospace; }
.monitoring-settings-form { padding:22px; display:flex; flex-direction:column; gap:17px; }
.monitoring-settings-form .mud-input-label { color:#777d88; }
.monitoring-settings-form .mud-input-outlined-border { border-color:var(--line); border-radius:10px; }
.monitoring-settings-form .mud-button-root { align-self:flex-end; margin-top:5px; }
@media (max-width:1000px) { .health-overview { grid-template-columns:repeat(2,minmax(0,1fr)); } .monitoring-lower-grid { grid-template-columns:1fr; } }
@media (max-width:760px) { .monitoring-shell { padding-inline:14px; } .monitoring-main { padding-top:36px; } .health-table { overflow-x:auto; } .health-table-header,.health-table-row { min-width:780px; } .health-table { display:block; } .monitoring-section-title { padding-inline:16px; } .history-list { padding-inline:16px; } }
@media (max-width:600px) { .system-health-text { display:none; } .system-health { padding:9px; } .health-overview { grid-template-columns:repeat(2,minmax(0,1fr)); } .metric-card { min-height:120px; padding:17px; } .metric-card strong { font-size:1.9rem; } .monitoring-heading { margin-bottom:25px; } .history-row { grid-template-columns:115px 1fr; } .history-row time { display:none; } }

.mini-status.degraded { background:#f0a34a; }
.mini-status.unauthorized { background:#c98cf5; }
.mini-status.certificateerror { background:#ef6672; }
/* NAS system overview */
.nas-overview { margin-bottom:38px; }
.nas-overview-heading { margin-bottom:17px; display:flex; align-items:flex-end; justify-content:space-between; }
.nas-overview-heading>div>span { color:#596170; font:500 .59rem/1 "DM Mono",monospace; letter-spacing:.13em; }
.nas-overview-heading h2 { margin:7px 0 0; font-size:1rem; letter-spacing:-.02em; }
.nas-overview-heading>small { display:flex; align-items:center; gap:7px; color:#596170; font:400 .58rem/1 "DM Mono",monospace; }
.nas-overview-heading>small i { width:5px; height:5px; background:var(--green); border-radius:50%; box-shadow:0 0 9px rgba(61,220,151,.45); }
.nas-overview-heading>small.has-error { color:#a47d55; }
.nas-overview-heading>small.has-error i { background:#e5a14e; box-shadow:0 0 9px rgba(229,161,78,.4); }
.nas-metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.nas-metric-widget { --metric-color:#8b5cf6; min-width:0; min-height:126px; padding:17px 18px 15px; position:relative; overflow:hidden; background:linear-gradient(145deg,rgba(255,255,255,.034),rgba(255,255,255,.014)); border:1px solid var(--line); border-radius:14px; }
.nas-metric-widget::after { content:""; width:90px; height:90px; position:absolute; top:-48px; right:-38px; background:radial-gradient(circle,color-mix(in srgb,var(--metric-color) 16%,transparent),transparent 70%); pointer-events:none; }
.nas-metric-widget.state-warning { --metric-color:#e5a14e; }
.nas-metric-widget.state-critical { --metric-color:#ef6672; border-color:color-mix(in srgb,#ef6672 25%,var(--line)); }
.nas-metric-widget.is-switchable { cursor:pointer; user-select:none; transition:background .18s ease,border-color .18s ease,box-shadow .18s ease; }
.nas-metric-widget.is-switchable:hover { background:linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.022)); border-color:color-mix(in srgb,var(--metric-color) 28%,var(--line)); }
.nas-metric-widget.is-switchable:focus-visible { outline:2px solid color-mix(in srgb,var(--metric-color) 65%,white); outline-offset:3px; }
.nas-metric-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#6e7581; font-size:.66rem; }
.nas-metric-icons { display:flex; align-items:center; gap:7px; }
.nas-metric-heading .mud-icon-root { color:var(--metric-color); font-size:1.05rem; }
.nas-metric-heading .nas-metric-switch-icon { opacity:.42; font-size:.9rem; transition:opacity .18s ease; }
.nas-metric-widget.is-switchable:hover .nas-metric-switch-icon,.nas-metric-widget.is-switchable:focus-visible .nas-metric-switch-icon { opacity:1; }
.nas-metric-widget>strong { margin-top:13px; display:block; overflow:hidden; color:#eef0f3; font-size:1.35rem; line-height:1.1; letter-spacing:-.04em; text-overflow:ellipsis; white-space:nowrap; }
.nas-metric-widget>small { min-height:16px; margin-top:7px; display:block; overflow:hidden; color:#555d6b; font:400 .56rem/1.4 "DM Mono",monospace; text-overflow:ellipsis; white-space:nowrap; }
.nas-metric-progress { height:3px; margin-top:12px; overflow:hidden; background:rgba(255,255,255,.055); border-radius:3px; }
.nas-metric-progress i { height:100%; display:block; background:var(--metric-color); border-radius:inherit; box-shadow:0 0 8px color-mix(in srgb,var(--metric-color) 45%,transparent); transition:width .35s ease; }
.nas-overview-empty { min-height:88px; margin-bottom:38px; padding:18px 20px; display:flex; align-items:center; gap:15px; color:#596170; background:rgba(255,255,255,.014); border:1px dashed var(--line); border-radius:14px; }
.nas-overview-empty>.mud-icon-root { color:#636b79; font-size:1.45rem; }
.nas-overview-empty strong,.nas-overview-empty span { display:block; }
.nas-overview-empty strong { color:#a8adb6; font-size:.73rem; }
.nas-overview-empty span { margin-top:5px; font-size:.64rem; line-height:1.45; }
@media (max-width:900px) { .nas-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .nas-overview { margin-bottom:30px; } .nas-overview-heading { align-items:flex-start; flex-direction:column; gap:10px; } .nas-metric-grid { gap:8px; } .nas-metric-widget { min-height:116px; padding:15px; } .nas-metric-widget>strong { font-size:1.15rem; } .nas-overview-empty { margin-bottom:30px; } }
@media (max-width:390px) { .nas-metric-grid { grid-template-columns:1fr; } }

/* User connection guides */
.guide-shell { --guide-accent:#8b5cf6; width:min(1180px,100%); min-height:100vh; margin:0 auto; padding:0 clamp(24px,5vw,64px) 80px; }
.guide-topbar { height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.guide-topbar-actions { display:flex; align-items:center; gap:12px; }
.guide-back { min-height:38px; padding:0 12px; display:flex; align-items:center; gap:8px; color:#8c929e; background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:10px; font-size:.7rem; font-weight:600; transition:.2s ease; }
.guide-back:hover { color:#fff; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); }
.guide-main,.guides-index { padding-top:clamp(46px,7vw,78px); }
.guide-kicker { color:var(--guide-accent,#8b5cf6); font:500 .62rem/1 "DM Mono",monospace; letter-spacing:.14em; text-transform:uppercase; }
.guides-index h1 { margin:12px 0 8px; font-size:clamp(2.3rem,5vw,4.3rem); line-height:1; letter-spacing:-.055em; }
.guide-lead { max-width:620px; margin:0; color:#7f8592; font-size:.9rem; line-height:1.65; }
.guide-catalog { margin-top:42px; display:grid; gap:12px; }
.guide-catalog-card { --guide-accent:#8b5cf6; min-height:108px; padding:20px 22px; display:grid; grid-template-columns:58px minmax(0,1fr) auto 24px; align-items:center; gap:18px; background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.015)); border:1px solid var(--line); border-radius:15px; transition:.22s ease; }
.guide-catalog-card:hover { border-color:color-mix(in srgb,var(--guide-accent) 35%,var(--line)); background:linear-gradient(145deg,color-mix(in srgb,var(--guide-accent) 7%,#11141b),#0d1016); transform:translateY(-2px); }
.guide-catalog-icon { width:58px; height:58px; display:grid; place-items:center; color:var(--guide-accent); background:color-mix(in srgb,var(--guide-accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--guide-accent) 24%,transparent); border-radius:14px; }
.guide-catalog-icon .mud-icon-root { font-size:1.65rem; }
.guide-catalog-icon .service-icon-image { width:76%; height:76%; object-fit:contain; }
.guide-catalog-copy { min-width:0; display:grid; gap:5px; }
.guide-catalog-copy strong { font-size:1.05rem; }
.guide-catalog-copy small { overflow:hidden; color:#747b87; font-size:.73rem; text-overflow:ellipsis; white-space:nowrap; }
.guide-catalog-state { color:#7fae99; font:500 .58rem/1 "DM Mono",monospace; text-transform:uppercase; }
.guide-catalog-state.not-configured { color:#666d79; }
.guide-catalog-arrow { color:var(--guide-accent); transition:transform .2s; }
.guide-catalog-card:hover .guide-catalog-arrow { transform:translateX(3px); }
.guide-hero { display:flex; align-items:center; gap:24px; }
.guide-icon { width:86px; height:86px; display:grid; flex:0 0 86px; place-items:center; color:var(--guide-accent); background:color-mix(in srgb,var(--guide-accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--guide-accent) 26%,transparent); border-radius:21px; box-shadow:0 0 45px color-mix(in srgb,var(--guide-accent) 10%,transparent); }
.guide-icon .mud-icon-root { font-size:2.4rem; }
.guide-icon .service-icon-image { width:76%; height:76%; object-fit:contain; }
.guide-hero h1 { margin:8px 0 6px; font-size:clamp(2.4rem,5vw,4rem); line-height:1; letter-spacing:-.055em; }
.guide-hero p { max-width:680px; margin:0; color:#7e8490; font-size:.86rem; line-height:1.55; }
.guide-address-panel { margin-top:42px; padding:22px; background:linear-gradient(145deg,color-mix(in srgb,var(--guide-accent) 7%,#11141a),#0d1016); border:1px solid color-mix(in srgb,var(--guide-accent) 22%,var(--line)); border-radius:15px; }
.guide-address-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.guide-address-heading>div { display:grid; gap:4px; }
.guide-address-heading>div>span { color:#626976; font:500 .56rem/1 "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }
.guide-address-heading strong { font-size:.86rem; }
.guide-network-badge { padding:7px 9px; display:flex; align-items:center; gap:7px; color:#858c98; background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:8px; font:500 .57rem/1 "DM Mono",monospace; }
.guide-network-badge i { width:6px; height:6px; background:var(--guide-accent); border-radius:50%; box-shadow:0 0 9px var(--guide-accent); }
.guide-address-list { margin-top:17px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.guide-address-option { min-width:0; padding:12px; background:rgba(0,0,0,.12); border:1px solid var(--line); border-radius:11px; transition:.2s ease; }
.guide-address-option.active { border-color:color-mix(in srgb,var(--guide-accent) 38%,var(--line)); background:color-mix(in srgb,var(--guide-accent) 5%,rgba(0,0,0,.16)); }
.guide-address-option.unavailable { opacity:.58; }
.guide-address-option.unavailable .guide-address-value { color:#5f6672; border-style:dashed; }
.guide-address-option-heading { min-height:20px; display:flex; align-items:center; justify-content:space-between; gap:10px; color:#777e8a; font:500 .6rem/1 "DM Mono",monospace; }
.guide-address-option-heading>span { display:flex; align-items:center; gap:7px; }
.guide-address-option-heading .mud-icon-root { color:var(--guide-accent); font-size:.9rem; }
.guide-address-option-heading small { color:var(--guide-accent); font:500 .54rem/1 "DM Mono",monospace; text-transform:uppercase; }
.guide-address-option .guide-address-value { margin-top:9px; }
.guide-address-value { min-width:0; min-height:52px; margin-top:17px; padding-left:15px; display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.22); border:1px solid var(--line); border-radius:10px; }
.guide-address-value code { min-width:0; flex:1; overflow:hidden; color:#e4e6eb; font:500 .76rem/1.3 "DM Mono",monospace; text-overflow:ellipsis; white-space:nowrap; }
.guide-address-value button { width:50px; align-self:stretch; display:grid; place-items:center; color:#949aa5; background:transparent; border:0; border-radius:9px; cursor:pointer; transition:color .2s,filter .2s; }
.guide-address-value button:hover { color:#fff; background:transparent; filter:drop-shadow(0 0 7px var(--guide-accent)); }
.guide-address-value button .mud-icon-root { font-size:1.05rem; }
.guide-address-alternatives { margin-top:11px; display:flex; flex-wrap:wrap; gap:7px 22px; color:#5e6571; font-size:.59rem; }
.guide-address-alternatives code { color:#777e8a; font-family:"DM Mono",monospace; }
.guide-address-empty { min-height:64px; margin-top:17px; padding:12px 14px; display:flex; align-items:center; gap:12px; color:#656c78; background:rgba(0,0,0,.16); border:1px dashed var(--line); border-radius:10px; }
.guide-address-empty>div { display:grid; gap:3px; }
.guide-address-empty strong { color:#9ba0a9; font-size:.75rem; }
.guide-address-empty span { font-size:.65rem; }
.guide-downloads,.guide-steps-section,.guide-tips { margin-top:52px; }
.guide-section-title { display:grid; grid-template-columns:42px minmax(0,1fr); gap:14px; align-items:start; }
.guide-section-title>span { min-height:29px; display:grid; place-items:center; color:var(--guide-accent); border:1px solid color-mix(in srgb,var(--guide-accent) 30%,var(--line)); border-radius:8px; font:500 .62rem/1 "DM Mono",monospace; }
.guide-section-title>span .mud-icon-root { font-size:1rem; }
.guide-section-title h2 { margin:0; font-size:1rem; letter-spacing:-.02em; }
.guide-section-title p { margin:5px 0 0; color:#676e7a; font-size:.7rem; line-height:1.5; }
.guide-download-grid { margin:18px 0 0 56px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.guide-download-grid a { min-height:58px; padding:0 14px; display:flex; align-items:center; gap:10px; color:#a8adb7; background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:10px; font-size:.69rem; font-weight:600; transition:.2s; }
.guide-download-grid a:hover { color:#fff; border-color:color-mix(in srgb,var(--guide-accent) 32%,var(--line)); background:color-mix(in srgb,var(--guide-accent) 7%,transparent); }
.guide-download-grid a .mud-icon-root:first-child { color:var(--guide-accent); font-size:1.15rem; }
.guide-download-grid a span { flex:1; }
.guide-download-grid a .mud-icon-root:last-child { color:#636a76; font-size:.9rem; }
.guide-step-list { margin:18px 0 0 56px; padding:0; display:grid; list-style:none; border-top:1px solid var(--line); }
.guide-step-list li { padding:17px 0; display:grid; grid-template-columns:29px minmax(0,1fr); gap:12px; border-bottom:1px solid var(--line); }
.guide-step-list li>span { width:25px; height:25px; display:grid; place-items:center; color:#8d939e; background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:50%; font:500 .57rem/1 "DM Mono",monospace; }
.guide-step-list strong { display:block; color:#d4d7dd; font-size:.77rem; }
.guide-step-list p { margin:5px 0 0; color:#707783; font-size:.7rem; line-height:1.55; }
.guide-tips { padding:20px; background:rgba(255,255,255,.018); border:1px dashed var(--line); border-radius:13px; }
.guide-tips ul { margin:17px 0 0 56px; padding:0; display:grid; gap:10px; list-style:none; }
.guide-tips li { position:relative; padding-left:15px; color:#7f8692; font-size:.7rem; line-height:1.5; }
.guide-tips li::before { content:""; position:absolute; top:.58em; left:0; width:5px; height:5px; background:var(--guide-accent); border-radius:50%; }
.guide-official { margin-top:46px; padding-top:20px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:#5f6672; border-top:1px solid var(--line); font-size:.67rem; }
.guide-official a { display:flex; align-items:center; gap:7px; color:#aeb3bc; font-weight:600; }
.guide-official a:hover { color:#fff; }
.guide-official a .mud-icon-root { color:var(--guide-accent); }
.guide-not-found { min-height:100vh; display:grid; place-content:center; justify-items:center; text-align:center; }
.guide-not-found>.mud-icon-root { color:#8b5cf6; font-size:2.5rem; }
.guide-not-found h1 { margin:16px 0; }
.guide-not-found a { color:#a88af4; font-size:.8rem; }
.guide-link { color:color-mix(in srgb,var(--accent) 78%,#fff); }
@media (max-width:700px) {
    .guide-shell { padding-inline:18px; padding-bottom:55px; }
    .guide-topbar { height:72px; }
    .guide-topbar-actions { gap:7px; }
    .guide-topbar-actions .network-selector .mud-button-label { display:none; }
    .guide-back span { display:none; }
    .guide-back { width:38px; padding:0; justify-content:center; }
    .guide-main,.guides-index { padding-top:38px; }
    .guide-catalog-card { grid-template-columns:50px minmax(0,1fr) 20px; min-height:96px; padding:16px; gap:13px; }
    .guide-catalog-icon { width:50px; height:50px; }
    .guide-catalog-state { display:none; }
    .guide-catalog-copy small { display:-webkit-box; white-space:normal; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
    .guide-hero { align-items:flex-start; gap:16px; }
    .guide-icon { width:62px; height:62px; flex-basis:62px; border-radius:15px; }
    .guide-icon .mud-icon-root { font-size:1.8rem; }
    .guide-hero h1 { font-size:2.3rem; }
    .guide-hero p { font-size:.75rem; }
    .guide-address-panel { margin-top:30px; padding:16px; }
    .guide-address-heading { align-items:flex-start; }
    .guide-address-list { grid-template-columns:1fr; }
    .guide-address-alternatives { display:grid; }
    .guide-address-alternatives code { overflow-wrap:anywhere; }
    .guide-downloads,.guide-steps-section,.guide-tips { margin-top:38px; }
    .guide-download-grid { margin-left:0; grid-template-columns:1fr; }
    .guide-step-list { margin-left:0; }
    .guide-tips ul { margin-left:0; }
    .guide-official { align-items:flex-start; flex-direction:column; }
}
@media (max-width:400px) {
    .guide-shell { padding-inline:12px; }
    .guide-address-heading { flex-direction:column; gap:12px; }
    .guide-address-value code { font-size:.67rem; }
}
@media (max-width:600px),(pointer:coarse) { .service-order-actions { opacity:1; pointer-events:auto; } }

/* Compact dashboard header and viewport-safe layout on phones. */
@media (max-width:600px) {
    .dashboard-shell { width:100%; max-width:100%; padding-inline:14px; }
    .topbar { height:68px; gap:10px; }
    .topbar-actions { min-width:0; gap:7px; }
    .desktop-dashboard-action { display:none; }
    .mobile-dashboard-menu { display:block; }
    .mobile-dashboard-menu .mud-button-root { width:38px; min-width:38px; height:38px; padding:0; color:#b6bac4; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:10px; }
    .network-selector .mud-button-root { width:38px; height:38px; padding:0; }
    .network-selector .mud-button-label { font-size:0; }
    .network-selector .mud-button-icon-start { margin:0; }
    main { padding-top:24px; }
}
@media (max-width:400px) {
    .dashboard-shell { padding-inline:10px; }
    .brand { gap:9px; }
    .brand>span:last-child { display:none; }
}
/* Center administrative branding and compact icon-only actions on phones. */
@media (max-width:600px) {
    .desktop-session-action { display:none; }
    .admin-topbar { position:relative; height:68px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .admin-brand { display:none; }
    .monitoring-actions,.admin-topbar>.primary-action { margin-left:auto; }
    .admin-topbar>.primary-action { width:40px; min-width:40px; height:40px; padding:0; }
    .admin-topbar>.primary-action .mud-button-icon-start { position:absolute; top:50%; left:50%; margin:0; transform:translate(-50%,-50%); }
}