/* ── CUSTOM FONTS ─────────────────────────────────────────── */
@font-face {
  font-family: 'Josefin Sans';
  src: url('../fonts/josefin-sans/JosefinSans-Regular.woff2') format('woff2'),
       url('../fonts/josefin-sans/JosefinSans-Regular.woff') format('woff'),
       url('../fonts/josefin-sans/JosefinSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('../fonts/josefin-sans/JosefinSans-Medium.woff2') format('woff2'),
       url('../fonts/josefin-sans/JosefinSans-Medium.woff') format('woff'),
       url('../fonts/josefin-sans/JosefinSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Creame';
  src: url('../fonts/creame/Creame-Regular.woff2') format('woff2'),
       url('../fonts/creame/Creame-Regular.woff') format('woff'),
       url('../fonts/creame/Creame-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'World of Water';
  src: url('../fonts/world-of-water/WorldOfWater-Regular.woff2') format('woff2'),
       url('../fonts/world-of-water/WorldOfWater-Regular.woff') format('woff'),
       url('../fonts/world-of-water/WorldOfWater-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Southern Beach';
  src: url('../fonts/southern-beach/SouthernBeach-Regular.woff2') format('woff2'),
       url('../fonts/southern-beach/SouthernBeach-Regular.woff') format('woff'),
       url('../fonts/southern-beach/SouthernBeach-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --c-bg:#111418;
  --c-main-bg:#272d36;
  --c-right-bg:rgba(255,255,255,0.03);
  --c-notepad-bg:#1a1f27;
  --c-main-blur:0px;
  --c-right-blur:40px;
  --c-year:#ffffff;
  --c-month:#aad4e8;
  --c-week:#88c0d0;
  --c-account:#c2185b;
  --c-text:#cdd6f4;
  --fs-year:16px;
  --fs-month:14px;
  --fs-week:13px;
  --fs-account:13px;
  --fs-text:13px;
  --c-font:'Menlo','Monaco','Courier New',monospace;
}
html,body{width:100%;height:100%;background-color:var(--c-bg);overflow:hidden;font-family:var(--c-font);}
.bg-layer{position:fixed;inset:0;z-index:0;background-size:cover;background-position:center;background-attachment:fixed;background-repeat:no-repeat;opacity:0;transition:opacity 0.8s ease;pointer-events:none;}

/* ── LOGIN SCREEN ─────────────────────────────────────────── */
#login-screen{
  position:fixed;inset:0;background:var(--c-bg);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;
}
#login-box{
  background:#1a1f27;border:1px solid #2a3040;border-radius:16px;
  padding:40px 48px;width:420px;
}
#login-box h1{color:#e0b0ff;font-size:18px;font-weight:bold;margin-bottom:6px;}
#login-box p{color:#4a5570;font-size:12px;margin-bottom:32px;}
.word-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:28px;}
.word-slot{display:flex;flex-direction:column;gap:4px;}
.word-num{color:#3a4a5a;font-size:10px;}
.word-input{
  background:#111418;border:1px solid #2a3040;border-radius:8px;
  color:#cdd6f4;font-family:inherit;font-size:13px;
  padding:6px 10px;outline:none;width:100%;
}
.word-input:focus{border-color:#4a6a8a;background:#0d1118;}
.word-input.error{border-color:#ff5f57;}
#login-btn{
  width:100%;padding:10px;border-radius:8px;border:none;
  background:#4a6a8a;color:#cdd6f4;font-family:inherit;
  font-size:13px;cursor:pointer;transition:background 0.15s;
}
#login-btn:hover{background:#5a7a9a;}
#login-error{color:#ff5f57;font-size:11px;margin-top:12px;text-align:center;min-height:16px;}
.login-spinner{display:inline-block;width:12px;height:12px;border:2px solid #4a5570;border-top-color:#cdd6f4;border-radius:50%;animation:spin 0.6s linear infinite;margin-right:6px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── SETTINGS SCREEN ──────────────────────────────────────── */
#settings-screen{
  position:fixed;inset:0;background:var(--c-bg);
  display:none;flex-direction:column;z-index:500;
}
#settings-screen.open{display:flex;}
#settings-header{
  background:#181c22;display:flex;align-items:center;
  padding:10px 16px;gap:12px;border-bottom:1px solid #0d1014;flex-shrink:0;
}
#settings-back{background:transparent;border:1px solid #2a3040;border-radius:6px;color:#88c0d0;font-family:inherit;font-size:12px;padding:4px 10px;cursor:pointer;}
#settings-back:hover{background:#1a2030;}
#settings-title{color:#88c0d0;font-weight:bold;font-size:13px;}
#settings-body{flex:1;overflow:hidden;display:flex;gap:6px;padding:6px;}
.settings-col{
  flex:1;min-width:0;
  background:rgba(255,255,255,0.03);backdrop-filter:blur(var(--c-main-blur));-webkit-backdrop-filter:blur(var(--c-main-blur));
  border:1px solid rgba(255,255,255,0.06);border-radius:14px;
  display:flex;flex-direction:column;overflow:hidden;
}
.settings-col-header{
  padding:8px 12px;border-bottom:1px solid #0d1014;
  color:#88c0d0;font-weight:bold;font-size:12px;user-select:none;flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
}
.settings-col-body{flex:1;overflow-y:auto;padding:8px;}
.seed-box{background:#1a1f27;border:1px solid #2a3040;border-radius:10px;padding:16px;}
.seed-phrase-display{color:#e0b0ff;font-size:14px;letter-spacing:0.05em;margin-bottom:14px;line-height:1.8;}
.seed-actions{display:flex;gap:8px;flex-wrap:wrap;}
.seed-btn{background:transparent;border:1px solid #2a3040;border-radius:6px;color:#88c0d0;font-family:inherit;font-size:11px;padding:5px 12px;cursor:pointer;}
.seed-btn:hover{background:#1a2030;}
.seed-btn.danger{color:#ff8a80;border-color:#3a2020;}
.seed-btn.danger:hover{background:#2a1818;}
.status-list{display:flex;flex-direction:column;gap:4px;}
.status-row{
  display:flex;align-items:center;gap:6px;
  background:#1a1f27;border:1px solid #2a3040;border-radius:8px;padding:6px 8px;
  transition:background 0.15s,border-color 0.15s,transform 0.15s,opacity 0.15s;
}
.status-icon-input{width:32px;background:#111418;border:1px solid #2a3040;border-radius:6px;color:#cdd6f4;font-size:13px;text-align:center;padding:3px;outline:none;flex-shrink:0;}
.status-label-input{flex:0 1 auto;min-width:60px;background:#111418;border:1px solid #2a3040;border-radius:6px;color:#cdd6f4;font-family:inherit;font-size:12px;padding:4px 6px;outline:none;}
.status-key-label{color:#5a7a9a;font-size:10px;flex-shrink:0;min-width:36px;}
.status-reorder-btns{display:flex;flex-direction:column;gap:1px;flex-shrink:0;width:16px;}
.status-reorder-btn{
  background:transparent;border:none;color:#4a5570;font-size:9px;cursor:pointer;
  padding:0 3px;line-height:1.2;border-radius:3px;
}
.status-reorder-btn:hover:not(:disabled){color:#88c0d0;background:rgba(136,192,208,0.1);}
.status-reorder-btn:disabled{opacity:0.2;cursor:default;}
.status-del-btn{
  background:transparent;border:none;color:#4a5570;font-size:13px;cursor:pointer;
  padding:2px 4px;border-radius:4px;flex-shrink:0;line-height:1;margin-left:1.5ch;
}
.status-del-btn:hover{color:#ff8a80;background:#2a1818;}
.status-row-spacer{flex:1;}
.status-add-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:transparent;border:1px dashed #2a3040;border-radius:8px;
  color:#4a5570;font-family:inherit;font-size:11px;padding:6px;cursor:pointer;
  transition:border-color 0.15s,color 0.15s;width:100%;margin-top:4px;
}
.status-add-btn:hover{border-color:#4a6a8a;color:#88c0d0;}
.logout-wrap{padding:8px;}
#logout-btn{
  width:100%;padding:10px;border-radius:8px;border:none;
  background:#3a2020;color:#ff8a80;font-family:inherit;
  font-size:13px;cursor:pointer;transition:background 0.15s;
}
#logout-btn.abort{background:#1a3020;color:#80ff8a;}
#save-exit-btn{
  width:100%;padding:10px;border-radius:8px;border:none;
  background:#1a3020;color:#80ff8a;font-family:inherit;
  font-size:13px;cursor:pointer;transition:background 0.15s;
}
#save-exit-btn:hover{background:#1f3a25;}
#saved-toast{
  display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:#1a3020;color:#80ff8a;font-family:inherit;font-size:13px;
  padding:10px 32px;border-radius:8px;border:none;
  pointer-events:none;z-index:9999;opacity:0;transition:opacity 0.15s;
}
#saved-toast.visible{display:block;opacity:1;}
#saved-toast.fade-out{opacity:0;}

/* ── DELETE NOTEBOOK MODAL ───────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:10000;display:flex;align-items:center;justify-content:center;}
.modal-box{background:#1a1f27;border:1px solid #2a3040;border-radius:12px;padding:24px;max-width:320px;width:90%;display:flex;flex-direction:column;gap:14px;}
.modal-title{color:#ff8a80;font-size:13px;font-weight:bold;}
.modal-text{color:#cdd6f4;font-size:12px;line-height:1.7;}
.modal-input{background:#111418;border:1px solid #2a3040;border-radius:6px;color:#cdd6f4;font-family:inherit;font-size:12px;padding:8px 10px;outline:none;width:100%;box-sizing:border-box;}
.modal-input:focus{border-color:#4a6a8a;}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;}
.modal-cancel-btn{background:transparent;border:1px solid #2a3040;border-radius:6px;color:#7a8499;font-family:inherit;font-size:12px;padding:7px 16px;cursor:pointer;}
.modal-cancel-btn:hover{background:#1a2030;color:#cdd6f4;}
.modal-delete-btn{background:#3a2020;color:#ff8a80;border:none;border-radius:6px;font-family:inherit;font-size:12px;padding:7px 16px;cursor:pointer;transition:background 0.15s;}
.modal-delete-btn:disabled{opacity:0.35;cursor:not-allowed;}
.modal-delete-btn:not(:disabled):hover{background:#4a2828;}

/* ── UNDO DELETE TOAST ───────────────────────────────────── */
#delete-undo-toast{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#1a1f27;border:1px solid #2a3040;border-radius:8px;color:#cdd6f4;font-family:inherit;font-size:13px;padding:12px 20px;z-index:9999;align-items:center;gap:12px;}
#delete-undo-toast.visible{display:flex;}
.undo-toast-msg{flex:1;}
#undo-delete-btn{background:#1a3020;color:#80ff8a;border:none;border-radius:6px;font-family:inherit;font-size:12px;padding:6px 14px;cursor:pointer;}
#undo-delete-btn:hover{background:#1f3a25;}
#undo-countdown{color:#4a5570;font-size:11px;min-width:20px;text-align:right;}

/* ── THEME PICKER ─────────────────────────────────────────── */
.theme-group{margin-bottom:16px;}
.theme-group-title{color:#4a5570;font-size:10px;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;}
.theme-row{
  display:flex;align-items:center;gap:8px;margin-bottom:6px;
  padding:4px 0;
}
.theme-label{color:#7a8499;font-size:11px;min-width:80px;flex-shrink:0;}
.theme-color-wrap{position:relative;width:28px;height:20px;flex-shrink:0;}
.theme-color-input{
  position:absolute;inset:0;width:28px;height:20px;
  border:1px solid #2a3040;border-radius:4px;cursor:pointer;
  background:transparent;padding:0;
  -webkit-appearance:none;appearance:none;
}
.theme-color-input::-webkit-color-swatch-wrapper{padding:0;}
.theme-color-input::-webkit-color-swatch{border:none;border-radius:3px;}
.theme-color-input::-moz-color-swatch{border:none;border-radius:3px;}
.theme-range-wrap{display:flex;align-items:center;gap:6px;flex:1;min-width:0;}
.theme-range{
  flex:1;min-width:0;height:4px;-webkit-appearance:none;appearance:none;
  background:#1a1f27;border-radius:2px;outline:none;cursor:pointer;
}
.theme-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:#88c0d0;cursor:pointer;border:none;
  transition:transform 0.1s,background 0.1s;
}
.theme-range::-webkit-slider-thumb:hover{background:#a0d0e0;transform:scale(1.15);}
.theme-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#88c0d0;cursor:pointer;border:none;}
.theme-range-val{color:#88c0d0;font-size:11px;min-width:32px;text-align:right;flex-shrink:0;}
.theme-hex{
  background:#111418;border:1px solid #2a3040;border-radius:4px;
  color:#7a8499;font-family:inherit;font-size:10px;
  padding:2px 4px;width:68px;outline:none;
}
.theme-hex:focus{border-color:#4a6a8a;color:#cdd6f4;}
.theme-size-input{width:42px;background:#111418;border:1px solid #2a3040;border-radius:4px;color:#cdd6f4;font-family:inherit;font-size:10px;padding:2px 4px;text-align:center;outline:none;-moz-appearance:textfield;}
.theme-size-input::-webkit-outer-spin-button,.theme-size-input::-webkit-inner-spin-button{-webkit-appearance:none;}
.theme-font-select{flex:1;background:#111418;border:1px solid #2a3040;border-radius:4px;color:#cdd6f4;font-family:inherit;font-size:11px;padding:3px 6px;outline:none;cursor:pointer;}
.theme-toggle{display:flex;background:#111418;border-radius:6px;padding:2px;gap:2px;margin-right:auto;}
.theme-toggle-btn{font-size:10px;padding:3px 10px;border-radius:4px;cursor:pointer;color:#4a5570;user-select:none;transition:background 0.15s,color 0.15s;}
.theme-toggle-btn.active{background:#2a3a4a;color:#88c0d0;}
.theme-toggle-btn:not(.active):hover{color:#7a8499;}
.bg-image-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px;}
.bg-image-thumb{height:64px;border-radius:6px;background-size:cover;background-position:center;cursor:pointer;position:relative;border:2px solid transparent;overflow:hidden;transition:border-color 0.15s;}
.bg-image-thumb:hover{border-color:#4a6a8a;}
.bg-image-thumb.selected{border-color:#88c0d0;}
.bg-image-label{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.55);color:#cdd6f4;font-size:9px;padding:2px 5px;text-align:center;}

/* ── ADMIN PANEL ──────────────────────────────────────────── */
.admin-section{margin-top:16px;border-top:1px solid #2a3040;padding-top:12px;}
.admin-section-title{color:#e0b0ff;font-size:10px;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px;}
.admin-user-row{
  display:flex;align-items:center;gap:6px;
  background:#1a1f27;border:1px solid #2a3040;border-radius:8px;padding:6px 8px;margin-bottom:4px;
}
.admin-user-name{flex:1;color:#cdd6f4;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.admin-role-select{
  background:#111418;border:1px solid #2a3040;border-radius:4px;
  color:#88c0d0;font-family:inherit;font-size:10px;padding:2px 4px;outline:none;
}
.admin-icon-btn{background:transparent;border:1px solid #2a3040;border-radius:4px;color:#7a8499;font-size:12px;padding:2px 5px;cursor:pointer;flex-shrink:0;}
.admin-icon-btn:hover{background:#1a2030;color:#cdd6f4;}
.admin-del-btn{border-color:#3a2020;color:#ff8a80;}
.admin-del-btn:hover{background:#2a1818;color:#ff5f57;}
.admin-create-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:transparent;border:1px dashed #2a3040;border-radius:8px;
  color:#4a5570;font-family:inherit;font-size:11px;padding:6px;cursor:pointer;
  transition:border-color 0.15s,color 0.15s;width:100%;margin-top:6px;
}
.admin-create-btn:hover{border-color:#4a6a8a;color:#88c0d0;}
.admin-seed-result{
  background:#111418;border:1px solid #2a3040;border-radius:6px;padding:8px;margin-top:6px;
  color:#e0b0ff;font-size:11px;word-break:break-all;line-height:1.6;
}

/* ── NOTEPAD TABS ─────────────────────────────────────────── */
.notepad-section{margin-bottom:16px;border-bottom:1px solid #2a3040;padding-bottom:12px;}
.notepad-tabs{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap;}
.notepad-tab{
  display:flex;align-items:center;gap:4px;
  background:transparent;border:1px solid #2a3040;border-radius:6px;
  padding:4px 8px;cursor:pointer;font-size:11px;color:#7a8499;
  transition:border-color 0.15s,color 0.15s;
}
.notepad-tab.active{border-color:#88c0d0;color:#88c0d0;}
.notepad-tab:hover{border-color:#4a6a8a;}
.notepad-tab-emoji{font-size:13px;}
.notepad-tab-name{max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.notepad-edit-row{
  display:flex;align-items:center;gap:6px;margin-bottom:6px;
}
.notepad-emoji-input{
  width:32px;background:#111418;border:1px solid #2a3040;border-radius:4px;
  color:#cdd6f4;font-size:14px;text-align:center;padding:3px;outline:none;
}
.notepad-name-input{
  width:80px;background:#111418;border:1px solid #2a3040;border-radius:4px;
  color:#cdd6f4;font-family:inherit;font-size:11px;padding:4px 6px;outline:none;
}
.notepad-copy-btn{
  background:transparent;border:1px solid #2a3040;border-radius:4px;color:#7a8499;
  font-size:10px;cursor:pointer;padding:3px 6px;white-space:nowrap;
}
.notepad-copy-btn:hover{border-color:#4a6a8a;color:#88c0d0;}
.notepad-del-btn{
  background:transparent;border:none;color:#4a5570;font-size:13px;cursor:pointer;
  padding:2px 4px;border-radius:4px;
}
.notepad-del-btn:hover{color:#ff8a80;background:#2a1818;}
.notepad-add-btn{
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px dashed #2a3040;border-radius:6px;
  color:#4a5570;font-size:11px;padding:4px 8px;cursor:pointer;
  transition:border-color 0.15s,color 0.15s;
}
.notepad-add-btn:hover{border-color:#4a6a8a;color:#88c0d0;}

/* ── SETTINGS NOTEBOOK SELECTOR ──────────────────────────── */
.settings-nb-selector{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;gap:6px;
  margin-bottom:10px;padding:8px 0 10px;
  border-bottom:1px solid #1e2530;
  flex-wrap:wrap;
  background:#1a1f27;
}
.settings-nb-tab{display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:8px;cursor:pointer;opacity:0.55;transition:opacity 0.2s,background 0.2s,border-color 0.2s;color:#cdd6f4;font-size:13px;border:1px solid #2a3040;}
.settings-nb-tab.active{opacity:1;background:rgba(136,192,208,0.18);border-color:#88c0d0;}
.settings-nb-tab:not(.active):hover{opacity:0.85;border-color:#3a4a5a;}
.settings-nb-tab-emoji{font-size:16px;line-height:1;}
.settings-nb-add{background:transparent;border:none;color:#4a5570;font-size:16px;padding:0 4px;cursor:pointer;opacity:0.5;transition:opacity 0.2s;line-height:1;}
.settings-nb-add:hover{opacity:1;color:#88c0d0;}

/* ── FONT COLORS 2-COLUMN GRID ───────────────────────────── */
.theme-colors-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:4px;}
.theme-cell{display:flex;flex-direction:column;gap:4px;background:#111418;border:1px solid #1a2030;border-radius:6px;padding:6px;}
.theme-cell-label{color:#4a5570;font-size:9px;text-transform:uppercase;letter-spacing:0.07em;}
.theme-cell-controls{display:flex;align-items:center;gap:4px;}
.theme-hex-sm{width:50px;background:transparent;border:none;border-bottom:1px solid #2a3040;color:#7a8499;font-family:inherit;font-size:10px;padding:1px 2px;outline:none;}
.theme-hex-sm:focus{border-color:#4a6a8a;color:#cdd6f4;}

/* ── PANELS SIDE BY SIDE ─────────────────────────────────── */
.theme-panels-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;}
.theme-panel-col{display:flex;flex-direction:column;gap:4px;min-width:0;}

/* ── MAIN APP ─────────────────────────────────────────────── */
#app{display:none;flex-direction:column;width:100%;height:100vh;position:relative;z-index:1;}
#app.open{display:flex;}
#panels{display:flex;gap:10px;flex:1;padding:10px;min-height:0;overflow:hidden;}
#left-wrap{flex:2 1 0;min-width:0;background:var(--c-main-bg);backdrop-filter:blur(var(--c-main-blur));-webkit-backdrop-filter:blur(var(--c-main-blur));border-radius:10px;overflow:hidden;display:flex;flex-direction:column;min-height:0;transition:background 0.4s ease;}
#right-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:10px;min-height:0;}
#right-wrap{flex:1;background:var(--c-right-bg);backdrop-filter:blur(var(--c-right-blur));-webkit-backdrop-filter:blur(var(--c-right-blur));border:1px solid rgba(255,255,255,0.06);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;min-height:0;position:relative;}
#search-bar{flex-shrink:0;height:40px;background:#1a1f27;border-radius:10px;border:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;padding:0 4px;}
#search-input{flex:1;background:transparent;border:none;color:#cdd6f4;font-size:13px;padding:0 8px;outline:none;height:28px;caret-color:#88c0d0;font-family:inherit;}
#search-input::placeholder{color:#4a5570;}
#editor{display:flex;flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;align-items:flex-start;}
#gutter{background:transparent;color:#4a5068;font-size:11px;padding:8px 0;min-width:38px;text-align:right;user-select:none;border-right:1px solid rgba(255,255,255,0.05);flex-shrink:0;}
.gutter-line{padding:0 7px 0 4px;min-height:22px;display:flex;align-items:center;justify-content:flex-end;}
#content{flex:1;min-width:0;overflow:hidden;padding:8px 0;transition:opacity 0.3s ease;}
.row{min-height:22px;display:flex;align-items:center;padding:2px 8px;margin:0 30px 0 25px;border-radius:8px;cursor:default;outline:none;user-select:none;position:relative;}
.row.focused{background:#323a47;}
#left-wrap:not(:hover) .row.focused{background:transparent;}
#left-wrap:not(:hover) .row.focused .del-hint{opacity:0!important;}
.row.drag-over{background:rgba(136,192,208,0.22);outline:1px solid #88c0d0;}
.indent{display:inline-block;width:var(--indent-size,18px);flex-shrink:0;}
.toggle{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;color:#5a6478;font-size:10px;flex-shrink:0;margin-right:2px;cursor:pointer;transition:transform 0.12s;}
.toggle.open{transform:rotate(0deg);}.toggle.closed{transform:rotate(-90deg);}
.toggle-spacer{width:16px;flex-shrink:0;margin-right:2px;}
.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:text;}
.label-flex{flex:1;min-width:0;}.label-shrink{flex:0 1 auto;min-width:0;}
.row.expanded .label{white-space:pre-wrap;overflow:visible;text-overflow:clip;word-break:break-word;}
.level-4 .label,.level-5 .label{cursor:pointer;}
.level-0 .label{color:var(--c-year);font-weight:bold;font-size:var(--fs-year);}
.level-1 .label{color:var(--c-month);font-weight:bold;font-size:var(--fs-month);}
.level-2 .label{color:var(--c-week);font-weight:bold;font-size:var(--fs-week);}
.level-3 .label{color:var(--c-account);font-weight:bold;font-size:var(--fs-account);}
.row-group .label{color:#e0b0ff;font-weight:bold;font-size:13px;}
.level-4 .label{color:var(--c-text);font-size:var(--fs-text);}
.level-5 .label{color:var(--c-text);font-size:var(--fs-text);opacity:0.7;}
.level-5 a.label{color:#88c0d0;opacity:1;text-decoration:none;}
.level-5 a.label:hover{text-decoration:underline;}
.level-5 a.sub-attach{color:#b7d7a8;}
.level-5 a.sub-attach:hover{text-decoration:underline;}
.row-edit{background:#1a1f27;border:1px solid #3a4a5a;border-radius:8px;color:#cdd6f4;font-family:inherit;font-size:13px;padding:0 8px;outline:none;height:20px;min-width:120px;flex:0 1 auto;max-width:280px;caret-color:#88c0d0;user-select:text;}
.row-edit::placeholder{color:#3a4a5a;}.row-edit:focus{border-color:#4a6a8a;background:#1e2530;}
textarea.row-edit-multi{resize:none;overflow:hidden;line-height:1.4;padding:4px 8px;max-width:none;flex:1;height:auto;min-height:20px;white-space:pre-wrap;word-break:break-word;}
.group-count{color:#4a5570;font-style:italic;font-size:11px;opacity:0.7;flex-shrink:0;}
.add-btn{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:3px;background:transparent;border:1px solid #3a4050;color:#6c7490;font-size:11px;cursor:pointer;line-height:1;flex-shrink:0;}
.add-btn:hover{background:#323a47;color:#cdd6f4;}
.del-hint{font-size:10px;color:#ff5f57;opacity:0;margin-left:6px;flex-shrink:0;}
.row.focused .del-hint{opacity:0.5;}
.status-picker{display:inline-flex;align-items:center;gap:2px;background:#1a1f27;border:1px solid #3a4255;border-radius:6px;padding:1px 4px;position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:10;animation:spIn 0.12s ease;}
@keyframes spIn{from{opacity:0;transform:translateY(-50%) scaleX(0.7);}to{opacity:1;transform:translateY(-50%) scaleX(1);}}
@keyframes fadeIn{from{opacity:0;transform:scaleX(0.7);}to{opacity:1;transform:scaleX(1);}}
.sp-option{display:inline-flex;align-items:center;justify-content:center;width:22px;height:18px;border-radius:4px;font-size:13px;line-height:1;}
.sp-option.sp-selected{background:#2d4050;outline:1px solid #5a8ab0;}
.todo-picker{display:inline-flex;align-items:center;gap:2px;background:#1a1f27;border:1px solid #3a4255;border-radius:5px;padding:1px 3px;margin-left:6px;flex-shrink:0;animation:fadeIn 0.12s ease;transform-origin:left center;}
.tp-option{display:inline-flex;align-items:center;justify-content:center;width:20px;height:16px;border-radius:3px;font-size:11px;line-height:1;}
.tp-option.tp-selected{background:#2d4050;outline:1px solid #5a8ab0;}
#notebook-bar{flex-shrink:0;height:40px;background:var(--c-right-bg);backdrop-filter:blur(var(--c-right-blur));-webkit-backdrop-filter:blur(var(--c-right-blur));border-radius:14px;border:1px solid rgba(255,255,255,0.06);display:flex;align-items:stretch;overflow:hidden;user-select:none;}
.nb-left,.nb-right{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;}
.nb-left{border-right:1px solid rgba(255,255,255,0.06);cursor:pointer;}
.nb-left:hover{background:rgba(255,255,255,0.03);}
.right-tab-np{font-size:15px;padding:2px 5px;border-radius:6px;cursor:pointer;opacity:0.45;transition:opacity 0.3s,background 0.3s,transform 0.3s;}
.right-tab-np.active{opacity:1;background:rgba(136,192,208,0.12);transform:scale(1.15);}
.right-tab-np:not(.active):hover{opacity:0.8;}
#todo-content{transition:opacity 0.3s ease;}
.view-switch{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;padding:4px 6px;border-radius:8px;transition:background 0.2s;}
.view-switch:hover{background:rgba(255,255,255,0.05);}
.view-toggle{position:relative;width:44px;height:24px;background:rgba(0,0,0,0.35);border-radius:12px;flex-shrink:0;}
.view-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;background:var(--c-week);border-radius:50%;transition:left 0.3s cubic-bezier(.4,0,.2,1),background 0.3s,box-shadow 0.3s;box-shadow:0 0 10px rgba(136,192,208,0.55);}
.view-switch.right .view-knob{left:23px;background:var(--c-account);box-shadow:0 0 10px rgba(194,24,91,0.6);}
.view-label{font-size:11px;font-weight:500;color:#4a5570;transition:color 0.3s,text-shadow 0.3s;}
.view-label.active{color:#cdd6f4;text-shadow:0 0 8px rgba(136,192,208,0.45);}

#todo-title{padding:6px 10px 4px;font-size:var(--fs-week);color:#febc2e;font-weight:bold;flex-shrink:0;user-select:none;}
#todo-content{flex:1;overflow-y:auto;overflow-x:hidden;min-width:0;display:flex;flex-direction:column;}
#editor.notepad-mode #gutter{display:none;}
#editor.notepad-mode #content{padding:0;display:flex;flex-direction:column;}
.notepad-wrapper{flex:1;margin:12px;background:var(--c-notepad-bg);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;min-height:0;}
.notepad-main-textarea{flex:1;background:transparent;border:none;color:var(--c-text);font-family:inherit;font-size:var(--fs-text);padding:16px;resize:none;outline:none;line-height:1.8;min-height:0;}
.notepad-main-textarea::placeholder{color:#3a4050;}
.todo-acc-header{height:20px;display:flex;align-items:center;padding:0 5px 0 8px;margin:0 10px;border-radius:8px;cursor:pointer;user-select:none;overflow:hidden;}
.todo-acc-toggle{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;color:#5a6478;font-size:10px;margin-right:2px;transition:transform 0.12s;}
.todo-acc-toggle.open{transform:rotate(0deg);}.todo-acc-toggle.closed{transform:rotate(-90deg);}
.todo-acc-label{font-size:var(--fs-account);color:var(--c-account);font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.todo-count{font-size:10px;color:#4a5570;font-style:italic;margin-left:6px;opacity:0.8;}
.todo-item{height:20px;display:flex;align-items:center;padding:0 5px 0 16px;margin:0 10px;border-radius:8px;font-size:var(--fs-text);color:var(--c-text);cursor:default;user-select:none;}
.todo-item:hover{background:#252b35;}
.todo-item-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}

/* ── BOTTOM BAR ───────────────────────────────────────────── */
.bottom-bar{padding:8px;display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-shrink:0;}
.app-version{color:#7a8499;font-size:11px;font-family:-apple-system,'SF Pro Text','Helvetica Neue',sans-serif;flex-shrink:0;user-select:none;}
#sync-led{
  width:7px;height:7px;border-radius:50%;
  background:#3a4050;
  transition:background 0.4s ease;
  flex-shrink:0;
}
#sync-led.green{background:#28c840;}
#sync-led.grey{background:#4a5570;}
#sync-led.error{background:#ff5f57;}
#sync-led.blink-once{animation:ledBlink 0.6s ease 1;}
#sync-led.blink-twice{animation:ledBlink 0.5s ease 2;}
@keyframes ledBlink{
  0%{opacity:1;}
  40%{opacity:0.15;}
  100%{opacity:1;}
}
#settings-btn{background:transparent;border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#7a8499;font-family:-apple-system,'SF Pro Text','Helvetica Neue',sans-serif;font-size:11px;padding:6px 12px;cursor:pointer;flex-shrink:0;}
#settings-btn:hover{color:#cdd6f4;border-color:rgba(255,255,255,0.2);}

/* ── Drag-and-drop positional indicators ──────────────────────── */
.drop-before::before,.drop-after::after{content:'';position:absolute;left:0;right:0;height:2px;background:var(--c-accent,#4a9eff);pointer-events:none;z-index:20;}
.drop-before::before{top:-1px;}.drop-after::after{bottom:-1px;}
.drop-nest{outline:1px solid var(--c-accent,#4a9eff);background:rgba(74,158,255,0.08);}

/* ── Scrollbars ───────────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.55);border-radius:3px;}
::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,0.55);}
* { scrollbar-color: rgba(0,0,0,0.55) transparent; scrollbar-width: thin; }

/* ── HINT CARD (unified glass template) ─────────────────────── */
#ob-hint-card{
  position:fixed;bottom:24px;left:24px;z-index:1400;width:286px;
  background:rgba(10,14,20,0.80);
  backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
  border:1px solid rgba(136,192,208,0.16);
  border-radius:18px;
  box-shadow:
    0 8px 48px rgba(0,0,0,0.55),
    0 0 0 1px rgba(136,192,208,0.06),
    inset 0 1px 0 rgba(255,255,255,0.09),
    0 0 72px rgba(136,192,208,0.08);
  opacity:0;transform:translateY(14px);
  transition:opacity 0.32s ease,transform 0.4s cubic-bezier(0.34,1.4,0.64,1);
}
#ob-hint-card.oh-visible{opacity:1;transform:translateY(0);}

/* body fades on prev/next */
.oh-body{padding:14px 16px 13px;transition:opacity 0.14s ease;}
.oh-body.oh-fade{opacity:0;}

/* header */
.oh-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:9px;
}
.oh-title{
  color:#88c0d0;font-size:10px;font-weight:bold;
  letter-spacing:0.1em;text-transform:uppercase;
  text-shadow:0 0 12px rgba(136,192,208,0.45);
}
.oh-counter{color:rgba(255,255,255,0.18);font-size:10px;}

/* dividers */
.oh-divider{height:1px;background:rgba(255,255,255,0.06);margin:0 -16px;}
.oh-divider-lo{margin-top:10px;}

/* rows */
.oh-rows{display:flex;flex-direction:column;gap:10px;padding:10px 0;}
.oh-row{display:flex;align-items:center;gap:10px;}
.oh-demo{
  display:flex;align-items:center;justify-content:center;gap:4px;
  width:54px;flex-shrink:0;
}
.oh-text{color:rgba(205,214,244,0.48);font-size:11px;line-height:1.45;}
.oh-text b{color:rgba(205,214,244,0.88);font-weight:500;}

/* key badges */
.oh-kbd{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:21px;padding:0 6px;
  background:rgba(136,192,208,0.08);
  border:1px solid rgba(136,192,208,0.22);
  border-bottom:2px solid rgba(0,0,0,0.45);
  border-radius:6px;
  color:rgba(136,192,208,0.92);font-size:12px;font-family:inherit;
  box-shadow:0 0 8px rgba(136,192,208,0.2);
  animation:oh-key-press 3.5s ease-in-out infinite;
}
@keyframes oh-key-press{
  0%,30%,100%{
    transform:scale(1) translateY(0);
    border-bottom-width:2px;
    background:rgba(136,192,208,0.08);
    box-shadow:0 0 8px rgba(136,192,208,0.2);
  }
  44%,56%{
    transform:scale(0.87) translateY(1px);
    border-bottom-width:1px;
    background:rgba(136,192,208,0.2);
    box-shadow:0 0 16px rgba(136,192,208,0.5);
  }
}

/* right-click mouse */
.oh-mouse{
  position:relative;width:18px;height:26px;flex-shrink:0;
  border:1.5px solid rgba(136,192,208,0.28);
  border-radius:9px 9px 7px 7px;
  overflow:hidden;
}
.oh-mouse::before{
  content:'';position:absolute;
  top:0;left:calc(50% - 0.75px);width:1.5px;height:44%;
  background:rgba(136,192,208,0.2);
}
.oh-mouse::after{
  content:'';position:absolute;
  top:43%;left:0;right:0;height:1px;
  background:rgba(136,192,208,0.12);
}
.oh-mb-r{
  position:absolute;top:0;left:50%;right:0;height:42%;
  border-top-right-radius:7.5px;
  animation:oh-rc-press 2.8s ease-in-out infinite;
}
@keyframes oh-rc-press{
  0%,32%,100%{background:transparent;box-shadow:none;}
  46%,62%{
    background:rgba(136,192,208,0.32);
    box-shadow:inset 0 0 6px rgba(136,192,208,0.3),0 0 10px rgba(136,192,208,0.25);
  }
}

/* plain icon */
.oh-icon{
  color:rgba(136,192,208,0.65);font-size:15px;line-height:1;
}

/* animated expand arrow */
.oh-arr{
  color:rgba(136,192,208,0.75);font-size:13px;display:inline-block;
  animation:oh-arr-rot 3s ease-in-out infinite;
}
@keyframes oh-arr-rot{
  0%,18%  {transform:rotate(0deg);}
  42%,68% {transform:rotate(90deg);}
  92%,100%{transform:rotate(0deg);}
}
.oh-arr-child{
  display:inline-block;width:20px;height:3px;
  background:rgba(136,192,208,0.25);border-radius:2px;margin-left:3px;
  animation:oh-child 3s ease-in-out infinite;transform-origin:left center;
}
@keyframes oh-child{
  0%,18%  {opacity:0;transform:scaleX(0);}
  42%,68% {opacity:1;transform:scaleX(1);}
  92%,100%{opacity:0;transform:scaleX(0);}
}

/* footer nav */
.oh-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:10px;gap:6px;
}
.oh-nav-btn{
  background:transparent;
  border:1px solid rgba(136,192,208,0.18);border-radius:8px;
  color:rgba(136,192,208,0.7);font-family:inherit;font-size:11px;
  padding:5px 10px;cursor:pointer;
  transition:background 0.15s,color 0.15s,border-color 0.15s;
  white-space:nowrap;
}
.oh-nav-btn:hover:not(:disabled){
  background:rgba(136,192,208,0.1);
  color:rgba(136,192,208,1);
  border-color:rgba(136,192,208,0.35);
}
.oh-nav-btn:disabled{opacity:0.2;cursor:default;}
.oh-close-btn{
  background:transparent;border:none;
  color:rgba(255,255,255,0.22);font-family:inherit;font-size:11px;
  cursor:pointer;padding:5px 4px;
  transition:color 0.15s;white-space:nowrap;
}
.oh-close-btn:hover{color:rgba(255,255,255,0.55);}
/* drag bar */
.oh-drag-bar{
  width:24px;height:6px;border-radius:3px;
  background:rgba(136,192,208,0.22);border:1px solid rgba(136,192,208,0.32);
  animation:oh-drag-slide 3s ease-in-out infinite;
}
@keyframes oh-drag-slide{
  0%,12%  {transform:translateX(0);box-shadow:none;}
  42%,52% {transform:translateX(10px);box-shadow:-5px 0 10px rgba(136,192,208,0.18);}
  82%,100% {transform:translateX(0);box-shadow:none;}
}
/* hold timer */
.oh-timer{width:26px;height:5px;border:1px solid rgba(136,192,208,0.2);border-radius:3px;overflow:hidden;position:relative;}
.oh-timer-fill{
  position:absolute;inset:0;background:rgba(136,192,208,0.55);
  transform-origin:left;transform:scaleX(0);
  animation:oh-timer-anim 3s ease-in-out infinite;
}
@keyframes oh-timer-anim{
  0%,5%    {transform:scaleX(0);}
  55%,65%  {transform:scaleX(1);box-shadow:0 0 6px rgba(136,192,208,0.4);}
  92%,100% {transform:scaleX(0);}
}
/* file icon */
.oh-file{
  width:13px;height:16px;border:1.5px solid rgba(136,192,208,0.3);
  border-radius:2px 4px 2px 2px;position:relative;
  animation:oh-file-bounce 2.5s ease-in-out infinite;
}
.oh-file::before{content:'';position:absolute;top:-1.5px;right:-1.5px;
  width:4px;height:4px;background:rgba(10,14,20,0.9);
  border-left:1.5px solid rgba(136,192,208,0.3);border-bottom:1.5px solid rgba(136,192,208,0.3);}
@keyframes oh-file-bounce{
  0%,15%  {transform:translateY(0) scale(1);opacity:1;}
  40%,55% {transform:translateY(3px) scale(0.95);opacity:0.75;}
  85%,100%{transform:translateY(0) scale(1);opacity:1;}
}
/* swipe gesture — two finger dots */
.oh-swipe{position:relative;width:28px;height:14px;}
.oh-swipe::before,.oh-swipe::after{
  content:'';position:absolute;top:50%;
  width:5px;height:5px;border-radius:50%;
  background:rgba(136,192,208,0.5);
  transform:translateY(-50%);
  animation:oh-swipe-move 3s ease-in-out infinite;
}
.oh-swipe::before{left:4px;}
.oh-swipe::after {left:12px;animation-delay:0.06s;}
@keyframes oh-swipe-move{
  0%,15%  {transform:translateY(-50%) translateX(0);opacity:0.45;}
  45%,55% {transform:translateY(-50%) translateX(9px);opacity:1;
           filter:drop-shadow(0 0 3px rgba(136,192,208,0.5));}
  85%,100%{transform:translateY(-50%) translateX(0);opacity:0.45;}
}
/* tab click */
.oh-tab{
  width:24px;height:10px;border-radius:4px 4px 0 0;
  background:rgba(136,192,208,0.1);border:1px solid rgba(136,192,208,0.22);
  border-bottom:none;
  animation:oh-tab-click 3s ease-in-out infinite;
}
@keyframes oh-tab-click{
  0%,20%,80%,100%{background:rgba(136,192,208,0.1);box-shadow:none;}
  42%,60%        {background:rgba(136,192,208,0.3);
                  box-shadow:0 0 8px rgba(136,192,208,0.3),inset 0 1px 0 rgba(255,255,255,0.12);}
}