:root{--bg-body: #E3E3E1;--bg-card: #e8e8e6;--bg-card-hover: #d8d8d6;--bg-panel: #f4f4f2;--bg-panel-alt: #f6f6f4;--bg-panel-light: #f3f3f1;--bg-input: #fff;--bg-input-focus: #f9f9f8;--bg-keyboard: #dededc;--bg-slot: #b8b8b6;--bg-me: #d0d0ce;--bg-me-hover: #c4c4c2;--bg-active-filter: #d0d0ce;--bg-dropdown-active: #e0e0de;--bg-option-hover: #f0f0ee;--text-primary: #1a1a1a;--text-secondary: #555;--text-tertiary: #888;--text-quaternary: #aaa;--text-quinary: #bbb;--text-detail: #2a2a2a;--text-hint: #666;--text-placeholder: #8a8a88;--border-primary: #1a1a1a;--border-light: #ccc;--border-lighter: #ddd;--border-panel: #e0e0de;--border-keyboard: #c4c2bc;--border-gold-sep: #b8a070;--border-card-sep: #e8e8e6;--shadow-primary: #1a1a1a;--shadow-btn-dark: #555;--shadow-btn-hover: #333;--shadow-panel: rgba(0, 0, 0, .09);--shadow-panel-sm: rgba(0, 0, 0, .05);--shadow-detail: rgba(0, 0, 0, .11);--shadow-detail-sm: rgba(0, 0, 0, .07);--shadow-kb-inset: rgba(0, 0, 0, .15);--shadow-kb-inset-sm: rgba(0, 0, 0, .1);--shadow-kb-panel: rgba(0, 0, 0, .12);--shadow-overlay: rgba(0, 0, 0, .6);--shadow-overlay-light: rgba(0, 0, 0, .45);--shadow-entry-hover: rgba(0, 0, 0, .04);--shadow-entry-active: rgba(0, 0, 0, .06);--dot-neutral: #c8c8c6;--dot-line: #ddd;--status-neutral: #ddd;--btn-dark-bg: #1a1a1a;--btn-dark-color: #fff;--disabled-bg: #c8c8c6;--disabled-border: #9a9a98;--disabled-color: #7a7a78}body.dark{--bg-body: #1a1a1a;--bg-card: #2a2a2a;--bg-card-hover: #3a3a3a;--bg-panel: #232323;--bg-panel-alt: #252525;--bg-panel-light: #282828;--bg-input: #2a2a2a;--bg-input-focus: #303030;--bg-keyboard: #252525;--bg-slot: #3a3a3a;--bg-me: #333333;--bg-me-hover: #3d3d3d;--bg-active-filter: #3a3a3a;--bg-dropdown-active: #383838;--bg-option-hover: #303030;--text-primary: #e8e8e6;--text-secondary: #aaaaaa;--text-tertiary: #999999;--text-quaternary: #777777;--text-quinary: #666666;--text-detail: #d0d0ce;--text-hint: #999999;--text-placeholder: #666666;--border-primary: #555555;--border-light: #444444;--border-lighter: #3a3a3a;--border-panel: #444444;--border-keyboard: #444444;--border-gold-sep: #8a6d40;--border-card-sep: #3a3a3a;--shadow-primary: #000000;--shadow-btn-dark: #000000;--shadow-btn-hover: #000000;--shadow-panel: rgba(0, 0, 0, .25);--shadow-panel-sm: rgba(0, 0, 0, .15);--shadow-detail: rgba(0, 0, 0, .3);--shadow-detail-sm: rgba(0, 0, 0, .2);--shadow-kb-inset: rgba(0, 0, 0, .3);--shadow-kb-inset-sm: rgba(0, 0, 0, .2);--shadow-kb-panel: rgba(0, 0, 0, .25);--shadow-overlay: rgba(0, 0, 0, .75);--shadow-overlay-light: rgba(0, 0, 0, .65);--shadow-entry-hover: rgba(255, 255, 255, .04);--shadow-entry-active: rgba(255, 255, 255, .06);--dot-neutral: #555555;--dot-line: #444444;--status-neutral: #555555;--btn-dark-bg: #e8e8e6;--btn-dark-color: #1a1a1a;--disabled-bg: #3a3a3a;--disabled-border: #555555;--disabled-color: #777777}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-body);color:var(--text-primary);font-family:"Source Sans 3",sans-serif}button,input,select,textarea{color:inherit}.gold-icon{height:.9em;width:auto;vertical-align:-.1em;display:inline-block;margin-left:.2em}.header-left{flex:1}.header-right{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex:1}.header-user-wrap{display:inline-flex;align-items:center;gap:.6rem;background:var(--bg-card);border:2px solid var(--border-primary);border-radius:999px;padding:.3rem 1rem .3rem .3rem;box-shadow:0 4px 0 var(--shadow-primary);-webkit-user-select:none;user-select:none;cursor:pointer;transition:transform .08s,box-shadow .08s,background .12s}.header-user-wrap:hover{background:var(--bg-card-hover);transform:translateY(2px);box-shadow:0 2px 0 var(--shadow-primary)}.header-user-wrap:active{transform:translateY(4px);box-shadow:none}.header-user-wrap img{border-radius:50%}.header-user-wrap .gold{border-left:1.5px solid var(--border-gold-sep);padding-left:.6rem}.header-username{font-weight:600;font-size:1.4rem}.header-title{font-family:Merriweather,serif;font-size:2.3rem;font-weight:850;color:var(--text-primary);margin:0;white-space:nowrap}.gold{font-weight:700;font-size:1.4rem;color:#b8860b}.btn-back,.btn-logout{width:2.8rem;height:2.8rem;border:2px solid var(--border-primary);border-radius:50%;background:var(--bg-card);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 4px 0 var(--shadow-primary);transition:transform .08s,box-shadow .08s,background .12s}.btn-back:hover,.btn-logout:hover{background:var(--bg-card-hover);transform:translateY(2px);box-shadow:0 2px 0 var(--shadow-primary)}.btn-back:active,.btn-logout:active{transform:translateY(4px);box-shadow:none}.btn-back svg,.btn-logout svg{pointer-events:none}.btn-gallery{height:2.8rem;padding:0 1rem;border:2px solid var(--border-primary);border-radius:999px;background:var(--bg-card);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;font-size:.82rem;font-weight:700;white-space:nowrap;box-shadow:0 4px 0 var(--shadow-primary);transition:transform .08s,box-shadow .08s,background .12s}.btn-gallery:hover{background:var(--bg-card-hover);transform:translateY(2px);box-shadow:0 2px 0 var(--shadow-primary)}.btn-gallery:active{transform:translateY(4px);box-shadow:none}.btn-theme{width:2.8rem;height:2.8rem;border:2px solid var(--border-primary);border-radius:50%;background:var(--bg-card);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 4px 0 var(--shadow-primary);transition:transform .08s,box-shadow .08s,background .12s;font-size:1.2rem;line-height:1}.btn-theme:hover{background:var(--bg-card-hover);transform:translateY(2px);box-shadow:0 2px 0 var(--shadow-primary)}.btn-theme:active{transform:translateY(4px);box-shadow:none}.page-layout{display:flex;flex:1;align-items:flex-start}.col-side{width:320px;flex-shrink:0;padding:1.5rem 1rem}