@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css");

:root {
    --bg-body: #121212;
    --bg-sidebar: color-mix(in srgb, #151515, transparent 10%);
    --bg-card: #1e1e1e;
    --bg-input: #2a2a2a;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-section: #191919;
    --bg-header-mobile: #1c1d1f;
    --config-theme-color: #ffffff;

    --text-primary: #ffffff;
    --text-secondary: #adb5bd;
    --text-sidebar: #ced4da;
    --text-sidebar-hover: #ffffff;
    
    --border-color: #333333;
    --accent-blue: #0d6efd;
    --accent-red: #dc3545;
    
    --btn-secondary-bg: #333333;
    --btn-secondary-color: #ffffff;
    --btn-secondary-border: #444444;

    --comment-count-color: #888; 
    --modal-bg: #2a2a2a;
    --table-head-bg: rgba(0,0,0,0.2);
    --win-input-bg: rgba(0,0,0,0.5);
    --auth-bg-overlay: rgba(0,0,0,0.4);
    
    --link-color: var(--link-color-dark, #e69720);
    --ext-link-color: var(--ext-link-color-dark, #009900);
    
    --pin-color: #888888; 
    --filter-active-bg: #0d6efd;
    --filter-inactive-text: #adb5bd;

    --notice-bar-bg: rgba(255, 255, 255, 0.05);

    --quote-bg: #2d2f34;
    --quote-border: #383b40;
    --quote-text: #ddd;
    --quote-accent: #666c75;
}

body.light-mode {
    --bg-body: #f5f7fa;
    --bg-sidebar: color-mix(in srgb, var(--bg-card), transparent 10%);
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: rgba(0, 0, 0, 0.05);
    --bg-section: #f8f9fa;
    --bg-header-mobile: linear-gradient(135deg in oklab, #00bfff, #689fff, #5cd2ef);

    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-sidebar: #495057;
    --text-sidebar-hover: #000000;
    
    --border-color: #dee2e6;
    --accent-blue: #0d6efd; 
    
    --btn-secondary-bg: #e9ecef;
    --btn-secondary-color: #333333;
    --btn-secondary-border: #ced4da;
    
    --comment-count-color: #888; 
    --modal-bg: #ffffff;
    --table-head-bg: #e9ecef;
    --win-input-bg: rgba(255,255,255,0.8);
    --auth-bg-overlay: rgba(255,255,255,0.1);
    
    --link-color: var(--link-color-light, #0275d8);
    --ext-link-color: var(--ext-link-color-light, #009900);
    
    --pin-color: #888888;
    --filter-active-bg: #0d6efd;
    --filter-inactive-text: #495057;

    --notice-bar-bg: rgba(255, 255, 255, 0.05);

    --quote-bg: #eee;
    --quote-border: #ccc;
    --quote-text: #212529;
    --quote-accent: #71bc6d;
}

body, html { margin:0; padding:0; width:100%; height:100%; font-family:'Segoe UI Variable', 'Segoe UI', sans-serif; background:var(--bg-body); color:var(--text-primary); overflow:hidden; transition: background 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
* { box-sizing:border-box; } .hidden { display:none !important; }

*, *::before, *::after {
    transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.custom-link { color: var(--link-color) !important; text-decoration: none; font-weight: inherit; cursor: pointer; }
.custom-link.external { color: var(--ext-link-color) !important; }
.custom-link:hover { text-decoration: underline; }

#r-content .custom-color .custom-link, #r-content [style*="color"] .custom-link,
.comment-content .custom-color .custom-link, .comment-content [style*="color"] .custom-link {
    color: inherit !important;
}

#r-content .custom-color .custom-link, #r-content [style*="color"] .custom-link,
.comment-content .custom-color .custom-link, .comment-content [style*="color"] .custom-link {
    color: inherit !important;
}

.custom-link:has(.custom-color):hover, 
.custom-link:has([style*="color"]):hover {
    text-decoration: none !important;
}
.custom-link:hover .custom-color,
.custom-link:hover [style*="color"] {
    text-decoration: underline;
}

.ql-toolbar.ql-snow button:hover, .ql-toolbar.ql-snow button.ql-active { color: var(--link-color) !important; }
.ql-toolbar.ql-snow .ql-picker-label:hover { color: var(--link-color) !important; }

body.light-mode .ql-toolbar.ql-snow button:hover, body.light-mode .ql-toolbar.ql-snow button.ql-active { color: var(--link-color) !important; }
body.light-mode .ql-toolbar.ql-snow .ql-picker-label:hover { color: var(--link-color) !important; }

.mention-link { color: var(--link-color) !important; font-weight: bold; cursor: pointer; background: color-mix(in srgb, var(--link-color), transparent 90%); padding: 0 4px; border-radius: 4px; transition: all 0.2s; text-decoration: none; display: inline-block; }
.mention-link:hover { background: color-mix(in srgb, var(--link-color), transparent 80%); opacity: 0.9; }
.user-link { color: var(--link-color) !important; cursor: pointer; font-weight: bold; }

blockquote {
    background: var(--quote-bg);
    border: 2px dashed var(--quote-border);
    border-left: 5px solid var(--quote-accent);
    color: var(--quote-text);
    display: table;
    margin: 1em 0;
    padding: 1em;
    border-radius: 4px;
    max-width: 100%;
}

.wiki-list-item {
    display: list-item;
    list-style-type: disc;
    margin-left: 25px;
    padding-left: 0px;
    margin-bottom: 2px;
}

hr { border: 0; border-top: 1px solid var(--border-color); margin: 20px 0; }

#auth-screen { width:100%; height:100%; position:absolute; top:0; left:0; z-index:2000; background:url('https://s.widget-club.com/images/YyiR86zpwIMIfrCZoSs4ulVD9RF3/c00b57557743e709b8b96933432e0dfa/XvIwUiFBt7fLHRskPhKJ.jpg?q=70&w=768') center/cover; display:flex; flex-direction:column; justify-content:center; align-items:center; }
#auth-overlay { position:absolute; width:100%; height:100%; background:var(--auth-bg-overlay); backdrop-filter:blur(8px); }
.center-container { position:relative; z-index:2; width:360px; text-align:center; color:white; animation:fadeIn 0.5s ease; }
body.light-mode .center-container { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.profile-img-large { width:130px; height:130px; background:rgba(255,255,255,0.2); border-radius:50%; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(5px); border:2px solid rgba(255,255,255,0.1); }
.profile-img-large svg { width:65px; fill:white; }
.auth-links { margin-top:20px; font-size:13px; color:#ddd; cursor:pointer; }

.win-input, .form-input, .form-select, .form-textarea, .comment-input { width:100%; padding:12px; background:var(--bg-input); border:1px solid var(--border-color); border-radius:6px; color:var(--text-primary); margin-bottom:10px; outline:none; font-family:inherit; transition: background-color 0.3s, border-color 0.3s; }
.win-input { background:var(--win-input-bg); border:1px solid rgba(255,255,255,0.3); color: white; }
body.light-mode .win-input { border:1px solid #ccc; color: #000; }
::placeholder { color: var(--text-secondary) !important; opacity: 1; }
.btn-primary { width:100%; padding:12px; background:var(--accent-blue); color:white; border:none; border-radius:6px; font-weight:bold; cursor:pointer; }

#board-screen { width:100%; height:100%; display:flex; position:relative; }
#sidebar { width:280px; background:var(--bg-sidebar); border-right:1px solid var(--border-color); display:flex; flex-direction:column; z-index:1000; transition:0.3s; }
.sidebar-brand { height:60px; display:flex; align-items:center; padding-left:20px; font-weight:bold; font-size:20px; color: var(--text-primary); border-bottom: 1px solid var(--border-color); }

.menu-list { flex:1; padding:10px 0; overflow-y:auto; -ms-overflow-style: none; scrollbar-width: none; }
.menu-list::-webkit-scrollbar { display: none; }

.menu-item { padding:12px 20px; cursor:pointer; color:var(--text-sidebar); display:flex; align-items:center; gap:12px; transition:0.2s; font-size: 15px; }
.menu-item:hover, .menu-item.active { background:var(--bg-hover); color:var(--text-sidebar-hover); }
.menu-icon { font-size: 18px; color: currentColor; }
.sidebar-footer { padding:20px; border-top:1px solid var(--border-color); background: var(--bg-sidebar); display: flex; flex-direction: column; gap: 10px; }

#content-area { flex:1; padding:40px; overflow-y:auto; position:relative; }

#site-notice-bar { width: 100%; padding: 15px; margin-bottom: 20px; background: var(--notice-bar-bg); border-radius: 8px; border: 1px solid var(--border-color); align-items: flex-start; gap: 10px; position: relative; z-index: 1; background-clip: padding-box; transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; }
#site-notice-bar::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 2px; background: var(--config-theme-color); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s; }
#site-notice-bar:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); border-color: transparent; }
#site-notice-bar:hover::before { opacity: 1; }
body.light-mode #site-notice-bar:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.2); border-color: transparent; }

#site-notice-content { font-size: 14px; }

.board-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:8px; min-height:500px; display:flex; flex-direction:column; transition: background 0.3s; overflow: hidden; }
.board-header { padding:20px; border-bottom:1px solid var(--border-color); display:flex; justify-content:space-between; align-items:center; }
.btn-write, .btn-cancel, .btn-update, .btn-delete, .btn-trash, .btn-restore, .btn-settings, .btn-camera { border:none; padding:8px 10px; border-radius:4px; font-weight:bold; cursor:pointer; font-size:14px; min-width: 60px; }
.btn-write, .btn-update { background:var(--accent-blue); color:white; }
.btn-cancel, .btn-settings, .btn-camera { background: var(--btn-secondary-bg); color: var(--btn-secondary-color); border: 1px solid var(--btn-secondary-border); }
.btn-delete { background: var(--accent-red); color: white; }
.btn-trash { background: #6c757d; color: white; margin-left: 10px; }
.btn-restore { background: #28a745; color: white; margin-left: 10px; }
.btn-settings { margin-left: 8px; }
.btn-camera { padding: 5px 12px; font-size: 13px; display: flex; align-items: center; gap: 5px; }
.btn-camera:hover { background: var(--bg-hover); }

.btn-theme-toggle { width:100%; padding:8px; background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; }
.btn-theme-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
.header-right-actions { position: absolute; top: 20px; right: 20px; display: flex; gap: 8px; z-index: 10; }
.btn-list-top { position: static; padding: 6px 12px; font-size: 13px; background: var(--btn-secondary-bg); color: var(--btn-secondary-color); border: 1px solid var(--btn-secondary-border); border-radius: 4px; font-weight: bold; cursor: pointer; }
#post-btn-group button { font-size: 12px; min-width: auto; }
.btn-logout { width:100%; padding:12px; background:var(--accent-red); color:white; border:none; border-radius:6px; font-weight:bold; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }

table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; padding:15px; background:var(--table-head-bg); border-bottom:1px solid var(--border-color); color:var(--text-secondary); }
td { padding:15px; border-bottom:1px solid var(--border-color); color: var(--text-primary); }
.post-id { color:var(--text-secondary); font-weight: normal; } 
.admin-nick { font-weight:bold; color:var(--text-primary); }
.pagination { display: flex; justify-content: center; gap: 5px; padding: 20px; }
.page-btn { padding: 5px 12px; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-primary); cursor: pointer; border-radius: 4px; font-weight: bold; }
.page-btn.active { background: var(--accent-blue); color: white; border: 1px solid var(--accent-blue); }

.pinned-post td { background: rgba(var(--accent-blue-rgb), 0.05); font-weight: bold; }
.icon-pin { font-size: 12px; color: var(--pin-color); vertical-align: middle; margin-right: 4px; }

.tag-filter-bar { display: flex; gap: 10px; padding: 15px 20px; border-bottom: 1px solid var(--border-color); overflow-x: auto; white-space: nowrap; }
.tag-filter-item { padding: 6px 12px; border-radius: 15px; cursor: pointer; color: var(--filter-inactive-text); font-size: 14px; font-weight: bold; transition: 0.2s; }
.tag-filter-item:hover { color: var(--text-primary); background: var(--bg-hover); }
.tag-filter-item.active { background: var(--filter-active-bg); color: white; }

.mobile-list { display: none !important; flex-direction:column; gap:15px; padding: 0; }
.m-card { background: var(--bg-card); padding: 15px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; position: relative; }
.m-title { font-weight: bold; font-size: 16px; color: var(--text-primary); margin-bottom: 5px; line-height: 1.4; }
.m-tag { font-size: 14px; color: var(--text-primary); font-weight: bold; margin-right: 5px; }
.m-meta { font-size: 13px; color: var(--text-secondary); display: flex; justify-content: space-between; align-items: center; }
.comment-count-text { color: var(--comment-count-color); font-weight:bold; font-size:13px; margin-left: 5px; }

.comment-section { background:var(--bg-section); padding:20px; border-top:1px solid var(--border-color); }
.comment-item { border: 1px solid var(--border-color); background: var(--bg-card); border-radius: 4px; margin-bottom: 15px; display:flex; flex-direction:column; overflow: hidden; }
.comment-depth-1 { margin-left: 20px; border-left: 3px solid var(--border-color); }
.comment-depth-2 { margin-left: 40px; border-left: 3px solid var(--border-color); }
.comment-depth-3 { margin-left: 60px; border-left: 3px solid var(--border-color); }
.comment-header { display: flex; justify-content: space-between; align-items: center; background: var(--bg-hover); padding: 8px 12px; border-bottom: 1px solid var(--border-color); font-size: 13px; }
.comment-user-info { display: flex; align-items: center; gap: 6px; font-weight: normal; color: var(--text-primary); white-space: nowrap; }
.comment-user-icon { font-size: 12px; color: var(--text-secondary); } 
.btn-ban-small { background: var(--accent-red); color: white; border: none; padding: 2px 5px; border-radius: 3px; font-size: 13px; font-weight: bold; cursor: pointer; margin-left: 4px; line-height: 1; }
.comment-meta-right { color: var(--text-secondary); display: flex; align-items: center; gap: 8px; font-size: 12px; }
.comment-btn-link { padding: 4px 2px; cursor: pointer; color: var(--text-secondary); text-decoration: none; transition: color 0.2s; font-size: 12px; }
.comment-btn-link:hover { color: var(--text-primary); }
.comment-sep { color: #555; margin: 0 1px; }
.comment-edited-mark { font-size: 12px; color: var(--text-secondary); padding: 5px 12px 0 12px; font-weight: bold; }
.comment-content { padding: 12px 15px; font-size:14px; line-height:1.6; color:var(--text-primary); word-break: break-all; min-height: 40px; }
.comment-reply-form, .comment-edit-form { padding: 10px; background: var(--bg-input); border-top: 1px solid var(--border-color); }
.form-textarea { min-height: 400px; }

.config-card { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.config-header { padding: 15px; background: var(--table-head-bg); border-bottom: 1px solid var(--border-color); font-weight: bold; font-size: 16px; }
.config-body { flex: 1; padding: 0; display: flex; flex-direction: column; }
.config-editor { width: 100%; background: #1e1e1e; color: #d4d4d4; border: none; padding: 15px; font-family: 'Consolas', 'Monaco', monospace; font-size: 14px; line-height: 1.5; resize: none; outline: none; box-sizing: border-box; }
body.light-mode .config-editor { background: #f8f9fa; color: #212529; }
.config-footer { padding: 10px; border-top: 1px solid var(--border-color); background: var(--bg-card); }

.settings-container { max-width: 900px; margin: 0 auto; padding: 40px 20px; }
.setting-group { margin-bottom: 25px; }
.setting-label { display: block; margin-bottom: 8px; font-weight: bold; color: var(--text-secondary); font-size: 15px; }
.setting-flex { display: flex; gap: 10px; align-items: flex-start; }
.setting-flex .form-input { flex-grow: 1; margin-bottom: 0; height: 42px; }
.setting-flex .btn-update { width: 100px; height: 42px; padding: 0; }
.btn-icon-only { width: 42px; height: 42px; padding: 0; display: flex; align-items: center; justify-content: center; }

.grant-wrapper { margin-top: -20px; padding: 30px; }
.grant-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.grant-checkbox-list { display: flex; flex-direction: column; gap: 10px; }
.grant-item { display: flex; align-items: center; justify-content: space-between; padding: 12px; background: var(--bg-hover); border-radius: 4px; border: 1px solid var(--border-color); }
.grant-item label { font-weight: bold; color: var(--text-primary); }

.modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:2900; }
.modal-box { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background: var(--modal-bg); padding:25px; border-radius:8px; z-index:3000; width:350px; box-shadow:0 15px 50px rgba(0,0,0,0.7); border:1px solid var(--border-color); }
.modal-title { color:var(--text-primary); margin-top:0; margin-bottom:15px; font-size:18px; border-bottom:1px solid var(--border-color); padding-bottom:10px; }
.modal-menu-item { display:block; width:100%; padding:12px 15px; text-align:left; background: var(--bg-input); border: 1px solid var(--border-color); margin-bottom: 8px; border-radius: 6px; color:var(--text-primary); cursor:pointer; font-size:14px; transition: background 0.2s; }
.modal-menu-item:hover { background: var(--bg-hover); color:var(--text-primary); }
#mobile-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 900; }

.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; padding-top: 10px; }
.home-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 15px; height: 100%; }
.home-card:hover { background: var(--bg-hover); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-color: var(--accent-blue); }
.home-card-icon { width: 45px; height: 45px; flex-shrink: 0; fill: var(--accent-blue); background: rgba(var(--accent-blue-rgb), 0.1); display: flex; align-items: center; justify-content: center; border-radius: 12px; }
.home-card-icon svg { width: 28px; height: 28px; fill: var(--text-primary); }
.home-card-info { flex: 1; }
.home-card-info h3 { margin: 0 0 5px 0; color: var(--text-primary); font-size: 17px; }
.home-card-info p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.home-divider { border-top: 1px solid var(--border-color); margin: 30px 0; }
.recent-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; background: var(--bg-card); }
.recent-item { padding: 12px 15px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: background 0.2s; }
.recent-item:last-child { border-bottom: none; }
.recent-item:hover { background: var(--bg-hover); }
.recent-title { color: var(--text-primary); font-size: 14px; text-decoration: none; display: flex; align-items: center; gap: 8px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; }
.recent-meta { color: var(--text-secondary); font-size: 12px; display: flex; align-items: center; gap: 10px; }
.recent-badge { font-size: 11px; padding: 2px 6px; border-radius: 4px; background: var(--quote-bg); color: var(--text-secondary); flex-shrink: 0; }
.recent-comment-count { color: var(--comment-count-color); font-size: 12px; margin-left: -3px; }

.not-found-container { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; text-align:center; padding: 20px; }
.not-found-code { font-size: 80px; font-weight: bold; color: var(--accent-blue); margin: 0; line-height: 1; }
.not-found-text { font-size: 20px; color: var(--text-primary); margin: 20px 0; }
.btn-home { padding: 10px 20px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 30px; color: var(--text-primary); cursor: pointer; text-decoration: none; font-weight: bold; transition: 0.2s; }
.btn-home:hover { background: var(--accent-blue); color: white; border-color: var(--accent-blue); }

@media (max-width: 768px) {
    #sidebar { position:fixed; left:-280px; height:100%; top: 0; background: var(--bg-sidebar); box-shadow: 5px 0 15px rgba(0,0,0,0.5); padding-top: 0; z-index: 2000; } 
    #sidebar.open { transform:translateX(280px); }
    .sidebar-brand { background: var(--bg-sidebar); color: var(--text-primary); border-bottom: 1px solid var(--border-color); }
    #mobile-header { display:flex !important; height:60px; align-items:center; padding:0 20px; background: var(--config-theme-color); border-bottom: 1px solid rgba(0,0,0,0.1); color: white; position: fixed; width: 100%; top: 0; left: 0; z-index: 500; }
    #content-area { padding: 15px; padding-top: 80px; height: 100%; overflow-y: scroll; margin-top: 0; }
    .board-header { padding: 0; border: none; margin-bottom: 20px; }
    .board-header h2 { font-size: 24px; }
    table { display:none; } 
    .mobile-list { display:flex !important; }
    .btn-list-top { display: none; }
    .btn-settings { margin-left: 0; font-size: 13px; padding: 6px 10px; }
    .form-textarea { min-height: 300px; }
    #mobile-overlay.show { display: block; }
    .setting-flex { flex-direction: column; }
    .setting-flex .btn-update { width: 100%; margin-top: 5px; }
    .settings-container { padding: 20px 0; }
    .grant-wrapper { max-width: 600px; }
    .grant-header { flex-direction: column; align-items: stretch; gap: 5px; }
    .grant-header input { margin-bottom: 10px; }
    .grant-header label { margin-bottom: 5px; width: 100%; }
    .pagination { padding: 10px 0; }
    .comment-header { flex-direction: row; justify-content: space-between; align-items: center; gap: 5px; padding: 8px 10px; font-size: 13px; }
    .comment-user-info { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .comment-meta-right { flex-shrink: 0; gap: 5px; font-size: 13px; }
    .comment-btn-link { padding: 4px 2px; }
    .btn-ban-small { font-size: 12px; padding: 2px 5px; }
    .tag-filter-bar { padding: 10px 0; }
    .btn-icon-only { width: 100%; }
    
    #view-config {
        height: calc(100vh - 100px); 
        display: flex;
        flex-direction: column;
    }
    .config-card { border: none; background: transparent; }
    .config-body { border: 1px solid var(--border-color); border-radius: 4px; }
    
    .board-grid { grid-template-columns: 1fr; }
    .recent-item { flex-direction: column; align-items: flex-start; gap: 5px; }
    .recent-title { max-width: 100%; }
    .recent-meta { width: 100%; justify-content: space-between; margin-top: 5px; }
}

:root {
    --anim-speed: 0.3s;
    --anim-curve: cubic-bezier(0.4, 0, 0.2, 1);
    --bg-card: rgba(30, 30, 30, 0.85);
    --bg-input: rgba(42, 42, 42, 0.85);
    --bg-section: rgba(25, 25, 25, 0.85);
    --bg-sidebar: color-mix(in srgb, rgba(21, 21, 21, 0.85), transparent 10%);
    --link-color: var(--link-color-dark, #e69720);
    --ext-link-color: var(--ext-link-color-dark, #009900);
}

body {
    overflow-wrap: anywhere;
    word-break: break-word;
    background: var(--bg-body);
    transition: background-color var(--anim-speed) var(--anim-curve), color var(--anim-speed) var(--anim-curve);
}

body.light-mode {
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-input: rgba(255, 255, 255, 0.85);
    --bg-section: rgba(248, 249, 250, 0.85);
    --bg-sidebar: color-mix(in srgb, rgba(255, 255, 255, 0.85), transparent 10%);
    --link-color: var(--link-color-light, #0275d8);
    --ext-link-color: var(--ext-link-color-light, #009900);
}

.btn-tool {
    background-color: var(--bg-section);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-tool:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

body.light-mode .btn-tool:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.btn-tool.active {
    background-color: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

.ql-toolbar.ql-snow .ql-size::after { content: "글자 크기"; }
.ql-snow .ql-picker.ql-size .ql-picker-label::before { content: "Normal"; }
.ql-snow .ql-picker.ql-size .ql-picker-item::before { content: "Normal"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="-5"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="-5"]::before { content: "-5"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="-4"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="-4"]::before { content: "-4"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="-3"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="-3"]::before { content: "-3"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="-2"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="-2"]::before { content: "-2"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="-1"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="-1"]::before { content: "-1"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="+1"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="+1"]::before { content: "+1"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="+2"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="+2"]::before { content: "+2"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="+3"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="+3"]::before { content: "+3"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="+4"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="+4"]::before { content: "+4"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="+5"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="+5"]::before { content: "+5"; }

.editor-statusbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
    padding: 8px 15px;
    gap: 20px;
    border: 1px solid var(--border-color);
    border-top: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    user-select: none;
    margin-bottom: 15px;
}
body.light-mode .editor-statusbar {
    background-color: rgba(0, 0, 0, 0.03);
}

.clearfix::after { content: ""; display: table; clear: both; }

.wiki-toc {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 15px;
    display: inline-block;
    min-width: 250px;
    background: var(--bg-section);
    margin: 15px 0;
}
.wiki-toc-summary {
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-primary);
}
.wiki-toc-summary::marker,
.wiki-toc-summary::-webkit-details-marker { display: none; content: ""; }
.wiki-toc[open] > .wiki-toc-summary::after { transform: rotate(180deg); }
.wiki-toc-content {
    margin-top: 15px;
    animation: foldingExpand 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.wiki-toc-item {
    display: block;
    color: var(--link-color);
    text-decoration: none;
    padding: 2px 0;
}
.wiki-toc-item:hover { text-decoration: underline; }

.wiki-heading-wrap { margin-top: 30px; margin-bottom: 15px; }
.wiki-heading-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 5px;
}
.wiki-heading-summary::marker,
.wiki-heading-summary::-webkit-details-marker { display: none; content: ""; }
.wiki-heading-title {
    margin: 0;
    display: flex;
    align-items: center;
    color: var(--text-primary);
}
.wiki-heading-wrap:not([open]) > .wiki-heading-summary .wiki-heading-title::before {
    transform: rotate(-90deg);
}
.wiki-heading-edit {
    font-size: 12px;
    color: var(--link-color);
    text-decoration: none;
    font-weight: bold;
    margin-bottom: 3px;
}
.wiki-heading-edit:hover { text-decoration: underline; }
.wiki-heading-content {
    margin-top: -30px;
    animation: foldingExpand 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wiki-footnotes > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-weight: bold;
    color: var(--text-primary);
}
.wiki-footnotes > summary::-webkit-details-marker { display: none; }
.wiki-footnotes > summary::before {
    content: '▼';
    font-size: 10px;
    margin-right: 8px;
    transition: transform 0.3s;
    display: inline-block;
}
.wiki-footnotes:not([open]) > summary::before { transform: rotate(-90deg); }
.wiki-footnotes-content { animation: foldingExpand 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

@media (max-width: 768px) {
    .main-app-footer {
        flex-direction: column;
        align-items: center;
    }
    .main-app-footer > div {
        margin-left: 0 !important;
        width: 100%;
    }
    .footer-banners-wrapper {
        justify-content: center;
    }
}

#footer-banners-container {
    width: auto;
    margin-top: 0;
    margin-bottom: 0;
}
.footer-banners-wrapper {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 16px;
    padding-bottom: 8px;
    scrollbar-width: thin;
}
.footer-banners-wrapper::-webkit-scrollbar {
    height: 6px;
}
.footer-banners-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}
body.light-mode .footer-banners-wrapper::-webkit-scrollbar-thumb {
    background: #ced4da;
}
.footer-cta {
    flex: 0 0 auto;
    width: 280px;
    background: rgba(30, 30, 30, 0.85);
    border: 1px solid #444;
    border-radius: 8px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
body.light-mode .footer-cta {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #ced4da;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.footer-cta h3 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
}
body.light-mode .footer-cta h3 {
    color: #333;
}
.footer-cta p {
    margin: 0 0 12px 0;
    font-size: 0.9rem;
    color: #ccc;
    line-height: 1.4;
}
body.light-mode .footer-cta p {
    color: #555;
}
.footer-cta .cta-btn {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: bold;
    color: #fff;
    transition: opacity 0.2s;
}
.footer-cta .cta-btn:hover {
    opacity: 0.8;
}
.footer-cta .bubble {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 60px;
    height: 60px;
    opacity: 0.1;
    border-radius: 50%;
}

#developer-eval-section {
    margin: 20px 0;
    padding: 20px;
    background-color: var(--bg-section);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: monospace;
}

#eval-input {
    width: 100%;
    min-height: 150px;
    padding: 10px;
    margin-bottom: 10px;
    background-color: var(--bg-input);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
}

#eval-output {
    margin-top: 15px;
    padding: 15px;
    background-color: var(--bg-section);
    color: var(--text-primary);
    border-radius: 4px;
    border: 1px solid var(--border-color);
    white-space: pre-wrap;
    word-wrap: break-word;
    min-height: 50px;
    font-family: inherit;
    font-size: 14px;
    overflow-x: auto;
}

.board-card, .board-card-none, .profile-header-card, .setting-group, .config-card, .sys-upload-container, .static-file-list, .license-card, .recent-item, .win-input, .form-input, .form-select, .form-textarea, .comment-input, #sidebar {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

button, .btn-primary, .btn-write, .btn-cancel, .btn-update, .btn-delete, .btn-danger-block, .btn-home, .btn-camera, .btn-theme-toggle {
    opacity: 0.9;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

button:hover, .btn-primary:hover, .btn-write:hover, .btn-cancel:hover, .btn-update:hover, .btn-delete:hover, .btn-danger-block:hover, .btn-home:hover, .btn-camera:hover, .btn-theme-toggle:hover {
    opacity: 1;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

button:active, .btn-primary:active, .btn-write:active, .btn-cancel:active, .btn-update:active, .btn-delete:active, .btn-danger-block:active, .btn-home:active, .btn-camera:active, .btn-theme-toggle:active {
    transform: translateY(0) scale(0.98) !important;
}

@keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px) scale(0.98); filter: blur(5px); }
        to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }
    
    @keyframes fadeOutDown {
        from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
        to { opacity: 0; transform: translateY(20px) scale(0.98); filter: blur(5px); }
    }
    
    @keyframes popIn {
        0% { opacity: 0; transform: scale(0.9) translate(-50%, -50%); filter: blur(5px); }
        100% { opacity: 1; transform: scale(1) translate(-50%, -50%); filter: blur(0); }
    }
    
    @keyframes popOut {
        0% { opacity: 1; transform: scale(1) translate(-50%, -50%); filter: blur(0); }
        100% { opacity: 0; transform: scale(0.9) translate(-50%, -50%); filter: blur(5px); }
    }

    #view-home:not(.hidden), 
    #view-list:not(.hidden), 
    #view-read:not(.hidden), 
    #view-write:not(.hidden),
    #view-user-profile:not(.hidden),
    #view-settings:not(.hidden),
    #view-developer:not(.hidden),
    #view-license:not(.hidden),
    #view-config:not(.hidden),
    #view-grant:not(.hidden),
    #view-acl:not(.hidden),
    #view-block-history:not(.hidden),
    #view-audit-log:not(.hidden),
    #view-manage-account:not(.hidden),
    #view-notifications:not(.hidden),
    #view-plugin:not(.hidden),
    #view-login-history:not(.hidden),
    #view-batch-revert:not(.hidden) {
        animation: fadeInUp 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-input) inset !important;
    caret-color: var(--text-primary) !important;
    transition: background-color 5000s ease-in-out 0s;
}

@media (max-width: 768px) {
    .footnote-wrapper:focus {
        z-index: 9999;
    }
    
    .footnote-wrapper:focus::before {
        content: '';
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: -1;
        cursor: pointer;
    }
    
    body.light-mode .footnote-wrapper:focus::before {
        background: rgba(255, 255, 255, 0.4);
    }
    
    .footnote-wrapper:focus .footnote-popup {
        visibility: visible;
        opacity: 1;
    }
}

.diff-content a {
    color: var(--link-color);
}

del:hover { 
    text-decoration: none; 
}

.deleted-user:hover { 
    text-decoration: underline; 
}

    .ban-switch {
        position: relative;
        display: inline-block;
        width: 46px;
        height: 24px;
        margin: 0;
    }
    .ban-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    .ban-slider {
        position: absolute;
        cursor: pointer;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: #dc3545;
        transition: .3s;
        border-radius: 24px;
    }
    .ban-slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .3s;
        border-radius: 50%;
    }
    .ban-switch input:checked + .ban-slider {
        background-color: #0d6efd;
    }
    .ban-slider:hover {
        position: absolute;
        cursor: pointer;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: rgba(220, 53, 69, 0.8);
        transition: .3s;
        border-radius: 24px;
    }
    .ban-slider:before:hover {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: rgba(255, 255, 255, 0.05);
        transition: .3s;
        border-radius: 50%;
    }
    .ban-switch input:checked + .ban-slider:hover {
        background-color: rgba(65, 136, 241, 0.8);
    }

    .ban-switch input:checked + .ban-slider:before {
        transform: translateX(22px);
    }

    .ban-toggle-group {
        display: flex;
        background: rgba(0, 0, 0, 0.2);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        overflow: hidden;
    }
    body.light-mode .ban-toggle-group {
        background: #f1f3f5;
    }
    .ban-toggle-group input[type="radio"] {
        display: none;
    }
    .ban-toggle-group label {
        cursor: pointer;
        padding: 6px 16px;
        font-size: 13px;
        color: var(--text-secondary);
        transition: all 0.2s;
        margin: 0;
        user-select: none;
    }
    .ban-toggle-group input[type="radio"]#radio-mode-ban:checked + label {
        background: #dc3545;
        color: white;
        font-weight: bold;
    }
    .ban-toggle-group input[type="radio"]#radio-mode-unban:checked + label {
        background: #0d6efd;
        color: white;
        font-weight: bold;
    }

.ql-toolbar.ql-snow .ql-picker-item:hover,
.ql-toolbar.ql-snow .ql-picker-item.ql-selected {
    color: var(--link-color) !important;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    background-color: var(--bg-section) !important;
    border: 1px solid var(--btn-secondary-border) !important;
    z-index: 10000 !important;
}

@media (max-width: 768px) {
    .comment-item.comment-depth-1 { margin-left: 10px !important; }
    .comment-item.comment-depth-2 { margin-left: 15px !important; }
    .comment-item.comment-depth-3 { margin-left: 20px !important; }

    .comment-header {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .comment-user-info {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        min-width: 0;
        overflow: hidden;
    }

    .comment-meta-right {
        flex: 0 0 auto;
        margin-left: auto;
        display: flex;
        align-items: center;
        white-space: nowrap;
    }

    .clickable-author {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100px; 
    }
}

.list-item p,
.activity-item p,
.profile-content p,
.comment-content p,
.recent-comments p,
[id^="recent-"] p,
td p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.profile-comments > div:last-child,
.recent-comments > div:last-child,
.activity-item:last-child,
.list-item:last-child,
[id^="recent-"] > div:last-child {
    border-bottom: none !important;
}

.footnote-wrapper { position: relative; display: inline-block; cursor: pointer; }
.footnote-popup {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 120%;
    transform: translateX(-30%);
    background-color: var(--bg-section);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: 6px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: opacity 0.2s, visibility 0.2s;
    font-size: 13px;
    pointer-events: none;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    width: max-content;
}
@media (min-width: 769px) {
    .footnote-wrapper:hover .footnote-popup,
    .footnote-wrapper:active .footnote-popup {
        visibility: visible;
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .footnote-wrapper.active {
        z-index: 9999;
    }
    .footnote-wrapper.active::before {
        content: '';
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: -1;
        cursor: pointer;
    }
    body.light-mode .footnote-wrapper.active::before {
        background: rgba(255, 255, 255, 0.4);
    }
    .footnote-wrapper.active .footnote-popup {
        visibility: visible;
        opacity: 1;
    }
}

#r-content p, #comment-list p {
    margin: 0;
    padding: 0;
}

.toast-link { color: var(--link-color); font-weight: bold; cursor: pointer; text-decoration: none; }
body.light-mode .toast-link { color: var(--link-color); font-weight: bold; cursor: pointer; text-decoration: none; }

body.light-mode .mention-link { color: var(--link-color); background: color-mix(in srgb, var(--link-color), transparent 90%); }
body.light-mode .mention-link:hover { background: color-mix(in srgb, var(--link-color), transparent 80%); }

#custom-footer a, #signup-terms-area a, #update-logs-backend a, #update-logs-frontend a, #site-notice-bar a { text-decoration: none !important; color: var(--link-color) !important; transition: color 0.2s ease; }
body.light-mode #custom-footer a, body.light-mode #signup-terms-area a, body.light-mode #update-logs-backend a, body.light-mode #update-logs-frontend a, body.light-mode #site-notice-bar a { color: var(--link-color) !important; }

.static-file-name { color: var(--link-color); font-weight: bold; cursor: pointer; transition: color 0.2s; }
body.light-mode .static-file-name { color: var(--link-color); }

.license-card a { color: var(--link-color); text-decoration: none !important; transition: color 0.2s; }
body.light-mode .license-card a { color: var(--link-color); text-decoration: none !important; }

.gravatar-link { color: var(--link-color); text-decoration: none; font-weight: bold; transition: color 0.2s; }
body.light-mode .gravatar-link { color: var(--link-color); }

.btn-change { background: transparent; color: var(--link-color); border: 1px solid color-mix(in srgb, var(--link-color), transparent 70%); padding: 2px 8px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: all 0.2s; margin-left: 5px; vertical-align: middle; }
.btn-change:hover { background: color-mix(in srgb, var(--link-color), transparent 90%); border-color: var(--link-color); }
body.light-mode .btn-change { color: var(--link-color); border-color: color-mix(in srgb, var(--link-color), transparent 70%); }
body.light-mode .btn-change:hover { background: color-mix(in srgb, var(--link-color), transparent 90%); border-color: var(--link-color); }

body.light-mode .user-link { color: var(--link-color); }

.icon-grant { color: var(--link-color); }
.uuid-display { font-size: 24px; font-weight: bold; letter-spacing: 2px; color: var(--link-color); margin: 20px 0; word-break: break-all; font-family: monospace; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 8px; border: 1px solid var(--border-color); }

@media (max-width: 768px) {
    .popup-user-info {
        display: none !important;
    }
    .board-card-none {
        background: none !important;
        border: none !important;
    }
}

.board-card-none { background:var(--bg-card); border:1px solid var(--border-color); border-radius:8px; min-height:600px; display:flex; flex-direction:column; transition: background 0.3s; overflow: hidden; }

.custom-color { color: var(--c-dark); }
body.light-mode .custom-color { color: var(--c-light); }
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: #666 !important; }
.ql-toolbar.ql-snow { background-color: rgba(255, 255, 255, 0.05); }
.ql-toolbar.ql-snow button { color: #fff !important; width: 28px; height: 28px; position: relative; overflow: visible; }
.ql-toolbar.ql-snow button:hover, .ql-toolbar.ql-snow button.ql-active { color: #e69720 !important; }
.ql-toolbar.ql-snow .ql-picker { color: #fff !important; position: relative; overflow: visible; }
.ql-toolbar.ql-snow .ql-picker-label:hover { color: #e69720 !important; }
.ql-toolbar.ql-snow .ql-picker-options { background-color: var(--bg-card); border-color: #666 !important; }
.ql-editor.ql-blank::before { color: rgba(255, 255, 255, 0.4); }

body.light-mode .ql-toolbar.ql-snow, body.light-mode .ql-container.ql-snow { border-color: #ccc !important; }
body.light-mode .ql-toolbar.ql-snow { background-color: #f8f9fa; }
body.light-mode .ql-toolbar.ql-snow button { color: #555 !important; }
body.light-mode .ql-toolbar.ql-snow button:hover, body.light-mode .ql-toolbar.ql-snow button.ql-active { color: #0d6efd !important; }
body.light-mode .ql-toolbar.ql-snow .ql-picker { color: #555 !important; }
body.light-mode .ql-toolbar.ql-snow .ql-picker-label:hover { color: #0d6efd !important; }
body.light-mode .ql-toolbar.ql-snow .ql-picker-options { background-color: #fff; border-color: #ccc !important; }
body.light-mode .ql-editor.ql-blank::before { color: rgba(0, 0, 0, 0.4); }

.ql-toolbar.ql-snow button i { font-size: 15px; line-height: 24px; color: inherit; transition: color 0.2s; }
.ql-snow .ql-stroke { stroke: currentColor !important; }
.ql-snow .ql-fill { fill: currentColor !important; }
.ql-snow .ql-picker { color: inherit !important; }
.ql-snow .ql-picker-label { color: inherit !important; }

.ql-toolbar.ql-snow button::after, .ql-toolbar.ql-snow .ql-picker::after {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 1000;
    line-height: 1;
}
.ql-toolbar.ql-snow button:hover::after, .ql-toolbar.ql-snow .ql-picker:hover::after {
    opacity: 1;
    visibility: visible;
}
body.light-mode .ql-toolbar.ql-snow button::after, body.light-mode .ql-toolbar.ql-snow .ql-picker::after {
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
}

.ql-toolbar.ql-snow .ql-header::after { content: "문단 서식"; }
.ql-toolbar.ql-snow button.ql-bold::after { content: "굵게"; }
.ql-toolbar.ql-snow button.ql-italic::after { content: "기울임꼴"; }
.ql-toolbar.ql-snow button.ql-underline::after { content: "밑줄"; }
.ql-toolbar.ql-snow button.ql-strike::after { content: "취소선"; }
.ql-toolbar.ql-snow .ql-color::after { content: "글자 색상"; }
.ql-toolbar.ql-snow .ql-background::after { content: "배경 색상"; }
.ql-toolbar.ql-snow button.ql-list[value="ordered"]::after { content: "번호 있는 리스트"; }
.ql-toolbar.ql-snow button.ql-list[value="bullet"]::after { content: "리스트"; }
.ql-toolbar.ql-snow button.ql-link::after { content: "링크"; }
.ql-toolbar.ql-snow button.ql-image::after { content: "이미지"; }
.ql-toolbar.ql-snow button.ql-video::after { content: "동영상"; }
.ql-toolbar.ql-snow button.ql-clean::after { content: "서식 지우기"; }

.ql-toolbar.ql-snow, .ql-container.ql-snow { border-radius: 8px; }

body.light-mode #auth-screen {
    background: var(--auth-bg-light, var(--auth-bg-dark, url('https://s.widget-club.com/images/YyiR86zpwIMIfrCZoSs4ulVD9RF3/c00b57557743e709b8b96933432e0dfa/XvIwUiFBt7fLHRskPhKJ.jpg?q=70&w=768')));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .pledge-box {
        width: 100%;
        box-sizing: border-box;
        background-color: rgba(255, 255, 255, 0.05);
        padding: 15px;
        border: 1px solid var(--border-color);
        color: var(--text-secondary);
        font-size: 13px;
        margin-top: 10px;
        margin-bottom: 20px;
        border-radius: 4px;
        user-select: text; 
        transition: all 0.2s;
        white-space: pre-wrap;
        word-break: break-all;
    }
    .pledge-box:focus {
        border-color: #e69720;
        background-color: rgba(255, 255, 255, 0.1);
        outline: none;
    }

.hidden-perm { display: none !important; }

#login-history-table-container {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#login-history-table-container.show {
    display: block;
    opacity: 1;
}

.btn-primary, .btn-write, .btn-cancel, .btn-update, .btn-delete, .btn-danger-block {
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    #sidebar {
        background-color: color-mix(in srgb, #151515, transparent 50%) !important;
        
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

@media (max-width: 768px) {
    body.light-mode #sidebar {
        background-color: color-mix(in srgb, #fff, transparent 20%) !important;
        
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

.terms-box {
    overflow-y: auto !important;
    text-align: left !important;
    white-space: pre-wrap;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 5px;
    border: 2px solid transparent;
}

::-webkit-scrollbar-thumb:hover {
    background: transparent;
}

body.light-mode ::-webkit-scrollbar-track {
    background: transparent;
}

body.light-mode ::-webkit-scrollbar-thumb {
    background: transparent;
    border: 2px solid transparent;
}

body.light-mode ::-webkit-scrollbar-thumb:hover {
    background: transparent;
}

    .fa-bell.active {
        color: #e69720 !important;
        animation: swing 2s infinite;
    }
    
    body.light-mode .fa-bell.active {
        color: #0275d8 !important;
        animation: swing 2s infinite;
    }

    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 15px;
    }

    .log-table {
        width: 100%;
        min-width: 800px;
        border-collapse: collapse;
    }

    @media (max-width: 768px) {
        #view-login-history .log-table,
        #view-login-history .log-table thead,
        #view-login-history .log-table tbody,
        #view-login-history .log-table tr,
        #view-login-history .log-table th,
        #view-login-history .log-table td {
            display: table-cell !important;
        }
        
        #view-login-history .log-table { display: table !important; }
        #view-login-history .log-table thead { display: table-header-group !important; }
        #view-login-history .log-table tbody { display: table-row-group !important; }
        #view-login-history .log-table tr { display: table-row !important; }
    }

    @media (max-width: 768px) {
        .log-table {
            display: table !important;
            width: 100%;
            min-width: 700px;
        }
        
        .log-table thead {
            display: table-header-group !important;
        }
    }

    @keyframes swing {
        0% { transform: rotate(0deg); }
        10% { transform: rotate(15deg); }
        30% { transform: rotate(-10deg); }
        50% { transform: rotate(5deg); }
        70% { transform: rotate(-5deg); }
        100% { transform: rotate(0deg); }
    }

#site-notice-bar.hidden {
    display: none !important;
}

#site-notice-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#site-notice-bar > i {
    margin-top: 3px;
}

.notification-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
}

.pin-input-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

.pin-box {
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid #555;
    border-radius: 8px;
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    transition: all 0.2s;
    outline: none;
}

.pin-box:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
    background-color: rgba(255, 255, 255, 0.05);
}

body.light-mode .pin-box {
    background-color: rgba(255, 255, 255, 0.3);
    color: #333;
    border-color: #ccc;
}
body.light-mode .pin-box:focus {
    background-color: rgba(0, 0, 0, 0.05);
}

.profile-badge.engine_developer { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); font-weight: bold; }
#view-engine-perm, #view-reset-password { display: flex; justify-content: center; align-items: center; height: 80vh; }
.engine-perm-card { background: var(--bg-section); padding: 40px; border-radius: 12px; border: 1px solid var(--border-color); text-align: center; max-width: 500px; width: 100%; box-shadow: 0 10px 25px rgba(0,0,0,0.3); }
.engine-form-group { text-align: left; margin-bottom: 15px; }

.notice-icon {
    flex: 0 0 24px;
    text-align: center;
    margin-right: 10px;
}

.notice-row {
    display: flex;
    align-items: flex-start;
}

.notice-text {
    flex: 1;
    word-break: break-all;
    font-size: 14px;
}

    .notification-item {
        padding: 15px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        gap: 15px;
        transition: background-color 0.2s;
        cursor: pointer;
        border-left: 3px solid transparent; 
    }
    .notification-item:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }
    .notification-item.unread {
        padding: 15px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        gap: 15px;
        transition: background-color 0.2s;
        cursor: pointer;
        background-color: rgba(255, 193, 7, 0.05);
        border-left: 3px solid #ffc107;
    }
    .notification-content {
        flex: 1;
        font-size: 14px;
        color: var(--text-primary);
        line-height: 1.5;
    }
    .notification-meta {
        font-size: 12px;
        color: var(--text-secondary);
        margin-top: 5px;
    }
    .notification-icon-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 5px;
    }

    .btn-read-all {
        font-size: 12px;
        padding: 4px 10px;
        background: transparent;
        border: 1px solid var(--border-color);
        color: var(--text-secondary);
        border-radius: 4px;
        cursor: pointer;
    }
    .btn-read-all:hover {
        background: rgba(255,255,255,0.1);
        color: var(--text-primary);
    }

    #r-content ul {
        margin: 5px 0;
        padding-left: 20px;
        list-style-type: disc;
    }
    #r-content ul ul {
        margin: 0;
        list-style-type: circle;
    }
    #r-content ul ul ul {
        list-style-type: square;
    }
    #r-content li {
        margin-bottom: 2px;
        line-height: 1.5;
    }

@media (min-width: 769px) {
    body.collapsed #sidebar {
        width: 60px;
    }
    body.collapsed #content-area {
        margin-left: 60px;
        width: calc(100% - 60px);
    }

    body.collapsed #sidebar-brand-text {
        display: none;
    }
    body.collapsed .sidebar-brand {
        justify-content: center;
        padding: 15px 0;
    }
    body.collapsed .sidebar-brand span:first-child {
        margin-right: 0 !important;
    }

    body.collapsed .nav-header {
        display: none !important;
    }

    body.collapsed .nav-items {
        max-height: none !important;
        opacity: 1 !important;
    }

    body.collapsed .menu-item {
        font-size: 0;
        justify-content: center;
        border-left: 3px solid transparent;
    }
    body.collapsed .menu-icon {
        margin-right: 0;
        font-size: 18px;
        width: auto;
    }
    body.collapsed .menu-item:hover {
        border-left: none !important;
    }

    body.collapsed .menu-item:hover::before {
        opacity: 1;
    }

    body.collapsed .menu-item::after {
        content: attr(title);
        position: fixed;
        left: 70px;
        top: auto;
        background: #333;
        color: #fff;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 13px;
        white-space: nowrap;
        z-index: 1100;
        pointer-events: none;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        opacity: 0;
        visibility: hidden;
        transform: translateX(-10px);
        transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    
    body.collapsed .menu-item:hover::after {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
    
    body.light-mode.collapsed .menu-item::after {
        background: #fff;
        color: #333;
        border: 1px solid #ddd;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    body.collapsed .user-menu-popup {
        left: 70px;
        bottom: 15px;
        right: auto;
        width: 220px;
        transform-origin: bottom left;
    }

    body.collapsed .popup-user-info {
        display: block;
    }
    
    body.collapsed #sidebar-menu-list > div[style*="border-top"] {
        margin: 10px auto !important;
        width: 30px;
    }

    body.collapsed .sidebar-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    body.collapsed .btn-theme-toggle {
        font-size: 0;
        justify-content: center;
        padding: 15px 0;
        width: 100%;
        display: flex;
    }
    body.collapsed .btn-theme-toggle i {
        margin: 0;
    }
    body.collapsed #board-user-display, 
    body.collapsed .user-text-info,
    body.collapsed .user-profile-card > i.fa-chevron-up {
        display: none;
    }
    body.collapsed .user-profile-card {
        justify-content: center;
        padding: 15px 0;
        width: 100%;
    }
    body.collapsed .user-info-group {
        gap: 0;
    }
    body.collapsed .user-avatar-small {
        width: 36px;
        height: 36px;
    }
}

.popup-user-info {
    display: none;
    padding: 10px 15px 10px 15px;
    cursor: default;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 5px;
}
.popup-user-name {
    font-weight: bold;
    font-size: 14px;
    color: var(--text-primary);
    display: block;
}
.popup-user-role {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
    display: block;
}

    .menu-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--config-theme-color);
        opacity: 0;
        transition: opacity 0.2s;
        z-index: 2;
    }

.search-filter-bar {
    padding: 0 20px 20px 20px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
}

.form-select {
    display: block;
    width: 100%;
    padding: 8px 30px 8px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-input);;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23aaaaaa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 10px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-select:focus {
    border-color: #0d6efd;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

.search-filter-bar .form-select,
.search-filter-bar .form-input,
.search-filter-bar .btn-write,
.search-filter-bar .btn-cancel {
    height: 38px;
    margin-bottom: 0 !important;
    vertical-align: middle;
}

body.light-mode .form-select,
body.light-mode .form-input {
    background-color: #fff;
    color: #333;
    border-color: #ced4da;
}

body.light-mode .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 10px;
}

body.light-mode .form-input {
    background-image: none !important;
}

@media (max-width: 500px) {
    .search-filter-bar .form-select,
    .search-filter-bar .form-input {
        width: 100% !important;
        flex: 1 1 100%;
    }
    .search-filter-bar .btn-write,
    .search-filter-bar .btn-cancel {
        flex: 1;
    }
}

    .nav-indicator {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--config-theme-color);
        display: inline-block;
        margin-right: 10px;
        vertical-align: middle;
    }

    input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        border: 2px solid var(--border-color);
        border-radius: 4px;
        background-color: var(--bg-section);
        cursor: pointer;
        position: relative;
        vertical-align: middle;
        transition: all 0.2s ease;
        margin-right: 8px;
    }

    .lic-opensource {
        background: rgba(0,0,0,0.2);
        font-size: 13px;
        max-height: 400px;
        overflow-y: auto;
        font-family: monospace;
        white-space: pre-wrap;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        padding: 15px;
        width: fit-content;
        max-width: 100%;
    }

    body.light-mode .lic-opensource {
        background: var(--bg-section);
    }

    .diff-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 10px;
        width: 100%;
    }
    
    .diff-box {
        border: 1px solid var(--border-color);
        border-radius: 6px;
        overflow: hidden;
        background: rgba(0,0,0,0.2);
        width: fit-content;
        max-width: 100%;
    }
    
    .diff-header {
        background: rgba(255,255,255,0.05);
        padding: 8px 12px;
        font-weight: bold;
        font-family: monospace;
        font-size: 13px;
        border-bottom: 1px solid var(--border-color);
        word-break: break-all;
        color: #e69720;
    }
    
    .diff-content {
        display: flex;
        flex-direction: column;
    }
    
    .diff-val {
        padding: 10px 12px;
        font-family: monospace;
        font-size: 12px;
        white-space: pre-wrap;
        word-break: break-all;
        line-height: 1.5;
    }

    .diff-old {
        background: rgba(220, 53, 69, 0.1); 
        color: #ffadad; 
        border-bottom: 1px solid var(--border-color);
        text-decoration: line-through;
        position: relative;
    }
    .diff-old::before { content: '- '; color: #dc3545; font-weight: bold; }

    .diff-new {
        background: rgba(40, 167, 69, 0.1); 
        color: #90ee90;
        position: relative;
    }
    .diff-new::before { content: '+ '; color: #28a745; font-weight: bold; }
    
    body.light-mode .diff-box {
        background: #fff;
        border-color: #dee2e6;
    }
    body.light-mode .diff-header {
        background: #e9ecef;
        color: #0275d8;
        border-bottom: 1px solid #dee2e6;
    }
    body.light-mode .diff-old {
        background: #fff5f5;
        color: #c00;
        border-bottom: 1px solid #dee2e6;
    }
    body.light-mode .diff-new {
        background: #f0fff4;
        color: #006400;
    }

    details > summary {
        cursor: pointer;
        font-weight: bold;
        color: var(--text-primary);
        padding: 5px;
        border-radius: 4px;
        transition: background 0.2s;
        list-style: none;
        width: fit-content;
        max-width: 100%;
    }
    details > summary::-webkit-details-marker { display: none; }
    details > summary::before {
        content: '▶';
        font-size: 10px;
        margin-right: 8px;
        display: inline-block;
        transition: transform 0.2s;
    }
    details[open] > summary::before {
        transform: rotate(90deg);
    }
    details > summary:hover {
        background: rgba(255,255,255,0.05);
    }
    body.light-mode details > summary:hover {
        background: rgba(0,0,0,0.05);
    }

    input[type="checkbox"]:checked {
        background-color: #0d6efd;
        border-color: #0d6efd;
        transform: scale(1.05);
    }

    body.light-mode input[type="checkbox"]:checked {
        background-color: #0275d8;
        border-color: #0275d8;
    }

    input[type="checkbox"]:checked::after {
        content: '✔';
        position: absolute;
        color: white;
        font-size: 12px;
        font-weight: bold;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    input[type="checkbox"]:hover {
        border-color: #888;
    }

    #custom-footer a:hover, #signup-terms-area a:hover, #update-logs-backend a:hover, #update-logs-frontend a:hover, #site-notice-bar a:hover {
        text-decoration: underline !important;
        opacity: 0.8;
    }

    .btn-logout:hover {
        background-color: #c82333;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
    }

    .sidebar-divider {
        border: 0;
        height: 1px;
        background-color: var(--border-color);
        margin: 20px 0 -20px 0;
        opacity: 0.5;
    }
    
    .profile-header-card {
        background: var(--bg-section);
        padding: 20px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
        transition: transform 0.3s var(--anim-curve), box-shadow 0.3s var(--anim-curve);
    }
    .profile-header-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .profile-info h2 { margin: 0 0 5px 0; color: var(--text-primary); }
    .profile-info p { margin: 0; color: var(--text-secondary); font-size: 14px; }
    
    .profile-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;
        margin-right: 5px;
        background: #444;
        color: #fff;
        transition: transform 0.2s ease;
        cursor: default;
    }
    .profile-badge:hover { transform: scale(1.05); }

    .profile-badge.developer { background: #12459E; font-weight: bold; }
    .profile-badge.developer:hover { background: #4188f1; }
    .profile-badge.admin { background: #dc3545; font-weight: bold; }
    .profile-badge.admin:hover { background: #ffa500; }
    .profile-badge.member { background: #76757b; }
    .profile-badge.ip { background: #888; }
    .profile-badge.hideip { background: #6f42c1; }
    .profile-badge.banned { background: #dc3545; color: #fff; font-weight: bold; }
    .profile-badge.banned:hover { background: #007bff; }
    .profile-badge.deleted_user { background: #333; color: #aaa; border: 1px solid #555; }
    body.light-mode .profile-badge.deleted_user { background: #eee; color: #333; border: 1px solid #888; }

    .ban-status-box {
        background: rgba(220, 53, 69, 0.1);
        color: #dc3545;
        padding: 15px;
        border-radius: 6px;
        margin-bottom: 20px;
        border: 1px solid #dc3545;
        margin: 0 10px 0 10px;
        transition: all 0.3s ease;
    }
    .ban-status-box:hover {
        background: rgba(65, 136, 241, 0.1);
        color: #4188f1;
        border-color: #4188f1;
        transform: translateY(-2px);
    }

.notice-content-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}
    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 250px;
        height: 100%;
        background-color: color-mix(in srgb, var(--bg-card), transparent 10%);
        border-right: 1px solid var(--border-color);
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        box-shadow: 2px 0 10px rgba(0,0,0,0.3);
    }

    #sidebar.open {
        transform: translateX(0);
    }

    .sidebar-brand {
        padding: 20px;
        font-size: 20px;
        font-weight: bold;
        color: var(--text-primary);
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
    }

    .menu-list {
        flex: 1;
        overflow-y: auto;
        padding: 10px 0;
    }

    .nav-group {
        margin-bottom: 5px;
    }

    .nav-header {
        padding: 12px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        color: var(--text-secondary);
        font-weight: bold;
        font-size: 13px;
        transition: color 0.2s;
        user-select: none;
    }

    .nav-header:hover {
        color: var(--text-primary);
    }

    .nav-header i.fa-chevron-down {
        font-size: 10px;
        transition: transform 0.3s var(--anim-curve);
    }

    .nav-group.active .nav-header i.fa-chevron-down {
        transform: rotate(180deg);
    }

    .nav-items {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out;
    }

    .nav-group.active .nav-items {
        max-height: 800px;
    }

    .menu-item {
        padding: 10px 20px 15px 30px;
        cursor: pointer;
        position: relative;
        transition: all 0.2s ease;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        font-size: 14px;
        text-decoration: none;
        border-left: none !important;
        z-index: 0;
    }

    .menu-item:hover {
        background-color: rgba(255, 255, 255, 0.05);
        padding-left: 35px;
    }

    .menu-item:hover::before {
        opacity: 1;
    }

    .menu-icon {
        width: 20px;
        text-align: center;
        color: var(--text-secondary);
        transition: transform 0.2s;
    }

    .menu-item:hover .menu-icon {
        transform: scale(1.1);
        color: var(--text-primary);
    }
    .board-card {
        margin-bottom: 40px !important;
    }
    .recent-list {
        margin-bottom: 40px !important;
    }
    .tag-filter-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 20px;
        padding-bottom: 15px;
        width: 100%;
    }

    .tag-filter-item {
        padding: 6px 14px;
        border-radius: 20px;
        background: var(--bg-section);
        border: 1px solid var(--border-color);
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s;
    }
    .tag-filter-item.active {
        background: #0d6efd;
        color: white;
        border-color: #0d6efd;
    }
    @media (min-width: 769px) {
        .tag-filter-bar {
            margin-bottom: 0 !important;
        }
    }
    .sidebar-footer {
        padding: 0;
        border-top: 1px solid var(--border-color);
        background-color: color-mix(in srgb, #151515, transparent 75%);
    }

    .user-profile-card {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        cursor: pointer;
        transition: background-color 0.2s;
        justify-content: space-between;
    }

    .user-profile-card:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }

    .user-info-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .user-avatar-small {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #333;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        transition: transform 0.2s;
    }

    .user-profile-card:hover .user-avatar-small {
        transform: scale(1.1);
    }

    .user-avatar-small img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .user-text-info {
        display: flex;
        flex-direction: column;
    }

    .user-name-display {
        font-weight: bold;
        font-size: 14px;
        color: var(--text-primary);
    }

    .user-role-display {
        font-size: 11px;
        color: var(--text-secondary);
    }

    .user-menu-popup {
        position: absolute;
        bottom: 70px;
        left: 10px;
        right: 10px;
        background-color: color-mix(in srgb, #252525, transparent 1%);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 5px;
        display: none;
        box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        animation: fadeInUp 0.2s ease-out;
        transform-origin: bottom center;
    }

    .user-menu-popup.show {
        display: block;
    }

    .user-menu-popup.closing {
        animation: fadeOutDown 0.2s ease-in forwards;
        display: block;
    }

    .popup-item {
        padding: 10px 15px;
        color: var(--text-primary);
        cursor: pointer;
        border-radius: 4px;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: background-color 0.2s;
    }

    .popup-item:hover {
        background-color: rgba(255,255,255,0.1);
    }
    .popup-item.logout-style {
        background-color: #3e1f1f;
        color: #ffcdd2;
        margin-top: 5px;
        border: 1px solid #592525;
        transition: all 0.2s;
    }

    .popup-item.logout-style:hover {
        background-color: #592525;
        transform: scale(0.98);
    }

    body.light-mode .popup-item.logout-style {
        background-color: #f8d7da;
        color: #721c24;
        margin-top: 5px;
        border: 1px solid #592525;
        transition: all 0.2s;
    }

    body.light-mode .sidebar-footer {
        background-color: color-mix(in srgb, #fff, transparent 75%);
    }
    body.light-mode .user-menu-popup {
        background-color: color-mix(in srgb, #fff, transparent 1%);
    }
    body.light-mode .user-avatar-small {
        background: #ddd;
        color: #555;
    }
    
.main-app-footer {
    padding: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--border-color);
    text-align: right;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    background: transparent;
    transition: background-color 0.3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .main-app-footer a {
        color: var(--link-color);
        text-decoration: none;
        font-weight: bold;
        transition: color 0.2s;
    }

    .main-app-footer a:hover {
        text-decoration: underline;
        opacity: 0.8;
    }

    body.light-mode .main-app-footer a {
        color: #0275d8;
    }

    .terms-box {
        background-color: #333;
        color: #ddd;
        padding: 10px;
        height: 150px;
        overflow-y: hidden;
        border: 1px solid #555;
        margin-bottom: 10px;
        font-size: 13px;
        line-height: 1.5;
        border-radius: 4px;
        transition: border-color 0.2s;
    }
    body.light-mode .terms-box {
        background-color: #FAFAFA;
        color: #373a3c;
    }

    .terms-checkbox-label {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #fff;
        margin-bottom: 20px;
        cursor: pointer;
    }
    .terms-checkbox-label input {
        margin-right: 10px;
        width: 16px;
        height: 16px;
    }
    
    .activity-item {
        padding: 10px;
        border-bottom: 1px solid var(--border-color);
        margin: 0 0 0 10px;
        cursor: pointer;
        transition: background-color 0.2s, transform 0.2s;
    }
    .activity-item:hover { 
        background: rgba(255,255,255,0.05);
        transform: translateX(5px);
    }
    
    .clickable-author { cursor: pointer; transition: color 0.2s; }
    .clickable-author:hover { color: #888; text-decoration: underline; }

    .static-file-list {
        background: var(--bg-section); 
        border: 1px solid var(--border-color);
        border-radius: 4px;
        max-height: 200px;
        overflow-y: auto;
        margin-bottom: 15px;
    }

    .static-file-item {
        padding: 10px 15px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: var(--text-primary);
        transition: background-color 0.2s;
    }
    .static-file-item:last-child { border-bottom: none; }
    .static-file-item:hover { background: rgba(255,255,255,0.05); }

    .static-file-name:hover { text-decoration: underline; }
    
    body.light-mode .static-file-item:hover { background: rgba(0,0,0,0.05); }

    .btn-delete-small {
        background: #dc3545;
        color: white;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
        transition: background-color 0.2s, transform 0.1s;
    }
    .btn-delete-small:hover { background: #c82333; transform: scale(1.05); }

    .sys-upload-container {
        background: rgba(0,0,0,0.2); 
        padding: 15px; 
        border-radius: 6px; 
        border: 1px solid var(--border-color);
        transition: border-color 0.2s;
    }
    .sys-upload-container:hover { border-color: #666; }
    body.light-mode .sys-upload-container { background: #f1f3f5; }

    .file-input-dark {
        background: #222;
        color: #ddd;
        border: 1px solid #444;
        padding: 8px;
        border-radius: 4px;
        font-size: 13px;
        transition: border-color 0.2s;
    }
    .file-input-dark:focus { border-color: #888; }
    
    .file-input-dark::file-selector-button {
        background: #444;
        color: white;
        border: 1px solid #555;
        padding: 5px 10px;
        border-radius: 3px;
        cursor: pointer;
        margin-right: 10px;
        transition: background-color 0.2s;
    }
    .file-input-dark::file-selector-button:hover {
        background: #555;
    }
    body.light-mode .file-input-dark { background: #fff; color: #333; border: 1px solid #ced4da; }
    body.light-mode .file-input-dark::file-selector-button { background: #e9ecef; color: #495057; border: 1px solid #adb5bd; }
    body.light-mode .file-input-dark::file-selector-button:hover { background: #dee2e6; }

    .update-log-box {
        background: #111;
        color: #ddd;
        padding: 10px;
        border-radius: 4px;
        font-size: 12px;
        min-height: 80px;
        max-height: 150px;
        overflow-y: auto;
        font-family: monospace;
        border: 1px solid #444;
    }
    body.light-mode .update-log-box { background: #fff; color: #333; border: 1px solid #ced4da; }

    .m-card:active {
        background-color: rgba(255,255,255,0.05);
        transform: scale(0.98);
    }

    .license-card {
        padding: 30px;
        background:var(--bg-card);
        color: #fff;
        border: none;
        min-height: 80vh;
        border-radius: 4px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .license-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    body.light-mode .license-card { background: #fff !important; color: #333 !important; border: 1px solid var(--border-color); }
    body.light-mode .license-card h1, body.light-mode .license-card h2, body.light-mode .license-card h3 { color: #333 !important; }
    body.light-mode .license-card ul { color: #333 !important; }
    body.light-mode .lic-hash { color: #666; }

    .profile-flex {
        display: flex;
        gap: 30px;
        flex-wrap: wrap;
    }
    .profile-left {
        flex: 0 0 150px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .profile-right {
        flex: 1;
        min-width: 250px;
    }
    .profile-avatar-img {
        width: 150px;
        height: 150px;
        border-radius: 12px;
        object-fit: cover;
        background: #000;
        border: 1px solid var(--border-color);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .profile-avatar-img:hover {
        transform: scale(1.05) rotate(2deg);
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    }
    .gravatar-desc {
        font-size: 12px;
        color: var(--text-secondary);
        margin-top: 10px;
        text-align: center;
        line-height: 1.4;
    }
    
    .profile-info-row {
        margin-bottom: 25px;
    }
    .profile-label-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }
    .profile-label {
        font-weight: bold;
        font-size: 14px;
        color: var(--text-secondary);
    }
    .profile-value {
        font-size: 16px;
        color: var(--text-primary);
        font-weight: bold;
        word-break: break-all;
    }
    
    .activity-title { font-weight: bold; color: var(--text-primary); display: block; margin-bottom: 4px;}
    .activity-meta { font-size: 12px; color: var(--text-secondary); }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    @keyframes fadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
    }

    #grant-form:not(.hidden) {
        animation: fadeInUp 0.4s ease;
    }
    
    .grant-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        border-bottom: 1px solid var(--border-color);
        animation: fadeIn 0.5s ease backwards;
    }
    .grant-item:last-child {
        border-bottom: none;
    }
    
    .grant-item:nth-child(1) { animation-delay: 0.05s; }
    .grant-item:nth-child(2) { animation-delay: 0.1s; }
    .grant-item:nth-child(3) { animation-delay: 0.15s; }
    .grant-item:nth-child(4) { animation-delay: 0.2s; }
    .grant-item:nth-child(5) { animation-delay: 0.25s; }
    .grant-item:nth-child(6) { animation-delay: 0.3s; }
    .grant-item:nth-child(7) { animation-delay: 0.35s; }

    .home-card {
        position: relative;
        background: var(--bg-card);
        background-clip: padding-box;
        z-index: 1;
        border-radius: 8px;
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .home-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        padding: 2px;
        background: var(--config-theme-color);
        
        -webkit-mask: 
            linear-gradient(#fff 0 0) content-box, 
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        
        opacity: 0;
        transition: opacity 0.3s;
    }

    .home-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        border-color: transparent;
    }

    .home-card:hover::before {
        opacity: 1;
    }

    body.light-mode .home-card:hover {
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        border-color: transparent;
    }
    .profile-section-title {
        color: var(--text-primary);
        font-size: 18px;
        margin: 20px 0 0 20px;
        border-bottom: 2px solid var(--border-color);
        padding-bottom: 5px;
    }

    .profile-section-title-none {
        color: var(--text-primary);
        font-size: 18px;
        border-bottom: 2px solid var(--border-color);
        padding-bottom: 5px;
    }

    .btn-primary, .btn-write, .btn-cancel, .btn-camera, .btn-home, .btn-update, .btn-delete {
        transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
        transform: scale(1);
    }
    .btn-primary:hover, .btn-write:hover, .btn-cancel:hover, .btn-camera:hover, .btn-home:hover, .btn-update:hover, .btn-delete:hover {
        transform: translateY(-2px);
        filter: brightness(1.1);
        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    }
    .btn-primary:active, .btn-write:active, .btn-cancel:active {
        transform: scale(0.98);
    }

    tbody tr {
        transition: background-color 0.2s;
        animation: fadeIn 0.5s ease backwards;
    }
    tbody tr:nth-child(1) { animation-delay: 0.05s; }
    tbody tr:nth-child(2) { animation-delay: 0.1s; }
    tbody tr:nth-child(3) { animation-delay: 0.15s; }
    tbody tr:nth-child(4) { animation-delay: 0.2s; }
    tbody tr:nth-child(5) { animation-delay: 0.25s; }

    .modal-box {
        animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        transition: all 0.3s;
        transform-origin: center center;
    }
    
    .modal-box.closing {
        animation: popOut 0.2s ease-in forwards;
    }
    .modal-overlay.closing {
        animation: fadeOut 0.2s ease-in forwards;
    }
    
    #auth-screen:not(.hidden) {
        animation: fadeIn 0.3s ease;
    }
    #auth-screen.closing {
        animation: fadeOut 0.2s ease-in forwards;
    }

    .view-section:not(.hidden) {
        animation: fadeInUp 0.4s ease;
    }
    
    .form-input, .form-textarea, .win-input {
        transition: border-color 0.3s, box-shadow 0.3s;
    }
    .form-input:focus, .form-textarea:focus, .win-input:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
    }
    
    .log-item {
        display: flex;
        gap: 15px;
        padding: 15px;
        border-bottom: 1px solid var(--border-color);
        transition: background-color 0.2s;
    }
    .log-item:hover {
        background-color: rgba(255,255,255,0.02);
    }
    .log-icon {
        flex: 0 0 40px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding-top: 5px;
    }
    .log-content {
        flex: 1;
        font-size: 14px;
        line-height: 1.5;
        color: var(--text-primary);
    }
    .log-meta {
        font-size: 12px;
        color: var(--text-secondary);
        margin-top: 5px;
    }
    
    .icon-ban { color: #28a745; }
    .icon-unban { color: #76757b; }
    .icon-config { color: #007bff; }
    .icon-dev { color: #6f42c1; }
    .icon-trash { color: #dc3545; }
    .log-table {
        width: 100%;
        border-collapse: collapse;
        font-family: monospace;
        font-size: 13px;
        margin-top: 10px;
        background: rgba(0,0,0,0.2);
    }
    .log-table th, .log-table td {
        border: 1px solid var(--border-color);
        padding: 5px;
        text-align: left;
    }
    .log-table th {
        background: rgba(255,255,255,0.1);
    }

    @media (max-width: 768px) {
        .profile-flex {
            flex-direction: column;
            align-items: center;
        }
        .profile-left {
            flex: none;
            width: 100%;
            margin-bottom: 20px; 
        }
        .profile-right {
            width: 100%;
            min-width: 0;
        }

        .license-card {
            padding: 20px 15px !important;
            margin: 10px;
        }
        .license-card h2, .license-card h3 {
            margin-bottom: 10px !important;
        }
        .license-card ul {
            padding-left: 20px;
        }

        @keyframes popInMobile {
            0% { opacity: 0; transform: scale(0.9) translate(-50%, -50%); }
            100% { opacity: 1; transform: scale(1) translate(-50%, -50%); }
        }
        @keyframes popOutMobile {
            0% { opacity: 1; transform: scale(1) translate(-50%, -50%); }
            100% { opacity: 0; transform: scale(0.9) translate(-50%, -50%); }
        }
        .modal-box {
            animation-name: popInMobile;
        }
        .modal-box.closing {
            animation-name: popOutMobile;
        }
    }

@media (min-width: 769px) {
    #sidebar {
        transform: translateX(0);
    }

    #content-area {
        margin-left: 250px;
        width: calc(100% - 250px);
        transition: margin-left 0.3s ease, width 0.3s ease;
    }

    #mobile-header {
        display: none !important;
    }
    
    #mobile-overlay {
        display: none !important;
    }
}
.pin-display-input {
    width: 100%;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid #555;
    border-radius: 8px;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    letter-spacing: 3px;
    margin-bottom: 20px;
    transition: border-color 0.3s, box-shadow 0.3s;
}
body.light-mode .pin-display-input {
    width: 100%;
    padding: 15px;
    background-color: #eee;
    border: 1px solid #555;
    border-radius: 8px;
    color: #373a3c;
}

.pin-display-input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.2);
    outline: none;
}

.pin-display-input::placeholder {
    color: #ccc;
    opacity: 0.8;
}

.btn-danger-block {
    width: 100%;
    background-color: #d53545;
    color: white;
    border: 1px solid #d53545;
    padding: 10px 0;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 10px;
    transition: all 0.2s;
    font-size: 13px;
}
.btn-danger-block:hover {
    background-color: #b71c1c;
}
body.light-mode .btn-danger-block {
    background-color: #d53545;
    border: 1px solid #d53545;
}
.profile-badge.verified { background: #28a745; font-weight: bold; }
.profile-badge.verified:hover { background: #218838; }

#app-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--config-theme-color, #0d6efd);
    z-index: 999999;
    width: 0%;
    opacity: 0;
    pointer-events: none;
}

#app-progress.loading {
    width: 60%;
    opacity: 1;
    transition: width 10s cubic-bezier(0, 1, 1, 1), opacity 0.1s;
}

#app-progress.done {
    width: 100%;
    opacity: 0;
    transition: width 0.2s ease, opacity 0.4s ease 0.2s;
}

.wiki-folding-summary-plain {
    cursor: pointer;
    padding: 0;
    list-style: none;
}

.wiki-folding-summary-plain:hover {
    background: none !important;
}

.wiki-folding-summary-plain::-webkit-details-marker,
.wiki-folding-summary-plain::before {
    display: none !important;
    content: none !important;
}

.wiki-folding-content-plain {
    animation: foldingExpand 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

details[open] .wiki-folding-content-plain {
    animation: foldingExpand 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes foldingExpand {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes foldingCollapse {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-5px); }
}

#debug-overlay {
    position: fixed;
    bottom: 12px;
    right: 12px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 12px;
    border-radius: 6px;
    z-index: 999999;
    pointer-events: none;
    display: none;
    max-width: 80vw;
    word-break: break-word;
    line-height: 1.3;
}
body.light-mode #debug-overlay {
    background: rgba(255, 255, 255, 0.85);
    color: #000;
}