:root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #363636;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --border-color: #404040;
    --accent-dark: #a9b681;
    --accent-light: #c0cb92;
    --accent-highlight: #e5edc0;
    --error-bg: #3a1b1b;
    --error-text: #ff4444;
    --info-bg: #1b2a3a;
    --info-text: #2196f3;
    --radius: 4px;
    --shadow: 0 2px 4px rgba(0,0,0,0.3);
    --glow: 4px;
    --transition: 0.25s cubic-bezier(0.4, 0, 0.1, 1);
    --transition-quick: 0.15s cubic-bezier(0.4, 0, 0.1, 1);
    --tag-artist: #e08000;
    --tag-subject: #4caf50;
    --tag-character: #9c27b0;
    --tag-location: #6699ff;
    --tag-movement: #f44336;
    --tag-technique: #009688;
    --tag-medium: #dbb530;
    --tag-iconography: #ff9800;
    --tag-period: #b87333;
    --tag-general: #a9b681;
    --tag-meta: #607d8b;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Times New Roman', Times, serif;
    font-size: 16px;
    line-height: 1.5;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
}

a {
    color: var(--accent-dark);
    text-decoration: none;
    transition: all var(--transition-quick);
}

a:hover {
    color: #fff;
    text-shadow: 0 0 10px var(--accent-dark);
}

h1, h2, h3, h4, h5 {
    color: var(--text-primary);
    text-transform: lowercase;
}

#top-bar {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

#top-bar-inner {
    max-width: 1520px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 10px;
    gap: 12px;
}

#top-bar .logo {
    font-size: 15px;
    font-weight: bold;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

#top-bar .logo .logo-art { color: var(--accent-dark); }
#top-bar .logo .logo-booru { color: var(--text-primary); }

#top-bar nav {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
}

#top-bar nav a {
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: var(--radius);
}

#top-bar nav a:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    text-shadow: none;
}

#top-bar nav a.active {
    color: var(--accent-dark);
    background: var(--bg-tertiary);
}

#top-bar .spacer { flex: 1; }

#top-bar .user-links {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

#top-bar .user-links a { color: var(--text-secondary); }
#top-bar .user-links .username { color: var(--accent-dark); font-weight: bold; }

#sub-bar {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

#sub-bar-inner {
    max-width: 1520px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 10px;
    gap: 8px;
}

#search-box {
    flex: 1;
    max-width: 600px;
    position: relative;
}

#search-box input {
    width: 100%;
    padding: 4px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color var(--transition-quick);
}

#search-box input:focus {
    border-color: var(--accent-dark);
    box-shadow: 0 0 var(--glow) var(--accent-dark);
}

#search-box input::placeholder { color: #666; }

.search-suggest {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    list-style: none;
    max-height: 300px;
    overflow-y: auto;
    z-index: 200;
    box-shadow: var(--shadow);
}

.suggest-item {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
}

.suggest-item:hover { background: var(--bg-tertiary); }
.suggest-name { flex: 1; }
.suggest-count { color: #666; font-size: 11px; }

#sub-bar .search-btn {
    padding: 4px 12px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    text-transform: lowercase;
    transition: all var(--transition-quick);
}

#sub-bar .search-btn:hover {
    border-color: var(--accent-dark);
}

#page {
    max-width: 1520px;
    margin: 0 auto;
    padding: 10px;
}

#page-with-sidebar {
    max-width: 1520px;
    margin: 0 auto;
    padding: 10px;
    display: flex;
    gap: 10px;
}

#sidebar {
    width: 240px;
    flex-shrink: 0;
}

#sidebar section { margin-bottom: 16px; }

#sidebar h2 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 3px;
    margin-bottom: 4px;
    font-weight: normal;
}

.tag-list { list-style: none; }

.tag-list li {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 1px 0;
    font-size: 13px;
    line-height: 1.5;
}

.tag-list .tag-count {
    color: #666;
    font-size: 11px;
    margin-left: auto;
    white-space: nowrap;
}

.tag-list .tag-search-link {
    color: #555;
    font-size: 11px;
}

.tag-list .tag-search-link:hover {
    color: var(--accent-dark);
    text-shadow: none;
}

.tag-type-artist a.tag-name { color: var(--tag-artist); }
.tag-type-subject a.tag-name { color: var(--tag-subject); }
.tag-type-character a.tag-name { color: var(--tag-character); }
.tag-type-location a.tag-name { color: var(--tag-location); }
.tag-type-movement a.tag-name { color: var(--tag-movement); }
.tag-type-technique a.tag-name { color: var(--tag-technique); }
.tag-type-medium a.tag-name { color: var(--tag-medium); }
.tag-type-iconography a.tag-name { color: var(--tag-iconography); }
.tag-type-period a.tag-name { color: var(--tag-period); }
.tag-type-general a.tag-name { color: var(--tag-general); }
.tag-type-meta a.tag-name { color: var(--tag-meta); }

.tag-type-artist a.tag-name:hover { color: #fff; text-shadow: 0 0 8px var(--tag-artist); }
.tag-type-subject a.tag-name:hover { color: #fff; text-shadow: 0 0 8px var(--tag-subject); }
.tag-type-character a.tag-name:hover { color: #fff; text-shadow: 0 0 8px var(--tag-character); }
.tag-type-location a.tag-name:hover { color: #fff; text-shadow: 0 0 8px var(--tag-location); }
.tag-type-movement a.tag-name:hover { color: #fff; text-shadow: 0 0 8px var(--tag-movement); }
.tag-type-technique a.tag-name:hover { color: #fff; text-shadow: 0 0 8px var(--tag-technique); }
.tag-type-medium a.tag-name:hover { color: #fff; text-shadow: 0 0 8px var(--tag-medium); }
.tag-type-iconography a.tag-name:hover { color: #fff; text-shadow: 0 0 8px var(--tag-iconography); }
.tag-type-period a.tag-name:hover { color: #fff; text-shadow: 0 0 8px var(--tag-period); }
.tag-type-general a.tag-name:hover { color: #fff; text-shadow: 0 0 8px var(--tag-general); }
.tag-type-meta a.tag-name:hover { color: #fff; text-shadow: 0 0 8px var(--tag-meta); }

#sidebar .search-tags {
    width: 100%;
    padding: 4px 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    margin-bottom: 4px;
}

#sidebar .search-tags:focus {
    border-color: var(--accent-dark);
    box-shadow: 0 0 var(--glow) var(--accent-dark);
}

#sidebar .sidebar-btn {
    width: 100%;
    padding: 3px 8px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    text-transform: lowercase;
}

#sidebar .sidebar-btn:hover { border-color: var(--accent-dark); }

#content { flex: 1; min-width: 0; }

.post-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.post-preview {
    position: relative;
    width: 180px;
    height: 180px;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 2px;
    transition: border-color var(--transition-quick);
}

.post-preview:hover { border-color: var(--accent-dark); }

.post-preview a {
    display: block;
    width: 100%;
    height: 100%;
}

.post-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.post-preview .post-score {
    position: absolute;
    bottom: 2px;
    left: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    text-shadow: 0 1px 3px #000, 0 0 6px #000;
}

.paginator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 16px 0;
    font-size: 13px;
}

.paginator a, .paginator span { padding: 3px 8px; border-radius: var(--radius); }

.paginator a {
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.paginator a:hover {
    border-color: var(--accent-dark);
    color: var(--text-primary);
    text-shadow: none;
}

.paginator .current-page {
    background: var(--accent-dark);
    color: #000;
    font-weight: bold;
}

.paginator .gap { color: #666; }

.post-count {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

#post-detail { text-align: center; }

#post-image img {
    max-width: 100%;
    max-height: 85vh;
}

.info-section { margin-bottom: 12px; }

.info-section h3 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 3px;
    margin-bottom: 4px;
    font-weight: normal;
}

.info-table { font-size: 13px; }

.info-table tr td {
    padding: 1px 0;
    vertical-align: top;
}

.info-table tr td:first-child {
    color: var(--text-secondary);
    padding-right: 12px;
    white-space: nowrap;
}

.info-table a { word-break: break-all; }

.form-wrap { max-width: 700px; }
.form-group { margin-bottom: 12px; }

.form-label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 3px;
    text-transform: lowercase;
}

.form-hint {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
}

.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 6px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: all var(--transition-quick);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--accent-dark);
    box-shadow: 0 0 var(--glow) var(--accent-dark);
}

.form-select option { background: var(--bg-primary); }
.form-textarea { resize: vertical; min-height: 60px; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.form-file-zone {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: all var(--transition-quick);
}

.form-file-zone:hover {
    border-color: var(--accent-dark);
    background: rgba(169, 182, 129, 0.03);
}

.form-file-zone input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.form-file-label { font-size: 14px; color: var(--text-secondary); }
.form-file-label strong { color: var(--accent-dark); }

.btn {
    display: inline-block;
    padding: 6px 16px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
    text-transform: lowercase;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition);
}

.btn:hover {
    border-color: var(--accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 0 var(--glow) var(--accent-dark);
    color: var(--text-primary);
    text-shadow: none;
}

.btn:active { transform: translateY(0); }

.btn-accent {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: #000;
}

.btn-full { width: 100%; text-align: center; }

.error-msg {
    background: var(--error-bg);
    border: 1px solid var(--error-text);
    color: var(--error-text);
    padding: 8px 12px;
    border-radius: var(--radius);
    margin-bottom: 10px;
    font-size: 13px;
}

.notice {
    background: var(--info-bg);
    border: 1px solid var(--info-text);
    color: var(--info-text);
    padding: 8px 12px;
    border-radius: var(--radius);
    margin-bottom: 10px;
    font-size: 13px;
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.empty-state h2 {
    font-size: 20px;
    font-weight: normal;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.auth-wrap {
    max-width: 340px;
    margin: 3rem auto;
}

.auth-title {
    font-size: 20px;
    font-weight: normal;
    text-align: center;
    margin-bottom: 20px;
}

.auth-footer {
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

#footer {
    border-top: 1px solid var(--border-color);
    padding: 10px;
    text-align: center;
    font-size: 12px;
    color: #666;
    margin-top: 20px;
}

@media (max-width: 900px) {
    #page-with-sidebar { flex-direction: column; }
    #sidebar { width: 100%; }
    .post-preview { width: 140px; height: 140px; }
}

@media (max-width: 640px) {
    .post-preview { width: 110px; height: 110px; }
    .post-grid { gap: 3px; }
    #top-bar nav { display: none; }
}