: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}
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{color:var(--accent); font-weight:600; letter-spacing:.2px}

/* 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:flex-end; align-items:center; gap:10px; margin-bottom:6px}

/* 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}
}