:root{
  --bg:#f1f3f4; --surface:#ffffff; --surface2:#f8f9fa;
  --text:#202124; --muted:#5f6368; --line:#dadce0;
  --accent:#1a73e8; --accent-h:#1765cc; --accent-bg:#e8f0fe;
  --danger:#d93025; --ok:#188038; --radius:12px;
  --shadow:0 1px 2px rgba(60,64,67,.10), 0 1px 3px 1px rgba(60,64,67,.08);
  --shadow-lg:0 1px 3px rgba(60,64,67,.14), 0 4px 8px 3px rgba(60,64,67,.08);
  --font:'Roboto','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.5 var(--font); -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1280px; margin:0 auto; padding:20px 16px 40px; position:relative; z-index:1}

/* Animované pozadí úvodních stránek (aurora) */
.auth-bg{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.auth-bg span{
  position:absolute; width:46vmax; height:46vmax; border-radius:50%;
  filter:blur(80px); opacity:.45; will-change:transform;
}
.auth-bg span:nth-child(1){background:#1a73e8; top:-16vmax; left:-10vmax; animation:blobA 24s ease-in-out infinite alternate}
.auth-bg span:nth-child(2){background:#22c1dc; bottom:-18vmax; right:-8vmax; animation:blobB 30s ease-in-out infinite alternate}
.auth-bg span:nth-child(3){background:#7aa8ff; top:28vmax; left:32vmax; width:34vmax; height:34vmax; opacity:.32; animation:blobC 22s ease-in-out infinite alternate}
:root[data-theme="dark"] .auth-bg span{opacity:.5}
:root[data-theme="dark"] .auth-bg span:nth-child(3){opacity:.4}
@keyframes blobA{to{transform:translate(12vmax,10vmax) scale(1.15)}}
@keyframes blobB{to{transform:translate(-10vmax,-9vmax) scale(1.12)}}
@keyframes blobC{to{transform:translate(-15vmax,-7vmax) scale(1.22)}}
.card.auth{animation:cardUp .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes cardUp{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){
  .auth-bg span{animation:none}
  .card.auth{animation:none}
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:22px; margin:0; font-weight:500}
h2{font-size:16px; margin:0 0 14px; font-weight:500}
.muted{color:var(--muted)}
code{color:var(--text); font-family:ui-monospace,Menlo,Consolas,monospace}
.brand{display:inline-flex; align-items:center; gap:10px; margin:0; font-weight:600}
.logo{display:inline-flex; align-items:center; gap:9px; line-height:1}
.logo-mark{display:block; flex:0 0 auto}
.logo-text{font-size:19px; font-weight:700; letter-spacing:.2px; white-space:nowrap}
.lg-a{color:var(--text)}
.lg-b{color:var(--accent)}
.logo-dot{color:var(--muted); font-weight:500; font-size:.7em}

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:12px 18px; margin-bottom:16px;
}
.topbar-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
#filter{width:100%}

/* Přepínač jazyků */
.lang-switch{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--surface)}
.lang-opt{padding:5px 12px; font-size:12px; font-weight:600; color:var(--muted); line-height:1.4}
.lang-opt:hover{text-decoration:none; background:var(--surface2); color:var(--text)}
.lang-opt.active{background:var(--accent); color:#fff}
.lang-opt.active:hover{background:var(--accent-h); color:#fff}
:root[data-theme="dark"] .lang-opt.active{color:#202124}

/* Karty */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px}
.card.auth{max-width:400px; margin:7vh auto 0; box-shadow:var(--shadow-lg); padding:28px}
.auth-top{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:16px}
.auth-controls{display:inline-flex; align-items:center; gap:10px}
.auth-title{font-size:20px; margin:0 0 4px; font-weight:500}
.auth-tagline{margin-top:0}

/* Přepínač tmavý/světlý režim */
.theme-toggle{
  width:34px; height:34px; min-width:34px; padding:0; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  cursor:pointer; font-size:15px; line-height:1;
}
.theme-toggle:hover{background:var(--surface2)}
.theme-toggle::before{content:"🌙"}
:root[data-theme="dark"] .theme-toggle::before{content:"☀️"}
.card.auth h1{margin-bottom:4px}
.mt{margin-top:16px}

/* Formuláře */
label{display:block; margin:0 0 14px; font-size:13px; color:var(--muted)}
input,textarea{
  width:100%; margin-top:6px; padding:10px 12px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface); color:var(--text); font:inherit;
}
input:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-bg)}
textarea{resize:vertical}
.form-actions{display:flex; gap:10px; margin-top:6px}

/* Tlačítka (Google styl) */
.btn{
  display:inline-block; padding:9px 16px; border-radius:8px; cursor:pointer;
  background:var(--surface); color:var(--text); border:1px solid var(--line);
  font:inherit; font-weight:500; text-decoration:none; line-height:1.2; white-space:nowrap;
}
.btn:hover{background:var(--surface2); text-decoration:none; box-shadow:var(--shadow)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent-h); box-shadow:var(--shadow)}
.btn.small{padding:9px 12px}
.btn.tiny{padding:6px 10px; font-size:13px}
.btn.danger{color:var(--danger); border-color:var(--line)}
.btn.danger:hover{background:var(--danger); color:#fff; border-color:var(--danger)}
.btn.block{display:block; width:100%; text-align:center}
.inline{display:inline}

/* Profil */
.profile-badge{
  font-size:12px; font-weight:600; color:var(--accent); vertical-align:middle;
  background:var(--accent-bg); padding:3px 10px; border-radius:20px; margin-left:8px;
}

/* Generátor přihlašovacích údajů (registrace) */
.gen-btn{margin-bottom:14px}
.gen-note{background:var(--surface2); border:1px solid var(--line); border-radius:8px; padding:12px; margin-bottom:14px; font-size:13px}
.gen-note[hidden]{display:none}
.gen-warn{margin:0 0 10px; color:var(--danger)}
.gen-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0; color:var(--muted)}
.gen-row code{color:var(--text); font-weight:600; word-break:break-all; font-family:ui-monospace,Menlo,Consolas,monospace}

/* Alerty */
.alert{background:#fce8e6; border:1px solid #f3c1bd; color:#c5221f; padding:10px 12px; border-radius:8px; margin-bottom:14px; font-size:14px}

/* Docs app – seznam vlevo + editor vpravo */
.docs-app{display:flex; gap:16px; align-items:stretch}
@media(max-width:820px){.docs-app{flex-direction:column}}

.docs-sidebar{
  flex:0 0 264px; width:264px; display:flex; flex-direction:column; gap:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:12px;
  position:sticky; top:16px; align-self:flex-start; max-height:calc(100vh - 32px);
}
@media(max-width:820px){.docs-sidebar{flex:auto; width:auto}}
.docs-sidebar-head{display:flex; flex-direction:column; gap:8px}

.doc-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; overflow-y:auto; max-height:68vh}
.doc-empty{padding:10px; font-size:13px}
.doc-item-link{display:block; padding:9px 12px; border-radius:8px; border:1px solid transparent}
.doc-item-link:hover{background:var(--surface2); text-decoration:none}
.doc-item.active .doc-item-link{background:var(--accent-bg)}
.doc-item.active .doc-item-title{color:var(--accent)}
.doc-item-title{display:block; color:var(--text); font-weight:500; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.doc-item-sub{display:block; color:var(--muted); font-size:12px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.docs-main{flex:1; min-width:0; display:flex; flex-direction:column}
.docs-main-head{display:flex; gap:10px; align-items:center; margin-bottom:12px}
.doc-title{
  flex:1; margin:0; padding:11px 14px; font-size:18px; font-weight:500;
  border:1px solid #dadce0; border-radius:10px; background:#fff; color:#202124;
  box-shadow:var(--shadow);
}
.doc-title::placeholder{color:#5f6368}
.doc-title:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-bg)}
.docs-main-actions{display:flex; gap:8px; align-items:center; flex-shrink:0}
.save-status{font-size:12px; color:var(--muted); white-space:nowrap; min-width:72px; text-align:right}

/* Lišta formátování (Google Docs styl) */
.editor-toolbar{
  display:flex; flex-wrap:wrap; gap:3px; align-items:center;
  padding:6px 8px; border:1px solid #dadce0; border-bottom:none;
  border-radius:12px 12px 0 0; background:#fff;
  position:sticky; top:0; z-index:5;
}
.editor-toolbar .btn.tiny{background:transparent; border-color:transparent; color:#3c4043; box-shadow:none}
.editor-toolbar .btn.tiny:hover{background:#f1f3f4; box-shadow:none}
.tb-sep{width:1px; align-self:stretch; background:#dadce0; margin:3px 4px}

/* Barevné vzorky */
.tb-colors{display:inline-flex; gap:3px; align-items:center}
.sw{
  width:20px; height:20px; min-width:20px; padding:0; cursor:pointer;
  border:1px solid rgba(0,0,0,.2); border-radius:4px; line-height:1;
}
.sw:hover{outline:2px solid var(--accent); outline-offset:1px}
.sw-none{background:#fff; color:#888; font-size:12px}

/* Editor – bílý „list" jako Google Docs */
.editor{
  flex:1; min-height:56vh; overflow:visible; position:relative;
  padding:22px 26px; border:1px solid #dadce0; border-radius:0 0 12px 12px;
  background:#fff; color:#202124; line-height:1.75; font-size:15px;
  box-shadow:var(--shadow);
}
.editor:focus{outline:none; border-color:var(--accent)}
.editor.is-empty::before{
  content:attr(data-placeholder); color:#5f6368; pointer-events:none;
  position:absolute; top:22px; left:26px;
}
.editor h1,.editor h2,.editor h3,.editor h4{margin:.7em 0 .3em; line-height:1.3; font-weight:500; color:#202124}
.editor h2{font-size:22px}
.editor h3{font-size:18px}
.editor p{margin:0 0 .7em}
.editor ul,.editor ol{margin:0 0 .7em; padding-left:1.6em}
.editor blockquote{margin:0 0 .7em; padding-left:12px; border-left:3px solid #dadce0; color:#5f6368}
.editor a{color:#1a73e8}
.editor pre,.editor code{font-family:ui-monospace,Menlo,Consolas,monospace}
.editor pre{background:#f1f3f4; padding:10px 12px; border-radius:8px; overflow:auto}

/* ===== Tmavý režim ===== */
:root[data-theme="dark"]{
  --bg:#202124; --surface:#292a2d; --surface2:#3c4043;
  --text:#e8eaed; --muted:#9aa0a6; --line:#3c4043;
  --accent:#8ab4f8; --accent-h:#aecbfa; --accent-bg:#283142;
  --danger:#f28b82; --ok:#81c995;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
  --shadow-lg:0 1px 3px rgba(0,0,0,.4), 0 4px 8px 3px rgba(0,0,0,.2);
}
:root[data-theme="dark"] .btn.primary{color:#202124}
:root[data-theme="dark"] .alert{background:#3b2523; border-color:#5c3330; color:#f2b8b5}

/* Výběr velikosti písma v liště (list zůstává světlý) */
.tb-select{
  font:inherit; font-size:13px; padding:5px 6px; border:1px solid transparent;
  border-radius:6px; background:transparent; color:#3c4043; cursor:pointer;
}
.tb-select:hover{background:#f1f3f4}

/* Počet slov / znaků */
.doc-stats{margin-top:8px; font-size:12px; color:var(--muted); text-align:right}

/* Mobilní hamburger */
.docs-toggle{display:none; background:none; border:none; cursor:pointer; font-size:20px; color:var(--text); padding:0 8px 0 0; vertical-align:middle}

/* Toast „Smazáno • Vrátit" */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  display:flex; align-items:center; gap:16px; z-index:100;
  background:#323639; color:#fff; padding:12px 18px; border-radius:8px;
  box-shadow:0 3px 12px rgba(0,0,0,.4); font-size:14px;
}
.toast[hidden]{display:none}
.toast-undo{background:none; border:none; color:#8ab4f8; font-weight:600; cursor:pointer; font:inherit; padding:0}
.toast-undo:hover{text-decoration:underline}

/* Mobilní vysouvací panel */
.drawer-backdrop{display:none}
@media(max-width:820px){
  .docs-toggle{display:inline-block}
  .docs-sidebar{
    position:fixed; left:0; top:0; bottom:0; width:284px; max-height:none; z-index:60;
    border-radius:0; transform:translateX(-100%); transition:transform .2s ease;
  }
  .docs-app.drawer-open .docs-sidebar{transform:none}
  .docs-app.drawer-open .drawer-backdrop{display:block; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:55}
  .editor{min-height:62vh}
}

/* ===== Nástroje v postranním panelu ===== */
.side-tools{
  flex:0 0 auto; margin-top:2px; padding-top:10px;
  border-top:1px solid var(--line); display:flex; flex-direction:column; gap:2px;
}
.side-tools-label{
  font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); padding:0 12px 6px;
}
.side-tool{
  display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:8px;
  color:var(--text); text-decoration:none; border:1px solid transparent;
}
.side-tool:hover{background:var(--surface2); text-decoration:none}
.side-tool.active{background:var(--accent-bg)}
.side-tool.active .side-tool-title{color:var(--accent)}
.side-tool-ico{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 28px;
  width:28px; height:28px; border-radius:8px; background:var(--accent-bg); color:var(--accent);
}
.side-tool-text{min-width:0}
.side-tool-title{display:block; font-size:14px; font-weight:500; line-height:1.2}
.side-tool-sub{display:block; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Seznam dokumentů se přizpůsobí výšce panelu (nástroje zůstanou vidět) */
.docs-sidebar{overflow:hidden}
.doc-list{flex:1 1 auto; min-height:48px; max-height:none}

/* ===== Karta nástroje (2FA generátor) ===== */
.tool-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:24px 26px; max-width:640px;
}
.tool-title{margin:0 0 4px; font-size:20px; font-weight:500}
.tool-sub{margin:0 0 20px; font-size:14px; line-height:1.6}
.tool-field{margin-bottom:0}
.tool-label{display:block; font-size:13px; color:var(--muted)}
.tool-input{font-size:15px}
select.tool-input{
  width:100%; margin-top:6px; padding:10px 12px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface); color:var(--text); font:inherit;
}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.tool-note{margin:18px 0 0; font-size:12.5px; line-height:1.6}

.totp-err{
  margin:12px 0 0; padding:10px 12px; border-radius:8px; font-size:13px;
  background:var(--accent-bg); color:var(--danger); border:1px solid var(--line);
}
.totp-err[hidden]{display:none}

.totp-out{
  margin-top:18px; padding:18px 20px; border-radius:12px;
  background:var(--accent-bg); border:1px solid var(--line);
}
.totp-out[hidden]{display:none}
.totp-account{font-size:12px; color:var(--muted); margin-bottom:8px; word-break:break-all}
.totp-account[hidden]{display:none}
.totp-code-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.totp-code{
  font-size:42px; font-weight:600; letter-spacing:.08em; line-height:1;
  color:var(--text); user-select:all;
}
.totp-code.tick{animation:totpTick .35s ease}
@keyframes totpTick{from{opacity:.2; transform:translateY(-4px)} to{opacity:1; transform:none}}
.totp-bar-wrap{margin-top:16px; height:6px; border-radius:6px; background:var(--line); overflow:hidden}
.totp-bar{display:block; height:100%; width:100%; border-radius:6px; background:var(--accent)}
.totp-bar.warn{background:var(--danger)}
.totp-left{margin-top:8px; font-size:12px; color:var(--muted)}

.totp-adv{margin-top:18px; font-size:13px}
.totp-adv summary{cursor:pointer; color:var(--muted); user-select:none}
.totp-adv summary:hover{color:var(--accent)}
.totp-adv-grid{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}
.totp-adv-grid .tool-field{flex:1 1 140px}
@media(max-width:520px){
  .totp-code{font-size:34px}
  .tool-card{padding:18px}
}
@media(prefers-reduced-motion: reduce){.totp-code.tick{animation:none}}