@font-face{font-family:Inter;src:url('/kluis/static/inter.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:Archivo Black;src:url('/kluis/static/archivo-black.woff2') format('woff2');font-style:normal;font-weight:900;font-display:swap}
:root{color-scheme:light;--purple:#a600ff;--purple-deep:#8400cc;--purple-light:#b83cff;--ink:#0a0a0a;--muted:#6b6675;--line:#ece9f1;--paper:#f7f6f9;--surface:#fff;--soft:#fcfbfe;--lilac:#f4e9fc;--shadow:0 12px 36px rgba(38,15,54,.07);--heading:'Archivo Black',Inter,Arial,sans-serif;--body:Inter,Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font:400 15px/1.55 var(--body);display:flex}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(147deg,transparent 0 56%,rgba(166,0,255,.035) 56.1% 56.25%,transparent 56.35%),linear-gradient(28deg,transparent 0 71%,rgba(166,0,255,.025) 71.1% 71.25%,transparent 71.35%),linear-gradient(155deg,#fff 0,#f9f7fc 44%,#f5f0fa 100%)}
button,input,select,textarea{font:inherit}
button,a{touch-action:manipulation}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
p{margin:8px 0 20px}
h1,h2,h3{color:var(--ink)}
h1{font:900 clamp(35px,4.3vw,62px)/1.04 var(--heading);letter-spacing:-.055em;margin:15px 0 22px}
h1 span{color:var(--purple)}
h2{font:900 clamp(21px,2vw,28px)/1.2 var(--heading);letter-spacing:-.035em;margin:0 0 12px}
h3{font:700 17px/1.25 var(--body)}
.muted{color:var(--muted)}
.small{font-size:12px}
.eyebrow,.section-label,.section-kicker{color:var(--purple-deep);font-size:11px;font-weight:800;letter-spacing:.15em;line-height:1.4}
.section-kicker{margin-bottom:8px}
.brand{display:inline-flex;align-items:center;gap:11px;min-height:48px;width:max-content;max-width:100%}
.brand-mark{display:block;width:52px;height:32px;object-fit:contain}
.brand-wordmark{font:900 15px/1 var(--heading);letter-spacing:-.03em;white-space:nowrap}
.brand-wordmark small{display:block;margin-top:5px;color:var(--muted);font:800 9px/1 var(--body);letter-spacing:.19em}
.sidebar{position:fixed;inset:0 auto 0 0;z-index:3;width:252px;padding:28px 19px 20px;background:rgba(255,255,255,.95);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:5px;box-shadow:8px 0 38px rgba(40,10,61,.025)}
.sidebar .brand{margin-left:9px}
.sidebar-rule{height:1px;background:var(--line);margin:22px 9px 25px}
.section-label{margin:0 13px 10px;color:#8b8295;font-size:10px}
.vault-label{margin-top:29px}
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:44px;background:transparent;border:1px solid transparent;border-radius:11px;padding:10px 13px;text-align:left;color:#4f4858;font-weight:650;transition:background .18s ease,color .18s ease,transform .18s ease}
.nav:hover{background:var(--soft);color:var(--purple-deep);transform:translateX(2px)}
.nav.active{background:var(--lilac);border-color:#ead4fb;color:var(--purple-deep)}
.nav span{font-size:12px}
.nav #count{display:grid;place-items:center;min-width:21px;height:21px;border-radius:7px;background:#fff;color:var(--purple-deep);font-size:11px}
.aside-bottom{margin-top:auto;border-top:1px solid var(--line);padding:19px 11px 2px;font-size:12px}
.aside-bottom p{margin:7px 0 6px;color:var(--muted);overflow-wrap:anywhere}
.access-indicator{font-weight:700;color:#302638}
.dot{display:inline-block;width:8px;height:8px;background:#3ba878;border-radius:50%;margin-right:7px;box-shadow:0 0 0 3px #e8f8ef}
.vault-main{margin-left:252px;padding:48px clamp(24px,5vw,90px) 25px;flex:1;min-width:0;max-width:1800px}
.vault-hero,.workspace-hero{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;overflow:hidden;border:1px solid #e9e2f0;border-radius:22px;background:linear-gradient(108deg,rgba(255,255,255,.98),rgba(252,249,255,.98));padding:36px clamp(27px,4vw,60px);margin-bottom:29px;box-shadow:var(--shadow)}
.vault-hero::before,.workspace-hero::before{content:'';position:absolute;right:-92px;top:-115px;width:420px;height:420px;border:1px solid rgba(166,0,255,.13);transform:rotate(30deg) skew(-16deg);pointer-events:none}
.vault-hero::after,.workspace-hero::after{content:'';position:absolute;right:80px;bottom:-180px;width:410px;height:410px;border:1px solid rgba(166,0,255,.08);transform:rotate(30deg) skew(-16deg);pointer-events:none}
.vault-hero>* ,.workspace-hero>*{position:relative;z-index:1}
.hero-copy{max-width:660px}
.hero-copy p{max-width:570px;margin:0;color:var(--muted);font-size:15px}
.vault-hero .primary{align-self:flex-end;margin-bottom:3px}
.primary,.secondary,.quiet,.danger{display:inline-flex;justify-content:center;align-items:center;gap:7px;min-height:42px;border:1px solid transparent;border-radius:10px;padding:10px 17px;font-weight:750;white-space:nowrap;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.primary{position:relative;overflow:hidden;color:#fff;background:linear-gradient(135deg,#b83cff 0,#a600ff 48%,#8400cc 100%);box-shadow:0 7px 19px rgba(132,0,204,.19)}
.primary::before{content:'';position:absolute;left:12px;right:12px;top:1px;height:1px;background:rgba(255,255,255,.6)}
.primary:hover{transform:translateY(-2px);box-shadow:0 11px 22px rgba(132,0,204,.25)}
.secondary{background:var(--surface);border-color:#ddd6e5;color:var(--ink)}
.secondary:hover{border-color:#c995e9;background:var(--soft)}
.quiet{background:transparent;color:var(--purple-deep);padding:8px 10px}
.quiet:hover{background:var(--lilac)}
.danger{background:#fff0f3;color:#a1203a}
.danger:hover{background:#ffe4eb}
.panel{position:relative;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--purple);border-radius:18px;padding:30px;box-shadow:var(--shadow)}
.gate{text-align:center;max-width:610px;margin:55px auto;padding:46px 36px}
.gate .eyebrow{margin-bottom:12px}
.gate h2{margin-bottom:12px}
.gate p{color:var(--muted);max-width:430px;margin:10px auto 25px}
.gate .small{margin:22px auto 0;font-size:11px}
.lock-icon{width:58px;height:58px;display:grid;place-items:center;margin:0 auto 22px;border-radius:15px;background:var(--lilac);color:var(--purple);font-size:27px;transform:rotate(-6deg)}
.toolbar,.workspace-tools{display:flex;gap:11px;align-items:center;margin:0 0 26px}
.toolbar input,.quick-search{flex:1;min-width:0}
.toolbar select{max-width:210px}
.list-heading,.group-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:0 0 18px}
.list-heading h2,.group-head h2{margin:0}
.cards,.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:16px}
.card,.app-tile{position:relative;min-width:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--purple);border-radius:18px;padding:22px;box-shadow:0 8px 28px rgba(29,8,42,.045);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.card:hover,.app-tile:hover{transform:translateY(-3px);border-color:#dfc8eb;border-top-color:var(--purple);box-shadow:0 15px 33px rgba(47,12,69,.09)}
.card-top{display:flex;gap:12px;align-items:center;margin-bottom:18px;min-width:0}
.card-top>div:last-child{min-width:0}
.monogram,.tile-icon{width:44px;height:44px;flex-shrink:0;border-radius:12px;background:var(--lilac);color:var(--purple-deep);display:grid;place-items:center;font-weight:900;font-size:18px}
.card h3{margin:0 0 2px;overflow-wrap:anywhere}
.card .tag{color:var(--muted);font-size:11px}
.card .username{font-size:13px;color:var(--muted);overflow-wrap:anywhere;margin:0 0 20px}
.card-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto}
.card-actions button,.card-actions a{font-size:12px;padding:8px 11px;min-height:36px}
.empty{grid-column:1/-1;text-align:center;padding:56px 25px;border:1px dashed #d9cae5;border-radius:18px;background:rgba(255,255,255,.7);color:var(--muted)}
.empty strong{display:block;color:var(--ink);font:900 19px var(--heading);margin-bottom:8px}
footer{display:flex;justify-content:space-between;gap:18px;border-top:1px solid var(--line);margin-top:70px;padding-top:20px;color:var(--muted);font-size:11px}
dialog{border:1px solid var(--line);border-top:3px solid var(--purple);border-radius:18px;padding:30px;width:min(640px,94vw);max-height:90vh;color:var(--ink);box-shadow:0 28px 100px rgba(18,5,31,.31)}
dialog::backdrop{background:rgba(20,10,34,.59);backdrop-filter:blur(4px)}
.dialog-head{display:flex;justify-content:space-between;align-items:start;gap:15px}
.dialog-head h2{margin:4px 0 11px}
label{display:block;font-size:12px;font-weight:750;margin:16px 0 8px}
input,select,textarea{width:100%;padding:11px 12px;background:#fff;color:var(--ink);border:1px solid #d9d3e1;border-radius:9px;outline:none}
input:hover,select:hover,textarea:hover{border-color:#baa8c8}
label input,label textarea{margin-top:6px}
input:focus,textarea:focus,select:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(166,0,255,.12)}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.password-row{display:flex;gap:7px;margin-top:6px}
.password-row input{margin:0;min-width:0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.password-row button{font-size:12px;padding:8px 12px}
.generator{display:flex;align-items:center;justify-content:space-between;color:var(--muted)}
.generator button{font-size:12px}
.dialog-actions{display:flex;justify-content:space-between;gap:10px;margin-top:20px}
.dialog-actions .primary{margin-left:auto}
.error{color:#a1203a;font-size:13px}
.event{padding:13px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere;font-size:13px}
.event:last-child{border-bottom:0}
.event small{display:block;color:var(--muted)}
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:10px;padding:13px 22px;z-index:10;box-shadow:0 8px 30px #0002}
.access-page{display:grid;place-items:center;padding:24px}
.access-shell{width:min(560px,100%)}
.access-page .brand{margin-bottom:24px}
.access-panel{padding:48px}
.access-panel h1{font-size:clamp(36px,6vw,52px);margin:16px 0 20px}
.access-panel>p{max-width:390px}
.access-actions{display:flex;gap:10px;flex-wrap:wrap;margin:29px 0 16px}
.access-panel>.small{margin-bottom:0}
.access-footer{color:var(--muted);font-size:11px;text-align:center;margin:22px 0 0}
/* The Core app catalog uses the same palette and card geometry as the vault. */
.apps-page{display:block}
.apps-page main{max-width:1600px;margin:0 auto;padding:40px clamp(18px,5vw,72px)}
.catalog-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}
.catalog-back{color:var(--purple-deep);font-size:13px;font-weight:750;white-space:nowrap}
.catalog-back:hover{text-decoration:underline;text-underline-offset:4px}
.apps-page header{margin-bottom:26px}
.workspace-hero{margin-bottom:30px;min-height:210px}
.workspace-hero h1{max-width:850px}
.workspace-hero p{margin:0;max-width:680px}
.workspace-tools{gap:13px;flex-wrap:wrap;margin:0 0 34px}
.quick-search{max-width:410px;min-height:44px}
.quick-search input{min-height:44px}
.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}
.filter-tabs{display:flex;gap:7px;flex-wrap:wrap}
.filter-tabs button,.chip{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#51475b;font-size:12px;font-weight:750}
.filter-tabs button:hover,.filter-tabs button.active,.filter-tabs button[aria-pressed=true]{border-color:#d7b3ed;background:var(--lilac);color:var(--purple-deep)}
.filter-tabs button span{margin-left:6px;opacity:.68}
.app-group{margin-bottom:37px}
.group-head{margin:37px 0 17px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.group-head p{margin:0;color:var(--muted);font-size:13px}
.group-count{color:#6b6675;font-size:12px;font-weight:750;white-space:nowrap}
.app-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:17px}
.app-tile{min-height:222px;padding:23px}
.app-tile h2{font:900 20px/1.2 var(--heading);margin:14px 0 7px}
.app-tile p{font-size:14px;color:var(--muted);margin:0 0 16px}
.tile-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tile-icon{width:43px;height:43px;font-size:16px}
.tile-meta{min-width:0;margin-top:17px;color:var(--purple-deep);font-size:11px;font-weight:800;letter-spacing:.11em}
.tile-url{font-size:12px;color:var(--muted);overflow-wrap:anywhere;line-height:1.45;margin:0 0 12px}
.tile-action{margin-top:auto;color:var(--purple-deep);font-size:13px;font-weight:800}
.app-tile:hover .tile-action{text-decoration:underline;text-underline-offset:3px}
.app-tile .chip{min-height:29px;padding:5px 8px;white-space:nowrap;font-size:12px;background:var(--soft)}
.app-tile[hidden],.app-grid[hidden],[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--purple-light);outline-offset:3px}
button:disabled{opacity:.55;cursor:wait}
@media(max-width:980px){.sidebar{width:212px;padding:23px 12px 17px}.vault-main{margin-left:212px;padding:30px 25px 23px}.vault-hero{align-items:start;flex-direction:column;gap:24px}.vault-hero .primary{align-self:start}.brand-wordmark{font-size:13px}.brand-mark{width:44px}.list-heading{align-items:start;flex-direction:column;gap:5px}}
@media(max-width:650px){body.vault-page{display:block}.sidebar{position:static;width:100%;border-right:0;border-bottom:1px solid var(--line);padding:14px 17px 11px;display:flex;flex-direction:row;flex-wrap:wrap;gap:5px}.sidebar .brand{flex-basis:100%;margin:0 0 7px}.sidebar-rule,.sidebar .section-label,.aside-bottom p,.aside-bottom .access-indicator{display:none}.nav{width:auto;min-height:39px;font-size:12px;padding:8px 10px}.nav span{margin-left:7px}.aside-bottom{margin:0 0 0 auto;padding:0;border:0;font-size:0}.aside-bottom button{font-size:12px;min-height:39px}.vault-main{margin:0;padding:18px 16px 28px}.vault-hero,.workspace-hero{padding:28px 22px;border-radius:18px;margin-bottom:22px}.vault-hero h1,.workspace-hero h1{font-size:clamp(34px,9vw,46px)}.vault-hero .primary{width:100%}.hero-copy p{font-size:13px}.toolbar{flex-wrap:wrap}.toolbar input{flex-basis:100%}.toolbar select{flex:1;max-width:none}.cards,.app-grid{grid-template-columns:1fr}.gate{margin:15px 0;padding:34px 22px}.columns{grid-template-columns:1fr;gap:0}dialog{padding:22px}.password-row{flex-wrap:wrap}.password-row input{flex-basis:100%}footer{flex-direction:column;margin-top:44px}.generator{align-items:flex-start;flex-direction:column}.access-panel{padding:30px 24px}.apps-page main{padding:17px 16px 30px}.catalog-nav{margin-bottom:17px}.catalog-back{font-size:11px}.workspace-tools{align-items:stretch}.quick-search{max-width:none;flex-basis:100%}.group-head{align-items:start;flex-direction:column;gap:5px}}
@media(max-width:380px){.nav{font-size:11px;padding:7px}.aside-bottom button{font-size:11px;padding:7px}.sidebar{padding-inline:10px}.toolbar select{flex-basis:100%}.toolbar button{width:100%}}
@media(max-width:650px){
  .apps-page main{padding:12px 16px 28px}
  .catalog-nav{margin-bottom:12px}
  .catalog-nav .brand{min-height:40px;gap:8px}
  .catalog-nav .brand-mark{width:42px;height:27px}
  .catalog-nav .brand-wordmark{font-size:12px}
  .catalog-back{font-size:12px}
  .workspace-hero{min-height:0;padding:20px 20px 21px;margin-bottom:16px}
  .workspace-hero h1{font-size:clamp(30px,8vw,38px);margin:9px 0 10px}
  .workspace-hero p{font-size:14px;line-height:1.45}
  .workspace-tools{gap:9px;margin-bottom:18px}
  .quick-search,.quick-search input{min-height:42px}
  .filter-tabs{gap:6px}
  .filter-tabs button{min-height:36px;font-size:12px;padding:6px 10px}
  .group-head{margin:20px 0 12px;padding-bottom:10px;gap:5px}
  .group-head h2{font-size:21px;margin-bottom:5px}
  .group-head p{font-size:13px;line-height:1.4}
  .group-count{font-size:12px}
  .app-group{margin-bottom:27px}
  .app-grid{gap:12px}
  .app-tile{min-height:192px;padding:18px}
  .app-tile h2{font-size:19px;margin:9px 0 5px}
  .app-tile p{font-size:14px;line-height:1.45;margin-bottom:12px}
  .tile-icon{width:38px;height:38px}
  .tile-meta{margin-top:12px;font-size:11px}
  .tile-url{font-size:12px;margin-bottom:8px}
  .tile-action{font-size:13px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.nav:hover,.card:hover,.app-tile:hover,.primary:hover{transform:none}}