:root{font-family:Arial,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:#191b1f;background:#fff;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select,textarea{font:inherit}button{cursor:pointer}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}.hidden{display:none!important}.app-shell{display:flex;min-height:100vh}.sidebar{width:278px;flex:none;border-right:1px solid #eceef1;padding:26px 17px 22px;background:#fff;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin}.brand{display:flex;align-items:center;gap:12px;padding:0 10px 23px;text-decoration:none;color:#161719;font-size:20px;font-weight:700;white-space:nowrap;letter-spacing:-.45px}.brand-mark{width:27px;height:32px;stroke:none}.category-nav{display:flex;flex-direction:column;gap:6px}.nav-group{border-radius:8px}.nav-group-button{width:100%;height:38px;display:flex;align-items:center;gap:12px;background:transparent;border:0;border-radius:8px;padding:0 14px;color:#1d2024;text-align:left;font-weight:700;font-size:17px;letter-spacing:-.4px}.nav-group-button:hover,.nav-group-button.selected{background:#f3f4f5}.nav-group-button>svg:first-child{width:20px;height:20px}.nav-group-button .chevron{margin-left:auto;width:16px;height:16px;transition:transform .2s}.nav-group.collapsed .chevron{transform:rotate(-90deg)}.nav-subitems{display:grid;gap:1px;margin:0 0 11px;padding-left:35px}.nav-group.collapsed .nav-subitems{display:none}.nav-subitems button{height:30px;display:flex;align-items:center;gap:9px;width:100%;border:0;border-radius:6px;background:transparent;text-align:left;color:#4f5660;padding:0 4px;font-size:15px}.nav-subitems button:hover,.nav-subitems button.selected{color:#161719;background:#f3f4f5}.nav-subitems svg{width:15px;height:15px}.sidebar-foot{color:#abb0b8;font-size:12px;padding:10px;margin-top:20px}.main-content{flex:1;min-width:0;padding:32px 29px 56px 40px}.topbar{display:flex;gap:24px;align-items:center}.search-box{height:55px;display:flex;align-items:center;gap:14px;flex:1;min-width:0;padding:0 18px;border:1px solid #e2e5e9;border-radius:12px;background:#fafbfc;box-shadow:0 1px 2px rgba(15,23,42,.02)}.search-box:focus-within{border-color:#9ca4af;box-shadow:0 0 0 3px rgba(0,0,0,.04)}.search-box svg{width:22px;height:22px;color:#69717c}.search-box input{width:100%;border:0;outline:0;background:transparent;font-size:16px;color:#1a1d21}.search-box input::placeholder{color:#9ca2ad}.add-button{height:55px;min-width:180px;padding:0 23px;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #1c1e20;border-radius:10px;background:#202123;color:#fff;font-size:17px;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.1)}.add-button:hover,.save-button:hover{background:#35383b}.add-button svg{width:20px;height:20px}.platform-tabs{display:flex;gap:15px;align-items:center;margin-top:31px;overflow-x:auto;padding-bottom:3px}.platform-tab{height:44px;display:flex;align-items:center;gap:9px;white-space:nowrap;border:1px solid #e3e6eb;border-radius:16px;background:#fff;color:#30343a;padding:0 20px;font-size:15px;font-weight:600}.platform-tab:hover{background:#f6f7f8}.platform-tab.active{background:#202123;border-color:#202123;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.12)}.platform-tab svg{width:20px;height:20px}.platform-tab .youtube-icon{color:#555c65}.platform-tab.active .youtube-icon{color:#fff}.platform-tab .instagram-icon{color:#555c65}.platform-tab.active .instagram-icon{color:#fff}.stats-strip{display:flex;gap:13px;overflow-x:auto;margin-top:25px;padding:0 1px 3px;scrollbar-width:thin}.stat-card{height:136px;min-width:116px;flex:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:19px 19px 17px;border:1px solid #e8ebef;border-radius:10px;background:linear-gradient(145deg,#fff 0%,#f8f9fa 100%);box-shadow:0 2px 7px rgba(22,28,35,.025)}.stat-card:first-child{min-width:150px}.stat-card:hover,.stat-card.active{border-color:#b8bdc5;background:#f5f6f7}.stat-card .stat-label{display:flex;align-items:center;gap:12px;white-space:nowrap;font-size:14px;color:#272c33}.stat-card svg{width:21px;height:21px}.stat-card strong{font-size:29px;line-height:1.12;font-weight:700;margin-top:16px}.stat-card small{font-size:14px;color:#969da7;margin-top:7px;white-space:nowrap}.results-section{margin-top:35px}.section-heading{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:19px}.heading-left{display:flex;align-items:center;gap:14px}.section-heading h1{margin:0;font-size:23px;line-height:1.3;letter-spacing:-.7px}.clear-filter{border:0;background:none;color:#737b85;text-decoration:underline;text-underline-offset:3px;font-size:13px}.toolbar{display:flex;align-items:center;gap:27px}.sort-control{height:44px;min-width:170px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #e1e5e9;border-radius:9px;background:#fff;color:#3d4550}.sort-control>svg:first-child{width:20px;height:20px}.sort-control select{appearance:none;outline:0;border:0;background:transparent;color:#363d46;cursor:pointer;flex:1;font-size:14px;min-width:0}.sort-chevron{width:15px;height:15px!important}.view-controls{display:flex;gap:12px}.icon-button{height:44px;width:44px;display:grid;place-items:center;border:1px solid #e7eaee;background:#f9fafb;border-radius:10px;color:#2a3036}.icon-button:hover{background:#e9ebed}.icon-button.active{background:#e7e9ec;border-color:#e7e9ec}.icon-button svg{width:22px;height:22px}.bookmark-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.bookmark-card{height:165px;min-width:0;display:flex;gap:18px;padding:16px 18px;border:1px solid #e8ebef;border-radius:11px;background:#fff;box-shadow:0 1px 2px rgba(18,24,32,.025);transition:box-shadow .15s,border-color .15s}.bookmark-card:hover{border-color:#d9dce1;box-shadow:0 5px 16px rgba(18,24,32,.07)}.thumb-link{display:block;flex:none;width:109px;height:109px;overflow:hidden;border-radius:9px;background:#eceef0;text-decoration:none}.thumb{width:100%;height:100%;background-size:cover;background-position:center;display:grid;place-items:center;color:#fff;font-size:34px;font-weight:700}.thumb.fallback{background:linear-gradient(135deg,#dadde1,#9ba4ad)}.card-content{min-width:0;display:flex;flex:1;flex-direction:column}.card-title-row{display:flex;align-items:flex-start;gap:6px;min-width:0}.card-title{color:#17191c;text-decoration:none;font-size:17px;line-height:1.35;font-weight:700;letter-spacing:-.4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.card-title:hover{text-decoration:underline;text-underline-offset:3px}.menu-wrap{position:relative;margin:-4px -8px 0 0}.card-menu-button{width:30px;height:30px;border:0;background:transparent;color:#58616c;display:grid;place-items:center;border-radius:6px}.card-menu-button:hover{background:#f0f2f4}.card-menu-button svg{width:19px;height:19px}.card-menu{z-index:10;position:absolute;right:0;top:29px;min-width:132px;padding:5px;border:1px solid #e3e6e9;background:#fff;border-radius:9px;box-shadow:0 9px 28px rgba(0,0,0,.12)}.card-menu button{display:block;width:100%;border:0;background:#fff;text-align:left;padding:9px 10px;border-radius:6px;font-size:13px;color:#30363d}.card-menu button:hover{background:#f4f5f6}.card-menu button.danger{color:#c44242}.platform-badge{align-self:flex-start;display:flex;align-items:center;gap:6px;margin-top:7px;height:25px;background:#f6f7f8;border-radius:7px;padding:0 7px;font-size:13px;color:#3e454f;white-space:nowrap}.platform-badge svg{width:17px;height:17px}.platform-badge.youtube svg{color:#ff0033}.platform-badge.instagram svg{color:#e2358c}.platform-badge.other svg{color:#69737e}.card-description{font-size:14px;color:#969da8;margin:8px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.tags{display:flex;gap:7px;margin-top:auto;min-width:0}.tag{background:#f1f2f3;color:#5b626c;border-radius:10px;padding:6px 11px;font-size:13px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:65%}.bookmark-grid.list-view{grid-template-columns:1fr}.bookmark-grid.list-view .bookmark-card{height:128px}.bookmark-grid.list-view .thumb-link{width:94px;height:94px}.bookmark-grid.list-view .card-content{justify-content:center}.bookmark-grid.list-view .tags{margin-top:8px}.empty-state{text-align:center;padding:80px 20px;border:1px dashed #dfe3e7;border-radius:12px;background:#fbfbfc}.empty-icon{width:56px;height:56px;margin:auto auto 15px;border-radius:16px;background:#eff1f3;display:grid;place-items:center;color:#5b6470}.empty-icon svg{stroke:none;width:24px;height:24px}.empty-state h2{font-size:20px;margin:0 0 9px}.empty-state p{color:#8b929c;margin:0 0 22px}.empty-state button{border:0;border-radius:8px;background:#202123;color:white;font-weight:700;padding:11px 18px}.modal-backdrop{position:fixed;inset:0;z-index:30;background:rgba(19,22,28,.45);display:flex;align-items:center;justify-content:center;padding:20px}.modal{width:min(100%,550px);max-height:min(90vh,800px);overflow:auto;background:#fff;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.22);padding:28px}.modal-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.5px;color:#9ca3ab;margin:0 0 6px}.modal-heading h2{font-size:24px;letter-spacing:-.6px;margin:0}.modal-close{width:35px;height:35px;border:0;background:#f5f6f7}.modal-close svg{width:18px;height:18px}.form-field{display:flex;flex-direction:column;gap:7px;margin-bottom:17px;min-width:0}.form-field label{font-size:13px;font-weight:700;color:#383e46}.form-field label span{color:#e35252}.form-field label .optional{color:#9da3aa;font-weight:400}.form-field input,.form-field select,.form-field textarea{width:100%;border:1px solid #dfe3e7;border-radius:9px;background:#fff;outline:0;padding:11px 12px;font-size:14px;color:#252a30}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:#8f969f;box-shadow:0 0 0 3px rgba(0,0,0,.045)}.form-field input::placeholder,.form-field textarea::placeholder{color:#adb3ba}.form-field textarea{resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-error{color:#b83c3c;background:#fff2f2;border-radius:7px;padding:9px 11px;font-size:13px}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:8px}.modal-actions button{height:42px;padding:0 18px;border-radius:8px;font-weight:700;font-size:14px}.secondary-button{background:#fff;border:1px solid #dfe3e7;color:#343a40}.save-button{background:#202123;color:#fff;border:1px solid #202123}.mobile-menu{display:none}.sidebar-scrim{display:none}@media(max-width:1350px){.main-content{padding-left:30px;padding-right:25px}.bookmark-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-card{flex:none}}@media(max-width:900px){.sidebar{width:240px}.brand{font-size:17px}.main-content{padding:25px 20px}.topbar{gap:12px}.add-button{min-width:54px;padding:0 16px}.add-button span{display:none}.bookmark-grid{grid-template-columns:1fr}.stat-card{height:123px;padding:15px}.stat-card strong{margin-top:12px}}@media(max-width:650px){.sidebar{position:fixed;z-index:22;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .2s;width:265px}.sidebar.open{transform:translateX(0)}.sidebar-scrim:not(.hidden){display:block;position:fixed;inset:0;z-index:21;background:rgba(0,0,0,.25)}.mobile-menu{display:grid;width:43px;height:48px;flex:none}.main-content{padding:17px 15px 35px}.topbar{gap:8px}.search-box{height:48px;padding:0 12px;gap:8px}.search-box svg{width:19px;height:19px}.search-box input{font-size:13px}.add-button{height:48px;min-width:48px;padding:0}.platform-tabs{margin-top:20px;gap:8px}.platform-tab{height:40px;padding:0 13px;font-size:13px;border-radius:12px}.stats-strip{margin-top:18px;gap:8px}.stat-card{min-width:111px;height:117px;padding:13px}.stat-card:first-child{min-width:130px}.stat-card .stat-label{gap:6px;font-size:12px}.stat-card svg{width:17px;height:17px}.stat-card strong{font-size:24px}.stat-card small{font-size:12px}.results-section{margin-top:22px}.section-heading{align-items:flex-start;gap:12px}.section-heading h1{font-size:19px}.toolbar{gap:8px}.sort-control{min-width:130px;height:37px;padding:0 7px}.sort-control select{font-size:12px}.sort-control>svg:first-child{width:17px;height:17px}.view-controls{gap:4px}.view-controls .icon-button{width:37px;height:37px}.view-controls .icon-button svg{width:18px;height:18px}.bookmark-card{padding:12px;gap:13px;height:139px}.thumb-link{width:90px;height:90px}.card-title{font-size:15px}.platform-badge{font-size:12px;margin-top:5px}.card-description{font-size:12px;margin-top:6px}.tag{font-size:11px;padding:5px 8px}.bookmark-grid.list-view .bookmark-card{height:128px}.bookmark-grid.list-view .thumb-link{width:88px;height:88px}.modal{padding:21px}.form-row{gap:9px}}

/* Refined navigation, typography and forms */
@font-face { font-family: "Pretendard Variable"; src: url("assets/PretendardVariable.woff2") format("woff2"); font-style: normal; font-weight: 45 920; font-display: swap; }
:root { font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; font-weight: 400; }
.sidebar { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 16px; }
.brand { font-weight: 600; }
.category-nav { flex: 1; min-height: 0; overflow: hidden; padding-right: 2px; }
.nav-category-list { display: flex; flex: 1; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
.nav-group-button { height: 45px; font-size: 15px; font-weight: 500; }
.nav-group-button[draggable], .platform-tab[draggable] { cursor: grab; }
.nav-group.dragging, .platform-tab.dragging { opacity: .45; }
.nav-group.drop-before > .nav-group-button { box-shadow: inset 0 2px #697582; }
.nav-group.drop-after > .nav-group-button { box-shadow: inset 0 -2px #697582; }
.platform-tab.drop-before::before, .platform-tab.drop-after::before { content: ""; position: absolute; top: 7px; bottom: 12px; width: 2px; border-radius: 2px; background: #697582; }
.platform-tab.drop-before::before { left: -13px; }
.platform-tab.drop-after::before { right: -13px; }
.nav-group-button .chevron { margin-left: 0; }
.nav-count, .nav-subcount { margin-left: auto; color: #9ca4ae; font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.nav-subcount { margin-right: 10px; font-size: 11px; }
.nav-all-button { flex: none; margin-bottom: 5px; }
.nav-platform-shortcuts { display: flex; flex: none; gap: 7px; align-items: center; margin: 0 7px 10px; padding: 2px 0 12px; border-bottom: 1px solid #eceff2; overflow-x: auto; scrollbar-width: none; }
.nav-platform-shortcuts::-webkit-scrollbar { display: none; }
.nav-platform-shortcut { display: grid; place-items: center; flex: 0 0 49px; width: 49px; height: 38px; padding: 0; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #727b86; }
.nav-platform-shortcut:hover { background: #f4f5f6; color: #252b31; }
.nav-platform-shortcut.selected { border-color: #e3e7eb; background: #f0f2f4; color: #20262c; }
.nav-platform-shortcut:focus-visible { outline: 2px solid #7e8996; outline-offset: 1px; }
.nav-platform-shortcut svg { width: 19px; height: 19px; }
.nav-platform-initial { font-size: 14px; font-weight: 500; }
.nav-subitems { margin: 1px 0 7px; }
.nav-subitems button { position: relative; font-size: 13px; font-weight: 400; --subitem-icon-color: #737d89; }
.nav-subitems button:hover, .nav-subitems button.selected { --subitem-icon-color: #4f5965; }
.nav-subitems button::before { content: ""; position: absolute; left: -12px; top: 8px; width: 8px; height: 8px; border-left: 1px solid var(--subitem-icon-color); border-bottom: 1px solid var(--subitem-icon-color); border-bottom-left-radius: 1px; pointer-events: none; }
.nav-subitems svg { width: 15px; height: 15px; stroke-width: 1.6; color: var(--subitem-icon-color); }
.sidebar-bottom { flex: none; padding-top: 13px; border-top: 1px solid #eef0f2; }
.settings-entry { display: flex; align-items: center; gap: 11px; width: 100%; height: 41px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: #3d434b; text-align: left; font-size: 14px; font-weight: 500; }
.settings-entry:hover { background: #f4f5f6; }
.settings-entry svg { width: 19px; height: 19px; }
.api-dot { width: 7px; height: 7px; border-radius: 50%; margin-left: auto; background: #d5d9de; }
.api-dot.saved { background: #36a881; }
.add-button, .platform-tab, .empty-state button, .modal-actions button { font-weight: 500; }
.platform-tabs { gap: 28px; margin-top: 27px; padding: 0 0 0 2px; border-bottom: 1px solid #eceef0; overflow-y: hidden; scrollbar-width: none; }
.platform-tabs::-webkit-scrollbar { display: none; }
.platform-tab { position: relative; height: 45px; padding: 0 2px 12px; border: 0; border-radius: 0; background: transparent; color: #8b929b; font-size: 14px; box-shadow: none; }
.platform-tab:hover { background: transparent; color: #33383e; }
.platform-tab.active { background: transparent; border: 0; color: #23272c; box-shadow: none; }
.platform-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: #25282d; }
.platform-tab .youtube-icon, .platform-tab .instagram-icon, .platform-tab .tiktok-icon, .platform-tab.active .youtube-icon, .platform-tab.active .instagram-icon, .platform-tab.active .tiktok-icon { color: inherit; }
.platform-tab svg { width: 18px; height: 18px; }
.platform-badge.tiktok svg { color: #25282d; }
.stat-card strong { font-weight: 550; }
.section-heading h1 { font-weight: 550; }
.card-title { font-weight: 550; }
.bookmark-grid.list-view .bookmark-card { height: 140px; align-items: center; }
.bookmark-grid.list-view .card-content { align-self: stretch; }
.form-field label { font-weight: 500; }
.modal-heading h2 { font-weight: 550; }
.eyebrow { font-weight: 600; }
.save-button { font-weight: 500; }
.main-content.empty-view { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 28px; }
.main-content.empty-view .results-section { display: flex; flex: 1; flex-direction: column; }
.main-content.empty-view .empty-state { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; min-height: 260px; padding: 30px 20px; }
.main-content.empty-view .empty-icon { margin: 0 0 15px; }
@media (max-width: 650px) { .main-content.empty-view { padding-bottom: 15px; } }
.save-button:disabled { opacity: .48; cursor: wait; }
.delete-backdrop { z-index: 40; }
.storage-warning { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 18px; padding: 13px 16px; border: 1px solid #ebc9c9; border-radius: 10px; background: #fff6f6; color: #8d3434; font-size: 13px; line-height: 1.5; }
.storage-warning strong { font-weight: 650; }
.storage-warning button { margin-left: auto; padding: 7px 10px; border: 1px solid #d8a6a6; border-radius: 7px; background: #fff; color: #8d3434; font-size: 12px; }
.delete-modal .delete-error { margin-top: 12px; color: #b83c3c; }
.delete-modal { width: min(100%, 390px); padding: 27px; }
.delete-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #fff0f0; color: #c65353; }
.delete-mark svg { width: 21px; height: 21px; }
.delete-modal h2 { margin: 19px 0 7px; color: #22262b; font-size: 20px; font-weight: 550; letter-spacing: -.4px; }
.delete-modal p { margin: 0; color: #7b838d; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.delete-modal p strong { color: #424950; font-weight: 500; }
.delete-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 26px; }
.delete-actions button { min-width: 76px; height: 40px; padding: 0 15px; border-radius: 8px; font-size: 13px; font-weight: 500; }
.danger-button { border: 1px solid #bb4545; background: #bb4545; color: #fff; }
.danger-button:hover { background: #a93c3c; }
.category-context-menu { position: fixed; z-index: 65; min-width: 136px; padding: 5px; border: 1px solid #e3e7eb; border-radius: 10px; background: #fff; box-shadow: 0 12px 30px rgba(20, 28, 38, .16); }
.category-context-menu button { display: block; width: 100%; height: 35px; padding: 0 11px; border: 0; border-radius: 6px; background: transparent; color: #303741; text-align: left; font-size: 13px; }
.category-context-menu button:hover, .category-context-menu button:focus-visible { background: #f2f4f6; outline: 0; }
.category-context-menu button.danger { color: #b84242; }
.category-context-menu button:disabled { opacity: .4; cursor: not-allowed; }
.category-dialog-backdrop { z-index: 50; }
.category-dialog { width: min(100%, 430px); }
.category-dialog .modal-heading { margin-bottom: 22px; }
.category-dialog-description { margin: 0 0 18px; color: #69727d; font-size: 13px; line-height: 1.6; }
.category-replacement { margin-bottom: 15px; }
.category-dialog-error { margin: 4px 0 15px; color: #b83c3c; font-size: 12px; }
.category-dialog .modal-actions { margin-top: 22px; }
.category-dialog .modal-actions .danger-button { height: 42px; padding: 0 18px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.field-hint { margin: 1px 0 0; color: #a0a6af; font-size: 12px; }
.url-field { margin-bottom: 10px; }
.url-field input { font-size: 14px; height: 46px; }
.fetch-status { min-height: 32px; display: flex; align-items: center; color: #878e97; font-size: 12px; margin-bottom: 13px; }
.fetch-status.success { color: #21866b; }
.fetch-status.warning { color: #a77436; }
.fetch-status.loading { color: #6b7380; }
.channel-preview { display: flex; gap: 15px; align-items: center; padding: 13px; margin-bottom: 19px; border: 1px solid #e9ecef; border-radius: 11px; background: #fafbfb; }
.preview-image { flex: none; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 10px; background-color: #d8dde2; background-size: cover; background-position: center; color: #fff; font-size: 25px; }
.channel-preview > div:last-child { min-width: 0; }
.preview-platform { margin-bottom: 3px; color: #818994; font-size: 11px; }
.channel-preview strong { display: block; font-size: 15px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-preview p { margin: 5px 0 0; color: #8d949d; font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.manual-details { margin: 2px 0 15px; border-top: 1px solid #eef0f2; }
.manual-details summary { cursor: pointer; padding: 14px 1px; color: #7d858f; font-size: 12px; list-style: none; }
.manual-details summary::after { content: "⌄"; margin-left: 6px; }
.manual-details[open] summary::after { content: "⌃"; }
.manual-details .form-field { margin-bottom: 13px; }
.settings-modal { width: min(100%, 520px); }
.settings-privacy { margin: -9px 0 24px; padding: 13px 15px; border: 1px solid #e7eaee; border-radius: 10px; background: #f8f9fa; color: #59636e; font-size: 12px; line-height: 1.65; }
.settings-section { padding-top: 1px; }
.youtube-settings { margin-top: 27px; padding-top: 27px; border-top: 1px solid #eceef1; }
.backup-settings { margin-top: 27px; padding-top: 27px; border-top: 1px solid #eceef1; }
.backup-settings .settings-section-title { margin-bottom: 15px; }
.backup-mark { display: grid; place-items: center; flex: none; width: 37px; height: 37px; border-radius: 10px; background: #edf1f4; color: #536171; }
.backup-mark svg { width: 16px; height: 19px; stroke: none; }
.backup-settings .settings-note { margin: 0 0 14px; }
.backup-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.backup-actions button { min-height: 39px; padding: 0 13px; border-radius: 8px; font-size: 13px; font-weight: 500; }
.backup-actions .secondary-button { border: 1px solid #dfe3e7; }
.backup-settings .settings-status { margin: 12px 0 0; }
.restore-backdrop { z-index: 45; }
.restore-modal { width: min(100%, 410px); padding: 27px; }
.restore-modal h2 { margin: 0 0 8px; font-size: 20px; font-weight: 550; }
.restore-modal p { margin: 0; color: #7b838d; font-size: 13px; line-height: 1.6; }
.restore-summary { margin-top: 18px; padding: 13px; border: 1px solid #e7eaee; border-radius: 9px; background: #f8f9fa; color: #4b5560; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.restore-modal .restore-error { margin-top: 11px; color: #b83c3c; }
.restore-modal .delete-actions button { min-width: 76px; }
.settings-section-title { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; }
.settings-section-title h3 { margin: 0 0 4px; font-size: 16px; font-weight: 550; }
.settings-section-title p { margin: 0; color: #9098a2; font-size: 12px; }
.gemini-mark { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 10px; background: #f0efff; color: #6855cc; font-size: 21px; }
.youtube-mark { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 10px; background: #fff1f1; color: #e22b35; }
.youtube-mark svg { width: 21px; height: 21px; }
.key-input { display: flex; align-items: center; border: 1px solid #dfe3e7; border-radius: 9px; }
.key-input:focus-within { border-color: #8f969f; box-shadow: 0 0 0 3px rgba(0,0,0,.045); }
.key-input input { border: 0; box-shadow: none!important; }
.key-input button { width: 42px; align-self: stretch; border: 0; background: transparent; color: #717983; }
.key-input svg { width: 18px; height: 18px; }
.settings-note { color: #9aa1aa; font-size: 12px; line-height: 1.5; margin: -5px 0 12px; }
.api-key-guide { padding: 12px 16px; border: 1px solid #e8eaed; border-radius: 10px; background: #f8f9fa; }
.api-key-guide summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; color: #30343a; font-size: 13px; font-weight: 500; }
.api-key-guide summary::-webkit-details-marker { display: none; }
.api-key-guide summary::after { content: "⌄"; color: #7f8790; font-size: 18px; line-height: 12px; }
.api-key-guide[open] summary::after { transform: rotate(180deg); }
.api-key-guide ol { margin: 12px 0 0; padding-left: 19px; color: #68717c; font-size: 12px; font-weight: 400; line-height: 1.75; }
.api-key-guide li + li { margin-top: 4px; }
.api-key-guide a { color: #30343a; text-underline-offset: 2px; }
.api-key-guide a:hover { color: #000; }
.api-key-guide strong { color: #40464e; font-weight: 500; }
.settings-status { min-height: 19px; color: #5c6570; font-size: 12px; }
.settings-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 21px; }
.settings-actions > div { display: flex; gap: 8px; }
.settings-actions button { height: 39px; border-radius: 8px; padding: 0 12px; font-size: 13px; font-weight: 500; }
.settings-actions .secondary-button { border: 1px solid #dfe3e7; }
.settings-footer-note { margin: 18px 0 0; color: #9aa1aa; font-size: 12px; line-height: 1.5; }
.text-button { border: 0; background: transparent; color: #aa6767; }
/* Shared select menus for sorting and bookmark fields */
.form-field select.native-select-hidden, .sort-control select.native-select-hidden { position: absolute; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0; clip-path: inset(50%); pointer-events: none; }
.sort-control { display: block; position: relative; min-width: 170px; height: auto; padding: 0; border: 0; background: transparent; }
.custom-select-trigger { display: flex; align-items: center; gap: 9px; width: 100%; height: 43px; padding: 0 13px; border: 1px solid #dfe3e7; border-radius: 10px; background: #fff; color: #303741; text-align: left; font-size: 14px; font-weight: 400; box-shadow: 0 1px 1px rgba(17,24,39,.015); transition: border-color .16s, background .16s, box-shadow .16s; }
.custom-select-trigger:hover { border-color: #bdc4cc; background: #fcfcfd; }
.custom-select-trigger:focus-visible, .custom-select-trigger[aria-expanded="true"] { outline: none; border-color: #8e98a3; box-shadow: 0 0 0 3px rgba(46,55,69,.07); }
.custom-select-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-chevron { width: 16px; height: 16px; color: #69727d; transition: transform .16s ease; }
.custom-select-trigger[aria-expanded="true"] .custom-select-chevron { transform: rotate(180deg); }
.sort-control .custom-select-trigger { height: 44px; padding: 0 12px; }
.sort-trigger > svg:first-child { width: 19px; height: 19px; color: #4f5863; }
.custom-options { position: fixed; z-index: 80; display: flex; flex-direction: column; gap: 1px; padding: 5px; overflow-y: auto; border: 1px solid #e6e9ed; border-radius: 11px; background: #fff; box-shadow: 0 16px 40px rgba(25,31,40,.15), 0 3px 10px rgba(25,31,40,.05); scrollbar-width: thin; scrollbar-color: #d8dce1 transparent; }
.custom-option { display: flex; align-items: center; justify-content: space-between; flex: none; width: 100%; min-height: 34px; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: #4c545e; text-align: left; font-size: 13px; font-weight: 400; }
.custom-option:hover, .custom-option.highlighted { background: #f3f5f7; color: #252b32; }
.custom-option.selected { color: #252b32; font-weight: 550; }
.custom-option.selected::after { content: "✓"; margin-left: 8px; color: #454c56; font-size: 14px; }
.custom-option:focus-visible { outline: 2px solid #aeb6bf; outline-offset: -2px; }
.custom-option-add { margin-top: 4px; padding-top: 10px; border-top: 1px solid #e9ecef; border-radius: 0 0 7px 7px; color: #303741; font-weight: 500; }
.new-option-editor { margin-top: 7px; padding: 11px; border: 1px solid #e7eaee; border-radius: 9px; background: #f8f9fa; }
.new-option-editor > label { display: block; margin-bottom: 8px; font-size: 12px; }
.new-option-row { display: flex; gap: 5px; }
.new-option-row input { flex: 1; min-width: 0; height: 35px; padding: 0 8px; border: 1px solid #dfe3e7; border-radius: 7px; background: #fff; color: #252a30; font-size: 12px; outline: none; }
.new-option-row input:focus { border-color: #8f969f; }
.new-option-row button { flex: none; height: 35px; padding: 0 8px; border-radius: 7px; font-size: 12px; }
.new-option-save { border: 1px solid #202123; background: #202123; color: #fff; }
.new-option-cancel { border: 1px solid #dfe3e7; background: #fff; color: #505962; }
.new-option-error { margin: 7px 0 0; color: #b83c3c; font-size: 11px; }
@media (max-width: 650px) {
  .platform-tabs { gap: 21px; margin-top: 18px; }
  .platform-tab { height: 42px; padding: 0 0 10px; font-size: 13px; }
  .settings-actions { align-items: flex-start; }
  .settings-actions > div { flex-wrap: wrap; justify-content: flex-end; }
}

/* Sidebar appearance switch */
.theme-switcher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; margin: 0 3px 8px; padding: 4px; border: 1px solid #e9ecef; border-radius: 10px; background: #f6f7f8; }
.theme-switcher button { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; height: 34px; border: 0; border-radius: 7px; background: transparent; color: #78818b; font: inherit; font-size: 12px; cursor: pointer; }
.theme-switcher button svg { width: 15px; height: 15px; }
.theme-switcher button:hover { color: #22272d; }
.theme-switcher button.active { background: #fff; color: #22272d; box-shadow: 0 1px 4px rgba(20, 28, 38, .09); }

/* Dark appearance */
html[data-theme="dark"] { color-scheme: dark; background: #15181c; }
html[data-theme="dark"] body { background: #15181c; color: #e6e9ed; }
html[data-theme="dark"] .sidebar { background: #1b2025; border-color: #30363e; }
html[data-theme="dark"] .brand,
html[data-theme="dark"] .nav-group-button,
html[data-theme="dark"] .section-heading h1,
html[data-theme="dark"] .empty-state h2,
html[data-theme="dark"] .modal-heading h2,
html[data-theme="dark"] .settings-section-title h3 { color: #edf0f3; }
html[data-theme="dark"] .nav-group-button:hover,
html[data-theme="dark"] .nav-group-button.selected,
html[data-theme="dark"] .nav-subitems button:hover,
html[data-theme="dark"] .nav-subitems button.selected,
html[data-theme="dark"] .settings-entry:hover { background: #2a3037; }
html[data-theme="dark"] .nav-subitems button,
html[data-theme="dark"] .settings-entry { color: #bdc5cd; }
html[data-theme="dark"] .nav-subitems button.selected { color: #f1f3f5; }
html[data-theme="dark"] .nav-count,
html[data-theme="dark"] .nav-subcount,
html[data-theme="dark"] .sidebar-bottom { border-color: #30363e; }
html[data-theme="dark"] .backup-settings { border-color: #30363e; }
html[data-theme="dark"] .storage-warning { background: #392629; border-color: #75454a; color: #ffd3d3; }
html[data-theme="dark"] .storage-warning button { background: #302427; border-color: #976067; color: #ffd3d3; }
html[data-theme="dark"] .category-context-menu { border-color: #39414a; background: #20262c; }
html[data-theme="dark"] .category-context-menu button { color: #e1e6eb; }
html[data-theme="dark"] .category-context-menu button:hover, html[data-theme="dark"] .category-context-menu button:focus-visible { background: #303841; }
html[data-theme="dark"] .category-context-menu button.danger, html[data-theme="dark"] .category-dialog-error { color: #f0a8a8; }
html[data-theme="dark"] .category-dialog-description { color: #a0aab5; }
html[data-theme="dark"] .settings-privacy { border-color: #39414a; background: #1a2025; color: #b2bdc8; }
html[data-theme="dark"] .backup-mark { background: #303841; color: #cad2da; }
html[data-theme="dark"] .restore-summary { background: #1a2025; border-color: #424b55; color: #bdc5cd; }
html[data-theme="dark"] .restore-modal h2 { color: #e1e6eb; }
html[data-theme="dark"] .restore-modal p { color: #a0aab5; }
html[data-theme="dark"] .restore-modal .restore-error { color: #f0a8a8; }
html[data-theme="dark"] .nav-platform-shortcuts { border-color: #30363e; }
html[data-theme="dark"] .nav-group.drop-before > .nav-group-button { box-shadow: inset 0 2px #b2bdc8; }
html[data-theme="dark"] .nav-group.drop-after > .nav-group-button { box-shadow: inset 0 -2px #b2bdc8; }
html[data-theme="dark"] .platform-tab.drop-before::before, html[data-theme="dark"] .platform-tab.drop-after::before { background: #b2bdc8; }
html[data-theme="dark"] .nav-platform-shortcut { color: #9ca7b2; }
html[data-theme="dark"] .nav-platform-shortcut:hover { background: #2a3037; color: #edf0f3; }
html[data-theme="dark"] .nav-platform-shortcut.selected { border-color: #3e4751; background: #343c45; color: #f0f2f4; }
html[data-theme="dark"] .theme-switcher { background: #151a1f; border-color: #343c44; }
html[data-theme="dark"] .theme-switcher button { color: #99a4af; }
html[data-theme="dark"] .theme-switcher button:hover { color: #e9edf1; }
html[data-theme="dark"] .theme-switcher button.active { background: #343c45; color: #f0f2f4; box-shadow: none; }
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .bookmark-card,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .custom-select-trigger,
html[data-theme="dark"] .custom-options,
html[data-theme="dark"] .card-menu { background: #20262c; border-color: #39414a; color: #e7eaed; }
html[data-theme="dark"] .search-box:focus-within,
html[data-theme="dark"] .custom-select-trigger:focus-visible,
html[data-theme="dark"] .custom-select-trigger[aria-expanded="true"] { border-color: #84909c; box-shadow: 0 0 0 3px rgba(150, 165, 180, .13); }
html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .custom-select-value { color: #eef0f2; }
html[data-theme="dark"] .search-box input::placeholder,
html[data-theme="dark"] .form-field input::placeholder,
html[data-theme="dark"] .form-field textarea::placeholder { color: #84909c; }
html[data-theme="dark"] .search-box svg,
html[data-theme="dark"] .custom-select-chevron,
html[data-theme="dark"] .sort-trigger > svg:first-child { color: #a0aab5; }
html[data-theme="dark"] .platform-tabs { border-color: #353c45; }
html[data-theme="dark"] .platform-tab { color: #929ca7; }
html[data-theme="dark"] .platform-tab:hover,
html[data-theme="dark"] .platform-tab.active { color: #f0f2f4; }
html[data-theme="dark"] .platform-tab.active::after { background: #e8ebef; }
html[data-theme="dark"] .bookmark-card:hover { border-color: #5a6571; box-shadow: 0 5px 16px rgba(0, 0, 0, .16); }
html[data-theme="dark"] .card-description,
html[data-theme="dark"] .empty-state p,
html[data-theme="dark"] .field-hint,
html[data-theme="dark"] .settings-note,
html[data-theme="dark"] .settings-footer-note,
html[data-theme="dark"] .settings-section-title p { color: #a0aab5; }
html[data-theme="dark"] .platform-badge,
html[data-theme="dark"] .tag,
html[data-theme="dark"] .empty-icon { background: #303841; color: #c8d0d8; }
html[data-theme="dark"] .platform-badge.tiktok svg,
html[data-theme="dark"] .platform-badge.other svg { color: #c8d0d8; }
html[data-theme="dark"] .empty-state { background: #1b2025; border-color: #414a54; }
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .secondary-button { background: #262d34; border-color: #3d4650; color: #e0e5ea; }
html[data-theme="dark"] .icon-button:hover,
html[data-theme="dark"] .icon-button.active,
html[data-theme="dark"] .secondary-button:hover { background: #39434d; border-color: #525e6b; }
html[data-theme="dark"] .add-button,
html[data-theme="dark"] .save-button,
html[data-theme="dark"] .empty-state button { background: #e8ebee; border-color: #e8ebee; color: #1b2025; }
html[data-theme="dark"] .add-button:hover,
html[data-theme="dark"] .save-button:hover,
html[data-theme="dark"] .empty-state button:hover { background: #fff; }
html[data-theme="dark"] .modal-backdrop { background: rgba(4, 7, 10, .68); }
html[data-theme="dark"] .modal-close { background: #303841; }
html[data-theme="dark"] .form-field label,
html[data-theme="dark"] .api-key-guide summary,
html[data-theme="dark"] .api-key-guide strong,
html[data-theme="dark"] .api-key-guide a,
html[data-theme="dark"] .delete-modal h2,
html[data-theme="dark"] .delete-modal p strong { color: #e1e6eb; }
html[data-theme="dark"] .form-field input,
html[data-theme="dark"] .form-field select,
html[data-theme="dark"] .form-field textarea { background: #1a2025; border-color: #424b55; color: #e8ebef; }
html[data-theme="dark"] .form-field input:focus,
html[data-theme="dark"] .form-field select:focus,
html[data-theme="dark"] .form-field textarea:focus { border-color: #84909c; box-shadow: 0 0 0 3px rgba(150, 165, 180, .13); }
html[data-theme="dark"] .key-input { border-color: #424b55; }
html[data-theme="dark"] .key-input button { color: #b5bec8; }
html[data-theme="dark"] .channel-preview,
html[data-theme="dark"] .api-key-guide { background: #252c33; border-color: #3c4550; }
html[data-theme="dark"] .channel-preview p,
html[data-theme="dark"] .preview-platform,
html[data-theme="dark"] .manual-details summary,
html[data-theme="dark"] .api-key-guide ol,
html[data-theme="dark"] .settings-status,
html[data-theme="dark"] .delete-modal p { color: #aab4bf; }
html[data-theme="dark"] .manual-details,
html[data-theme="dark"] .youtube-settings { border-color: #39414a; }
html[data-theme="dark"] .custom-option,
html[data-theme="dark"] .card-menu button { background: transparent; color: #cbd3db; }
html[data-theme="dark"] .custom-option:hover,
html[data-theme="dark"] .custom-option.highlighted,
html[data-theme="dark"] .card-menu button:hover,
html[data-theme="dark"] .card-menu-button:hover { background: #343d46; color: #fff; }
html[data-theme="dark"] .custom-option.selected,
html[data-theme="dark"] .custom-option.selected::after { color: #f0f2f4; }
html[data-theme="dark"] .custom-option-add { border-color: #3c4650; }
html[data-theme="dark"] .new-option-editor { border-color: #3c4650; background: #252c33; }
html[data-theme="dark"] .new-option-row input { border-color: #424b55; background: #1a2025; color: #e8ebef; }
html[data-theme="dark"] .new-option-save { border-color: #e8ebee; background: #e8ebee; color: #1b2025; }
html[data-theme="dark"] .new-option-cancel { border-color: #424b55; background: #303841; color: #e0e5ea; }
html[data-theme="dark"] .delete-mark { background: #3d292d; }

/* Landing dashboard and long-form information dialogs. */
.landing-screen { min-height: 100vh; min-height: 100dvh; display: flex; padding: 0; background: #f3f4f6; }
.landing-panel { width: 100%; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; border: 0; border-radius: 0; background: #f7f8fa url("assets/dashboard-background.png") center / cover no-repeat; box-shadow: none; }
.landing-center { min-height: 590px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 42px 20px 24px; transform: translateY(-88px); }
.landing-logo { display: block; width: min(450px, 72vw); max-height: 255px; height: auto; object-fit: contain; }
.landing-actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; transform: translateY(48px); }
.landing-actions button { min-width: 165px; height: 54px; padding: 0 21px; border-radius: 12px; font-size: 18px; font-weight: 540; letter-spacing: -.4px; box-shadow: 0 7px 15px rgba(22, 29, 36, .09); }
.landing-start { border: 1px solid #20272e; background: #20272e; color: #fff; }
.landing-start:hover { background: #343c44; }
.landing-guide { border: 1px solid #dde1e5; background: rgba(255,255,255,.85); color: #20272e; }
.landing-guide:hover { background: #f5f6f7; }
.landing-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; padding: 18px 20px 28px; color: #575e67; font-size: 14px; }
.landing-footer button, .landing-footer a { border: 0; padding: 5px 0; background: none; color: inherit; font-size: inherit; font-weight: 430; text-decoration: none; }
.landing-footer button:hover, .landing-footer a:hover { color: #111820; text-decoration: underline; text-underline-offset: 5px; }
.landing-footer span { color: #777e87; }
.info-backdrop { z-index: 80; }
.info-dialog { width: min(100%, 760px); max-height: min(88vh, 850px); max-height: min(88dvh, 850px); display: flex; flex-direction: column; border: 1px solid #e7eaed; border-radius: 18px; background: #fff; box-shadow: 0 24px 80px rgba(22, 28, 35, .23); overflow: hidden; }
.info-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 26px 30px 19px; border-bottom: 1px solid #edf0f2; }
.info-header h2 { margin: 0; font-size: 24px; font-weight: 570; letter-spacing: -.6px; }
.info-content { overflow-y: auto; padding: 24px 30px 33px; color: #46505a; font-size: 14px; line-height: 1.85; }
.info-content .info-lead { margin-top: 0; color: #1e252c; font-size: 16px; line-height: 1.75; }
.info-content .info-effective { margin: 0 0 12px; color: #929ba4; font-size: 12px; }
.info-content h3 { margin: 27px 0 7px; color: #202830; font-size: 16px; font-weight: 610; }
.info-content p { margin: 0 0 13px; }
.info-content ol { margin: 0 0 15px; padding-left: 22px; }
.info-content li { padding-left: 2px; margin-bottom: 8px; }
.info-content strong { color: #252d35; font-weight: 600; }
.info-content a { color: #2c5e9f; text-underline-offset: 3px; }
html[data-theme="dark"] .landing-screen { background: #12161a; }
html[data-theme="dark"] .landing-panel { background: linear-gradient(rgba(17, 23, 29, .88), rgba(17, 23, 29, .88)), url("assets/dashboard-background.png") center / cover no-repeat; }
html[data-theme="dark"] .landing-logo { filter: invert(1); }
html[data-theme="dark"] .landing-guide { background: #272f35; border-color: #48515a; color: #eef1f4; }
html[data-theme="dark"] .landing-guide:hover { background: #303941; }
html[data-theme="dark"] .landing-footer { color: #b0b8c1; }
html[data-theme="dark"] .landing-footer button:hover, html[data-theme="dark"] .landing-footer a:hover { color: #fff; }
html[data-theme="dark"] .info-dialog { background: #20262c; border-color: #3c454d; }
html[data-theme="dark"] .info-header { border-color: #384149; }
html[data-theme="dark"] .info-header h2, html[data-theme="dark"] .info-content .info-lead, html[data-theme="dark"] .info-content h3, html[data-theme="dark"] .info-content strong { color: #eef1f4; }
html[data-theme="dark"] .info-content { color: #bac3cb; }
html[data-theme="dark"] .info-content .info-effective { color: #8995a0; }
html[data-theme="dark"] .info-content a { color: #9dc4ff; }
@media (max-width: 650px) { .landing-center { min-height: 480px; padding: 25px 15px; transform: translateY(-35px); } .landing-logo { width: min(86%, 370px); } .landing-actions { gap: 10px; margin-top: 6px; transform: translateY(28px); } .landing-actions button { min-width: 120px; height: 46px; padding: 0 16px; font-size: 16px; border-radius: 10px; } .landing-footer { gap: 7px 12px; padding: 12px 14px 16px; font-size: 12px; } .info-header { padding: 20px 20px 15px; } .info-content { padding: 19px 20px 25px; font-size: 13px; } }

/* Channel detail and reference videos */
.card-details-button { display: flex; flex: 1; flex-direction: column; align-items: flex-start; min-width: 0; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.card-details-button .card-description { display: block; max-width: 100%; }
.card-details-button .tags { width: 100%; }
.card-details-button:hover .card-description { color: #4b5561; }
.card-details-button:focus-visible { outline: 2px solid #8e98a3; outline-offset: 5px; border-radius: 3px; }
.detail-modal { width: min(100%, 620px); }
.detail-modal .modal-heading { margin-bottom: 20px; }
.detail-modal .modal-heading { align-items: center; gap: 12px; }
.detail-added-date { margin-left: auto; color: #8d96a0; font-size: 12px; font-weight: 400; white-space: nowrap; }
.detail-hero { display: flex; align-items: center; gap: 22px; margin-bottom: 20px; }
.detail-image { flex: none; width: 156px; height: 156px; overflow: hidden; border-radius: 14px; background: #e7eaed; }
.detail-image .thumb { width: 100%; height: 100%; font-size: 52px; }
.detail-identity { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 10px; }
.detail-platform .platform-badge { margin-top: 0; }
.detail-identity h3 { margin: 0; color: #1e2329; font-size: 23px; font-weight: 550; letter-spacing: -.5px; overflow-wrap: anywhere; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-tags .tag { max-width: none; }
.detail-open-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; color: #4f5965; font-size: 13px; text-decoration: none; }
.detail-open-link:hover { color: #161b20; text-decoration: underline; text-underline-offset: 3px; }
.detail-open-link svg { width: 15px; height: 15px; }
.detail-section { padding-top: 18px; border-top: 1px solid #edf0f2; }
.detail-section + .detail-section { margin-top: 18px; }
.detail-section h3 { margin: 0 0 12px; color: #293039; font-size: 14px; font-weight: 550; }
.detail-description { margin: 0; color: #67717d; font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.detail-section-heading { display: flex; align-items: baseline; gap: 8px; }
.detail-section-heading span { color: #98a1ab; font-size: 12px; }
.detail-video-list { display: grid; gap: 8px; }
.detail-video-empty { margin: 0 0 13px; padding: 17px; border: 1px dashed #dce1e5; border-radius: 10px; color: #929ba5; font-size: 13px; line-height: 1.5; }
.detail-video-item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border: 1px solid #e8ecef; border-radius: 10px; background: #fafbfc; }
.detail-video-number { flex: none; color: #a0a8b1; font-size: 12px; font-variant-numeric: tabular-nums; }
.detail-video-item a { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; color: #293039; text-decoration: none; }
.detail-video-item a:hover strong { text-decoration: underline; text-underline-offset: 2px; }
.detail-video-item strong { font-size: 13px; font-weight: 500; }
.detail-video-item small { overflow: hidden; color: #939ca6; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.detail-video-item button { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: #939ca6; cursor: pointer; }
.detail-video-item button:hover { background: #f0e9e9; color: #ba5555; }
.detail-video-item button svg { width: 15px; height: 15px; }
.detail-video-form { margin-top: 14px; }
.detail-video-form label { display: block; margin-bottom: 8px; color: #38414a; font-size: 13px; font-weight: 500; }
.detail-video-form label:not(:first-child) { margin-top: 13px; }
.detail-video-input-row { display: flex; gap: 8px; }
.detail-video-form > input,
.detail-video-input-row input { flex: 1; min-width: 0; width: 100%; height: 42px; padding: 0 12px; border: 1px solid #dfe3e7; border-radius: 9px; outline: 0; background: #fff; color: #252a30; font: inherit; font-size: 13px; }
.detail-video-form > input:focus,
.detail-video-input-row input:focus { border-color: #8f969f; box-shadow: 0 0 0 3px rgba(0, 0, 0, .045); }
.detail-video-form > input::placeholder,
.detail-video-input-row input::placeholder { color: #a5adb5; }
.detail-video-input-row button { min-width: 66px; border-radius: 9px; font-size: 13px; font-weight: 500; }
.detail-video-error { margin: 8px 0 0; color: #be4e4e; font-size: 12px; }
@media (max-width: 650px) { .detail-hero { align-items: flex-start; gap: 15px; } .detail-image { width: 112px; height: 112px; } .detail-identity h3 { font-size: 19px; } }
html[data-theme="dark"] .card-details-button:hover .card-description { color: #d1d8df; }
html[data-theme="dark"] .detail-image { background: #303841; }
html[data-theme="dark"] .detail-identity h3,
html[data-theme="dark"] .detail-section h3,
html[data-theme="dark"] .detail-video-form label,
html[data-theme="dark"] .detail-video-item a { color: #e9edf0; }
html[data-theme="dark"] .detail-section { border-color: #39414a; }
html[data-theme="dark"] .detail-description,
html[data-theme="dark"] .detail-open-link { color: #b2bec9; }
html[data-theme="dark"] .detail-open-link:hover { color: #fff; }
html[data-theme="dark"] .detail-video-empty { border-color: #47515c; color: #a9b4bf; }
html[data-theme="dark"] .detail-video-item { border-color: #3b4550; background: #262e36; }
html[data-theme="dark"] .detail-video-number,
html[data-theme="dark"] .detail-video-item small,
html[data-theme="dark"] .detail-section-heading span { color: #99a5b0; }
html[data-theme="dark"] .detail-video-item button { color: #aab4be; }
html[data-theme="dark"] .detail-video-item button:hover { background: #493437; color: #f2aaaa; }
html[data-theme="dark"] .detail-video-form > input,
html[data-theme="dark"] .detail-video-input-row input { border-color: #424b55; background: #1a2025; color: #e8ebef; }
html[data-theme="dark"] .detail-video-form > input::placeholder,
html[data-theme="dark"] .detail-video-input-row input::placeholder { color: #84909c; }

/* Independent sort direction beside the sort criterion */
.toolbar { gap: 9px; }
.sort-direction-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-width: 103px; height: 44px; padding: 0 11px; border: 1px solid #dfe3e7; border-radius: 10px; background: #fff; color: #3f4853; font-size: 13px; font-weight: 400; white-space: nowrap; }
.sort-direction-button:hover { border-color: #bdc4cc; background: #f8f9fa; }
.sort-direction-button:focus-visible { outline: 2px solid #8e98a3; outline-offset: 2px; }
.sort-direction-button svg { width: 16px; height: 16px; }
.view-controls { margin-left: 11px; }
html[data-theme="dark"] .detail-added-date { color: #a8b2bc; }
html[data-theme="dark"] .sort-direction-button { border-color: #39414a; background: #20262c; color: #e7eaed; }
html[data-theme="dark"] .sort-direction-button:hover { border-color: #596571; background: #2a323a; }
@media (max-width: 650px) {
  .section-heading { flex-wrap: wrap; }
  .toolbar { width: 100%; justify-content: flex-end; }
  .sort-direction-button { height: 44px; }
  .view-controls { margin-left: 2px; }
  .detail-added-date { font-size: 11px; }
}
@media (max-width: 400px) {
  .sort-direction-button { width: 39px; min-width: 39px; padding: 0; }
  .sort-direction-button span { display: none; }
}