/* ========================================
   DIARY — Pirate Theme
   Complete diary styling with authentic old-school pirate diary look
   ======================================== */

/* ==========================================
   @layer features — diary tab chrome (calendar, blocks, drawing,
   achievement cards). Parchment palette included.
   ========================================== */
@layer features {

/* --- Pirate Theme Variables --- */
.diary-container {
    --pirate-parchment: #f4e4c1;
    --pirate-parchment-dark: #e0d0a8;
    --pirate-parchment-edge: #c4a87a;
    --pirate-ink: #2c1810;
    --pirate-ink-light: #4a3520;
    --pirate-ink-faded: #8a7260;
    --pirate-sepia: #8B7355;
    --pirate-gold: #c9a84c;
    --pirate-gold-bright: #daa520;
    --pirate-navy: #1a2744;
    --pirate-navy-light: #2a3d5e;
    --pirate-rope: #8B6914;
    --pirate-wax: #8B0000;
    --pirate-wax-light: #a52a2a;
    --pirate-leather: #3c1f0e;
    --pirate-leather-light: #5c3a1e;
    --pirate-canvas-bg: #1a1510;
    --pirate-bg: rgba(20, 16, 10, 0.92);
}

/* ========================================
   DIARY CONTAINER — Leather Book
   ======================================== */
.diary-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 70vh;
    margin-top: 8px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    background:
        linear-gradient(to right,
            var(--pirate-leather) 0px,
            var(--pirate-leather-light) 12px,
            rgba(60, 31, 14, 0.4) 14px,
            transparent 18px
        ),
        radial-gradient(ellipse at 20% 50%, rgba(60, 31, 14, 0.15) 0%, transparent 70%),
        linear-gradient(180deg, rgba(15, 12, 8, 0.98) 0%, rgba(10, 8, 5, 0.96) 100%);
    border-left: 3px solid var(--pirate-leather);
    position: relative;
}

/* Leather spine stitching */
.diary-container::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(
        to bottom,
        var(--pirate-gold) 0px,
        var(--pirate-gold) 6px,
        transparent 6px,
        transparent 12px
    );
    opacity: 0.3;
    z-index: 1;
    pointer-events: none;
}

/* ========================================
   CALENDAR HEADER
   ======================================== */
.diary-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 50px 10px 24px;
    background:
        linear-gradient(180deg,
            rgba(60, 31, 14, 0.5) 0%,
            rgba(44, 24, 16, 0.3) 100%
        );
    border-bottom: 2px solid var(--pirate-sepia);
    border-image: repeating-linear-gradient(
        to right,
        var(--pirate-rope) 0px,
        var(--pirate-gold) 2px,
        var(--pirate-rope) 4px,
        transparent 4px,
        transparent 8px
    ) 2;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
}

.diary-header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.diary-mode-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--pirate-sepia);
    font-family: 'IM Fell English', 'Georgia', serif;
}

.diary-nav-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 168, 76, 0.1);
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 50%;
    color: var(--pirate-gold);
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.2s;
}

.diary-nav-btn:hover {
    background: rgba(201, 168, 76, 0.2);
    color: var(--pirate-gold-bright);
    box-shadow: 0 0 8px rgba(201, 168, 76, 0.2);
}

.diary-month-label {
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--pirate-parchment);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
    min-width: 150px;
    text-align: center;
    letter-spacing: 0.5px;
}

.diary-month-label:hover {
    background: rgba(201, 168, 76, 0.08);
}

.diary-today-btn {
    font-family: 'IM Fell English', 'Georgia', serif;
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--pirate-gold);
    background: rgba(201, 168, 76, 0.1);
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 10px;
    padding: 2px 10px;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.5px;
}

.diary-today-btn:hover {
    background: rgba(201, 168, 76, 0.25);
}

/* ========================================
   CALENDAR GRID
   ======================================== */
.diary-calendar {
    padding: 8px clamp(6px, 2vw, 12px) 8px clamp(14px, 3vw, 20px);
    flex-shrink: 0;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(244, 228, 193, 0.04) 0%, transparent 60%),
        rgba(20, 16, 10, 0.4);
    max-width: 100%;
    overflow: hidden;
}

.diary-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: clamp(0.55rem, 1.2vw, 0.65rem);
    font-family: 'IM Fell English', 'Georgia', serif;
    font-weight: 400;
    color: var(--pirate-sepia);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding-bottom: 4px;
}

.diary-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: clamp(1px, 0.3vw, 2px);
}

.diary-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.7rem, 1.5vw, 0.8rem);
    font-family: 'Special Elite', 'Courier New', monospace;
    font-weight: 600;
    color: var(--pirate-parchment-dark);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    min-width: 0;
    overflow: hidden;
}

.diary-day:hover {
    background: rgba(201, 168, 76, 0.1);
    color: var(--pirate-parchment);
}

.diary-day.other-month {
    color: rgba(139, 115, 85, 0.25);
}

.diary-day.today {
    color: var(--pirate-gold-bright);
    font-weight: 700;
    background: rgba(201, 168, 76, 0.12);
    border: 1px solid rgba(201, 168, 76, 0.3);
}

.diary-day.selected {
    background: rgba(201, 168, 76, 0.2);
    color: var(--pirate-parchment);
    font-weight: 700;
    box-shadow: 0 0 10px rgba(201, 168, 76, 0.2);
    border: 1px solid rgba(201, 168, 76, 0.4);
}

/* Calendar day thumbnail preview */
.diary-day-thumb {
    position: absolute;
    inset: 2px;
    overflow: hidden;
    pointer-events: none;
    border-radius: 3px;
    opacity: 0.2;
    z-index: 0;
}
.diary-day-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(0.5) brightness(0.8);
}
.diary-day.has-notes .diary-day-thumb {
    opacity: 0.25;
}
.diary-day.selected .diary-day-thumb {
    opacity: 0.35;
}

/* Entry/event indicators */
.diary-day.has-notes::after,
.diary-day.has-events::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    position: absolute;
    bottom: 2px;
    z-index: 1;
}
.diary-day.has-notes::after {
    background: var(--pirate-gold-bright);
}
.diary-day.has-events::before {
    background: var(--pirate-wax-light);
}
.diary-day.has-notes:not(.has-events)::after,
.diary-day.has-events:not(.has-notes)::before {
    left: 50%;
    transform: translateX(-50%);
}
.diary-day.has-notes.has-events::after {
    right: calc(50% + 1px);
    left: auto;
}
.diary-day.has-notes.has-events::before {
    left: calc(50% + 1px);
}

/* Calendar dropdown overlay — slides down from header */
.diary-calendar-dropdown {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(15, 12, 8, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 2px solid var(--pirate-sepia);
    max-height: 80vh;
    overflow-y: auto;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
    transform: translateY(0);
    opacity: 1;
}
.diary-calendar-dropdown.hidden {
    display: none;
}
.diary-calendar-dropdown.sliding-out {
    transform: translateY(-20px);
    opacity: 0;
}
.diary-calendar-collapse {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(201, 168, 76, 0.08);
    border: 1.5px solid rgba(201, 168, 76, 0.25);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.diary-calendar-collapse svg {
    stroke: rgba(201, 168, 76, 0.5);
    transition: stroke 0.2s, transform 0.2s;
}
.diary-calendar-collapse:hover {
    background: rgba(201, 168, 76, 0.15);
    border-color: rgba(201, 168, 76, 0.5);
}
.diary-calendar-collapse:hover svg {
    stroke: var(--pirate-gold);
    transform: translateY(-1px);
}

/* ========================================
   DAY NOTE PREVIEW (Calendar tab)
   ======================================== */
.diary-day-preview {
    flex-shrink: 0;
    border-bottom: 1px solid rgba(139, 115, 85, 0.2);
    background: rgba(20, 16, 10, 0.3);
}

.diary-day-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 4px 24px;
}

.diary-day-preview-title {
    font-size: 0.75rem;
    font-family: 'IM Fell English', 'Georgia', serif;
    font-weight: 400;
    color: var(--pirate-sepia);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.diary-day-preview-open {
    font-family: 'IM Fell English', 'Georgia', serif;
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--pirate-gold);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 6px;
    transition: background 0.15s;
}

.diary-day-preview-open:hover {
    background: rgba(201, 168, 76, 0.1);
}

.diary-day-preview-body {
    padding: 6px 16px 12px 24px;
    max-height: 120px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.diary-day-preview-body::-webkit-scrollbar { width: 3px; }
.diary-day-preview-body::-webkit-scrollbar-thumb { background: rgba(139, 115, 85, 0.3); border-radius: 3px; }

.diary-day-preview-empty {
    text-align: center;
    color: var(--pirate-ink-faded);
    font-size: 0.78rem;
    padding: 10px 0;
    font-family: 'Special Elite', 'Courier New', monospace;
    font-style: italic;
}

.diary-day-preview-snippet {
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 0.9rem;
    color: var(--pirate-parchment-dark);
    line-height: 1.6;
    white-space: pre-wrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.diary-day-preview-img {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.diary-day-preview-img::-webkit-scrollbar { display: none; }
.diary-day-preview-img img {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(139, 115, 85, 0.3);
    filter: sepia(0.2);
}

/* ========================================
   DIARY EDITOR — Notes Sub-tab
   ======================================== */
.diary-editor {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: none;
    background: #f4e4c1;
}

.diary-editor-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    background: rgba(44, 24, 16, 0.95);
    flex-shrink: 0;
    border-bottom: 1px solid rgba(201, 168, 76, 0.2);
    position: relative;
}

.diary-header-left,
.diary-header-right {
    position: absolute;
    display: flex;
    gap: 4px;
    align-items: center;
}
.diary-header-left { left: 10px; }
.diary-header-right { right: 10px; }

.diary-day-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: center;
}

.diary-day-nav-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 168, 76, 0.1);
    border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: 50%;
    color: var(--pirate-gold);
    cursor: pointer;
    font-size: 0.65rem;
    transition: all 0.2s;
    font-family: inherit;
}

.diary-day-nav-btn:hover {
    background: rgba(201, 168, 76, 0.2);
    color: var(--pirate-gold-bright);
}

.diary-date-title {
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--pirate-parchment);
    margin: 0;
    white-space: nowrap;
    text-align: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s;
}
.diary-date-title:hover {
    background: rgba(201, 168, 76, 0.1);
}

.diary-editor-actions {
    display: flex;
    gap: 6px;
}

/* Floating edit button */
.diary-edit-fab {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 40% 35%,
            var(--pirate-gold-bright) 0%,
            var(--pirate-gold) 40%,
            #8a6914 100%
        );
    border: 2px solid rgba(218, 165, 32, 0.5);
    color: var(--pirate-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 0 12px rgba(201, 168, 76, 0.3);
    z-index: 100;
    transition: all 0.25s;
    font-family: inherit;
}

.diary-edit-fab:hover {
    transform: scale(1.1);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(201, 168, 76, 0.4);
}

.diary-edit-fab.active {
    background:
        radial-gradient(circle at 40% 35%,
            var(--pirate-wax-light) 0%,
            var(--pirate-wax) 60%,
            #5c0000 100%
        );
    border-color: rgba(139, 0, 0, 0.5);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 0 12px rgba(139, 0, 0, 0.3);
}

/* Section Labels */
.diary-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 8px 24px;
    font-size: 0.7rem;
    font-family: 'IM Fell English', 'Georgia', serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pirate-sepia);
    background: rgba(60, 31, 14, 0.2);
    border-bottom: 1px solid rgba(139, 115, 85, 0.1);
}

/* ========================================
   SHARED CANVAS (Inline Mini Canvas)
   ======================================== */
/* ========================================
   DIARY DRAWING CANVAS (full-page background)
   ======================================== */
.diary-blocks-wrap {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: #f4e4c1;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
/* Edit mode: warm parchment-dark tone matching diary theme */
.diary-editor:not(.read-mode) .diary-blocks-wrap {
    background: #f4e4c1;
}
/* Phase 7.7: !important stripped — these selectors outspecific the base
   ::-webkit-scrollbar rules in base.css naturally. */
.diary-blocks-wrap::-webkit-scrollbar { width: 6px; }
.diary-blocks-wrap::-webkit-scrollbar-track { background: rgba(44, 24, 16, 0.3); }
.diary-blocks-wrap::-webkit-scrollbar-thumb {
    background: rgba(44, 24, 16, 0.85);
    border-radius: 4px;
}
.diary-blocks-wrap::-webkit-scrollbar-thumb:hover { background: rgba(44, 24, 16, 1); }
.diary-editor.read-mode .diary-blocks-wrap::-webkit-scrollbar-thumb {
    background: rgba(139, 90, 43, 0.4);
}
.diary-blocks-wrap { scrollbar-color: rgba(44, 24, 16, 0.85) rgba(44, 24, 16, 0.3); }

.diary-draw-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: default;
    z-index: 5;
    pointer-events: none;
}
/* In edit mode with draw tool active, canvas captures events above blocks */
.diary-editor:not(.read-mode) .diary-draw-canvas {
    background: transparent;
}
.diary-editor:not(.read-mode) .diary-draw-canvas.drawing-active {
    pointer-events: auto;
    cursor: crosshair;
    z-index: 10;
}

/* Drawing toolbar — warm parchment bar at bottom */
.diary-draw-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(44, 24, 16, 0.95);
    border-top: 1px solid rgba(201, 168, 76, 0.15);
    flex-wrap: wrap;
    flex-shrink: 0;
}
.diary-draw-toolbar.hidden { display: none; }
.diary-draw-toolbar:not(.hidden) {
    animation: toolbarSlideUp 0.25s ease-out;
}
@keyframes toolbarSlideUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Phase 7.7: !important stripped — 0,3,0 specificity beats every other
   .diary-draw-toolbar rule naturally. */
.diary-editor.read-mode .diary-draw-toolbar { display: none; }

/* Canvas tool groups (shared with drawing toolbar) */

.dmc-tool-group {
    display: flex;
    align-items: center;
    gap: 3px;
}

.dmc-separator {
    width: 1px;
    height: 24px;
    background: rgba(139, 115, 85, 0.2);
    margin: 0 4px;
    flex-shrink: 0;
}

.dmc-tool {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 168, 76, 0.15);
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s;
    color: #c9a84c;
    font-family: inherit;
    padding: 0;
}

.dmc-tool svg {
    width: 14px;
    height: 14px;
}

.dmc-tool:hover {
    background: rgba(201, 168, 76, 0.25);
    border-color: rgba(201, 168, 76, 0.5);
    color: #ffd700;
}

.dmc-tool.active {
    background: rgba(201, 168, 76, 0.3);
    border-color: rgba(201, 168, 76, 0.6);
    box-shadow: 0 0 8px rgba(201, 168, 76, 0.3);
    color: #ffd700;
}

/* Primary tools (pen/brush/eraser) — gold tint */
.dmc-tool.dmc-primary {
    background: rgba(201, 168, 76, 0.2);
    border-color: rgba(201, 168, 76, 0.4);
}
.dmc-tool.dmc-primary.active {
    background: rgba(255, 215, 0, 0.35);
    border-color: rgba(255, 215, 0, 0.7);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
}

/* Danger tool (clear) — red tint */
.dmc-tool.dmc-danger {
    background: rgba(231, 76, 60, 0.15);
    border-color: rgba(231, 76, 60, 0.3);
    color: #e74c3c;
}
.dmc-tool.dmc-danger:hover {
    background: rgba(231, 76, 60, 0.25);
    border-color: rgba(231, 76, 60, 0.5);
}

.dmc-color {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(139, 115, 85, 0.3);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    padding: 2px;
}

.dmc-size,
.dmc-opacity {
    width: 60px;
    height: 4px;
    accent-color: var(--pirate-gold);
}

/* Partner cursor on canvas */
.dmc-partner-cursor {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    transition: left 0.05s linear, top 0.05s linear;
}
.dmc-partner-cursor.hidden { display: none; }
.dmc-partner-cursor::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pirate-wax-light);
    display: block;
    box-shadow: 0 0 6px rgba(165, 42, 42, 0.5);
}
.dmc-partner-cursor-name {
    position: absolute;
    top: -18px;
    left: 12px;
    font-size: 0.6rem;
    color: var(--pirate-wax-light);
    font-family: 'Special Elite', 'Courier New', monospace;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.6);
    padding: 1px 6px;
    border-radius: 4px;
}

/* Partner cursor on diary canvas */
.dmc-partner-cursor {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    transition: left 0.05s, top 0.05s;
}
.dmc-partner-cursor.hidden { display: none; }
.dmc-partner-cursor-name {
    font-size: 0.6rem;
    background: rgba(201, 168, 76, 0.7);
    color: #1a1510;
    padding: 1px 5px;
    border-radius: 4px;
    white-space: nowrap;
    font-weight: 600;
}

/* Edit mode indicator */
.diary-mode-indicator {
    display: none;
}
.diary-editor:not(.read-mode) .diary-mode-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 0.7rem;
    color: var(--pirate-gold);
    font-family: 'IM Fell English', 'Georgia', serif;
    letter-spacing: 0.5px;
}
.diary-editor:not(.read-mode) .diary-mode-indicator .draw-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pirate-gold);
    animation: pulse-dot 1.5s ease infinite;
}

/* ========================================
   LEGACY FULLSCREEN (removed)
   ======================================== */
.diary-canvas-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: rgba(10, 8, 5, 0.97);
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.2s ease;
}
.diary-canvas-fullscreen .diary-mini-canvas-wrap {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
}
.diary-canvas-fullscreen .diary-mini-canvas-wrap canvas {
    flex: 1;
    height: auto;
    max-height: none;
}
.diary-canvas-fullscreen .diary-mini-canvas-tools {
    padding: 12px 0;
}
.diary-canvas-fullscreen-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 168, 76, 0.15);
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 50%;
    color: var(--pirate-gold);
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s;
    z-index: 10;
}
.diary-canvas-fullscreen-close:hover {
    background: rgba(201, 168, 76, 0.3);
    color: var(--pirate-gold-bright);
}

/* ========================================
   ADD BLOCK TOOLBAR
   ======================================== */
.diary-add-toolbar {
    display: flex;
    gap: 6px;
    padding: 6px 16px 6px 24px;
    flex-shrink: 0;
    background: rgba(44, 24, 16, 0.95);
    border-top: 1px solid rgba(201, 168, 76, 0.15);
}

.diary-add-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 6px;
    background: rgba(201, 168, 76, 0.05);
    border: 1px solid rgba(139, 115, 85, 0.15);
    border-radius: 10px;
    color: var(--pirate-sepia);
    font-family: 'IM Fell English', 'Georgia', serif;
    font-size: 0.62rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.diary-add-btn svg {
    opacity: 0.5;
    transition: opacity 0.2s;
    stroke: var(--pirate-gold);
}

.diary-add-btn:hover {
    background: rgba(201, 168, 76, 0.12);
    border-color: rgba(201, 168, 76, 0.3);
    color: var(--pirate-parchment-dark);
    transform: translateY(-1px);
}

.diary-add-btn:hover svg {
    opacity: 0.85;
}

/* ========================================
   DRAW MODE TOGGLE SWITCH
   ======================================== */
.diary-draw-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    background: rgba(80, 60, 40, 0.25);
    border: 1.5px solid rgba(139, 115, 85, 0.2);
    user-select: none;
    -webkit-user-select: none;
    margin-left: auto;
}
.diary-draw-toggle-wrap svg {
    stroke: rgba(201, 168, 76, 0.5);
    flex-shrink: 0;
    transition: stroke 0.25s;
}
.diary-draw-label {
    font-family: 'IM Fell English', 'Georgia', serif;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(201, 168, 76, 0.5);
    transition: color 0.25s;
}
.diary-draw-track {
    width: 32px;
    height: 16px;
    border-radius: 10px;
    background: rgba(80, 60, 40, 0.5);
    position: relative;
    transition: background 0.25s;
    flex-shrink: 0;
}
.diary-draw-knob {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(201, 168, 76, 0.4);
    position: absolute;
    top: 2px;
    left: 2px;
    transition: all 0.25s ease;
}

/* Active state */
.diary-draw-toggle-wrap.draw-on {
    background: rgba(201, 168, 76, 0.15);
    border-color: rgba(201, 168, 76, 0.5);
}
.diary-draw-toggle-wrap.draw-on svg {
    stroke: #ffd700;
}
.diary-draw-toggle-wrap.draw-on .diary-draw-label {
    color: #ffd700;
}
.diary-draw-toggle-wrap.draw-on .diary-draw-track {
    background: rgba(201, 168, 76, 0.35);
}
.diary-draw-toggle-wrap.draw-on .diary-draw-knob {
    left: 18px;
    background: #ffd700;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}

/* Hover */
.diary-draw-toggle-wrap:hover {
    border-color: rgba(201, 168, 76, 0.4);
}
.diary-draw-toggle-wrap:hover .diary-draw-label {
    color: rgba(201, 168, 76, 0.75);
}

/* ========================================
   RICH TEXT BLOCK TOOLBAR
   ======================================== */
.diary-block-toolbar {
    display: flex;
    gap: 3px;
    padding: 3px 6px;
    background: rgba(101, 67, 33, 0.85);
    border-radius: 6px 6px 0 0;
    z-index: 5;
    border-bottom: 1px solid rgba(201, 168, 76, 0.2);
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.diary-block-toolbar button {
    width: 28px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'IM Fell English', 'Georgia', serif;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.diary-block-toolbar button:hover {
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.3);
}

.diary-block-toolbar button.active {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.4);
}

/* ========================================
   CONTENTEDITABLE RICH TEXT
   ======================================== */
.diary-block-richtext {
    width: 100%;
    min-height: 60px;
    padding: 14px 16px;
    background: transparent;
    border: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    color: #000;
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 2;
    outline: none;
    transition: border-color 0.2s;
    overflow-wrap: break-word;
    word-break: break-word;
    background-image: repeating-linear-gradient(
        transparent 0px,
        transparent 30px,
        rgba(139, 115, 85, 0.06) 30px,
        rgba(139, 115, 85, 0.06) 31px
    );
}

.diary-block-richtext:focus {
    border-color: rgba(201, 168, 76, 0.25);
    box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.06);
}

.diary-block-richtext:empty::before {
    content: attr(data-placeholder);
    color: rgba(60, 36, 21, 0.35);
    pointer-events: none;
    font-style: italic;
}
/* Hide placeholder in read mode */
.diary-editor.read-mode .diary-block-richtext:empty::before {
    content: none;
}

.diary-block-richtext h3 {
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 700;
    margin: 4px 0;
    color: inherit;
}

.diary-block-richtext b, .diary-block-richtext strong {
    color: inherit;
    font-weight: 700;
}

.diary-block-richtext i, .diary-block-richtext em {
    color: inherit;
}

/* ========================================
   CAMERA CAPTURE MODAL
   ======================================== */
.diary-camera-modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

.diary-camera-modal.hidden { display: none; }

.diary-camera-content {
    background:
        linear-gradient(135deg,
            rgba(60, 31, 14, 0.95),
            rgba(44, 24, 16, 0.98)
        );
    border: 2px solid rgba(201, 168, 76, 0.3);
    border-radius: 12px;
    padding: 20px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 0 40px rgba(201, 168, 76, 0.1), 0 20px 60px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.diary-camera-content video {
    width: 100%;
    border-radius: 8px;
    background: #000;
    margin-bottom: 12px;
}

.diary-camera-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.diary-camera-actions button {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-family: 'IM Fell English', 'Georgia', serif;
    font-weight: 400;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.diary-camera-capture-btn {
    background: linear-gradient(135deg, var(--pirate-gold), var(--pirate-gold-bright));
    color: var(--pirate-ink);
    box-shadow: 0 2px 12px rgba(201, 168, 76, 0.3);
}

.diary-camera-cancel-btn {
    background: rgba(244, 228, 193, 0.08);
    color: var(--pirate-parchment-dark);
}

/* ========================================
   ACTION BUTTONS
   ======================================== */
.diary-action-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 168, 76, 0.08);
    border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
    color: var(--pirate-gold);
}

.diary-action-btn:hover {
    background: rgba(201, 168, 76, 0.18);
    border-color: rgba(201, 168, 76, 0.4);
}

/* Typing Indicator */
.diary-typing-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 16px 4px 24px;
    font-size: 0.72rem;
    font-family: 'Special Elite', 'Courier New', monospace;
    color: var(--pirate-sepia);
    background: rgba(201, 168, 76, 0.05);
}

.diary-typing-indicator.hidden {
    display: none;
}

.diary-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pirate-gold);
    animation: pulse-dot 1s ease infinite;
}

/* ========================================
   CONTENT BLOCKS — 12-Column Grid
   ======================================== */
.diary-blocks {
    position: relative;
    z-index: 1;
    padding: 16px;
    min-height: 100%;
    width: 100%;
    box-sizing: border-box;
}
/* Blocks always interactive; canvas toggles above when draw tool is active */

.diary-block {
    position: absolute;
    border-radius: 6px;
    overflow: visible;
    min-height: 40px;
    min-width: 100px;
    background: transparent;
    border: 1.5px dashed rgba(139, 90, 43, 0.25);
    transition: box-shadow 0.2s;
    z-index: 2;
}
.diary-block-free {
    z-index: 2;
}
/* Text toolbar always visible in edit mode, hidden in read mode */
.diary-editor.read-mode .diary-block {
    border: none;
}
.diary-block:hover {
    border-color: rgba(201, 168, 76, 0.25);
}

/* 12-column span system */
.diary-block[data-span="1"] { grid-column: span 1; }
.diary-block[data-span="2"] { grid-column: span 2; }
.diary-block[data-span="3"] { grid-column: span 3; }
.diary-block[data-span="4"] { grid-column: span 4; }
.diary-block[data-span="5"] { grid-column: span 5; }
.diary-block[data-span="6"] { grid-column: span 6; }
.diary-block[data-span="7"] { grid-column: span 7; }
.diary-block[data-span="8"] { grid-column: span 8; }
.diary-block[data-span="9"] { grid-column: span 9; }
.diary-block[data-span="10"] { grid-column: span 10; }
.diary-block[data-span="11"] { grid-column: span 11; }
.diary-block[data-span="12"] { grid-column: span 12; }

/* Drag handle */
.diary-block-drag {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    opacity: 0.7;
    transition: opacity 0.2s, background 0.2s;
    font-size: 0.85rem;
    z-index: 6;
    background: rgba(101, 67, 33, 0.85);
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 4px;
    color: rgba(255, 215, 0, 0.7);
    touch-action: none;
    -webkit-touch-callout: none;
}
/* Phase 7.7: !important stripped — themed override (0,3,2) doesn't set
   opacity; base hover (0,1,1) > base .diary-block-drag (0,1,0) naturally. */
.diary-block-drag:hover { opacity: 1; background: rgba(101, 67, 33, 1); color: #ffd700; }
.diary-block-drag:active { cursor: grabbing; }

/* Drag drop indicator */
.diary-block-drop-indicator {
    grid-column: span 12;
    height: 3px;
    background: var(--pirate-gold);
    border-radius: 2px;
    opacity: 0.6;
    pointer-events: none;
}

/* Resize edge handle.
   Phase 7.7: !important stripped — no ancestor rule sets
   pointer-events: none on this element's render path. */
.diary-block-resize-edge {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 14px;
    height: 30px;
    cursor: col-resize;
    z-index: 10;
    opacity: 0.6;
    pointer-events: auto;
    background: rgba(201, 168, 76, 0.4);
    border-radius: 3px;
    border: 1px solid rgba(201, 168, 76, 0.5);
}
.diary-block-resize-edge:hover {
    opacity: 1;
    background: rgba(201, 168, 76, 0.6);
}
/* resize edge styled directly, no pseudo-element needed */

/* Resize guides overlay */
.diary-resize-guides {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}
.diary-resize-guide {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--pirate-gold);
    opacity: 0.2;
}
.diary-resize-guide.active {
    opacity: 0.5;
    width: 2px;
    box-shadow: 0 0 6px rgba(201, 168, 76, 0.3);
}

/* Resize handle (legacy corner — hidden but kept for compat) */
.diary-block-resize {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 3;
    display: none;
}

/* Legacy size selector bar — hidden.
   Phase 7.7: !important stripped — element doesn't exist in the rendered
   DOM; rule is retained defensively. */
.diary-block-size-bar {
    display: none;
}
.diary-block-size-btn {
    display: none;
}

/* Block content styles */
.diary-block-text {
    width: 100%;
    min-height: 60px;
    padding: 12px;
    background: rgba(244, 228, 193, 0.03);
    border: 1px solid rgba(139, 115, 85, 0.1);
    border-radius: var(--radius-md);
    color: var(--pirate-parchment-dark);
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 1rem;
    line-height: 1.7;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
}

.diary-block-text:focus {
    border-color: rgba(201, 168, 76, 0.3);
    box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.08);
}

.diary-block-text::placeholder {
    color: var(--pirate-ink-faded);
    font-style: italic;
}

.diary-block-image {
    position: relative;
    overflow: hidden;
    background: transparent;
    border: none;
}

.diary-block-image img {
    width: 100%;
    display: block;
    border-radius: 4px;
}

.diary-block-drawing {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(26, 21, 16, 0.5);
    border: 2px solid rgba(139, 115, 85, 0.15);
}

.diary-block-drawing img {
    width: 100%;
    max-height: 250px;
    object-fit: contain;
    display: block;
    background: var(--pirate-canvas-bg);
}

/* Canvas block (inline editable canvas) */
.diary-block-canvas {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background: var(--pirate-canvas-bg);
    border: 2px solid rgba(139, 115, 85, 0.2);
}
.diary-block-canvas canvas {
    width: 100%;
    height: 200px;
    display: block;
    touch-action: none;
    cursor: crosshair;
}
.diary-block-canvas .dmc-inline-tools {
    display: none;
    padding: 6px;
    background: rgba(26, 21, 16, 0.8);
    border-top: 1px solid rgba(139, 115, 85, 0.2);
    gap: 3px;
    flex-wrap: wrap;
}
.diary-block-canvas.editing .dmc-inline-tools {
    display: flex;
}

/* Block remove button */
.diary-block-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(101, 67, 33, 0.85);
    border: 1px solid rgba(200, 60, 60, 0.4);
    border-radius: 4px;
    color: rgba(255, 100, 100, 0.8);
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0.7;
    transition: opacity 0.2s, background 0.2s;
    z-index: 6;
}

.diary-block-remove:hover {
    opacity: 1;
    background: rgba(160, 40, 40, 0.85);
    color: #fff;
}

/* Block caption */
.diary-block-caption {
    padding: 6px 10px;
    background: rgba(26, 21, 16, 0.3);
    font-size: 0.72rem;
    font-family: 'Special Elite', 'Courier New', monospace;
    color: var(--pirate-sepia);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Legacy add block button */
.diary-add-block-btn {
    display: none;
}

/* ========================================
   ACHIEVEMENT BLOCK
   ======================================== */
.diary-block-achievement {
    padding: 14px 16px;
    background:
        linear-gradient(135deg, rgba(201, 168, 76, 0.45) 0%, rgba(155, 89, 182, 0.3) 100%),
        rgba(255, 215, 0, 0.15);
    border: 1.5px solid rgba(201, 168, 76, 0.5);
    border-radius: 8px;
    backdrop-filter: blur(2px);
    display: flex;
    gap: 12px;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}

/* Wax seal decoration on achievement */
.diary-block-achievement::before {
    content: '';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 40% 40%,
            rgba(201, 168, 76, 0.6) 0%,
            rgba(139, 0, 0, 0.4) 50%,
            rgba(100, 0, 0, 0.2) 70%,
            transparent 80%
        );
    pointer-events: none;
}

.achievement-poster {
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(201, 168, 76, 0.3);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* 16:9 for movies/shows */
.achievement-poster.poster-video { width: 100px; height: 56px; }
/* Book cover ratio */
.achievement-poster.poster-book { width: 55px; height: 80px; }

.achievement-content {
    flex: 1;
    min-width: 0;
}

.achievement-title {
    font-family: 'IM Fell English', 'Georgia', serif;
    font-size: 0.88rem;
    color: #3c2415;
    font-weight: 600;
    margin-bottom: 2px;
    line-height: 1.3;
}

.achievement-detail {
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 0.85rem;
    color: #2a1a0a;
    line-height: 1.4;
}

.achievement-range {
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 0.82rem;
    color: #3c2415;
    margin-top: 2px;
}

.achievement-attribution {
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 0.72rem;
    color: #5b21b6;
    margin-top: 4px;
    opacity: 1;
}

/* Achievement form (edit mode) */
.diary-empty-msg {
    position: fixed;
    top: 32%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: rgba(60, 36, 21, 0.45);
    font-size: 0.8rem;
    font-family: 'Special Elite', 'Courier New', monospace;
    pointer-events: none;
    z-index: 0;
}

.achievement-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: rgba(44, 24, 16, 0.92);
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.achievement-form select,
.achievement-form input {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: 8px;
    color: #f4e4c1;
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 0.9rem;
}

.achievement-form select:focus,
.achievement-form input:focus {
    border-color: rgba(201, 168, 76, 0.5);
    outline: none;
    box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.15);
}

.achievement-form select option {
    background: #2c1810;
    color: #f4e4c1;
}

.achievement-form-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.achievement-form-row input {
    flex: 1;
}

.achievement-form-row label {
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 0.85rem;
    color: #c9a84c;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.achievement-form-row label input[type="checkbox"] {
    width: auto;
    accent-color: var(--pirate-gold);
}

.achievement-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.achievement-form-actions button {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    font-family: 'IM Fell English', 'Georgia', serif;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.achievement-save-btn {
    background: linear-gradient(135deg, var(--pirate-gold), var(--pirate-gold-bright));
    color: var(--pirate-ink);
}

.achievement-cancel-btn {
    background: rgba(244, 228, 193, 0.08);
    color: var(--pirate-sepia);
}

/* ========================================
   READ MODE — Authentic Pirate Diary Page
   ======================================== */
.diary-read-toggle {
    transition: all 0.2s;
}
/* Phase 7.7: !important stripped — no higher-specificity rule sets
   these properties on .diary-read-toggle.active, and the base rule
   at 1709 doesn't set background/border-color. */
.diary-read-toggle.active {
    background: rgba(201, 168, 76, 0.2);
    border-color: rgba(201, 168, 76, 0.4);
}

/* Edit-mode indicator for PARCHMENT palette (themed has its own richer treatment above).
   .active is added on read mode, so NOT .active == edit mode. Fill the button gold with
   a subtle "Editing" label so the user always knows which mode they're in. */
/* Phase 7.7: !important stripped — ID-based specificity with two :not()
   selectors (ballpark 1,4,0) already beats all other .diary-read-toggle
   rules in the parchment palette branch. */
.diary-container:not([data-palette="themed"]) #diary-read-toggle:not(.active) {
    background: var(--pirate-gold-bright);
    border-color: var(--pirate-gold-bright);
    color: var(--pirate-ink);
    width: auto;
    padding: 0 12px 0 10px;
    border-radius: 20px;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.25), 0 0 10px rgba(201, 168, 76, 0.4);
}
.diary-container:not([data-palette="themed"]) #diary-read-toggle:not(.active)::after {
    content: 'Editing';
    margin-left: 6px;
    font-family: 'Special Elite', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--pirate-ink);
}

/* Read Mode: hide editing controls */
.diary-editor.read-mode .diary-add-toolbar,
/* Phase 7.7: !important stripped — 0,3,0 specificity beats the base
   class rules for each of these elements. */
.diary-editor.read-mode .diary-block-toolbar,
.diary-editor.read-mode .diary-block-remove,
.diary-editor.read-mode .diary-block-resize-edge,
.diary-editor.read-mode .diary-block-drag,
.diary-editor.read-mode .diary-draw-toolbar,
.diary-editor.read-mode .diary-mode-indicator,
.diary-editor.read-mode .achievement-form {
    display: none;
}

/* Read Mode: parchment page look */
.diary-editor.read-mode .diary-blocks-wrap {
    background: #f4e4c1;
}
.diary-editor.read-mode .diary-blocks {
    padding: 24px 28px 24px 32px;
    gap: 18px;
    background: transparent;
}

.diary-editor.read-mode .diary-block {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 2px 0;
}

.diary-editor.read-mode .diary-block-text,
.diary-editor.read-mode .diary-block-richtext {
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 0.95rem;
    line-height: 2;
    color: #000;
    padding: 12px 18px;
    background: transparent;
    border: none;
    cursor: default;
    min-height: auto;
    background-image: none;
}

.diary-editor.read-mode .diary-block-richtext h3 {
    font-family: 'Special Elite', 'Courier New', monospace;
    color: #2c1810;
    font-size: 1.1rem;
    text-decoration: underline;
    text-decoration-color: rgba(139, 90, 43, 0.3);
    text-underline-offset: 3px;
}

.diary-editor.read-mode .diary-block-image {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.diary-editor.read-mode .diary-block-image img {
    border-radius: 0;
    filter: sepia(0.15) brightness(0.95);
}

.diary-editor.read-mode .diary-block-drawing {
    border: 3px solid rgba(92, 58, 30, 0.5);
    border-radius: 4px;
    margin: 8px 0;
}

/* Read Mode: achievement looks like a wax-sealed stamp */
.diary-editor.read-mode .diary-block-achievement {
    background:
        linear-gradient(135deg, rgba(201, 168, 76, 0.4) 0%, rgba(155, 89, 182, 0.25) 100%),
        rgba(255, 215, 0, 0.12);
    border: 1.5px solid rgba(201, 168, 76, 0.45);
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.diary-editor.read-mode .diary-editor-header {
    background: #ecdbb5;
    border-bottom: 1px solid rgba(139, 90, 43, 0.2);
    border-image: none;
}

.diary-editor.read-mode .diary-date-title {
    font-family: 'Special Elite', 'Courier New', monospace;
    font-style: normal;
    color: #3c2415;
}

/* ========================================
   CALENDAR EVENTS
   ======================================== */
.diary-events {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: 1px solid rgba(139, 115, 85, 0.15);
}

.diary-events-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 10px 24px;
    background: rgba(44, 24, 16, 0.25);
    flex-shrink: 0;
}

.diary-events-title {
    font-size: 0.88rem;
    font-family: 'IM Fell English', 'Georgia', serif;
    font-weight: 400;
    color: var(--pirate-parchment-dark);
    margin: 0;
}

.diary-events-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 12px 8px 24px;
}

.diary-event-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(244, 228, 193, 0.03);
    border: 1px solid rgba(139, 115, 85, 0.12);
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.diary-event-item:hover {
    background: rgba(201, 168, 76, 0.08);
    border-color: rgba(201, 168, 76, 0.2);
}

.diary-event-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.diary-event-dot.movie-night { background: #c0392b; }
.diary-event-dot.game-night { background: var(--pirate-gold-bright); }
.diary-event-dot.date-night { background: #e74c6f; }
.diary-event-dot.call { background: #27ae60; }
.diary-event-dot.work { background: var(--pirate-navy-light); }
.diary-event-dot.other { background: var(--pirate-sepia); }

.diary-event-text {
    flex: 1;
    font-size: 0.85rem;
    font-family: 'Special Elite', 'Courier New', monospace;
    color: var(--pirate-parchment-dark);
}

.diary-event-time {
    font-size: 0.72rem;
    font-family: 'IM Fell English', 'Georgia', serif;
    color: var(--pirate-sepia);
}

.diary-event-remove {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--pirate-sepia);
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.diary-event-item:hover .diary-event-remove {
    opacity: 1;
}

/* ========================================
   ADD EVENT MODAL
   ======================================== */
.diary-event-modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

.diary-event-modal.hidden { display: none; }

.diary-event-form {
    background:
        linear-gradient(135deg,
            rgba(60, 31, 14, 0.95),
            rgba(44, 24, 16, 0.98)
        );
    border: 2px solid rgba(201, 168, 76, 0.25);
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 360px;
    box-shadow: 0 0 40px rgba(201, 168, 76, 0.08), 0 20px 60px rgba(0, 0, 0, 0.5);
}

.diary-event-form h3 {
    margin: 0 0 14px;
    font-family: 'IM Fell English', 'Georgia', serif;
    font-size: 1rem;
    color: var(--pirate-parchment);
}

.diary-event-form input,
.diary-event-form select {
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(139, 115, 85, 0.2);
    border-radius: 6px;
    color: var(--pirate-parchment-dark);
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 0.9rem;
}

.diary-event-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.diary-event-form-actions button {
    flex: 1;
    padding: 8px;
    font-family: 'IM Fell English', 'Georgia', serif;
    font-size: 0.85rem;
    font-weight: 400;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.diary-event-form-actions .btn-save {
    background: linear-gradient(135deg, var(--pirate-gold), var(--pirate-gold-bright));
    color: var(--pirate-ink);
    box-shadow: 0 2px 12px rgba(201, 168, 76, 0.2);
}

.diary-event-form-actions .btn-cancel {
    background: rgba(244, 228, 193, 0.08);
    color: var(--pirate-parchment-dark);
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */
@media (max-width: 480px) {
    .diary-calendar-dropdown {
        max-height: 50vh;
    }
    .diary-container {
        border-left: 2px solid var(--pirate-leather);
        background: #f4e4c1;
    }
    .diary-container::before {
        left: 4px;
    }
    .diary-header {
        padding: 8px 10px 8px 16px;
        gap: 6px;
    }
    .diary-month-label {
        font-size: 0.82rem;
        min-width: 120px;
    }
    .diary-day {
        font-size: 0.72rem;
    }
    .diary-calendar {
        padding: 6px 8px 6px 14px;
    }
    .diary-blocks-wrap {
        overflow-y: auto;
        overflow-x: hidden;
    }
    .diary-blocks {
        min-width: 0;
        padding: 10px 12px 10px 18px;
    }
    .diary-block-resize-edge {
        width: 18px;
        height: 40px;
    }
    .diary-block-drag {
        width: 28px;
        height: 28px;
    }
    .diary-add-toolbar {
        padding: 8px 12px 8px 16px;
        gap: 4px;
    }
    .diary-add-btn {
        padding: 8px 4px;
        font-size: 0.58rem;
    }
    .diary-draw-toggle-wrap {
        padding: 5px 10px;
        gap: 5px;
    }
    .diary-draw-label {
        font-size: 0.55rem;
    }
    .diary-draw-track {
        width: 28px;
        height: 14px;
    }
    .diary-draw-knob {
        width: 10px;
        height: 10px;
    }
    .diary-draw-toggle-wrap.draw-on .diary-draw-knob {
        left: 16px;
    }
    .diary-editor {
        border-top: none;
    }
    .diary-editor-header {
        padding: 10px 12px 10px 18px;
    }
    .diary-editor.read-mode .diary-editor-header {
        background: #f4e4c1;
    }
    .diary-editor.read-mode .diary-blocks {
        background-image: none;
        box-shadow: none;
    }
    .diary-mini-canvas-tools {
        gap: 3px;
    }
    .dmc-tool {
        width: 28px;
        height: 28px;
    }
    .dmc-size, .dmc-opacity {
        width: 48px;
    }
    .diary-edit-fab {
        bottom: 100px;
        right: 14px;
        width: 44px;
        height: 44px;
    }
    /* Achievement form stacks vertically */
    .achievement-form-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ========================================
   FULLSCREEN DIARY MODE
   ======================================== */
/* Fullscreen diary — browser API + CSS fallback */
.diary-container.diary-fullscreen,
.diary-container:fullscreen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    max-width: none;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    margin: 0;
    border-left: none;
    background: var(--pirate-ink);
}
.diary-container.diary-fullscreen .diary-editor,
.diary-container:fullscreen .diary-editor {
    height: 100%;
    flex: 1;
}
/* Edit colors in fullscreen */
.diary-container.diary-fullscreen .diary-editor:not(.read-mode) .diary-blocks-wrap,
.diary-container:fullscreen .diary-editor:not(.read-mode) .diary-blocks-wrap {
    background: #f4e4c1;
}
/* Read mode in fullscreen */
.diary-container.diary-fullscreen .diary-editor.read-mode .diary-blocks-wrap,
.diary-container:fullscreen .diary-editor.read-mode .diary-blocks-wrap {
    background: #f4e4c1;
}
/* 2-page book mode */
.diary-page { position: relative; flex: 1; min-width: 0; overflow-y: auto; }
.diary-page-right { display: contents; } /* In normal mode, page-right doesn't add a wrapper */
.diary-page-left { display: none; }
/* Phase 7.7: !important stripped — .diary-page-left already has
   display: none; the base .hidden { display: none !important } (base.css)
   also applies. This belt-and-suspenders rule is now plain. */
.diary-page-left.hidden { display: none; }
.diary-page-date {
    text-align: center;
    padding: 8px;
    font-family: 'IM Fell English', 'Georgia', serif;
    font-size: 0.75rem;
    color: rgba(60, 36, 21, 0.5);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.diary-page-blocks {
    padding: 16px;
    font-family: 'Special Elite', 'Courier New', monospace;
    color: #3c2415;
    font-size: 0.85rem;
    line-height: 1.8;
}
/* On wider screens in fullscreen, show 2 pages side by side */
/* breakpoint snap 900px -> 1024px (Phase 7.6 ladder) */
@media (min-width: 1024px) {
    .diary-container.diary-fullscreen .diary-blocks-wrap {
        display: flex;
    }
    .diary-container.diary-fullscreen .diary-page-left {
        display: block !important;
        border-right: 2px solid rgba(139, 90, 43, 0.15);
        overflow-y: auto;
    }
    .diary-container.diary-fullscreen .diary-page-left.hidden {
        display: block !important;
    }
    .diary-container.diary-fullscreen .diary-page-right {
        display: flex;
        flex-direction: column;
        border-left: none;
    }
}

/* ================================================================
   DIARY — THEMED PALETTE (opt-in via users.diary_palette = 'themed')
   Redefines the --pirate-* vars so the entire diary follows the app
   theme (gold/ocean/rose/sunset/matrix/midnight/crimson/custom).
   Parchment mode (default-opt-out) is untouched above.
   ================================================================ */
.diary-container[data-palette="themed"] {
    /* "Paper" surfaces → deep themed page */
    --pirate-parchment: #1a1430;
    --pirate-parchment-dark: #140e26;
    --pirate-parchment-edge: rgba(var(--secondary-rgb), 0.35);

    /* Text ink → light on dark */
    --pirate-ink: rgba(255, 255, 255, 0.95);
    --pirate-ink-light: rgba(255, 255, 255, 0.78);
    --pirate-ink-faded: rgba(255, 255, 255, 0.45);

    /* Sepia accents → secondary-tinted */
    --pirate-sepia: rgba(var(--secondary-rgb), 0.7);

    /* Gold accents → primary (themed) */
    --pirate-gold: var(--primary);
    --pirate-gold-bright: var(--primary-light);

    /* Navy chrome → deep themed surface */
    --pirate-navy: #0d0b1e;
    --pirate-navy-light: #181428;

    /* Rope weave → primary-dark */
    --pirate-rope: var(--primary-dark);

    /* Wax seal kept red (semantic red — achievement marker) */
    --pirate-wax: #8B0000;
    --pirate-wax-light: #a52a2a;

    /* Leather spine → themed glass chrome */
    --pirate-leather: rgba(20, 16, 36, 0.95);
    --pirate-leather-light: rgba(30, 22, 48, 0.9);

    /* Drawing canvas bg — pure deep black so drawings pop in any theme */
    --pirate-canvas-bg: #0a0814;
    --pirate-bg: rgba(15, 12, 26, 0.96);
}

/* Container background — replace the leather-spine look with a themed warm dark surface */
.diary-container[data-palette="themed"] {
    background:
        linear-gradient(to right,
            rgba(var(--primary-rgb), 0.06) 0px,
            rgba(var(--primary-rgb), 0.02) 12px,
            transparent 18px
        ),
        radial-gradient(ellipse at 20% 50%, rgba(var(--secondary-rgb), 0.08) 0%, transparent 70%),
        radial-gradient(ellipse at 80% 80%, rgba(var(--primary-rgb), 0.04) 0%, transparent 60%),
        linear-gradient(180deg, #0f0d1e 0%, #0a0812 100%);
    border-left: 3px solid rgba(var(--primary-rgb), 0.25);
    /* Defense in depth: lock opacity 1 so NO animation/transition can
     * make the diary transparent during tab activation. The dark
     * gradient bg is fully opaque (#0f0d1e/#0a0812) so the body bg
     * behind cannot bleed through if opacity stays at 1. */
    opacity: 1 !important;
}

/* Spine stitching: hide entirely in themed mode — modern diaries don't use decorative spines */
.diary-container[data-palette="themed"]::before {
    display: none;
}
.diary-container[data-palette="themed"] {
    border-left: none;
}

/* Visible day header (the bar with edit / date / calendar buttons) — clean glass surface */
.diary-container[data-palette="themed"] .diary-editor-header {
    background: linear-gradient(180deg,
        rgba(22, 18, 38, 0.92) 0%,
        rgba(16, 13, 28, 0.88) 100%);
    /* No borders, no inset highlight — every cream/white-ish 1px line
     * the user reported was sourced here:
     *   - border-bottom: 1px gold-tinted (was the "static stripe")
     *   - box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset — drew a
     *     faint white 1px line at the TOP of the header, visible as
     *     the "still happening at the start and then disappears" flash
     *     during tabSlideIn (during partial-opacity fade-in, the white
     *     inset rendered at higher relative contrast, then settled to
     *     barely-visible at full opacity).
     * Both removed in themed mode. The dark gradient bg alone is the
     * visual chrome. */
    border-bottom: none;
    box-shadow: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Date title — light on dark, still Special Elite for warmth */
.diary-container[data-palette="themed"] .diary-date-title {
    color: rgba(255, 255, 255, 0.96);
    font-weight: 500;
    letter-spacing: 0.3px;
}
.diary-container[data-palette="themed"] .diary-date-title:hover {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
}

/* Day nav arrows — theme-tinted glass pills */
.diary-container[data-palette="themed"] .diary-day-nav-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(var(--primary-rgb), 0.22);
    color: rgba(255, 255, 255, 0.75);
}
.diary-container[data-palette="themed"] .diary-day-nav-btn:hover {
    background: rgba(var(--primary-rgb), 0.14);
    border-color: rgba(var(--primary-rgb), 0.5);
    color: var(--primary);
}

/* Action buttons (edit toggle + calendar icon) — neutral glass, tint on hover */
.diary-container[data-palette="themed"] .diary-action-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(var(--primary-rgb), 0.22);
    color: rgba(255, 255, 255, 0.75);
    transition: all 0.2s ease;
}
.diary-container[data-palette="themed"] .diary-action-btn:hover {
    background: rgba(var(--primary-rgb), 0.14);
    border-color: rgba(var(--primary-rgb), 0.5);
    color: var(--primary);
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.2);
}

/* Edit toggle — explicit editing state so the user always knows which mode they're in */
.diary-container[data-palette="themed"] .diary-editor:not(.read-mode) #diary-read-toggle {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.22), 0 0 14px rgba(var(--primary-rgb), 0.35);
    animation: diaryEditPulse 2s ease-in-out infinite;
}
.diary-container[data-palette="themed"] .diary-editor:not(.read-mode) #diary-read-toggle::after {
    content: 'Editing';
    margin-left: 6px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fff;
}
@keyframes diaryEditPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.22), 0 0 14px rgba(var(--primary-rgb), 0.35); }
    50% { box-shadow: 0 0 0 5px rgba(var(--primary-rgb), 0.08), 0 0 18px rgba(var(--primary-rgb), 0.55); }
}

/* In edit mode, widen the button slightly to accommodate the "Editing" label */
.diary-container[data-palette="themed"] .diary-editor:not(.read-mode) #diary-read-toggle {
    width: auto;
    padding: 0 12px 0 10px;
    border-radius: 20px;
}

/* Calendar dropdown header (nested inside the dropdown) — also clean up */
.diary-container[data-palette="themed"] .diary-calendar-dropdown .diary-header {
    background:
        linear-gradient(180deg,
            rgba(22, 18, 38, 0.92) 0%,
            rgba(16, 13, 28, 0.88) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.15);
    border-image: none;
}

/* Wave 13 follow-up: the original .diary-editor-header themed
 * override at line ~2275 now sets border-bottom: none — see comment
 * there. Removing the duplicate I added in the previous attempt. */

/* Month label stays light on themed dark */
.diary-container[data-palette="themed"] .diary-month-label {
    color: rgba(255, 255, 255, 0.92);
}

/* Calendar area — subtle primary glow instead of sepia */
.diary-container[data-palette="themed"] .diary-calendar {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(var(--primary-rgb), 0.04) 0%, transparent 60%),
        rgba(10, 8, 18, 0.35);
}

/* Blocks wrap (the "page") — dark themed surface with subtle paper-grain noise */
.diary-container[data-palette="themed"] #diary-blocks-wrap,
.diary-container[data-palette="themed"] .diary-blocks-wrap {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(var(--primary-rgb), 0.035) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 80%, rgba(var(--secondary-rgb), 0.03) 0%, transparent 55%),
        linear-gradient(180deg, #15122a 0%, #120e24 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        inset 0 0 60px rgba(var(--primary-rgb), 0.025);
}

/* In themed mode the editor wrapper itself must also be dark — the
   base `.diary-editor` rule paints `background: #f4e4c1` (parchment)
   unconditionally, which bleeds through as a thin off-white seam in
   the gap between the dark header and the dark blocks-wrap below it.
   Reported on iPhone 14 Pro Max as a "weird off-white line below the
   diary head". Match the blocks-wrap dark gradient so any sub-pixel
   gap that does exist is invisible. */
.diary-container[data-palette="themed"] .diary-editor {
    background: #15122a;
}

/* Weekday headers — themed secondary tint */
.diary-container[data-palette="themed"] .diary-weekdays {
    color: rgba(var(--secondary-rgb), 0.75);
}

/* Selected day → themed gradient pill.
   0,3,1 specificity wins over base 0,2,0 naturally (Phase 7.7). */
.diary-container[data-palette="themed"] .diary-day.selected {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.4);
}

/* Today indicator on themed */
.diary-container[data-palette="themed"] .diary-day.today {
    color: var(--primary);
    border-color: rgba(var(--primary-rgb), 0.55);
}

/* Day hover — glass highlight */
.diary-container[data-palette="themed"] .diary-day:hover {
    background: rgba(var(--primary-rgb), 0.12);
    color: #fff;
}

/* Base day numbers — light on dark so every theme reads clearly */
.diary-container[data-palette="themed"] .diary-day {
    color: rgba(255, 255, 255, 0.78);
}

/* Other-month days — dimmer but still legible (was literal sepia rgba at 0.25 opacity which disappeared on dark) */
.diary-container[data-palette="themed"] .diary-day.other-month {
    color: rgba(255, 255, 255, 0.28);
}

/* Calendar dropdown chrome */
.diary-container[data-palette="themed"] .diary-calendar-dropdown {
    background: rgba(15, 12, 26, 0.96);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(var(--primary-rgb), 0.1);
}

/* Day preview card */
.diary-container[data-palette="themed"] .diary-day-preview {
    background: rgba(20, 16, 36, 0.85);
    border: 1px solid rgba(var(--primary-rgb), 0.15);
    color: rgba(255, 255, 255, 0.9);
}
.diary-container[data-palette="themed"] .diary-day-preview-title {
    color: var(--primary);
}

/* Achievement card — themed gradient replaces gold/purple literal */
.diary-container[data-palette="themed"] .diary-achievement-block {
    background: linear-gradient(135deg,
        rgba(var(--primary-rgb), 0.18) 0%,
        rgba(var(--secondary-rgb), 0.14) 100%);
    border: 1.5px solid rgba(var(--primary-rgb), 0.35);
    box-shadow:
        0 4px 20px rgba(var(--primary-rgb), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.diary-container[data-palette="themed"] .diary-achievement-block,
.diary-container[data-palette="themed"] .diary-achievement-block * {
    color: #fff;
}
.diary-container[data-palette="themed"] .diary-achievement-block .diary-achievement-by {
    color: var(--secondary-soft);
}

/* Text block body text on themed page */
.diary-container[data-palette="themed"] .diary-text-block {
    color: rgba(255, 255, 255, 0.94);
}
.diary-container[data-palette="themed"] .diary-text-block:empty::before,
.diary-container[data-palette="themed"] .diary-text-block[data-placeholder]:empty::before {
    color: rgba(var(--primary-rgb), 0.42);
}

/* Drag handle + resize edge — themed glass.
   Selectors are 0,3,1 specificity vs the 0,1,0 base rules above, so
   these win naturally without !important (Phase 7.7). */
.diary-container[data-palette="themed"] .diary-block-drag {
    background: rgba(20, 16, 36, 0.85);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    color: var(--primary);
}
.diary-container[data-palette="themed"] .diary-block-drag:hover {
    background: rgba(var(--primary-rgb), 0.2);
    color: var(--primary-light);
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3);
}
.diary-container[data-palette="themed"] .diary-block-resize {
    background: linear-gradient(180deg, transparent, var(--primary), transparent);
    opacity: 0.5;
}
.diary-container[data-palette="themed"] .diary-block-resize:hover {
    opacity: 1;
    box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.5);
}

/* Text format toolbar (B/I/H/List inside a focused text block) */
.diary-container[data-palette="themed"] .diary-text-toolbar {
    background: rgba(15, 12, 26, 0.94);
    border: 1px solid rgba(var(--primary-rgb), 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 14px rgba(var(--primary-rgb), 0.1);
}
.diary-container[data-palette="themed"] .diary-text-toolbar button {
    color: rgba(255, 255, 255, 0.82);
}
.diary-container[data-palette="themed"] .diary-text-toolbar button:hover,
.diary-container[data-palette="themed"] .diary-text-toolbar button.active {
    background: rgba(var(--primary-rgb), 0.18);
    color: var(--primary);
}

/* Add-block + drawing toolbars at the bottom — glass pills */
.diary-container[data-palette="themed"] .diary-add-toolbar,
.diary-container[data-palette="themed"] .diary-drawing-toolbar {
    background:
        linear-gradient(180deg, rgba(25, 20, 45, 0.9) 0%, rgba(15, 12, 26, 0.94) 100%);
    border-top: 1px solid rgba(var(--primary-rgb), 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Add buttons → themed pills */
.diary-container[data-palette="themed"] .diary-add-btn {
    background: rgba(20, 16, 36, 0.7);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    color: rgba(255, 255, 255, 0.88);
}
.diary-container[data-palette="themed"] .diary-add-btn:hover {
    background: rgba(var(--primary-rgb), 0.18);
    border-color: rgba(var(--primary-rgb), 0.5);
    color: var(--primary);
    box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.25);
}

/* Drawing tool buttons */
.diary-container[data-palette="themed"] .diary-draw-tool {
    background: rgba(20, 16, 36, 0.7);
    border: 1px solid rgba(var(--primary-rgb), 0.22);
    color: rgba(255, 255, 255, 0.8);
}
.diary-container[data-palette="themed"] .diary-draw-tool:hover,
.diary-container[data-palette="themed"] .diary-draw-tool.active {
    background: rgba(var(--primary-rgb), 0.22);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.35);
}

/* Draw toggle switch — themed knob */
.diary-container[data-palette="themed"] .diary-draw-toggle {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(var(--primary-rgb), 0.25);
}
.diary-container[data-palette="themed"] .diary-draw-toggle.active {
    background: rgba(var(--primary-rgb), 0.25);
    box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.4);
}
.diary-container[data-palette="themed"] .diary-draw-toggle .knob {
    background: var(--primary);
}

/* Collapse button on calendar header */
.diary-container[data-palette="themed"] .diary-calendar-collapse {
    color: rgba(255, 255, 255, 0.6);
}
.diary-container[data-palette="themed"] .diary-calendar-collapse:hover {
    color: var(--primary);
}

/* Custom scrollbar inside the diary → themed secondary */
.diary-container[data-palette="themed"] *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
        rgba(var(--secondary-rgb), 0.5),
        rgba(var(--secondary-dark-rgb), 0.7));
}
.diary-container[data-palette="themed"] *::-webkit-scrollbar-track {
    background: rgba(10, 8, 18, 0.45);
}

/* Text blocks keep Special Elite — the handwritten feel survives into themed mode */
.diary-container[data-palette="themed"] .diary-text-block {
    font-family: 'Special Elite', 'Courier New', monospace;
}

/* Date header in themed gets the gradient-text treatment */
.diary-container[data-palette="themed"] .diary-month-label {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-family: 'IM Fell English', 'Georgia', serif;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Mode indicator (Editing / Reading) */
.diary-container[data-palette="themed"] .diary-mode-indicator {
    color: rgba(var(--primary-rgb), 0.75);
}

} /* end @layer features */