/* ── 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);background-size:cover;background-position:center;background-attachment:fixed;overflow:hidden;font-family:var(--c-font);}

/* ── 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-row.dragging{opacity:0.4;border-color:#4a6a8a;}
.status-row.drag-over{border-color:#88c0d0;background:#1e2a35;}
.drag-handle{
  cursor:grab;color:#3a4a5a;font-size:11px;padding:2px 2px 2px 0;user-select:none;flex-shrink:0;
  display:flex;align-items:center;
}
.drag-handle:active{cursor:grabbing;}
.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:1;min-width:0;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:#3a4a5a;font-size:9px;flex-shrink:0;min-width:30px;}
.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;
}
.status-del-btn:hover{color:#ff8a80;background:#2a1818;}
.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;}

/* ── 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;}
.theme-range{
  flex:1;height:4px;-webkit-appearance:none;appearance:none;
  background:#1a1f27;border-radius:2px;outline:none;
}
.theme-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:#88c0d0;cursor:pointer;border:none;
}
.theme-range-val{color:#4a5570;font-size:10px;min-width:30px;text-align:right;}
.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:#1a1f27;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;}

/* ── MAIN APP ─────────────────────────────────────────────── */
#app{display:none;flex-direction:column;width:100%;height:100vh;}
#app.open{display:flex;}
#panels{display:flex;gap:6px;flex:1;padding:6px;min-height:0;overflow:hidden;}
#left-wrap{flex:0 0 70%;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;}
#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;}
#editor{display:flex;flex:1;overflow-y:auto;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;height:22px;display:flex;align-items:center;justify-content:flex-end;}
#content{flex:1;padding:8px 0;}
.row{height:22px;display:flex;align-items:center;padding:0 8px;cursor:default;outline:none;user-select:none;position:relative;}
.row.focused{background:#323a47;}.row.hovered{background:#2e3540;}
.indent{display:inline-block;width: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;}
.label-flex{flex:1;}.label-shrink{flex:0 1 auto;}
.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);}
.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;}
.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.hovered .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;margin-left:8px;flex-shrink:0;animation:fadeIn 0.12s ease;transform-origin:left center;}
@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;}
#todo-header{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid #0d1014;flex-shrink:0;user-select:none;}
.right-tab-todo{color:#febc2e;font-weight:bold;font-size:var(--fs-week);padding:2px 6px;cursor:default;}
.right-tab-np{font-size:15px;padding:2px 5px;border-radius:6px;cursor:pointer;opacity:0.45;transition:opacity 0.15s,background 0.15s;}
.right-tab-np.active{opacity:1;background:rgba(136,192,208,0.12);}
.right-tab-np:not(.active):hover{opacity:0.8;}
#todo-content{flex:1;overflow-y:auto;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 8px;cursor:pointer;user-select:none;}
.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;}
.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 8px 0 26px;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;}
#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);}