/* my34 modern interface for Szurubooru */
:root {
    color-scheme: dark;
    --m34-bg: #03100b;
    --m34-bg-soft: #071a12;
    --m34-surface: rgba(8, 31, 22, 0.90);
    --m34-surface-solid: #0a2117;
    --m34-surface-raised: #103326;
    --m34-border: rgba(110, 231, 183, 0.16);
    --m34-border-strong: rgba(52, 211, 153, 0.32);
    --m34-text: #e8eef8;
    --m34-muted: #94a3b8;
    --m34-primary: #34d399;
    --m34-primary-strong: #10b981;
    --m34-accent: #84cc16;
    --m34-danger: #fb7185;
    --m34-warning: #fbbf24;
    --m34-success: #34d399;
    --m34-shadow: 0 18px 45px rgba(0, 0, 0, 0.32);
    --m34-radius: 14px;
    --m34-radius-sm: 9px;
    --m34-nav-height: 58px;
    --r34-teal: var(--m34-primary-strong);
    --r34-teal-dark: #047857;
    --r34-teal-light: var(--m34-primary);
    --r34-teal-hover: #6ee7b7;
    --r34-bg: var(--m34-bg);
    --r34-card-bg: var(--m34-surface-solid);
    --r34-border: var(--m34-border);
    --r34-text: var(--m34-text);
    --r34-link: var(--m34-primary);
    --r34-link-hover: #6ee7b7;
    --r34-tag-general: #60a5fa;
    --r34-tag-artist: #fb7185;
    --r34-tag-character: #4ade80;
    --r34-tag-copyright: #c084fc;
    --r34-tag-meta: #fbbf24;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--m34-bg);
    scrollbar-color: #1b4735 var(--m34-bg);
    scrollbar-width: thin;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--m34-text) !important;
    background:
        radial-gradient(circle at 12% -8%, rgba(16, 185, 129, 0.17), transparent 30rem),
        radial-gradient(circle at 92% 4%, rgba(132, 204, 22, 0.09), transparent 26rem),
        linear-gradient(180deg, #082016 0, var(--m34-bg) 42rem) fixed !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    opacity: 0.18;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, black, transparent 72%);
}

::selection {
    color: #06111d;
    background: #6ee7b7;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--m34-bg); }
::-webkit-scrollbar-thumb { border: 3px solid var(--m34-bg); border-radius: 999px; background: #1b4735; }
::-webkit-scrollbar-thumb:hover { background: #28644d; }

a {
    color: var(--m34-primary) !important;
    text-decoration-color: rgba(52, 211, 153, 0.4);
    text-underline-offset: 3px;
    transition: color .18s ease, opacity .18s ease;
}

a:hover { color: #6ee7b7 !important; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 3px solid rgba(52, 211, 153, 0.36) !important;
    outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
    color: #f8fafc !important;
    letter-spacing: -0.025em;
}

h1 { font-size: clamp(1.8rem, 4vw, 2.65rem); }
h2 { font-size: clamp(1.35rem, 2vw, 1.8rem); }

/* Top navigation */
#top-navigation-holder {
    position: sticky;
    top: 0;
    z-index: 9000;
}

nav#top-navigation {
    min-height: var(--m34-nav-height);
    padding: 0 max(14px, env(safe-area-inset-left));
    border: 0 !important;
    border-bottom: 1px solid var(--m34-border) !important;
    background: rgba(3, 16, 11, 0.82) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

nav#top-navigation > ul {
    min-height: var(--m34-nav-height);
    align-items: center;
    gap: 3px;
}

nav#top-navigation ul li a {
    display: flex;
    min-height: 38px;
    align-items: center;
    padding: 0 14px !important;
    border-radius: 10px;
    color: #cbd5e1 !important;
    font-size: .91rem !important;
    font-weight: 650 !important;
    letter-spacing: .005em;
    transition: color .18s ease, background .18s ease, transform .18s ease !important;
}

nav#top-navigation ul li a:hover {
    color: #fff !important;
    background: rgba(52, 211, 153, .10) !important;
}

nav#top-navigation ul li.active a {
    color: #d1fae5 !important;
    background: linear-gradient(135deg, rgba(16, 185, 129, .24), rgba(132, 204, 22, .11)) !important;
    box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .20);
}

nav#top-navigation .thumbnail {
    overflow: hidden;
    border: 2px solid rgba(52, 211, 153, .45) !important;
    border-radius: 999px !important;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, .08) !important;
}

nav#top-navigation ul #mobile-navigation-toggle { color: #f8fafc !important; }

/* Page structure */
#content-holder {
    padding-bottom: 64px;
}

#content-holder > .content-wrapper,
.content-wrapper {
    width: min(1540px, calc(100% - 36px));
    margin-inline: auto;
}

header h1, .content-wrapper > h1 {
    text-shadow: 0 8px 30px rgba(52, 211, 153, .14);
}

/* Home */
#home {
    width: min(720px, calc(100% - 28px));
    margin-top: clamp(30px, 7vh, 72px);
    padding: clamp(28px, 5vw, 52px) !important;
    border: 1px solid var(--m34-border);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(8,31,22,.94), rgba(4,19,13,.82)) !important;
    box-shadow: var(--m34-shadow);
    backdrop-filter: blur(18px);
}

#home h1 { margin-top: 0; }
#home footer ul { color: var(--m34-muted) !important; }

#booru-counter-footer {
    width: min(720px, calc(100% - 28px));
    margin: 22px auto 48px !important;
    padding: 24px 20px 28px !important;
    border: 1px solid var(--m34-border);
    border-radius: 20px;
    color: #cbd5e1 !important;
    background: rgba(8, 31, 22, .88);
    box-shadow: 0 14px 36px rgba(0,0,0,.24);
    backdrop-filter: blur(16px);
}

#counter-text {
    color: #cbd5e1 !important;
    font-family: inherit !important;
    font-size: clamp(.95rem, 2.5vw, 1.15rem);
}

#counter-text span { color: var(--m34-primary) !important; }

#login,
#registration,
#password-reset {
    width: min(560px, calc(100% - 28px));
    margin-top: clamp(28px, 7vh, 70px);
    padding: clamp(24px, 5vw, 42px) !important;
    border: 1px solid var(--m34-border) !important;
    border-radius: 20px !important;
    color: var(--m34-text) !important;
    background: linear-gradient(145deg, rgba(8,31,22,.96), rgba(4,19,13,.92)) !important;
    box-shadow: var(--m34-shadow) !important;
    backdrop-filter: blur(18px);
}

#login h1,
#registration h1,
#password-reset h1 { margin-top: 0; }

#login ul.input,
#registration ul.input,
#password-reset ul.input { margin-top: 22px; }

#login .buttons,
#registration .buttons,
#password-reset .buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

/* Secondary navigation */
nav.buttons,
#content-holder > .content-wrapper nav.buttons {
    overflow-x: auto;
    margin: 16px 0 22px;
    padding: 5px !important;
    border: 1px solid var(--m34-border) !important;
    border-radius: 12px;
    background: rgba(7, 25, 18, .78) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
    backdrop-filter: blur(12px);
}

nav.buttons ul { gap: 4px; }
nav.buttons ul li a {
    padding: 8px 13px !important;
    border-radius: 8px;
    color: var(--m34-muted) !important;
    font-weight: 600 !important;
}

nav.buttons ul li a:hover { color: #e2e8f0 !important; background: rgba(148,163,184,.08) !important; }
nav.buttons ul li.active a {
    color: #06111d !important;
    background: linear-gradient(135deg, var(--m34-primary), var(--m34-accent)) !important;
    box-shadow: 0 6px 18px rgba(16,185,129,.22);
}

/* Buttons */
button,
input[type="button"],
input[type="submit"],
.button {
    min-height: 38px;
    padding: 8px 15px !important;
    border: 1px solid rgba(52, 211, 153, .25) !important;
    border-radius: 10px !important;
    color: #f8fafc !important;
    background: linear-gradient(135deg, #059669, #4d7c0f) !important;
    box-shadow: 0 7px 18px rgba(5, 150, 105, .18) !important;
    font: inherit;
    font-weight: 650 !important;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(5, 150, 105, .28) !important;
}

button:active, input[type="button"]:active, input[type="submit"]:active { transform: translateY(0) scale(.985) !important; }
button:disabled, input:disabled {
    opacity: .45;
    cursor: not-allowed;
    filter: saturate(.4);
    transform: none !important;
}

/* Forms */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="search"], input[type="url"], input[type="date"], input[type="time"],
select, textarea {
    min-height: 42px;
    border: 1px solid var(--m34-border) !important;
    border-radius: 10px !important;
    color: var(--m34-text) !important;
    background: rgba(3, 16, 11, .78) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
    font: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

textarea { min-height: 110px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #64748b !important; }
input:hover, select:hover, textarea:hover { border-color: rgba(148,163,184,.32) !important; }
input:focus, select:focus, textarea:focus {
    border-color: rgba(52, 211, 153, .72) !important;
    background: rgba(5, 24, 17, .96) !important;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .11) !important;
}

label { color: #cbd5e1 !important; font-weight: 600; }

/* Cards, sidebars and dialogs */
.post-view > .sidebar,
.readonly-sidebar,
.login-view form,
.registration-view form,
.password-reset-view form,
.settings-view form,
.upload-view .upload-form,
.comment-container .comment,
.message,
.modal .content,
.dialog .content {
    border: 1px solid var(--m34-border) !important;
    border-radius: var(--m34-radius) !important;
    color: var(--m34-text) !important;
    background: var(--m34-surface) !important;
    box-shadow: var(--m34-shadow) !important;
    backdrop-filter: blur(16px);
}

.post-view > .sidebar, .readonly-sidebar { padding: 16px !important; }
.post-view > .sidebar header, .readonly-sidebar h2, .readonly-sidebar h3 {
    padding-bottom: 9px !important;
    border-bottom: 1px solid var(--m34-border) !important;
    color: #d1fae5 !important;
}

/* Post gallery */
.post-list ul { gap: 8px !important; margin: 0 !important; }
.post-list ul li:not(.flexbox-dummy) {
    flex: 1 1 140px !important;
    width: 140px !important;
    min-width: 120px !important;
    max-width: 180px !important;
    min-height: 96px !important;
    height: 126px !important;
    margin: 0 !important;
    background: transparent !important;
}
.thumbnail-wrapper {
    overflow: hidden;
    border: 1px solid var(--m34-border) !important;
    border-radius: 13px !important;
    background-color: #071a12 !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.22) !important;
    transform: translateZ(0);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

.thumbnail-wrapper .thumbnail,
.post-thumbnail,
.thumbnail {
    overflow: hidden;
    border: 0 !important;
    border-radius: 11px !important;
    background-color: #071a12 !important;
    box-shadow: none !important;
}

.thumbnail-wrapper:hover {
    z-index: 2;
    border-color: rgba(52, 211, 153, .48) !important;
    transform: translateY(-4px) scale(1.012);
    box-shadow: 0 16px 34px rgba(0,0,0,.38), 0 0 0 1px rgba(52,211,153,.12) !important;
}

.thumbnail-wrapper:has(.type[data-type="video"]),
.thumbnail-wrapper[data-type="video"] {
    border-color: rgba(52, 211, 153, .55) !important;
    box-shadow: 0 9px 25px rgba(16,185,129,.16) !important;
}

.thumbnail-wrapper:has(.type[data-type="video"]):hover,
.thumbnail-wrapper[data-type="video"]:hover {
    border-color: #34d399 !important;
    box-shadow: 0 16px 36px rgba(16,185,129,.28) !important;
}

/* Opened posts should be large; only gallery thumbnails stay compact. */
.post-view .post-container .post-content {
    max-width: min(1500px, 90vw) !important;
}
.post-view .post-container img.post-content,
.post-view .post-container .post-content img {
    max-height: none !important;
    object-fit: contain;
}
.post-view .post-container video.post-content,
.post-view .post-container .post-content video,
.post-view .post-container canvas.post-content,
.post-view .post-container .post-content canvas {
    max-width: 100% !important;
    max-height: 88vh !important;
    object-fit: contain;
}

.post-list .details, .post-list .score, .post-list .type {
    text-shadow: 0 1px 5px #000;
}

/* Tables and lists */
table {
    overflow: hidden;
    border: 1px solid var(--m34-border) !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: var(--m34-radius-sm);
    background: rgba(7, 25, 18, .66);
}

th {
    color: #cbd5e1 !important;
    background: rgba(15, 45, 34, .90) !important;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

th, td { padding: 11px 13px !important; border-color: var(--m34-border) !important; }
tbody tr { transition: background .16s ease; }
tbody tr:hover { background: rgba(52, 211, 153, .055) !important; }

/* Tags retain semantic colors */
.tag-category-general, .tag-category-default,
a.tag[data-category="default"], a.tag[data-category="general"] { color: var(--r34-tag-general) !important; }
.tag-category-artist, a.tag[data-category="artist"] { color: var(--r34-tag-artist) !important; font-weight: 650 !important; }
.tag-category-character, a.tag[data-category="character"] { color: var(--r34-tag-character) !important; font-weight: 650 !important; }
.tag-category-copyright, a.tag[data-category="copyright"] { color: var(--r34-tag-copyright) !important; font-weight: 650 !important; }
.tag-category-meta, a.tag[data-category="meta"] { color: var(--r34-tag-meta) !important; }

.tag-list a, a.tag {
    border-radius: 6px;
    transition: background .15s ease, filter .15s ease;
}
.tag-list a:hover, a.tag:hover { background: rgba(148,163,184,.08); filter: brightness(1.16); }

/* Menus and autocomplete */
.autocomplete,
.dropdown-content,
.popup-menu {
    overflow: hidden;
    border: 1px solid var(--m34-border-strong) !important;
    border-radius: 12px !important;
    color: var(--m34-text) !important;
    background: rgba(7, 25, 18, .98) !important;
    box-shadow: var(--m34-shadow) !important;
    backdrop-filter: blur(18px);
}

.autocomplete ul li a { color: #cbd5e1 !important; }
.autocomplete ul li.active a, .autocomplete ul li a:hover {
    color: #fff !important;
    background: rgba(16, 185, 129, .20) !important;
}

/* Comments, notifications and status */
.comment-container .comment { overflow: hidden; }
.comment-container .comment header {
    border-bottom: 1px solid var(--m34-border) !important;
    color: #bae6fd !important;
    background: rgba(15, 45, 34, .82) !important;
}

.message.error, .error-message { border-color: rgba(251,113,133,.32) !important; background: rgba(127,29,29,.28) !important; }
.message.success, .success-message { border-color: rgba(52,211,153,.30) !important; background: rgba(6,78,59,.28) !important; }
.message.warning { border-color: rgba(251,191,36,.30) !important; background: rgba(120,53,15,.28) !important; }

.file-dropper {
    border: 2px dashed rgba(148,163,184,.28) !important;
    border-radius: var(--m34-radius) !important;
    color: var(--m34-muted) !important;
    background: rgba(7,25,18,.56) !important;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.file-dropper:hover, .file-dropper.active,
input[type="file"]:active + .file-dropper,
input[type="file"]:focus + .file-dropper {
    border-color: var(--m34-primary) !important;
    background: rgba(16,185,129,.08) !important;
}

#nprogress .bar {
    height: 3px !important;
    background: linear-gradient(90deg, var(--m34-primary), var(--m34-accent)) !important;
    box-shadow: 0 0 16px rgba(52,211,153,.75);
}

/* Custom daily card integration */
.szuru-daily-card {
    border-color: rgba(52,211,153,.28) !important;
    background: rgba(5, 24, 17, .97) !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.66) !important;
    backdrop-filter: blur(20px);
}
.szuru-daily-status { border: 1px solid var(--m34-border); background: rgba(15,45,34,.68) !important; }
.szuru-daily-media { border: 1px solid var(--m34-border); box-shadow: 0 14px 45px rgba(0,0,0,.34); }

/* Responsive behavior */
@media (max-width: 900px) {
    :root { --m34-nav-height: 52px; }
    #content-holder > .content-wrapper, .content-wrapper { width: min(100% - 22px, 1540px); }
    nav#top-navigation { padding-inline: 8px; }
    nav#top-navigation ul li a { min-height: 36px; padding: 0 10px !important; font-size: .86rem !important; }
    .post-view > .sidebar, .readonly-sidebar { border-radius: 11px !important; }
}

@media (max-width: 600px) {
    body { font-size: 14px; }
    #content-holder { padding-bottom: 36px; }
    nav.buttons { border-radius: 10px; }
    nav.buttons ul li a { padding: 7px 10px !important; white-space: nowrap; }
    button, input[type="button"], input[type="submit"], .button { min-height: 40px; }
    .szuru-daily-card { padding: 15px !important; border-radius: 12px !important; }
    .szuru-daily-title { font-size: 19px !important; }
    .post-list ul li:not(.flexbox-dummy) {
        flex-basis: calc(50% - 4px) !important;
        width: calc(50% - 4px) !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 112px !important;
    }
    .post-view .post-container .post-content { max-width: 98vw !important; }
    .post-view .post-container img.post-content,
    .post-view .post-container .post-content img { max-height: none !important; }
    .post-view .post-container video.post-content,
    .post-view .post-container .post-content video,
    .post-view .post-container canvas.post-content,
    .post-view .post-container .post-content canvas { max-height: 82vh !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}