:root{
  color-scheme:dark;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-synthesis:none;
  --page:#080b18;
  --page-glow:rgba(54,71,173,.18);
  --text:#f6f7ff;
  --muted:#a4b1d2;
  --soft:#7886ad;
  --line:rgba(147,158,226,.21);
  --header:rgba(10,13,29,.86);
  --card-one:#151a31;
  --card-two:#101426;
  --panel:rgba(18,23,44,.94);
  --search:#12172e;
  --highlight:#b077ff;
  --secondary:#55d6ff;
  --shadow:rgba(1,5,17,.36);
}
:root[data-theme="light"]{
  color-scheme:light;
  --page:#f2f4fc;
  --page-glow:rgba(160,166,250,.24);
  --text:#1a2140;
  --muted:#53617f;
  --soft:#687593;
  --line:rgba(66,79,133,.23);
  --header:rgba(250,251,255,.9);
  --card-one:#fff;
  --card-two:#f3f5fd;
  --panel:rgba(255,255,255,.94);
  --search:#f5f6ff;
  --highlight:#7743d7;
  --secondary:#007fab;
  --shadow:rgba(63,76,125,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse 54% 32% at 51% -10%,var(--page-glow),transparent 77%),radial-gradient(ellipse 35% 24% at 100% 92%,rgba(136,42,175,.09),transparent 78%),var(--page);color:var(--text)}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.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}
.skip-link{position:absolute;top:-80px;left:18px;z-index:100;padding:12px 18px;border-radius:8px;background:#fff;color:#11182b}
.skip-link:focus{top:12px}
.site-shell{width:min(1468px,calc(100% - 48px));margin:auto}
.topbar{height:76px;display:flex;align-items:center;gap:clamp(20px,4vw,72px);border-bottom:1px solid var(--line);position:relative;z-index:5}
.topbar:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(151,107,255,.32) 45%,transparent 85%);pointer-events:none}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;min-width:190px}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.21);border-radius:13px;background:linear-gradient(135deg,#a35af1,#d44cdc);box-shadow:0 0 22px rgba(188,84,255,.32),inset 0 1px 0 rgba(255,255,255,.36);font-size:27px;color:#fff;line-height:1}
.brand-words{display:flex;flex-direction:column;gap:1px}
.brand strong{font-size:23px;line-height:1;letter-spacing:-.055em;font-weight:760}
.brand small{font-size:10px;letter-spacing:.19em;color:var(--muted);font-weight:700}
.main-nav{display:flex;align-self:stretch;align-items:center;gap:6px;white-space:nowrap}
.main-nav a{height:54px;display:flex;align-items:center;gap:10px;position:relative;padding:0 16px;border-radius:12px;color:var(--muted);font-size:13px;font-weight:600;transition:background .2s,color .2s}
.main-nav a:hover{background:rgba(119,95,193,.11);color:var(--text)}
.main-nav .nav-current{color:var(--text);background:linear-gradient(135deg,rgba(102,97,209,.18),rgba(101,79,180,.08))}
.main-nav .nav-current:after{content:"";position:absolute;bottom:1px;left:17px;right:17px;height:2px;border-radius:2px;background:linear-gradient(90deg,#35c9f6,#c45aff);box-shadow:0 0 8px rgba(175,85,255,.8)}
.nav-icon{font-size:19px;line-height:1;color:#c0b4ff}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:14px;min-width:0}
.top-search{height:38px;width:clamp(190px,20vw,280px);display:flex;align-items:center;gap:9px;padding:0 8px 0 12px;border:1px solid var(--line);border-radius:13px;background:var(--search);color:var(--muted);transition:border-color .2s,box-shadow .2s}
.top-search:focus-within{border-color:#9b75e9;box-shadow:0 0 0 3px rgba(160,107,244,.17)}
.top-search svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;flex:0 0 auto}
.top-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:12px}
.top-search input::placeholder{color:var(--soft)}
.top-search input::-webkit-search-cancel-button{filter:grayscale(1)}
.top-search kbd{flex:0 0 auto;border:1px solid var(--line);border-radius:5px;padding:2px 5px;font-size:10px;color:var(--muted);white-space:nowrap}
.theme-toggle{height:36px;width:67px;flex:0 0 auto;border:1px solid rgba(145,126,221,.45);border-radius:20px;background:linear-gradient(90deg,rgba(128,71,218,.21),rgba(38,51,100,.28));padding:3px;display:flex;align-items:center}
.toggle-thumb{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e7dcff;color:#6b44bd;font-size:17px;box-shadow:0 0 10px rgba(184,141,255,.54);transition:transform .22s}
:root[data-theme="light"] .toggle-thumb{transform:translateX(31px);background:#fff0bb;color:#a45e16;box-shadow:0 0 8px rgba(236,176,77,.28)}
.user-chip{display:flex;align-items:center;gap:9px;white-space:nowrap}
.avatar{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border:1px solid #8b57e5;border-radius:50%;background:linear-gradient(145deg,#33215f,#1c2451);color:#fff;font-size:15px}
.user-name{font-size:12px;font-weight:700;display:flex;flex-direction:column}
.user-name small{font-size:10px;color:var(--muted);font-weight:400}
main{padding-top:20px}
.hero{height:270px;border-radius:21px;border:1px solid rgba(120,132,216,.47);overflow:hidden;position:relative;isolation:isolate;background:#11182d url("assets/hero-aurora.webp") center 46%/cover no-repeat;box-shadow:0 17px 46px var(--shadow)}
.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,12,29,.96) 0%,rgba(8,13,32,.89) 28%,rgba(9,16,37,.46) 53%,rgba(9,15,34,.09) 100%),linear-gradient(0deg,rgba(9,11,29,.42),transparent 53%)}
.hero-wave{position:absolute;z-index:-1;pointer-events:none;width:690px;height:310px;border:1px solid rgba(180,86,255,.45);border-radius:50%;transform:rotate(-14deg);filter:drop-shadow(0 0 7px rgba(174,84,245,.65))}
.hero-wave-one{left:35%;top:175px}
.hero-wave-two{left:40%;top:204px;border-color:rgba(90,145,255,.4)}
.hero-copy{height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;position:relative;z-index:1;padding:29px 38px}
.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:740;color:#b7a0ff}
.eyebrow span{font-size:15px;margin-right:8px;vertical-align:-2px}
.hero h1{margin:12px 0 6px;font-size:clamp(32px,3.7vw,52px);line-height:1.07;letter-spacing:-.068em;font-weight:760;color:#fff}
.hero h1 #displayName{background:linear-gradient(90deg,#e9dcff,#80d8ff);color:transparent;background-clip:text;-webkit-background-clip:text}
.hero-period{color:#5edbfa}
.hero p{margin:0;color:#d4def8;font-size:15px;line-height:1.45}
.hero-actions{display:flex;align-items:center;gap:12px;margin-top:22px}
.quick-access{display:flex;align-items:center;gap:10px;min-height:45px;padding:0 17px;border:1px solid rgba(184,126,255,.82);border-radius:13px;background:linear-gradient(120deg,rgba(106,51,178,.78),rgba(45,51,117,.76));color:#fff;box-shadow:0 0 20px rgba(129,70,231,.26);font-size:12px;font-weight:700;white-space:nowrap}
.quick-access:hover{background:linear-gradient(120deg,#8045d1,#394aa8)}
.quick-access span:first-child{font-size:20px;color:#dfc8ff}
.quick-access span:last-child{margin-left:6px;color:#d7c8ff}
.hero-metric{display:flex;align-items:center;gap:9px;min-height:45px;padding:5px 13px;border:1px solid rgba(151,164,230,.22);border-radius:13px;background:rgba(13,20,48,.48);backdrop-filter:blur(5px);color:#fff}
.hero-metric>span:last-child{display:flex;flex-direction:column;gap:1px}
.hero-metric strong{font-size:13px;white-space:nowrap}
.hero-metric small{font-size:10px;color:#b2c0e0;white-space:nowrap}
.metric-symbol{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(131,82,226,.42);color:#d2bdff;font-size:18px}
.hero-status .metric-symbol{background:rgba(37,205,182,.23);color:#62e5ce}
.hero-status[data-status="warning"] .metric-symbol{background:rgba(236,166,66,.22);color:#f6c778}
.hero-status[data-status="unknown"] .metric-symbol{background:rgba(137,151,185,.2);color:#cad2e7}
.applications{padding:29px 3px 0;scroll-margin-top:20px}
.section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:15px}
.section-heading{display:flex;align-items:flex-start;gap:13px}
.section-dot{width:12px;height:12px;margin-top:6px;flex:0 0 auto;border-radius:50%;background:#a56aff;box-shadow:0 0 16px rgba(179,106,255,.68)}
.section-heading h2{margin:0;font-size:22px;line-height:1.15;letter-spacing:-.045em}
.section-heading p{margin:5px 0 0;color:var(--muted);font-size:12px}
.section-controls{display:flex;align-items:center;gap:13px}
.services-count{color:var(--muted);font-size:12px;white-space:nowrap}
.view-toggle{display:flex;align-items:center;padding:3px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}
.view-toggle button{display:grid;place-items:center;height:29px;width:34px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:19px}
.view-toggle button:hover{color:var(--text)}
.view-toggle .is-active{background:linear-gradient(140deg,#2658a9,#663bd4);color:#fff;box-shadow:0 0 9px rgba(80,119,247,.32)}
.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.service-card{--rgb:55,159,255;position:relative;display:block;min-width:0;height:157px;padding:15px 17px;border:1px solid rgba(var(--rgb),.66);border-radius:15px;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 90% 2%,rgba(var(--rgb),.38),transparent 54%),linear-gradient(125deg,var(--card-one),var(--card-two) 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 9px 23px var(--shadow);transition:transform .22s,border-color .22s,box-shadow .22s}
.service-card[data-service-id="paperless"]{--rgb:155,94,245}
.service-card[data-service-id="stirling"]{--rgb:233,77,153}
.service-card[data-service-id="hub"]{--rgb:31,193,216}
.service-card[data-service-id="vault"]{--rgb:143,92,240}
.service-card[data-service-id="karakeep"]{--rgb:243,160,69}
.service-card[data-service-id="meet"]{--rgb:55,126,255}
.service-card[data-service-id="quiz"]{--rgb:179,76,231}
.service-card[data-service-id="ntfy"]{--rgb:224,70,178}
.service-card[data-service-id="uptime"]{--rgb:29,203,158}
.service-card::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,11,26,.58),rgba(7,11,26,.06) 73%);z-index:-1;pointer-events:none}
:root[data-theme="light"] .service-card::before{background:linear-gradient(90deg,rgba(255,255,255,.84),rgba(255,255,255,.14) 90%)}
.service-card:hover{transform:translateY(-3px);border-color:rgb(var(--rgb));box-shadow:0 0 25px rgba(var(--rgb),.19),0 15px 28px var(--shadow)}
.service-card:hover .card-art{transform:translateY(-2px) scale(1.03);opacity:.95}
.card-icon{position:absolute;left:17px;top:15px;width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(var(--rgb),.8);border-radius:11px;background:linear-gradient(145deg,rgba(var(--rgb),.84),rgba(var(--rgb),.36));color:#fff;box-shadow:0 0 16px rgba(var(--rgb),.35);z-index:2}
.card-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.card-art{position:absolute;top:0;right:-11px;width:61%;height:100%;z-index:-1;color:rgb(var(--rgb));opacity:.7;filter:drop-shadow(0 0 8px rgba(var(--rgb),.19));transition:transform .22s,opacity .22s}
.card-copy{position:absolute;left:17px;right:46px;bottom:17px;display:flex;flex-direction:column;gap:5px;z-index:2}
.card-name{font-size:16px;letter-spacing:-.025em;line-height:1.15;font-weight:720;max-width:225px;text-shadow:0 1px 5px rgba(0,0,0,.27)}
.card-description{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-arrow{position:absolute;right:15px;bottom:14px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(121,130,215,.21);color:var(--text);font-size:19px;z-index:2;transition:background .2s,transform .2s}
.service-card:hover .card-arrow{background:rgba(var(--rgb),.3);transform:translateX(2px)}
.service-grid[data-view="list"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.service-grid[data-view="list"] .service-card{height:88px}
.service-grid[data-view="list"] .card-icon{top:23px}
.service-grid[data-view="list"] .card-copy{left:73px;top:24px;bottom:auto}
.service-grid[data-view="list"] .card-art{width:42%;opacity:.35}
.service-grid[data-view="list"] .card-arrow{bottom:27px}
.empty-state,.error-state{margin:20px 0;padding:28px;border:1px solid var(--line);border-radius:15px;background:var(--panel);text-align:center}
.empty-state strong,.error-state strong{font-size:16px}
.empty-state p,.error-state p{margin:6px 0 0;color:var(--muted);font-size:13px}
.error-state a{text-decoration:underline}
.status-panel{display:flex;align-items:center;gap:15px;min-height:79px;margin:20px 3px 0;padding:15px 20px;border:1px solid var(--line);border-radius:17px;background:radial-gradient(circle at 100% 50%,rgba(105,84,200,.19),transparent 51%),var(--panel);box-shadow:0 8px 25px var(--shadow)}
.status-panel-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;border-radius:11px;background:rgba(116,124,188,.18);color:#c4cee9;font-size:27px}
.status-panel[data-status="ok"] .status-panel-icon{background:rgba(22,195,145,.2);color:#44d9b6}
.status-panel[data-status="warning"] .status-panel-icon{background:rgba(221,153,58,.19);color:#ebbd68}
.status-panel-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.status-panel-copy strong{font-size:13px}
.status-panel-copy span{color:var(--muted);font-size:11px}
.status-panel>a{margin-left:auto;display:flex;align-items:center;gap:19px;min-height:39px;padding:0 16px;border:1px solid var(--line);border-radius:10px;background:rgba(112,114,197,.12);font-size:12px;font-weight:650;white-space:nowrap}
.status-panel>a:hover{border-color:var(--highlight);background:rgba(137,97,235,.2)}
.status-panel>a span{font-size:17px}
.footer{display:flex;justify-content:space-between;gap:20px;margin:19px 3px 0;padding:16px 4px 27px;border-top:1px solid var(--line);color:var(--soft);font-size:10px;letter-spacing:.13em}
:focus-visible{outline:2px solid #80dfff;outline-offset:3px}
button:focus-visible{outline-offset:3px}
@media(max-width:1270px){.brand{min-width:auto}.topbar{gap:18px}.user-name{display:none}.top-search{width:210px}.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:880px){.site-shell{width:calc(100% - 32px)}.topbar{gap:13px}.main-nav a{padding:0 10px}.top-actions{gap:9px}.top-search{width:172px}.top-search kbd{display:none}.hero-copy{padding-left:25px}.hero-actions{gap:8px}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.topbar{height:auto;display:grid;grid-template-columns:auto 1fr auto;column-gap:10px;row-gap:8px;padding:12px 0}.brand{grid-column:1}.brand-mark{height:36px;width:36px;font-size:23px}.brand strong{font-size:20px}.brand small{font-size:8px}.top-actions{display:contents}.theme-toggle{grid-column:2;grid-row:1;justify-self:end}.user-chip{grid-column:3;grid-row:1}.main-nav{grid-column:1/-1;grid-row:2;height:39px;justify-content:flex-start;gap:2px}.main-nav a{height:37px;font-size:12px}.top-search{grid-column:1/-1;grid-row:3;width:100%;height:41px}.top-search kbd{display:block}.hero{height:300px;background-position:59% center}.hero-shade{background:linear-gradient(90deg,rgba(7,12,29,.97),rgba(7,12,29,.72) 72%,rgba(7,12,29,.38)),linear-gradient(0deg,rgba(7,12,29,.38),transparent)}.hero-copy{padding:24px}.hero h1{font-size:34px}.hero p{font-size:13px}.hero-actions{flex-wrap:wrap;margin-top:19px}.hero-metric{min-height:43px}.quick-access{min-height:43px}.applications{padding-top:25px}.service-grid[data-view="list"]{grid-template-columns:1fr}}
@media(max-width:560px){.site-shell{width:calc(100% - 24px)}.hero{height:auto;min-height:306px;border-radius:17px}.hero-copy{padding:25px 20px}.hero h1{font-size:32px;max-width:300px}.hero p{font-size:12px}.hero-actions{gap:8px}.hero-metric{padding:5px 9px}.hero-metric strong{font-size:11px}.hero-metric small{font-size:9px}.metric-symbol{height:25px;width:25px}.quick-access{font-size:11px;padding:0 12px}.section-heading h2{font-size:21px}.section-heading p{font-size:11px}.section-controls{gap:7px}.services-count{font-size:10px}.view-toggle button{width:29px}.service-grid{grid-template-columns:1fr}.service-card{height:150px}.card-art{width:55%;max-width:250px}.status-panel{align-items:flex-start;padding:13px;flex-wrap:wrap}.status-panel>a{margin-left:53px}.footer{font-size:9px}}
@media(max-width:370px){.hero h1{font-size:29px}.hero-actions{margin-top:14px}.hero-metric{width:calc(50% - 4px)}.hero-metric small{white-space:normal}.quick-access{width:100%;justify-content:center}.section-header{align-items:flex-start}.section-controls{flex-direction:column-reverse;align-items:flex-end}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
