/* App-Styles. Nur Tokens aus tokens.css, keine festen Farben außer den Favicon-Beispielfarben. */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--color-text);background:var(--color-surface)}
h1{font-size:var(--text-xl);line-height:var(--leading-xl);font-weight:var(--weight-xl);margin:0 0 var(--space-2)}
h2{font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-lg);margin:0 0 var(--space-3)}
h3{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin:var(--space-5) 0 var(--space-2)}
p{margin:0 0 var(--space-3)}
a{color:var(--color-accent)}
.muted{color:var(--color-text-muted)} .small{font-size:var(--text-xs);line-height:var(--leading-xs)}
.mono{font-family:var(--font-mono)}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.row.end{justify-content:flex-end}
.stack{display:flex;flex-direction:column;gap:var(--space-4)}
.spacer{flex:1}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:40px;padding:0 var(--space-4);border-radius:var(--radius-md);border:1px solid transparent;font:inherit;font-size:var(--text-sm);font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn.sm{height:32px;padding:0 var(--space-3)} .btn.lg{height:48px;padding:0 var(--space-5);font-size:var(--text-base)} .btn.block{width:100%}
.btn.primary{background:var(--color-accent);color:var(--color-on-accent)} .btn.primary:hover{background:var(--color-accent-hover)}
.btn.secondary{background:var(--color-bg);color:var(--color-text);border-color:var(--color-border-input)} .btn.secondary:hover{background:var(--color-selected)}
.btn.ghost{background:transparent;color:var(--color-text)} .btn.ghost:hover{background:var(--color-selected)}
.btn.danger{background:var(--color-danger);color:var(--color-on-danger)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.spin{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);border:0;background:transparent;color:var(--color-text-muted);cursor:pointer;flex:none}
.iconbtn:hover{background:var(--color-selected);color:var(--color-text)} .iconbtn[aria-pressed=true]{color:var(--color-text);background:var(--color-selected)}

/* Felder */
.field{display:flex;flex-direction:column;gap:var(--space-1)}
.field>label,.field>.lbl{font-size:var(--text-xs);font-weight:600}
.input{display:flex;align-items:center;min-height:40px;border:1px solid var(--color-border-input);border-radius:var(--radius-md);background:var(--color-bg);padding:0 var(--space-1) 0 var(--space-3)}
.input input,.input select{flex:1;border:0;outline:0;font:inherit;font-size:var(--text-base);background:transparent;color:var(--color-text);min-width:0;height:38px}
.input select{margin-right:var(--space-2)}
.input:focus-within{outline:2px solid var(--color-focus);outline-offset:1px}
.input.error{border-color:var(--color-danger)}
.input.mono input{font-family:var(--font-mono);letter-spacing:.03em}
textarea.ta{font:inherit;font-size:var(--text-base);border:1px solid var(--color-border-input);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);min-height:96px;resize:vertical;color:var(--color-text);background:var(--color-bg)}
textarea.ta:focus{outline:2px solid var(--color-focus);outline-offset:1px}
.help{font-size:var(--text-xs);color:var(--color-text-muted)} .help.err{color:var(--color-danger)}
.check{display:flex;gap:var(--space-2);align-items:flex-start}
.meter{display:flex;gap:4px;margin-top:var(--space-1)} .meter span{flex:1;height:4px;border-radius:2px;background:var(--color-border)}
.meter.s0 span:nth-child(-n+1){background:var(--color-danger)}
.meter.s1 span:nth-child(-n+2){background:var(--color-warning)}
.meter.s2 span:nth-child(-n+3){background:var(--color-warning)}
.meter.s3 span:nth-child(-n+4){background:var(--color-success)}
.meter.s4 span{background:var(--color-success)}

/* Passwort-Darstellung */
.pw{font-family:var(--font-mono);font-size:var(--text-base);word-break:break-all} .pw .d{color:var(--color-pw-digit)} .pw .y{color:var(--color-pw-symbol)}

/* Anmelde-Screens */
.center{min-height:100%;display:grid;place-items:center;padding:var(--space-6) var(--space-4)}
.card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-6);width:100%;max-width:440px}
.card.wide{max-width:560px}
.brand{display:flex;align-items:center;gap:var(--space-2);font-weight:700;font-size:var(--text-lg);margin-bottom:var(--space-5)}
.brand .mark{width:32px;height:32px;border-radius:var(--radius-md);background:var(--color-accent);color:var(--color-on-accent);display:grid;place-items:center}
.steps{display:flex;gap:var(--space-2);margin-bottom:var(--space-5)} .steps span{flex:1;height:4px;border-radius:2px;background:var(--color-border)} .steps span.on{background:var(--color-accent)}
.secretbox{font-family:var(--font-mono);font-size:var(--text-lg);letter-spacing:.04em;background:var(--color-surface);border:1px dashed var(--color-border-input);border-radius:var(--radius-md);padding:var(--space-4);text-align:center;word-break:break-all}

/* App-Rahmen */
.shell{display:grid;grid-template-columns:var(--layout-sidebar) var(--layout-list) 1fr;height:100vh}
.side{background:var(--color-sidebar-bg);color:var(--color-sidebar-text);padding:var(--space-3);display:flex;flex-direction:column;gap:2px;overflow:auto}
.side .acct{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);font-weight:600;margin-bottom:var(--space-2)}
.side button.nav{display:flex;align-items:center;gap:var(--space-3);color:inherit;background:transparent;border:0;font:inherit;text-align:left;padding:0 var(--space-3);min-height:34px;border-radius:var(--radius-sm);cursor:pointer;width:100%}
.side button.nav:hover,.side button.nav[aria-current=page]{background:var(--color-sidebar-selected)}
.side button.nav:focus-visible,.side .iconbtn:focus-visible{outline-color:var(--color-focus-inverse)}
.side .n{margin-left:auto;color:var(--color-sidebar-muted);font-size:var(--text-xs)}
.side .grp{display:flex;align-items:center;color:var(--color-sidebar-muted);font-size:var(--text-xs);font-weight:600;padding:var(--space-4) var(--space-3) var(--space-1);text-transform:uppercase;letter-spacing:.06em}
.side .grp .iconbtn{width:24px;height:24px;margin-left:auto;color:var(--color-sidebar-muted)} .side .grp .iconbtn:hover{background:var(--color-sidebar-selected);color:var(--color-sidebar-text)}
.side .bottom{margin-top:auto;padding-top:var(--space-4)}
.list{border-right:1px solid var(--color-border);background:var(--color-bg);display:flex;flex-direction:column;min-height:0}
.list .top{display:flex;gap:var(--space-2);padding:var(--space-3);border-bottom:1px solid var(--color-border)}
.list .top .input{flex:1}
.items{overflow:auto;flex:1}
.item{display:flex;align-items:center;gap:var(--space-3);min-height:var(--layout-row);padding:var(--space-2) var(--space-4);cursor:pointer;border:0;background:transparent;width:100%;text-align:left;font:inherit;color:inherit}
.item:hover{background:var(--color-surface)} .item[aria-selected=true]{background:var(--color-selected)}
.item .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .item .s{font-size:var(--text-xs);color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .txt{min-width:0;flex:1} .item .star{color:var(--color-warning)}
.fav{width:32px;height:32px;border-radius:var(--radius-sm);display:grid;place-items:center;font-weight:700;color:#fff;flex:none;text-transform:uppercase}
.fav.big{width:48px;height:48px;font-size:var(--text-lg)}
.fav.c0{background:#2f6b4f}.fav.c1{background:#5b3f8f}.fav.c2{background:#8f4b2f}.fav.c3{background:#2f557f}.fav.c4{background:#7a2f5b}.fav.c5{background:#4f6b2f}.fav.c6{background:#2f6f74}.fav.c7{background:#6b5a2f}
.fav.cat{background:var(--color-text-muted)}
.pane{overflow:auto;padding:var(--space-6);background:var(--color-bg)}
.pane .inner{max-width:var(--layout-detail-max)}
.empty{text-align:center;padding:var(--space-7) var(--space-5);color:var(--color-text-muted)}
.empty svg.i{width:40px;height:40px}
.empty h2{color:var(--color-text);margin-top:var(--space-3)}

/* Detail */
.head{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-5)}
.head .txt{flex:1;min-width:0} .head h2{margin:0;overflow-wrap:anywhere}
.detail{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--space-4)}
.cf{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-border)}
.cf:first-child{border-top:0} .cf:hover{background:var(--color-surface)}
.cf .grow{flex:1;min-width:0} .cf .lbl{font-size:var(--text-xs);color:var(--color-text-muted)} .cf .val{font-size:var(--text-base);overflow-wrap:anywhere;white-space:pre-wrap}
.cf .val.notes{font-size:var(--text-sm)}
.tags{display:flex;flex-wrap:wrap;gap:var(--space-1)} .tag{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:0 var(--space-2);font-size:var(--text-xs)}
.meta{font-size:var(--text-xs);color:var(--color-text-muted)}

/* Formular */
.form{display:flex;flex-direction:column;gap:var(--space-4)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.customrow{display:grid;grid-template-columns:1fr 1.5fr auto auto;gap:var(--space-2);align-items:center}

/* Generator */
.gen{border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);background:var(--color-surface-raised);padding:var(--space-4)}
.tabs{display:flex;background:var(--color-surface);border-radius:var(--radius-md);padding:3px;gap:3px;margin-bottom:var(--space-3)}
.tabs button{flex:1;border:0;background:transparent;border-radius:var(--radius-sm);height:30px;font:inherit;font-weight:600;color:var(--color-text-muted);cursor:pointer}
.tabs button[aria-selected=true]{background:var(--color-bg);color:var(--color-text);box-shadow:var(--shadow-card)}
.preview{display:flex;align-items:center;gap:var(--space-2);background:var(--color-surface);border-radius:var(--radius-md);padding:var(--space-3);margin-bottom:var(--space-3)}
.ctl{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-1) 0}
.switch{width:36px;height:20px;border-radius:999px;background:var(--color-border-input);position:relative;border:0;cursor:pointer;flex:none}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--color-bg);transition:left var(--motion-fast)}
.switch[aria-checked=true]{background:var(--color-accent)} .switch[aria-checked=true]::after{left:18px}
input[type=range]{accent-color:var(--color-accent);width:180px}

/* Rückmeldungen */
.banner{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-4)}
.banner.warn{background:var(--color-warning-bg);color:var(--color-warning)} .banner.err{background:var(--color-danger-bg);color:var(--color-danger)} .banner.ok{background:var(--color-success-bg);color:var(--color-success)}
.banner p{margin:0}
#toasts{position:fixed;bottom:var(--space-5);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:var(--space-2);z-index:50}
.toast{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--color-text);color:var(--color-bg);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);box-shadow:var(--shadow-pop)}
.toast.err{background:var(--color-danger);color:var(--color-on-danger)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-3);margin-bottom:var(--space-5)}
.tile{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);background:var(--color-bg);text-align:left;font:inherit;color:inherit;cursor:pointer}
.tile[aria-pressed=true]{outline:2px solid var(--color-focus)}
.tile b{display:block;font-size:var(--text-xl);line-height:var(--leading-xl)} .tile.ok b{color:var(--color-success)} .tile.bad b{color:var(--color-danger)} .tile.warn b{color:var(--color-warning)}
table.t{width:100%;border-collapse:collapse} table.t td,table.t th{padding:var(--space-2) var(--space-3);border-top:1px solid var(--color-border);text-align:left}
table.t th{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:600;border-top:0}

/* Dialog */
dialog{border:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);padding:var(--space-5);max-width:440px;width:calc(100% - 32px);background:var(--color-surface-raised);color:var(--color-text)}
dialog.wide{max-width:600px}
dialog::backdrop{background:color-mix(in srgb,var(--color-overlay) 50%,transparent)}
dialog .actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-5)}

/* Notfallblatt (Druckansicht) */
#kit{display:none}
@media print{
  body{background:#fff}
  #app,#toasts,dialog{display:none!important}
  #kit{display:block;padding:24px;font-family:var(--font-sans);color:#000}
  #kit .box{border:1px solid #000;border-radius:8px;padding:16px;margin:12px 0}
  #kit .big{font-family:var(--font-mono);font-size:18px;letter-spacing:.04em}
  #kit .line{border-bottom:1px solid #000;height:32px}
}

@media (max-width:1100px){.shell{grid-template-columns:200px 280px 1fr}}
@media (max-width:860px){
  .shell{grid-template-columns:1fr;height:auto;min-height:100vh;align-content:start}
  .side{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:var(--space-1);padding:var(--space-2);-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
  .side .grp,.side .acct{display:none} .side .bottom{display:contents}
  .side button.nav{width:auto;flex:none;white-space:nowrap;min-height:36px;border-radius:var(--radius-pill);padding:0 var(--space-3)}
  .side button.nav .n{margin-left:var(--space-1)}
  .list{border-right:0} .shell.detail-open .list{display:none} .shell:not(.detail-open) .pane{display:none}
  .grid2{grid-template-columns:1fr}
}
.row.cx{justify-content:center}
.hidden-desktop{display:none}
@media (max-width:860px){.hidden-desktop{display:inline-flex}}
details{margin:0 0 var(--space-4)} details summary{cursor:pointer;color:var(--color-accent)}
.input>.muted{display:flex;margin-right:var(--space-2)}
.list .top .input{min-width:0}
.list .top .btn{padding:0 var(--space-3);flex:none}
.md{white-space:normal} .md .mdp,.md .mdh{display:block;min-height:1em} .md .mdh{font-size:var(--text-base);margin:var(--space-2) 0 var(--space-1)}
.md ul{margin:var(--space-1) 0;padding-left:var(--space-5)} .md code{font-family:var(--font-mono);background:var(--color-surface);padding:0 4px;border-radius:4px}
/* iPhone als App vom Homescreen: Platz für Statusleiste und Home-Balken */
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
@media (max-width:860px){
  .pane{padding:var(--space-4);min-height:calc(100vh - 52px)} .list{min-height:calc(100vh - 52px)}
  .head{flex-wrap:wrap}
  .cf .iconbtn{width:44px;height:44px}
  .item{min-height:60px}
}

.catgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.catgrid .btn{justify-content:flex-start;height:44px}
.side button.nav.zero{opacity:.6}
@media (max-width:860px){.side button.nav.zero{display:none}.catgrid{grid-template-columns:1fr}}

/* Einsortieren */
.sortlist{display:flex;flex-direction:column;gap:var(--space-2);margin:var(--space-4) 0}
.sortrow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(160px,220px);align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.sortrow .check{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.sortrow .st{display:flex;flex-direction:column;min-width:0}
.sortrow .st b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sortrow .cat-ic{color:var(--color-text-muted);display:inline-flex}
@media (max-width:700px){.sortrow{grid-template-columns:1fr}.sortrow>.muted{display:none}}