:root{--bg: #070708;--surface: #0e0e11;--card: #111116;--card-hover: #161620;--red: #a8192a;--red-dim: rgba(168,25,42,.12);--gold: #b8943a;--green: #4e8c4e;--text: #e8e2d9;--text-body: rgba(232,226,217,.82);--text-dim: #6a645c;--border: #1e1e26;--border-light: #28282f}body.light{--bg: #f2ede6;--surface: #ebe5dc;--card: #e6dfd5;--card-hover: #ddd5c9;--red: #8a1020;--red-dim: rgba(138,16,32,.1);--gold: #8a6a28;--green: #3a7a3a;--text: #1c1a17;--text-body: rgba(28,26,23,.78);--text-dim: #7a7068;--border: #d0c9be;--border-light: #c4bcb0}body.light:before{background:radial-gradient(ellipse 60% 40% at 15% 0%,rgba(138,16,32,.05) 0%,transparent 70%),radial-gradient(ellipse 50% 50% at 90% 110%,rgba(138,106,40,.06) 0%,transparent 60%)}body.light .header-kanji{color:#0000000a}body.light .card-kanji{color:#00000014}body.light .modal-kanji{color:#0000000f}body.light .card-thumb{filter:brightness(.75) saturate(.8)}body.light .technique-card:hover .card-thumb{filter:brightness(.85) saturate(.9)}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:IM Fell English,Georgia,serif;min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 60% 40% at 15% 0%,rgba(168,25,42,.07) 0%,transparent 70%),radial-gradient(ellipse 50% 50% at 90% 110%,rgba(184,148,58,.04) 0%,transparent 60%);pointer-events:none;z-index:0}header{position:relative;padding:56px 72px 48px;border-bottom:1px solid var(--border);display:flex;align-items:flex-end;justify-content:space-between;overflow:hidden}.header-kanji{position:absolute;right:0;top:-30px;font-family:"Noto Serif JP",serif;font-size:260px;font-weight:700;color:#ffffff05;line-height:1;pointer-events:none;-webkit-user-select:none;user-select:none;letter-spacing:-8px}.header-left h1{font-family:Cormorant Garamond,serif;font-size:68px;font-weight:300;line-height:.88;letter-spacing:-2px}.header-left h1 em{font-style:italic;color:var(--red)}.header-left .subtitle{margin-top:18px;font-size:11px;letter-spacing:5px;text-transform:uppercase;color:var(--text-dim);font-style:italic}.header-right{text-align:right}.sensei-name{font-family:"Noto Serif JP",serif;font-size:30px;font-weight:200;color:var(--gold);letter-spacing:2px}.sensei-sub{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--text-dim);margin-top:6px}.header-logo{max-height:56px;max-width:180px;object-fit:contain;display:block;margin-left:auto}.brand-logo-preview{min-height:60px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:10px}.brand-logo-img{max-height:80px;max-width:100%;object-fit:contain;border:1px solid var(--border-light);padding:6px;background:var(--card)}.brand-logo-empty{font-size:11px;color:var(--text-dim);font-style:italic;padding:14px 0}.brand-preview-box{border:1px solid var(--border-light);padding:16px 20px;background:var(--card);text-align:right;margin-bottom:4px}.brand-preview-kanji{font-family:"Noto Serif JP",serif;font-size:24px;font-weight:200;color:var(--gold);letter-spacing:2px}.brand-preview-logo{max-height:48px;max-width:100%;object-fit:contain;display:block;margin-left:auto}.brand-preview-sub{font-size:9px;letter-spacing:4px;text-transform:uppercase;color:var(--text-dim);margin-top:5px}.header-controls{position:absolute;top:20px;right:24px;display:flex;align-items:center;gap:10px;z-index:10}.lang-btns{display:flex;border:1px solid var(--border-light);overflow:hidden}.lang-btn{background:transparent;border:none;border-right:1px solid var(--border-light);color:var(--text-dim);font-family:IM Fell English,serif;font-size:11px;letter-spacing:2px;padding:5px 10px;cursor:pointer;transition:all .2s}.lang-btn:last-child{border-right:none}.lang-btn:hover{color:var(--text);background:var(--border)}.lang-btn.active{color:var(--red);background:var(--red-dim)}.theme-toggle{background:transparent;border:1px solid var(--border-light);color:var(--text-dim);width:30px;height:30px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:all .2s;padding:0;line-height:1}.theme-toggle:hover{border-color:var(--gold);color:var(--gold)}.admin-btn{background:transparent;border:1px solid var(--border-light);color:var(--text-dim);width:30px;height:30px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.admin-btn:hover{border-color:var(--red);color:var(--red)}.admin-btn.authenticated:hover{border-color:var(--gold);color:var(--gold)}.filters{padding:0 72px;border-bottom:1px solid var(--border)}.filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:14px 0}.filter-row+.filter-row{border-top:1px solid var(--border)}.filter-label{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--text-dim);margin-right:6px;font-style:italic;white-space:nowrap}.tag-filter{padding:5px 14px;background:transparent;border:1px solid var(--border-light);color:var(--text-dim);font-family:IM Fell English,serif;font-size:12px;cursor:pointer;transition:all .2s;letter-spacing:.5px}.tag-filter:hover{color:var(--text);background:var(--border)}.tag-filter.active{border-color:var(--red);color:var(--red);background:var(--red-dim)}.belt-filter{display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 8px;background:transparent;border:1px solid var(--border-light);color:var(--text-dim);font-family:IM Fell English,serif;font-size:11px;cursor:pointer;transition:all .2s;letter-spacing:.5px}.belt-filter:hover{border-color:var(--border-light);color:var(--text);background:var(--border)}.belt-filter .bf-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;opacity:.6;transition:opacity .2s}.belt-filter.active .bf-dot{opacity:1}.belt-filter.active{color:var(--text)}.techniques-grid{padding:48px 72px;display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:2px;position:relative;z-index:1}.state-msg{grid-column:1/-1;text-align:center;padding:80px;font-family:Cormorant Garamond,serif;font-size:24px;font-style:italic}.state-msg.error{color:var(--red)}.state-msg.loading{color:var(--text-dim)}.technique-card{background:var(--card);border:1px solid var(--border);padding:38px 38px 46px;cursor:pointer;transition:background .25s,border-color .25s;position:relative;overflow:hidden;animation:fadeUp .5s ease forwards;opacity:0}.technique-card:before{content:"";position:absolute;left:0;top:0;width:3px;height:0;background:var(--red);transition:height .3s}.technique-card:after{content:"";position:absolute;bottom:0;left:0;right:0;height:5px;background:var(--belt-stripe,transparent)}.technique-card:hover{background:var(--card-hover)}.technique-card:hover:before{height:100%}.card-num{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--text-dim);margin-bottom:22px;font-style:italic}.card-kanji{font-family:"Noto Serif JP",serif;font-size:52px;font-weight:200;color:#ffffff1a;line-height:1;margin-bottom:14px}.card-thumb-wrap{margin:-38px -38px 20px;aspect-ratio:16/9;overflow:hidden;position:relative;flex-shrink:0}.card-thumb-wrap:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,transparent 40%,var(--card) 100%);pointer-events:none;transition:background .25s}.technique-card:hover .card-thumb-wrap:after{background:linear-gradient(to bottom,transparent 40%,var(--card-hover) 100%)}.card-thumb{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.55) saturate(.7);transition:filter .3s}.technique-card:hover .card-thumb{filter:brightness(.68) saturate(.85)}.card-play-btn{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;align-items:center;justify-content:center;cursor:pointer}.card-play-icon{width:48px;height:48px;border-radius:50%;background:#a8192ad1;border:2px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s;box-shadow:0 4px 24px #00000080}.card-play-btn:hover .card-play-icon{transform:scale(1.1);background:var(--red)}.card-play-icon:after{content:"";width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:15px solid #fff;margin-left:4px}.card-thumb-wrap.playing .card-play-btn{display:none}.card-thumb-wrap.playing .card-thumb{filter:brightness(1) saturate(1)}.card-thumb-wrap.playing:after{opacity:0}.card-name{font-family:Cormorant Garamond,serif;font-size:24px;font-weight:400;line-height:1.2;margin-bottom:10px}.card-desc{font-size:13px;color:var(--text-dim);line-height:1.75;margin-bottom:22px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card-tags{display:flex;gap:5px;flex-wrap:wrap;align-items:center}.tag{font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:3px 8px;border:1px solid var(--border-light);color:var(--text-dim)}.tag.cat{border-color:#b8943a59;color:var(--gold)}.tag.diff-beginner{border-color:#3c8c3c66;color:#5aaa5a}.tag.diff-intermediate{border-color:#b8943a66;color:var(--gold)}.tag.diff-advanced{border-color:#a8192a66;color:var(--red)}.belt-badge{display:inline-flex;align-items:center;gap:5px;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:3px 9px 3px 6px;border:1px solid transparent}.belt-badge:before{content:"";display:block;width:8px;height:8px;border-radius:50%;flex-shrink:0}.card-video-count{position:absolute;top:14px;right:14px;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);font-style:italic}.card-edit-btn{position:absolute;bottom:8px;right:14px;background:var(--red);border:none;color:#fff;padding:5px 12px;font-size:9px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;font-family:IM Fell English,serif;z-index:2}body.admin-mode .card-video-count{display:none}body.admin-mode .technique-card{border-color:#a8192a2e}.add-technique-card{display:flex;align-items:center;justify-content:center;border-style:dashed;cursor:pointer;opacity:1;animation:none}.add-technique-card:before,.add-technique-card:after{display:none}.add-technique-icon{width:64px;height:64px;color:var(--border-light);transition:color .25s}.add-technique-card:hover{background:var(--card-hover)}.add-technique-card:hover .add-technique-icon{color:var(--red)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#070708f5;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;padding:40px}.modal-overlay.open{opacity:1;visibility:visible}.modal{width:100%;max-width:1100px;background:var(--surface);border:1px solid var(--border-light);display:grid;grid-template-columns:1fr 420px;max-height:88vh;overflow:hidden;transform:translateY(24px);transition:transform .3s}.modal-overlay.open .modal{transform:translateY(0)}.modal-left{overflow-y:auto;padding:56px;border-right:1px solid var(--border)}.modal-right{overflow-y:auto;padding:36px;background:var(--card)}.modal-close{position:fixed;top:28px;right:28px;background:none;border:1px solid var(--border-light);color:var(--text-dim);width:42px;height:42px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:110;font-family:serif}.modal-close:hover{border-color:var(--red);color:var(--red)}.modal-loading{padding:60px;text-align:center;font-family:Cormorant Garamond,serif;font-size:20px;font-style:italic;color:var(--text-dim);grid-column:1/-1}.modal-kanji{font-family:"Noto Serif JP",serif;font-size:90px;font-weight:200;color:#ffffff0f;line-height:1;margin-bottom:4px}.modal-name{font-family:Cormorant Garamond,serif;font-size:40px;font-weight:300;letter-spacing:-1px;margin-bottom:6px;line-height:1.1}.modal-cat{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:32px;font-style:italic}.modal-desc{font-size:15px;line-height:1.9;color:var(--text-body);margin-bottom:36px}.section-label{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--text-dim);margin-bottom:14px;font-style:italic}.divider{height:1px;background:linear-gradient(to right,var(--red),transparent);margin:28px 0}.key-points ul{list-style:none}.key-points li{padding:9px 0 9px 16px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text-dim);position:relative;line-height:1.6}.key-points li:before{content:"—";position:absolute;left:0;color:var(--red)}.video-tabs{display:flex;gap:0;margin-bottom:14px;border:1px solid var(--border-light);overflow:hidden}.video-tab{flex:1;padding:8px 10px;background:transparent;border:none;border-right:1px solid var(--border-light);color:var(--text-dim);font-family:IM Fell English,serif;font-size:11px;letter-spacing:1px;cursor:pointer;transition:all .2s;text-align:center;line-height:1.3}.video-tab:last-child{border-right:none}.video-tab:hover{background:var(--border);color:var(--text)}.video-tab.active{background:var(--red-dim);color:var(--red)}.video-player-block{display:none}.video-player-block.active{display:block}.video-wrapper{position:relative;background:#000;aspect-ratio:16/9;margin-bottom:10px;border:1px solid var(--border)}.video-wrapper video{width:100%;height:100%;display:block}.modal-thumb-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;cursor:pointer}.modal-thumb-img{width:100%;height:100%;object-fit:cover;display:block}.modal-play-btn{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.modal-play-btn .card-play-icon{width:64px;height:64px}.sub-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--text-dim);margin-bottom:16px;-webkit-user-select:none;user-select:none}.toggle-pill{width:30px;height:17px;background:var(--border-light);border-radius:9px;position:relative;transition:background .2s;flex-shrink:0}.toggle-pill:after{content:"";position:absolute;width:13px;height:13px;background:var(--text-dim);border-radius:50%;top:2px;left:2px;transition:all .2s}.toggle-pill.on{background:var(--red)}.toggle-pill.on:after{left:15px;background:#fff}.video-label-text{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px;font-style:italic}.modal-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:24px}.meta-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:12px}.meta-key{letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);font-size:10px}.meta-val{color:var(--text);font-family:Cormorant Garamond,serif;font-size:14px}.admin-panel{position:fixed;right:0;top:0;height:100vh;width:500px;background:var(--surface);border-left:1px solid var(--border-light);z-index:200;transform:translate(100%);transition:transform .4s cubic-bezier(.25,0,0,1);overflow-y:auto;padding:40px}.admin-panel.open{transform:translate(0)}.admin-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:36px;padding-bottom:20px;border-bottom:1px solid var(--border)}.admin-title{font-family:Cormorant Garamond,serif;font-size:22px;color:var(--red);letter-spacing:2px}.admin-close{background:none;border:1px solid var(--border-light);color:var(--text-dim);width:34px;height:34px;cursor:pointer;font-size:16px;font-family:serif}.form-group{margin-bottom:16px}.form-label{display:block;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--text-dim);margin-bottom:7px;font-style:italic}.form-input,.form-textarea,.form-select{width:100%;background:var(--card);border:1px solid var(--border-light);color:var(--text);padding:9px 13px;font-family:IM Fell English,serif;font-size:14px;outline:none;transition:border-color .2s}.form-input:focus,.form-textarea:focus{border-color:var(--red)}.form-textarea{min-height:80px;resize:vertical;line-height:1.6}.form-select{cursor:pointer}.form-select option{background:var(--card)}.btn{padding:9px 20px;font-family:IM Fell English,serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .2s;border:none;display:inline-block}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--red);color:#fff}.btn-primary:hover:not(:disabled){background:#7a1020}.btn-ghost{background:transparent;border:1px solid var(--border-light);color:var(--text-dim)}.btn-ghost:hover:not(:disabled){border-color:var(--red);color:var(--red)}.btn-danger{background:#3a1010;color:#c06060;border:none}.btn-danger:hover:not(:disabled){background:#5a1515}.btn-sm{padding:5px 10px;font-size:10px}.btn-row{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}.form-status{font-size:11px;letter-spacing:1px;margin-top:8px;height:16px;font-style:italic}.form-status.ok{color:#5aaa5a}.form-status.err{color:var(--red)}.video-entries{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}.video-entry{border:1px solid var(--border-light);padding:14px;position:relative;background:var(--bg)}.video-entry-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.video-entry-num{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--text-dim);font-style:italic}.video-entry .form-group{margin-bottom:10px}.video-entry .form-textarea{min-height:70px;font-size:11px;font-family:monospace}.video-upload-row{display:flex;gap:6px;align-items:stretch}.video-upload-row .form-input{flex:1;min-width:0}.video-upload-btn{flex-shrink:0;white-space:nowrap}.upload-err{font-size:11px;color:var(--red);margin-top:4px;font-style:italic}.srt-section{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border-light)}.srt-section-label{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px}.srt-row{display:flex;align-items:center;gap:6px;margin-bottom:4px}.srt-lang{font-size:10px;font-weight:700;letter-spacing:2px;width:22px;flex-shrink:0;color:var(--text-dim)}.srt-dot{width:7px;height:7px;border-radius:50%;background:var(--border-light);flex-shrink:0;transition:background .2s}.srt-dot.exists{background:var(--green)}.srt-err{font-size:10px;color:var(--red);font-style:italic}.admin-section-head{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--text-dim);margin:24px 0 12px;font-style:italic}.admin-list-item{padding:14px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.admin-item-name{font-family:Cormorant Garamond,serif;font-size:15px}.panel-loading{padding:60px 0;text-align:center;font-family:Cormorant Garamond,serif;font-size:18px;font-style:italic;color:var(--text-dim)}.admin-hint{position:fixed;bottom:24px;right:24px;font-size:9px;letter-spacing:3px;color:#ffffff0d;cursor:pointer;z-index:10;transition:color .4s;text-transform:uppercase}.admin-hint:hover{color:var(--red)}.no-results{grid-column:1/-1;text-align:center;padding:80px;color:var(--text-dim);font-family:Cormorant Garamond,serif;font-size:26px;font-style:italic}.login-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#070708eb;z-index:300;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}.login-overlay.open{opacity:1;visibility:visible}.login-modal{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--border-light);padding:36px;transform:translateY(16px);transition:transform .25s}.login-overlay.open .login-modal{transform:translateY(0)}.login-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0}.login-title{font-family:Cormorant Garamond,serif;font-size:22px;font-weight:300;color:var(--red);letter-spacing:2px}.login-divider{height:1px;background:linear-gradient(to right,var(--red),transparent);margin:18px 0 24px}@keyframes fadeUp{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border-light)}@media (max-width:900px){header{flex-direction:column;align-items:flex-start;gap:24px;padding:40px}.header-kanji{font-size:160px}.header-left h1{font-size:48px}.techniques-grid{padding:24px 16px}.filters{padding:0 16px}.filter-row{padding:10px 0}.header-controls{top:12px;right:12px}.modal-overlay{padding:0;align-items:flex-start}.modal{grid-template-columns:1fr;max-height:100dvh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;border:none;border-radius:0;transform:translateY(0)}.modal-overlay.open .modal{transform:translateY(0)}.modal-right{order:-1;border-top:none;border-bottom:1px solid var(--border);padding:24px 20px}.modal-left{order:1;padding:28px 20px;overflow-y:visible}.modal-close{top:12px;right:12px}.admin-panel{width:100%}}
