@import url('https://fonts.googleapis.com/css2?family=Shojumaru&family=Cinzel+Decorative:wght@400;700&family=Raleway:wght@300;400;500;600;700&display=swap');

:root,
body.theme-cyberpunk {
    --bg-color: #0b0c16;
    --panel-bg: #151728;
    --neon-cyan: #dfb773;
    --neon-pink: #d94b79;
    --neon-yellow: #f4dca6;
    --text-main: #ffffff;
    --text-muted: #a3a7c6;
    --grid-color: rgba(223, 183, 115, 0.1);
    --font-heading: 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', sans-serif;
    --box-bg: rgba(223, 183, 115, 0.05);
    --box-border: rgba(223, 183, 115, 0.2);
}

body.theme-cute {
    --bg-color: #fff0f5;
    --panel-bg: #ffe4e1;
    --neon-cyan: #a1c4fd;
    --neon-pink: #ffb7b2;
    --neon-yellow: #ff9a9e;
    --text-main: #5c4a5c;
    --text-muted: #9b8c9b;
    --grid-color: rgba(255, 183, 178, 0.3);
    --font-heading: 'Fredoka', sans-serif;
    --font-body: 'Quicksand', sans-serif;
    --box-bg: rgba(255, 255, 255, 0.6);
    --box-border: rgba(255, 183, 178, 0.5);
}

body.theme-neutral {
    --bg-color: #f5f5f5;
    --panel-bg: #ffffff;
    --neon-cyan: #2c3e50;
    --neon-pink: #1a252f;
    --neon-yellow: #34495e;
    --text-main: #2c3e50;
    --text-muted: #7f8c8d;
    --grid-color: rgba(44, 62, 80, 0.05);
    --font-heading: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --box-bg: rgba(255, 255, 255, 1);
    --box-border: rgba(44, 62, 80, 0.1);
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-body);
    min-height: 100vh;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
.glitch,
.cyber-btn,
.day-name,
.date-range-box,
.time-info,
.avatar-placeholder,
.decor-box,
.schedule-footer p {
    font-family: var(--font-heading) !important;
}

/* Layout */
.app-container {
    display: flex;
    height: 100vh;
    width: 100vw;
}

.input-panel {
    width: 400px;
    background-color: var(--panel-bg);
    border-right: 2px solid var(--neon-cyan);
    padding: 30px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: relative;
    box-shadow: 5px 0 15px rgba(0, 243, 255, 0.1);
    z-index: 10;
}

.preview-panel {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px;
    background-image:
        linear-gradient(var(--grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
    background-size: 30px 30px;
    overflow: auto;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
    background: var(--neon-cyan);
}

/* Header Typography */
.header-title h1 {
    font-size: 2.5rem;
    color: var(--neon-yellow);
    text-shadow: 0 0 10px rgba(252, 238, 10, 0.5);
    margin-bottom: 5px;
    letter-spacing: 2px;
}

.header-title .version {
    font-size: 1rem;
    color: var(--neon-cyan);
    vertical-align: super;
}

.header-title p {
    color: var(--neon-pink);
    font-weight: 600;
    letter-spacing: 1px;
}

/* Forms */
.global-settings {
    border: 1px solid var(--neon-cyan);
    padding: 15px;
    position: relative;
}

.global-settings::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--neon-yellow);
    border-left: 2px solid var(--neon-yellow);
}

.global-settings::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid var(--neon-yellow);
    border-right: 2px solid var(--neon-yellow);
}

.form-group {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--neon-cyan);
    letter-spacing: 1px;
}

input[type="text"],
input[type="date"],
input[type="time"],
select {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--text-muted);
    color: white;
    padding: 10px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    outline: none;
    transition: all 0.3s ease;
}

body.theme-cute input[type="text"],
body.theme-cute input[type="date"],
body.theme-cute input[type="time"],
body.theme-cute select,
body.theme-neutral input[type="text"],
body.theme-neutral input[type="date"],
body.theme-neutral input[type="time"],
body.theme-neutral select {
    background: var(--box-bg);
    color: var(--text-main);
}

input[type="text"]:focus,
input[type="date"]:focus,
input[type="time"]:focus {
    border-color: var(--neon-pink);
    box-shadow: 0 0 8px rgba(255, 0, 60, 0.4);
}

input[type="file"] {
    color: var(--text-muted);
    font-family: var(--font-body);
}

input[type="file"]::file-selector-button {
    background: transparent;
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    padding: 5px 10px;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    transition: 0.3s;
}

body.theme-cute input[type="file"]::file-selector-button,
body.theme-neutral input[type="file"]::file-selector-button {
    color: var(--text-main);
    border-radius: 8px;
}

input[type="file"]::file-selector-button:hover {
    background: var(--neon-cyan);
    color: black;
}

/* Zoom Control */
.zoom-control-group {
    display: none; /* hidden until image is uploaded */
}

.zoom-control-group.visible {
    display: block;
}

.zoom-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.zoom-control input[type="range"] {
    flex: 1;
    accent-color: var(--neon-cyan);
    height: 4px;
    cursor: pointer;
    border: none;
    background: transparent;
    box-shadow: none;
}

.zoom-btn {
    background: transparent;
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    font-family: var(--font-body);
    padding: 0;
    flex-shrink: 0;
}

.zoom-btn:hover {
    background: var(--neon-cyan);
    color: var(--bg-color);
}

.zoom-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    min-width: 38px;
    text-align: right;
    font-family: var(--font-body);
}

/* Day Item Input */
.day-item-input {
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--neon-cyan);
    padding: 15px;
    margin-bottom: 15px;
    position: relative;
    transition: 0.3s;
}

.day-item-input:hover {
    background: rgba(255, 255, 255, 0.05);
}

.day-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px dashed var(--text-muted);
    padding-bottom: 5px;
}

.day-item-name {
    font-family: 'Orbitron', sans-serif;
    color: var(--neon-yellow);
    font-size: 1.1rem;
}

.day-item-date {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.off-day-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    cursor: pointer;
}

.off-day-toggle input {
    accent-color: var(--neon-pink);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.off-day-toggle span {
    font-size: 0.9rem;
    color: var(--neon-pink);
    font-weight: 600;
}

/* Button */
.cyber-btn {
    background: transparent;
    border: 2px solid var(--neon-pink);
    color: var(--neon-pink);
    padding: 20px 20px;
    font-size: 1rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-weight: 900;
    margin-top: 10px;
}

.cyber-btn:hover {
    background: var(--neon-pink);
    color: var(--bg-color);
    box-shadow: 0 0 20px var(--neon-pink);
}

/* CANVAS (The output that will be downloaded) */
.preview-wrapper {
    width: 864px;
    height: 486px;
    position: relative;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
    margin: auto;
}

.schedule-canvas {
    width: 1920px;
    height: 1080px;
    background-color: var(--panel-bg);
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    /* We scale this down so it fits in the preview panel */
    transform: scale(0.45);
    overflow: hidden;
}

.cyber-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--grid-color) 2px, transparent 2px),
        linear-gradient(90deg, var(--grid-color) 2px, transparent 2px);
    background-size: 60px 60px;
    z-index: 1;
}

.scanlines {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0) 50%,
            rgba(0, 0, 0, 0.1) 50%,
            rgba(0, 0, 0, 0.1));
    background-size: 100% 4px;
    z-index: 2;
    pointer-events: none;
}

.canvas-content {
    position: relative;
    z-index: 5;
    width: 100%;
    height: 100%;
    padding: 60px 80px;
    display: flex;
    flex-direction: column;
}

/* Header Schedule */
.schedule-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 4px solid var(--neon-cyan);
    padding-bottom: 20px;
    margin-bottom: 40px;
}

.schedule-header h2 {
    font-size: 5rem;
    color: var(--text-main);
    text-shadow: 3px 3px 0 var(--neon-pink), -3px -3px 0 var(--neon-cyan);
    letter-spacing: 5px;
    margin: 0;
    line-height: 1;
}

.channel-name {
    font-size: 2rem;
    color: var(--neon-cyan);
    font-family: var(--font-heading);
    letter-spacing: 3px;
    margin-top: 15px;
    font-weight: 700;
}

.date-range-box {
    font-size: 2rem;
    color: var(--neon-yellow);
    font-family: 'Orbitron', sans-serif;
    display: flex;
    gap: 15px;
    align-items: center;
}

.cyber-bracket {
    color: var(--neon-cyan);
}

/* Main Body Schedule */
.schedule-body {
    flex: 1;
    display: flex;
    gap: 50px;
}

/* Schedule List */
.schedule-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-bottom: 20px;
}

.day-row {
    background: var(--box-bg);
    border: 2px solid var(--box-border);
    display: flex;
    align-items: center;
    height: 90px;
    position: relative;
}

/* Cyberpunk Clip-path decoration */
.day-row::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 20px;
    height: 20px;
    border-top: 3px solid var(--neon-cyan);
    border-left: 3px solid var(--neon-cyan);
}

.day-row::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-bottom: 3px solid var(--neon-cyan);
    border-right: 3px solid var(--neon-cyan);
}

.day-info {
    width: 250px;
    height: 100%;
    background: var(--box-bg);
    border-right: 2px solid var(--neon-cyan);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.day-name {
    font-size: 2.2rem;
    color: var(--neon-yellow);
    letter-spacing: 2px;
    line-height: 1;
}

.day-date {
    font-size: 1.2rem;
    color: var(--text-main);
    font-weight: 600;
}

.time-info {
    width: 240px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--neon-pink);
    border-right: 2px dashed var(--box-border);
    font-family: var(--font-heading);
}

.activity-info {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 40px;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Rest Day Style */
.day-row.is-rest .day-row-content {
    opacity: 0.5;
}

.day-row.is-rest .time-info {
    display: none;
}

.day-row.is-rest .activity-info {
    color: var(--neon-pink);
    font-style: italic;
    letter-spacing: 5px;
}

.day-row.is-rest {
    border-color: rgba(255, 0, 60, 0.3);
    background: rgba(255, 0, 60, 0.05);
}

.day-row.is-rest .day-info {
    background: rgba(255, 0, 60, 0.1);
    border-right-color: var(--neon-pink);
}

.day-row.is-rest .day-name {
    color: var(--neon-pink);
}

.day-row.is-rest::before {
    border-color: var(--neon-pink);
}

.day-row.is-rest::after {
    border-color: var(--neon-pink);
}

/* Avatar Area */
.avatar-area {
    width: 600px;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.avatar-placeholder {
    width: 100%;
    height: 80%;
    border: 2px dashed var(--text-muted);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 2rem;
    color: var(--text-muted);
    font-family: 'Orbitron', sans-serif;
    background: rgba(255, 255, 255, 0.02);
}

#avatarPreview {
    /* Width, height, left, bottom all set by JS */
    position: absolute;
    object-fit: fill;
    z-index: 10;
    cursor: grab;
    user-select: none;
}

#avatarPreview.is-dragging {
    cursor: grabbing;
}

.avatar-decorations {
    position: absolute;
    bottom: 0;
    left: -20px;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.decor-box {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: var(--neon-yellow);
    color: black;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    padding: 5px 15px;
    font-size: 1.2rem;
}

/* Footer */
.schedule-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid var(--text-muted);
}

.schedule-footer p {
    font-family: 'Orbitron', sans-serif;
    color: var(--neon-cyan);
    font-size: 1.2rem;
    letter-spacing: 3px;
}

.barcode {
    width: 200px;
    height: 30px;
    background: repeating-linear-gradient(to right,
            var(--text-main),
            var(--text-main) 2px,
            transparent 2px,
            transparent 5px,
            var(--text-main) 5px,
            var(--text-main) 8px,
            transparent 8px,
            transparent 10px);
}

/* Responsive adjustment for preview panel */
@media (max-width: 1600px) {
    .preview-wrapper {
        width: 672px;
        height: 378px;
    }

    .schedule-canvas {
        transform: scale(0.35);
    }
}

@media (max-width: 1300px) {
    .preview-wrapper {
        width: 537.6px;
        height: 302.4px;
    }

    .schedule-canvas {
        transform: scale(0.28);
    }
}

/* Theme Overrides */
body.theme-cute .cyber-bracket,
body.theme-neutral .cyber-bracket {
    display: none;
}

body.theme-cute .glitch,
body.theme-neutral .glitch {
    text-shadow: none !important;
}

body.theme-cute .schedule-header h2,
body.theme-neutral .schedule-header h2 {
    text-shadow: none !important;
}

body.theme-cute .scanlines,
body.theme-neutral .scanlines {
    display: none;
}

body.theme-cute .day-row::before,
body.theme-cute .day-row::after,
body.theme-neutral .day-row::before,
body.theme-neutral .day-row::after {
    display: none;
}

body.theme-cute .global-settings::before,
body.theme-cute .global-settings::after,
body.theme-neutral .global-settings::before,
body.theme-neutral .global-settings::after {
    display: none;
}

body.theme-cute .barcode,
body.theme-neutral .barcode {
    display: none;
}

body.theme-cute .cyber-btn,
body.theme-neutral .cyber-btn {
    border-radius: 8px;
    box-shadow: none !important;
}

body.theme-cute .day-row,
body.theme-neutral .day-row {
    border-radius: 12px;
}

body.theme-cute .global-settings,
body.theme-neutral .global-settings {
    border-radius: 12px;
}

body.theme-cute .day-item-input,
body.theme-neutral .day-item-input {
    border-radius: 8px;
    border-left: none;
    border: 1px solid var(--box-border);
}

body.theme-cute .day-info,
body.theme-neutral .day-info {
    border-radius: 12px 0 0 12px;
    border-right: 2px dashed var(--box-border);
}

body.theme-cute .time-info,
body.theme-neutral .time-info {
    border-right: 2px dashed var(--box-border);
}

body.theme-synthwave {
    --bg-color: #1a0f2e;
    --panel-bg: #1a0f2e;
    --main-color: #ff2aa3;
    --secondary-color: #ff2aa3;
    --tertiary-color: #e5c890;
    --text-main: #a6d189;
    --text-muted: #7f8c8d;
    --grid-color: rgba(44, 62, 80, 0.05);
    --font-heading: "Inter", sans-serif;
    --font-body: "Inter", sans-serif;
    --box-bg: #2e2156;
    --box-border: rgba(44, 62, 80, 0.1);

    --secondary-text-color: #e48f38;
}

body[class="theme-synthwave"] .header-titles h2::after {
    content: "WEEKLY SCHEDULE";
    width: 100%;
    height: 100%;
    position: absolute;
    top: calc(50% - 0px);
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(13px);
    color: transparent;
    background: linear-gradient(0deg,
            var(--secondary-text-color) -30%,
            var(--main-color) 120%);
    background-clip: text;
    -webkit-background-clip: text;
}

body[class="theme-synthwave"] .header-titles h2 {
    text-shadow: unset !important;
    color: transparent;
    background: linear-gradient(0deg,
            var(--secondary-text-color) -30%,
            var(--main-color) 120%);
    background-clip: text;
    -webkit-background-clip: text;
    position: relative;
    overflow: visible;
}

body[class="theme-synthwave"] #scheduleList .is-rest .day-info {
    border-color: #ea999c !important;
    background: #ea999c !important;
}

body[class="theme-synthwave"] #scheduleList .is-rest .day-date,
body[class="theme-synthwave"] #scheduleList .is-rest .day-name {
    color: #292c3c !important;
    font-weight: 600 !important;
}

body[class="theme-synthwave"] #scheduleList .is-rest .activity-info {
    border-color: var(--main-color) !important;
    background: var(--main-color) !important;
    color: #232634 !important;
    font-weight: 700 !important;
}

body[class="theme-synthwave"] #scheduleList .day-row {
    border: 2px solid var(--main-color);
}

body[class="theme-synthwave"] .schedule-footer p::after {
    content: "|| Theme By DekReza";
    margin-left: 10px;
}

body.theme-catppuccin-latte {
    --bg-color: #292c3c;
    --panel-bg: #292c3c;
    --main-color: #e78284;
    --secondary-color: #ca9ee6;
    --tertiary-color: #e5c890;
    --text-main: #a6d189;
    --text-muted: #7f8c8d;
    --grid-color: rgba(44, 62, 80, 0.05);
    --font-heading: "Inter", sans-serif;
    --font-body: "Inter", sans-serif;
    --box-bg: #414559;
    --box-border: rgba(44, 62, 80, 0.1);
}

body[class="theme-catppuccin-latte"] .glitch {
    text-shadow: unset !important;
    color: #f4b8e4;
}

body[class="theme-catppuccin-latte"] #scheduleList .is-rest .day-info {
    border-color: #ea999c !important;
    background: #ea999c !important;
}

body[class="theme-catppuccin-latte"] #scheduleList .is-rest .day-date,
body[class="theme-catppuccin-latte"] #scheduleList .is-rest .day-name {
    color: #292c3c !important;
    font-weight: 600 !important;
}

body[class="theme-catppuccin-latte"] #scheduleList .is-rest .activity-info {
    border-color: var(--main-color) !important;
    background: var(--main-color) !important;
    color: #232634 !important;
    font-weight: 700 !important;
}

body[class="theme-catppuccin-latte"] .schedule-footer p::after {
    content: "|| Theme By DekReza";
    margin-left: 10px;
}

/* =========================================
   THEME: JAPAN MARTIAL ART (READABLE & SHARP)
   ========================================= */
body.theme-japan {
    --bg-color: #8b0000;
    /* Deep Red */
    --panel-bg: #8b0000;
    --neon-cyan: #ffffff;
    /* White */
    --neon-pink: #1c2331;
    /* Deep Navy Blue */
    --neon-yellow: #a1b0b6;
    /* Grey / Silver */
    --text-main: #ffffff;
    --text-muted: #a1b0b6;
    --grid-color: rgba(255, 255, 255, 0.1);
    --font-heading: 'Shojumaru', cursive, Impact;
    --font-body: 'Impact', 'Arial Black', sans-serif;
    --box-bg: rgba(28, 35, 49, 0.95);
    --box-border: #ffffff;
}

body.theme-japan .cyber-bracket,
body.theme-catppuccin-latte .cyber-bracket {
    display: none !important;
}

/* Hide calendar icon specifically inside Japan scroll */
body.theme-japan .date-range-box .fa-calendar-days i {
    display: none !important;
    text-shadow: none !important;
}

body.theme-japan .glitch {
    text-shadow: none !important;
}

body.theme-catppuccin-latte .glitch {
    text-shadow: none !important;
}

/* Japan: channel on TOP of WEEKLY SCHEDULE */
body.theme-japan .header-titles {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0;
}

body.theme-japan .schedule-header {
    border-bottom: none;
    box-shadow: none;
    padding-bottom: 0;
    margin-bottom: 8px;
    /* small positive gap - no overlap into rows */
    position: relative;
    z-index: 10;
    align-items: flex-start;
}

body.theme-japan .schedule-header h2 {
    font-size: 5.3em;
    font-family: var(--font-heading) !important;
    text-shadow: 5px 5px 0 #1c2331, 8px 8px 0 rgba(0, 0, 0, 0.7) !important;
    color: #ffffff;
    letter-spacing: 3px;
    margin: 0;
    line-height: 1.1;
    position: relative;
    z-index: 20;
}

/* Push the schedule list down so the big title doesn't cover MON */
body.theme-japan .schedule-list {
    padding-top: 0;
}

body.theme-catppuccin-latte .schedule-header h2 {
    text-shadow: none !important;
}

/* Channel name: above h2, styled like a stamp/badge — 50% bigger */
body.theme-japan .channel-name {
    font-family: 'Impact', sans-serif !important;
    color: #ffffff;
    background: #1c2331;
    padding: 15px 50px;
    display: inline-block;
    border: 3.5px solid #ffffff;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
    font-size: 3rem;
    font-weight: 400;
    transform: rotate(-3deg);
    position: relative;
    z-index: 25;
    letter-spacing: 3px;
    margin-bottom: 8px;
    margin-left: 8px;
}

body.theme-japan .scanlines,
body.theme-catppuccin-latte .scanlines {
    display: none;
}

body.theme-japan .day-row::before,
body.theme-japan .day-row::after,
body.theme-japan .global-settings::before,
body.theme-japan .global-settings::after,
body.theme-catppuccin-latte .day-row::before,
body.theme-catppuccin-latte .day-row::after,
body.theme-catppuccin-latte .global-settings::before,
body.theme-catppuccin-latte .global-settings::after {
    display: none;
}

body.theme-japan .barcode,
body.theme-catppuccin-latte .barcode {
    display: none;
}

body.theme-japan .cyber-btn {
    border-radius: 0;
    box-shadow: 5px 5px 0 #1c2331 !important;
    background: #ffffff;
    color: #8b0000;
    border: 4px solid #1c2331;
    font-family: 'Impact', sans-serif;
    letter-spacing: 3px;
    font-size: 1.5rem;
}

body.theme-japan .cyber-btn:hover {
    background: #1c2331;
    color: #ffffff;
    box-shadow: 2px 2px 0 #8b0000 !important;
    transform: translate(3px, 3px);
}

body.theme-japan .day-row {
    border-radius: 0;
    border: none;
    background: var(--box-bg);
    clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px);
    margin-bottom: 8px;
    position: relative;
}

body.theme-japan .day-row::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 15px;
    background: #8b0000;
    border-left: 3px solid #ffffff;
    display: block;
}

body.theme-japan .day-info {
    border-radius: 0;
    background: #1c2331;
    border-right: 4px solid #ffffff;
    padding: 10px;
}

body.theme-japan .time-info {
    border-right: 4px solid #ffffff;
    background: transparent;
    color: #ffffff;
    font-size: 1.8rem;
    font-family: 'Impact', sans-serif;
    text-shadow: 3px 3px 0 #000;
    letter-spacing: 2px;
}

body.theme-japan .activity-info {
    font-family: 'Arial Black', sans-serif;
    font-size: 2.5rem;
    color: #ffffff;
    text-shadow: 3px 3px 0 #000;
    padding-left: 30px;
    text-transform: uppercase;
}

body.theme-japan .day-name {
    color: #e8e9e8;
    font-family: 'Impact', sans-serif !important;
    font-size: 3rem;
    text-shadow: 2px 2px 0 #000;
}

body.theme-japan .day-date {
    font-family: 'Arial Black', sans-serif;
    font-size: 1.2rem;
    color: #a1b0b6;
}

body.theme-japan .date-range-box {
    color: #1c2331;
    background: #ffffff;
    padding: 10px 20px;
    border: 4px solid #1c2331;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5);
    font-family: 'Impact', sans-serif;
}

body.theme-japan .date-range-box>* {
    transform: skewX(10deg);
    display: inline-block;
}

body.theme-japan .date-range-box i {
    color: #8b0000 !important;
}

/* Rest Day - fully transparent, readable text */
body.theme-japan .day-row.is-rest {
    background: rgba(0, 0, 0, 0.15);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    clip-path: none;
}

body.theme-japan .day-row.is-rest .day-info {
    background: transparent;
    border-right: 4px solid rgba(255, 255, 255, 0.3);
}

body.theme-japan .day-row.is-rest .day-name {
    color: #ffffff;
    text-shadow: 2px 2px 0 #000;
}

body.theme-japan .day-row.is-rest .day-date {
    color: #a1b0b6;
}

body.theme-japan .day-row.is-rest .activity-info {
    color: rgba(255, 255, 255, 0.6);
    text-shadow: none;
    font-style: italic;
    letter-spacing: 5px;
}

body.theme-japan .global-settings {
    border-radius: 0;
    border: 4px solid #ffffff;
    background: #1c2331;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.5);
}

body.theme-japan .day-item-input {
    border-radius: 0;
    border-left: 8px solid #8b0000;
    background: #1c2331;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Japan: flip layout - avatar LEFT, schedule RIGHT */
body.theme-japan .schedule-body {
    flex-direction: row-reverse;
}

body.theme-japan .avatar-area {
    order: -1;
    flex-shrink: 0;
}

/* Japan: Date range box — hanging scroll / karate belt tab */
body.theme-japan .date-range-box {
    /* Pull out of normal flow, hang from top-right of canvas */
    position: absolute;
    top: -60px;
    /* rises into the top padding of canvas-content */
    right: -30px;
    /* slightly outside right content edge */
    z-index: 50;

    /* Scroll shape: tall and narrow */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 145px;
    padding: 22px 14px 45px;
    /* extra bottom padding before the point */

    /* Parchment-on-dark look */
    background: #1c2331;
    border: 4px solid #f0e6d2;
    border-top: 8px solid #8b0000;
    /* thick red rail — like a scroll rod */

    /* Pointed belt-end bottom */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 50% 100%, 0 calc(100% - 28px));

    font-family: 'Impact', sans-serif;
    color: #f0e6d2;
    text-align: center;
    letter-spacing: 2px;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55);
    transform: none;
}

/* Decorative "knot" rivet on the red rail */
body.theme-japan .date-range-box::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 10px;
    background: #f0e6d2;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Bottom tip decorative line */
body.theme-japan .date-range-box::after {
    content: '';
    position: absolute;
    bottom: 28px;
    left: 15px;
    right: 15px;
    height: 2px;
    background: rgba(240, 230, 210, 0.3);
}

body.theme-japan .date-range-box>* {
    transform: none;
    display: block;
}

body.theme-japan .date-range-box i {
    color: #f0e6d2 !important;
    font-size: 1.8rem;
    margin-bottom: 4px;
}

body.theme-japan .date-range-box #dateRangeDisplay {
    display: block;
    background: transparent;
    padding: 0;
    border: none;
    font-size: 1.5rem;
    transform: none;
    box-shadow: none;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    line-height: 1.5;
    color: #f0e6d2;
}

/* Japan: Background decorative art - ink circle + brush stripes */
body.theme-japan .schedule-canvas {
    position: relative;
    overflow: hidden;
}

body.theme-japan .schedule-canvas::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 40px solid rgba(255, 255, 255, 0.06);
    z-index: 1;
    pointer-events: none;
}

body.theme-japan .schedule-canvas::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    border: 60px solid rgba(0, 0, 0, 0.15);
    z-index: 1;
    pointer-events: none;
}

body.theme-japan .cyber-grid {
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(255, 255, 255, 0.04) 80px),
        repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(255, 255, 255, 0.04) 80px),
        linear-gradient(135deg, rgba(0, 0, 0, 0.25) 0%, transparent 60%);
    background-size: 80px 80px, 80px 80px, 100% 100%;
}

/* Japan: Diagonal red brush stripe accent (top-left corner) */
body.theme-japan .canvas-content::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    width: 220px;
    height: 30px;
    background: rgba(139, 0, 0, 0.7);
    transform: rotate(-8deg);
    z-index: 0;
    pointer-events: none;
}

body.theme-japan .canvas-content::after {
    content: '';
    position: absolute;
    bottom: 40px;
    right: -10px;
    width: 180px;
    height: 20px;
    background: rgba(28, 35, 49, 0.8);
    transform: rotate(-4deg);
    z-index: 0;
    pointer-events: none;
}

/* Japan: Editor panel - use normal readable fonts */
body.theme-japan .input-panel,
body.theme-japan .input-panel label,
body.theme-japan .input-panel input,
body.theme-japan .input-panel select,
body.theme-japan .input-panel .day-item-name,
body.theme-japan .input-panel .day-item-date,
body.theme-japan .input-panel .off-day-toggle span,
body.theme-japan .header-title h1,
body.theme-japan .header-title p {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
    letter-spacing: normal;
    text-transform: none;
}

/* =========================================
   THEME: LUNAR (Witch / Cosmic Tarot)
   ========================================= */
body.theme-lunar {
    --bg-color: #0d0a1e;
    --panel-bg: #120e2b;
    --neon-cyan: #c9a84c;      /* Gold */
    --neon-pink: #b56ecf;      /* Soft purple/violet */
    --neon-yellow: #7ecac3;    /* Teal crystal */
    --text-main: #e8e4f0;      /* Silver-lavender */
    --text-muted: #9b91c4;     /* Muted lavender */
    --grid-color: rgba(201, 168, 76, 0.06);
    --font-heading: 'Cinzel Decorative', serif;
    --font-body: 'Raleway', sans-serif;
    --box-bg: rgba(26, 16, 51, 0.9);
    --box-border: rgba(201, 168, 76, 0.45);
}

/* --- Hide cyber elements --- */
body.theme-lunar .cyber-bracket,
body.theme-lunar .scanlines {
    display: none !important;
}

body.theme-lunar .day-row::before,
body.theme-lunar .day-row::after,
body.theme-lunar .global-settings::before,
body.theme-lunar .global-settings::after {
    display: none;
}

/* --- Glitch title: golden cosmic glow --- */
body.theme-lunar .glitch {
    text-shadow: 0 0 25px rgba(201, 168, 76, 0.5), 0 0 60px rgba(155, 91, 207, 0.25) !important;
}

/* --- Schedule Header --- */
body.theme-lunar .schedule-header {
    border-bottom: 1px solid rgba(201, 168, 76, 0.35);
    box-shadow: 0 4px 30px rgba(201, 168, 76, 0.08);
    padding-bottom: 25px;
    margin-bottom: 25px;
}

body.theme-lunar .schedule-header h2 {
    font-family: 'Cinzel Decorative', serif !important;
    font-size: 4rem;
    color: #e8e4f0;
    letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(201, 168, 76, 0.4), 2px 2px 0 rgba(0,0,0,0.6) !important;
    font-weight: 700;
}

body.theme-lunar .channel-name {
    font-family: 'Raleway', sans-serif !important;
    color: #c9a84c;
    font-size: 1.5rem;
    letter-spacing: 4px;
    font-weight: 500;
    margin-top: 8px;
    text-shadow: 0 0 10px rgba(201, 168, 76, 0.4);
    text-transform: uppercase;
}

/* --- Date Range Box: ornate celestial style --- */
body.theme-lunar .date-range-box {
    font-family: 'Raleway', sans-serif;
    color: #c9a84c;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 2px;
    border: 1px solid rgba(201, 168, 76, 0.5);
    padding: 10px 20px;
    background: rgba(26, 16, 51, 0.8);
    border-radius: 2px;
    box-shadow: 0 0 15px rgba(201, 168, 76, 0.15), inset 0 0 10px rgba(155, 91, 207, 0.05);
    gap: 10px;
    transform: none;
}

/* --- Background: Stars + Moon glow --- */
body.theme-lunar .cyber-grid {
    background:
        radial-gradient(ellipse at 85% 5%, rgba(155, 91, 207, 0.18) 0%, transparent 45%),
        radial-gradient(ellipse at 15% 90%, rgba(201, 168, 76, 0.09) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(126, 202, 195, 0.04) 0%, transparent 60%),
        /* Stars - scattered tiny dots */
        radial-gradient(1px 1px at 8%  12%, rgba(255,255,255,0.90) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 22% 30%, rgba(201,168,76,0.80) 0%, transparent 100%),
        radial-gradient(1px 1px at 35% 8%,  rgba(255,255,255,0.70) 0%, transparent 100%),
        radial-gradient(2px 2px at 50% 22%, rgba(255,255,255,0.85) 0%, transparent 100%),
        radial-gradient(1px 1px at 65% 5%,  rgba(255,255,255,0.60) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 78% 18%, rgba(201,168,76,0.70) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 40%, rgba(255,255,255,0.80) 0%, transparent 100%),
        radial-gradient(1px 1px at 12% 55%, rgba(255,255,255,0.55) 0%, transparent 100%),
        radial-gradient(2px 2px at 42% 60%, rgba(126,202,195,0.75) 0%, transparent 100%),
        radial-gradient(1px 1px at 72% 65%, rgba(255,255,255,0.65) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 28% 78%, rgba(255,255,255,0.70) 0%, transparent 100%),
        radial-gradient(1px 1px at 60% 82%, rgba(201,168,76,0.60) 0%, transparent 100%),
        radial-gradient(1px 1px at 88% 88%, rgba(255,255,255,0.75) 0%, transparent 100%);
}

/* Moon circle & ring decorations */
body.theme-lunar .schedule-canvas::before {
    content: '';
    position: absolute;
    top: -90px;
    right: -90px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%,
        rgba(201, 168, 76, 0.12) 0%,
        rgba(155, 91, 207, 0.06) 50%,
        transparent 70%);
    border: 1px solid rgba(201, 168, 76, 0.15);
    box-shadow: 0 0 60px rgba(201, 168, 76, 0.08);
    z-index: 1;
    pointer-events: none;
}

body.theme-lunar .schedule-canvas::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 1px solid rgba(126, 202, 195, 0.18);
    box-shadow: inset 0 0 30px rgba(126, 202, 195, 0.06),
                0 0 30px rgba(126, 202, 195, 0.06);
    z-index: 1;
    pointer-events: none;
}

/* --- Day rows: ornate gold-bordered, STAGGERED asymmetric --- */
body.theme-lunar .day-row {
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-left: 4px solid #c9a84c;
    border-radius: 4px 0 0 4px;
    background: var(--box-bg);
    box-shadow: 0 2px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(201,168,76,0.08);
    width: calc(100% - 55px);
    margin-bottom: 6px;
    position: relative;
}

/* Witch-asymmetric stagger: each row at different indentation */
body.theme-lunar #scheduleList .day-row:nth-child(1) { margin-left: 0px; }
body.theme-lunar #scheduleList .day-row:nth-child(2) { margin-left: 32px; }
body.theme-lunar #scheduleList .day-row:nth-child(3) { margin-left: 12px; }
body.theme-lunar #scheduleList .day-row:nth-child(4) { margin-left: 48px; }
body.theme-lunar #scheduleList .day-row:nth-child(5) { margin-left: 20px; }
body.theme-lunar #scheduleList .day-row:nth-child(6) { margin-left: 38px; }
body.theme-lunar #scheduleList .day-row:nth-child(7) { margin-left: 8px; }

/* --- Day info panel --- */
body.theme-lunar .day-info {
    background: rgba(155, 91, 207, 0.15);
    border-right: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 4px 0 0 4px;
}

body.theme-lunar .day-name {
    color: #c9a84c;
    font-family: 'Raleway', sans-serif !important;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 3px;
}

body.theme-lunar .day-date {
    color: #9b91c4;
    font-family: 'Raleway', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
}

/* --- Time info --- */
body.theme-lunar .time-info {
    color: #7ecac3;
    font-family: 'Raleway', sans-serif !important;
    font-size: 1.9rem;
    font-weight: 600;
    border-right: 1px solid rgba(201, 168, 76, 0.2);
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(126, 202, 195, 0.3);
}

/* --- Activity info --- */
body.theme-lunar .activity-info {
    color: #e8e4f0;
    font-family: 'Raleway', sans-serif !important;
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: 2px;
}

/* --- Rest day: fade with purple tint --- */
body.theme-lunar .day-row.is-rest {
    border-left: 4px solid rgba(181, 110, 207, 0.4);
    background: rgba(13, 10, 30, 0.5);
    opacity: 0.65;
}

body.theme-lunar .day-row.is-rest .day-name {
    color: #9b91c4;
}

body.theme-lunar .day-row.is-rest .activity-info {
    color: #9b91c4;
    font-style: italic;
    letter-spacing: 5px;
}

/* --- Input panel styling --- */
body.theme-lunar .global-settings {
    border: 1px solid rgba(201, 168, 76, 0.3);
    background: var(--panel-bg);
    border-radius: 8px;
    box-shadow: none;
}

body.theme-lunar .day-item-input {
    border-left: 3px solid rgba(201, 168, 76, 0.5);
    border-top: 1px solid rgba(201, 168, 76, 0.1);
    border-right: 1px solid rgba(201, 168, 76, 0.1);
    border-bottom: 1px solid rgba(201, 168, 76, 0.1);
    border-radius: 4px;
    background: rgba(26, 16, 51, 0.6);
}

/* --- Download button --- */
body.theme-lunar .cyber-btn {
    border: 1px solid rgba(201, 168, 76, 0.6);
    background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(155,91,207,0.1));
    color: #c9a84c;
    border-radius: 4px;
    box-shadow: 0 0 15px rgba(201, 168, 76, 0.15) !important;
    font-family: 'Raleway', sans-serif;
    letter-spacing: 3px;
    font-weight: 600;
}

body.theme-lunar .cyber-btn:hover {
    background: linear-gradient(135deg, rgba(201,168,76,0.25), rgba(155,91,207,0.2));
    box-shadow: 0 0 30px rgba(201, 168, 76, 0.35) !important;
    transform: translateY(-2px);
}

/* --- Barcode footer: subtle gold tint --- */
body.theme-lunar .barcode {
    opacity: 0.25;
    filter: sepia(0.5) hue-rotate(15deg);
}

body.theme-lunar .schedule-footer p {
    color: #9b91c4;
    font-family: 'Raleway', sans-serif;
    letter-spacing: 2px;
    font-size: 1.2rem;
}