/* Simple iOS Notes-ish layout (no external deps) */
:root{
  --bg:#0b0c10;
  --panel:#111218;
  --card:#141622;
  --text:#eaeaf2;
  --muted:#9aa0ad;
  --line:#23263a;
  --accent:#4c9aff;
  --danger:#ff5d5d;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text);}
a{color:var(--accent)}
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:rgba(11,12,16,.92); backdrop-filter: blur(8px);
}
.logo{font-weight:700}
.sub{font-size:12px;color:var(--muted);margin-top:2px}

#app{min-height:100dvh; display:flex; flex-direction:column;}
@supports not (height: 100dvh){ #app{min-height:100vh;}}

.topbar{padding-top: calc(14px + env(safe-area-inset-top)); padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right));}
.navbtn{display:none; min-width:44px; height:40px; padding:0 10px; align-items:center; justify-content:center;}
body.mobile .navbtn{display:inline-flex;}

.layout{display:grid; grid-template-columns: 340px 1fr; min-height: calc(100dvh - var(--topbar-h, 60px)); flex:1;}
@supports not (height: 100dvh){
  .layout{min-height: calc(100vh - var(--topbar-h, 60px));}
}
.sidebar{border-right:1px solid var(--line); background:var(--panel); padding:14px; display:flex; flex-direction:column; gap:10px;}
.editor{padding:14px; display:flex; justify-content:center; align-items:flex-start; overflow:auto;}
.card{width:min(860px, 100%); background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; box-shadow:var(--shadow);}
.searchbox input{width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:#0f1017; color:var(--text);}
.filters{display:flex; gap:8px;}
.filters select{flex:1; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:#0f1017; color:var(--text);}
.list{display:flex; flex-direction:column; gap:8px; overflow:auto; padding-right:4px; flex:1;}
.item{padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#0f1017; cursor:pointer;}
.item:hover{border-color:#2f3560}
.item .t{font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.item .m{display:flex; gap:8px; margin-top:6px; font-size:12px; color:var(--muted)}
.badge{padding:2px 6px; border:1px solid #2a2f55; border-radius:999px; font-size:11px; color:#b8c1ff}
.footer{padding-top:8px; border-top:1px solid var(--line);}
.btn{border:1px solid var(--line); background:#0f1017; color:var(--text); padding:9px 12px; border-radius:10px; cursor:pointer;}
.btn:hover{border-color:#2f3560}
.btn:disabled{opacity:.55; cursor:not-allowed;}
.btn:disabled:hover{border-color:var(--line)}
.locked .disabledWhenLocked{opacity:.55; pointer-events:none;}
input:disabled{opacity:.55; cursor:not-allowed;}
.btn.primary{background:var(--accent); color:#041022; border-color:transparent; font-weight:700}
.btn.ghost{background:transparent}
.btn.danger{background:var(--danger); color:#220808; border-color:transparent; font-weight:700}
.row{display:flex; gap:8px; margin:10px 0;}
.row input{flex:1}
input,textarea{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--line);
  background:#0f1017; color:var(--text);
}
textarea{min-height: 52vh; resize:vertical; line-height:1.5}
.sep{height:1px; background:var(--line); margin:12px 0;}
.muted{color:var(--muted)}
.small{font-size:12px}
.hint{margin-top:8px; color:#ffd37a; font-size:13px}
.editorTop{display:flex; gap:10px; align-items:center;}
.title{flex:1; font-size:18px; font-weight:750}
.editorButtons{display:flex; gap:8px}
.meta{display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin:10px 0;}
.pwCard{margin-top:10px; padding:10px; border:1px dashed #2a2f55; border-radius:12px; background:rgba(15,16,23,.55)}
.pwRow{display:flex; align-items:center; gap:8px}


/* Mobile / H5 responsive */
@media (max-width: 900px){
  .layout{grid-template-columns: 1fr;}
  /* Sidebar becomes a slide-in drawer */
  .sidebar{
    position: fixed;
    z-index: 50;
    left: 0; right: 0;
    top: var(--topbar-h, 60px);
    bottom: 0;
    border-right: none;
    border-bottom: none;
    transform: translateX(-105%);
    transition: transform .2s ease;
    box-shadow: 0 12px 40px rgba(0,0,0,.55);
  }
  body.showSidebar .sidebar{ transform: translateX(0); }
  .editor{ padding: 12px; }
  .card{ border-radius: 16px; }
  .searchbox input{ font-size: 16px; }
  input, textarea, select{ font-size: 16px; } /* avoid iOS zoom */
  .filters{ gap:10px; }
}