:root{
color-scheme:dark;
--bg:#0d0e13;--panel:#171923;--panel2:#202331;--text:#f3f3f7;--muted:#9da1b3;
--line:#2d3040;--accent:#b45cff;--accent2:#7a3cff;--danger:#ff8f8f;--good:#9ee3b3;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at top,#171126 0,#0d0e13 35%);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh}
a{color:#c994ff;text-decoration:none}
.topbar{min-height:66px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:rgba(13,14,19,.94);position:sticky;top:0;z-index:10}
.brand{font-size:21px;font-weight:900;color:white}
nav{display:flex;gap:16px;align-items:center}
.inline{display:inline}.link-button{background:none;color:#c994ff;padding:0}
.username{color:var(--muted)}
.role-pill{font-size:11px;letter-spacing:.08em;border:1px solid #60437a;background:#251b31;border-radius:999px;padding:4px 8px;color:#ddb9ff}
.container{width:min(1050px,calc(100% - 32px));margin:auto;padding:44px 0 80px}
.card{background:rgba(23,25,35,.96);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.18)}
.hero{text-align:center;margin:20px 0 34px}.hero h1{font-size:38px;margin-bottom:8px}.hero p,.page-head p,.muted{color:var(--muted)}
.apps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.app-card{padding:22px;display:flex;gap:18px;color:var(--text);transition:.15s transform,.15s border-color}
.app-card:hover{transform:translateY(-2px);border-color:#744898}
.app-card h2{margin:0 0 7px}.app-card p{color:var(--muted);line-height:1.5}.app-icon{width:52px;height:52px;flex:none;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,var(--accent),var(--accent2));font-weight:900}
.open-link{font-weight:800;color:#cc9cff}
.empty-state{padding:25px}
.login-card{max-width:520px;margin:45px auto;padding:30px}.login-card h1{text-align:center}.login-card>p{text-align:center;color:var(--muted);line-height:1.5}
.login-mark{text-align:center}.login-mark img{width:110px;height:110px;object-fit:contain}
.stack{display:grid;gap:15px}.stack label{display:grid;gap:7px;color:var(--muted)}
input,select{width:100%;border:1px solid var(--line);background:#10121a;color:var(--text);border-radius:10px;padding:12px;font:inherit}
button,.button,.secondary-button{border:0;border-radius:10px;padding:11px 15px;font:inherit;font-weight:800;cursor:pointer;display:inline-block}
button,.button{background:linear-gradient(135deg,var(--accent),var(--accent2));color:white}
.secondary-button{background:var(--panel2);border:1px solid var(--line);color:var(--text)}
button:disabled{opacity:.45;cursor:not-allowed}
.alert{padding:12px 14px;border-radius:10px;margin:14px 0}.alert.error{background:#2b171b;border:1px solid #64363e;color:#ffc0c5}.alert.success{background:#14281c;border:1px solid #315b43;color:#a9e8bd}
.page-head{margin-bottom:24px}.account-card,.admin-card{padding:22px}.account-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
.account-option{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:20px}.account-option h3{margin:0 0 5px}.account-option p{margin:0;color:var(--muted)}
.create-grid{display:grid;grid-template-columns:1.2fr .7fr 1.3fr auto;gap:12px;align-items:end}.create-grid label{display:grid;gap:6px;color:var(--muted)}
.user-list{display:grid;gap:14px;margin-top:18px}.user-card{padding:20px}.user-head{display:flex;justify-content:space-between;align-items:center}.user-head h3{margin:0 0 7px}.user-head p{display:flex;gap:8px;align-items:center;margin:0;color:var(--muted)}
.good{color:var(--good)}.bad{color:var(--danger)}.warn{color:#f0c77d}
.admin-actions{display:flex;gap:10px;margin-top:16px}.inline-form{display:flex;gap:8px}.grow{flex:1}.grow input{min-width:240px}
.permissions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:16px;padding-top:16px}.permission-form{display:inline}
.permission-on,.permission-off{padding:7px 10px;border-radius:999px}.permission-on{background:#263826;border:1px solid #466b48;color:#b8efbd}.permission-off{background:#20222d;border:1px solid #363947;color:#c5c7d1}
@media(max-width:760px){
.topbar{padding:0 12px}nav>a{display:none}.container{width:calc(100% - 20px);padding-top:28px}.create-grid{grid-template-columns:1fr}.admin-actions{flex-direction:column}.inline-form{width:100%}.grow input{min-width:0}.account-option{flex-direction:column;align-items:flex-start}.hero h1{font-size:30px}
}

/* v0.2.3 navigation theming */
.site-nav{display:flex;align-items:center;gap:13px}
.nav-group{display:flex;align-items:center;gap:16px}
.nav-group-hub a{color:#c994ff;font-weight:650}
.nav-group-hub a:hover{color:#e2c3ff}
.nav-divider{width:1px;height:28px;background:#4a4058;margin:0 2px}
.signout-button{
    color:#fff!important;
    background:#3b2156;
    border:1px solid #633b87;
    border-radius:9px;
    padding:8px 12px;
    font-weight:800;
    line-height:1;
}
.signout-button:hover{background:#4b286d;color:#fff!important}
@media(max-width:760px){
    .nav-group{gap:10px}
    .nav-divider{display:none}
    .site-nav{gap:9px}
}

/* v0.3 mobile navigation */
.mobile-nav-toggle{display:none;width:42px;height:38px;padding:8px;background:#24172f;border:1px solid #57366e;border-radius:10px}
.mobile-nav-toggle span{display:block;height:2px;background:#fff;border-radius:2px;margin:4px 0}
.mobile-nav-heading{display:none;color:#b8a9c7;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.nav-user{display:flex;align-items:center;gap:10px}
@media(max-width:760px){
  .topbar{min-height:62px;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));z-index:50}
  .mobile-nav-toggle{display:block}
  .site-nav{display:none;position:absolute;top:calc(100% + 8px);right:12px;left:12px;z-index:100;background:#171923;border:1px solid #363146;border-radius:14px;padding:14px;box-shadow:0 18px 44px rgba(0,0,0,.45);align-items:stretch;gap:12px}
  .site-nav.is-open{display:flex;flex-direction:column}
  .mobile-nav-heading{display:block}
  .nav-group{display:grid;gap:4px}
  .nav-group a{display:block!important;padding:11px 12px;border-radius:9px}
  .nav-group a:hover{background:#211a2a}
  .nav-divider{display:block!important;width:100%;height:1px;margin:1px 0;background:#3c3447}
  .nav-user{justify-content:space-between;padding:2px 6px}
  .signout-button{display:block;text-align:center;padding:12px}
  .container{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
}

/* v0.3.1 iOS standalone safe-area fix */
@media(max-width:760px){
  .topbar{
    padding-top:env(safe-area-inset-top);
    min-height:calc(62px + env(safe-area-inset-top));
    align-items:flex-end;
    padding-bottom:10px;
  }

  .mobile-nav-toggle{
    margin-bottom:0;
  }

  .site-nav{
    top:calc(100% + 8px);
  }
}

/* Ensure standalone iOS web apps paint behind the safe area cleanly. */
html,body{
  min-height:100%;
  background:var(--bg);
}

/* v0.4 application management */
.themed-app-card:hover{border-color:var(--app-theme,#744898)}
.themed-app-icon{overflow:hidden;color:#fff;font-size:25px}
.themed-app-icon img,.mini-app-icon img{width:100%;height:100%;object-fit:cover}
.secret-notice{padding:20px;margin-bottom:20px;border-color:#6d4d88}
.secret-notice h2{margin-top:0}
.secret-value{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;background:#0e1017;border:1px solid #3a3e4d;border-radius:10px;padding:14px;word-break:break-all;margin:14px 0}
.app-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.app-editor-grid label{display:grid;gap:6px;color:var(--muted)}
.app-editor-grid small{font-size:12px;color:#777f91;line-height:1.35}
.span-2{grid-column:1 / -1}
.color-field{display:flex;align-items:center;gap:10px}
.color-field input[type=color]{height:44px;padding:4px;cursor:pointer}
.app-create-action{display:flex;align-items:end}
.application-list{display:grid;gap:16px;margin-top:22px}
.application-admin-card{padding:20px}
.application-admin-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}
.application-title-row{display:flex;align-items:center;gap:13px}
.application-title-row h2{margin:0 0 5px}
.application-title-row p{margin:0;color:var(--muted)}
.mini-app-icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:#7a3cff;font-size:23px;overflow:hidden}
.app-existing-editor{padding-top:16px;border-top:1px solid var(--line)}
.app-form-actions{display:flex;justify-content:flex-end}
.application-footer{display:flex;justify-content:space-between;align-items:center;gap:18px;border-top:1px solid var(--line);margin-top:18px;padding-top:16px}
.application-footer p{margin:4px 0 0}
.access-note{padding:20px;margin-top:22px}
.access-note h2{margin-top:0}
@media(max-width:760px){
  .app-editor-grid{grid-template-columns:1fr}
  .span-2{grid-column:auto}
  .app-create-action,.app-form-actions{display:block}
  .app-create-action button,.app-form-actions button{width:100%}
  .application-admin-head,.application-footer{align-items:flex-start;flex-direction:column}
  .application-admin-head form,.application-footer form{width:100%}
  .application-admin-head button,.application-footer button{width:100%}
}

/* v0.4.1 Applications page layout fixes */

/* Keep labels, controls, and helper text visually grouped. */
.app-editor-grid label{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.app-editor-grid label > input,
.app-editor-grid label > select,
.app-editor-grid label > .color-field{
  margin:0;
}

.app-editor-grid label > small{
  display:block;
  margin-top:1px;
  font-size:12px;
  line-height:1.35;
  color:#858da0;
}

/* Prevent helper text from running into the next field label. */
.app-editor-grid{
  row-gap:18px;
  column-gap:14px;
}

.app-editor-grid .span-2{
  grid-column:1 / -1;
}

/* Existing application cards should use the same inner margins as the create form. */
.application-admin-card{
  width:100%;
  overflow:hidden;
}

.application-admin-card .app-existing-editor{
  padding:18px 0 0;
  margin:0;
}

.application-admin-card .app-editor-grid{
  width:100%;
}

.application-admin-card input,
.application-admin-card select{
  max-width:100%;
}

/* Give the footer and header consistent horizontal rhythm inside the card. */
.application-admin-head,
.application-footer{
  margin-left:0;
  margin-right:0;
}

/* Make the color input look like a compact control instead of stretching oddly. */
.color-field{
  width:100%;
}

.color-field input[type=color]{
  width:100%;
  min-height:44px;
  padding:4px;
}

/* Keep app list cards aligned to the main admin column. */
.application-list{
  width:100%;
}

.application-admin-card{
  box-sizing:border-box;
}

/* Tighten mobile stacking without collapsing labels/helper text together. */
@media(max-width:760px){
  .app-editor-grid{
    grid-template-columns:1fr;
    row-gap:16px;
  }

  .app-editor-grid .span-2{
    grid-column:auto;
  }

  .application-admin-card{
    padding:18px;
  }

  .application-title-row{
    min-width:0;
  }

  .application-title-row > div:last-child{
    min-width:0;
  }

  .application-title-row h2,
  .application-title-row p{
    overflow-wrap:anywhere;
  }
}

/* v0.4.2 explicit Applications form layout */
.app-editor-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  column-gap:18px!important;
  row-gap:20px!important;
}

.app-editor-grid > label{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-auto-flow:row!important;
  align-content:start!important;
  gap:7px!important;
  margin:0!important;
  min-width:0!important;
}

.app-editor-grid > label > input,
.app-editor-grid > label > select,
.app-editor-grid > label > .color-field{
  display:block!important;
  width:100%!important;
  margin:0!important;
}

.app-editor-grid > label > small{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  font-size:12px!important;
  line-height:1.45!important;
  color:#858da0!important;
  white-space:normal!important;
}

.app-editor-grid > .span-2{
  grid-column:1 / -1!important;
}

/* Prevent one card from visually touching the next and preserve its inner padding. */
.application-list{
  display:grid!important;
  gap:20px!important;
  width:100%!important;
}

.application-admin-card{
  display:block!important;
  width:100%!important;
  padding:22px!important;
  margin:0!important;
  overflow:hidden!important;
}

.application-admin-card .app-existing-editor{
  width:100%!important;
  margin:0!important;
  padding:20px 0 0!important;
  border-top:1px solid var(--line)!important;
}

.application-admin-card .application-admin-head{
  width:100%!important;
  margin:0 0 18px!important;
}

.application-admin-card .application-footer{
  width:100%!important;
  margin:20px 0 0!important;
  padding:18px 0 0!important;
}

/* Make helper text clearly subordinate to its own label. */
.app-editor-grid label small::before{
  content:"";
  display:block;
}

@media(max-width:760px){
  .app-editor-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .app-editor-grid > .span-2{
    grid-column:1!important;
  }

  .application-admin-card{
    padding:18px!important;
  }
}

/* v0.4.4 editable usernames */
.username-form{min-width:min(100%,340px)}
.username-form input{min-width:180px}
@media(max-width:760px){
  .admin-actions{display:grid!important;grid-template-columns:1fr!important}
  .admin-actions .inline-form{width:100%!important}
  .admin-actions .inline-form input,
  .admin-actions .inline-form select,
  .admin-actions .inline-form button{width:100%!important}
}

/* v0.5.0 System Health */
.health-head{display:flex;align-items:center;justify-content:space-between;gap:18px}
.health-head h1{margin-bottom:6px}
.health-head p{margin:0}
.health-section{margin-top:22px}
.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:12px}
.section-heading h2{margin:0}
.section-heading span{color:var(--muted);font-size:13px}
.health-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.health-service-card{padding:18px;display:flex;flex-direction:column;gap:16px}
.health-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.health-card-top h3{margin:0 0 5px;font-size:19px}
.health-card-top p{margin:0;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px}
.health-badge{white-space:nowrap;border-radius:999px;padding:6px 9px;font-size:12px;font-weight:800}
.health-ok{background:#173421;color:#a9e8bd;border:1px solid #315b43}
.health-bad{background:#351b1e;color:#ffc2c2;border:1px solid #6d343a}
.health-details{display:grid;gap:10px}
.health-details>div{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:9px}
.health-details span{color:var(--muted);font-size:13px}
.health-details strong,.health-details code{text-align:right;overflow-wrap:anywhere}
.health-card-actions{margin-top:auto}
.health-card-actions form,.health-card-actions button{width:100%}
.health-two-column{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-top:20px}
.health-panel{padding:20px}
.health-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.health-panel-head h2{margin:0 0 6px}
.health-panel-head p{margin:0;color:var(--muted)}
.health-panel-details{margin-top:8px}
.disk-meter{height:14px;border-radius:999px;background:#11131a;border:1px solid var(--line);overflow:hidden;margin-top:24px}
.disk-meter-fill{height:100%;width:0;background:#7a3cff;transition:width .25s ease}
.disk-percent{text-align:right;color:var(--muted);font-size:13px;margin:7px 2px 18px}
.health-note{padding:20px;margin-top:20px}
.health-note h2{margin-top:0}
.health-note p{margin-bottom:0;color:var(--muted);line-height:1.5}
@media(max-width:960px){
  .health-service-grid{grid-template-columns:1fr}
  .health-two-column{grid-template-columns:1fr}
}
@media(max-width:680px){
  .health-head,.section-heading,.health-panel-head{align-items:stretch;flex-direction:column}
  .health-head>a,.health-panel-head form,.health-panel-head button{width:100%;text-align:center}
  .health-details>div{align-items:flex-start;flex-direction:column;gap:4px}
  .health-details strong,.health-details code{text-align:left}
}