:root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    --font-serif: 'Lora', Georgia, serif;
    --font-mono: 'JetBrains Mono', monospace;
    --font-caveat: 'Caveat', cursive;
    --font-patrick: 'Patrick Hand', cursive;
    --font-kalam: 'Kalam', cursive;
    --font-indie: 'Indie Flower', cursive;
    --font-shadows: 'Shadows Into Light', cursive;
    --font-gochi: 'Gochi Hand', cursive;
    --font-reenie: 'Reenie Beanie', cursive;
    --font-satisfy: 'Satisfy', cursive;
    --font-nanum: 'Nanum Pen Script', cursive;
    --font-marck: 'Marck Script', cursive;
    --font-sacramento: 'Sacramento', cursive;
    --font-hand: 'Just Another Hand', cursive;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
    position: fixed;
    inset: 0;
    background-color: #E5E5EA;
    font-family: var(--font-sans);
}

/* Light iOS Studio Backdrop on Tablets/Desktop */
.ios-desk-surface {
    background-color: #E5E5EA;
    background-image: radial-gradient(circle at 50% 20%, #F2F2F7 0%, #D1D1D6 100%);
}

/* iOS Top Floating Circle & Pill Controls */
.ios-circle-btn {
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.ios-pill-bar {
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* iOS PencilKit Floating Tool Dock */
.ios-tool-dock {
    background-color: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 
        0 10px 35px rgba(0, 0, 0, 0.09),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Rising Instrument Animation inside iOS Tool Dock */
.dock-instrument {
    transform: translateY(12px);
    transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
    opacity: 0.82;
}

.dock-instrument:hover {
    transform: translateY(6px);
    opacity: 0.95;
}

.dock-instrument.active-instrument {
    transform: translateY(0px);
    opacity: 1;
}

/* Rainbow Ring Color Picker Button (Matches App Store Screenshots 5 & 6) */
.rainbow-color-ring {
    background: conic-gradient(
        #FF3B30,
        #FF9500,
        #FFCC00,
        #34C759,
        #007AFF,
        #5856D6,
        #AF52DE,
        #FF2D55,
        #FF3B30
    );
}

/* Double-Ring Selection Border in Customize Sheet (Matches App Store Screenshot 3) */
.active-ring {
    box-shadow: 0 0 0 2.5px #FFFFFF, 0 0 0 5px #6D2E50;
}

/* Authentic Field Notes Memo Book Cover (Pitch Black & Kraft Brown) */
.notebook-cover {
    cursor: pointer;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 28px;
    border-bottom-right-radius: 28px;
    box-shadow: 
        -6px 12px 28px rgba(0, 0, 0, 0.28),
        0 20px 50px rgba(0, 0, 0, 0.22);
    transition: opacity 0.25s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 1. Pitch Black Smooth Matte Cardstock Cover (No synthetic grid texture) */
.notebook-cover.cover-theme-black {
    background: #141416;
    box-shadow: 
        -6px 12px 28px rgba(0, 0, 0, 0.35),
        inset 1px 1px 0 rgba(255, 255, 255, 0.06);
}

.notebook-cover.cover-theme-black .field-notes-title,
.notebook-cover.cover-theme-black .field-notes-sub {
    color: #D4D7DC;
}

/* 2. Original Kraft Brown Smooth Cardstock Cover (No synthetic grid texture) */
.notebook-cover.cover-theme-kraft {
    background: #C5A76E;
    box-shadow: 
        -6px 12px 28px rgba(0, 0, 0, 0.25),
        inset 1px 1px 0 rgba(255, 255, 255, 0.22);
}

.notebook-cover.cover-theme-kraft .field-notes-title,
.notebook-cover.cover-theme-kraft .field-notes-sub {
    color: #26221E;
}

/* Futura / Jost Geometric Typography on Cover */
.field-notes-title,
.field-notes-sub {
    font-family: 'Futura', 'Jost', 'Inter', -apple-system, sans-serif;
}

/* Left Spine Crease */
.cover-spine-crease {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 18px;
    background: linear-gradient(90deg, 
        rgba(0, 0, 0, 0.28) 0%, 
        rgba(255, 255, 255, 0.07) 4px, 
        rgba(0, 0, 0, 0.18) 9px, 
        transparent 18px
    );
    z-index: 10;
}

/* 3 Metallic Saddle-Stitch Staples on Left Spine */
.cover-staple {
    position: absolute;
    left: 1px;
    width: 3px;
    height: 28px;
    border-radius: 2px;
    background: linear-gradient(180deg, #9CA3AF 0%, #E5E7EB 50%, #6B7280 100%);
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.55);
    z-index: 20;
    pointer-events: none;
}

/* Phone Layout (< 768px): Edge-to-edge 100vw / 100dvh */
@media (max-width: 767px) {
    .notebook-outer, .notebook-cover {
        box-shadow: none !important;
        border-radius: 0 !important;
        max-width: 100vw !important;
        max-height: 100% !important;
    }
}

/* Tablet & Desktop Layout (>= 768px): Clean iOS Card Elevation */
@media (min-width: 768px) {
    .notebook-outer {
        box-shadow: 
            0 20px 60px rgba(0, 0, 0, 0.14),
            0 0 0 1px rgba(0, 0, 0, 0.06);
    }
    .notebook-cover {
        border-radius: 28px;
    }
}

/* Page Flip Animations */
.page-flip-next {
    transform: translateX(-14px) scale(0.99);
    opacity: 0.35;
}
.page-flip-prev {
    transform: translateX(14px) scale(0.99);
    opacity: 0.35;
}

/* Spatial Text Blocks */
.spatial-text-node {
    position: absolute;
    min-width: 50px;
    max-width: calc(100% - 36px);
    outline: none;
    border: 1.5px dashed transparent;
    border-radius: 8px;
    padding: 2px 6px;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    user-select: text;
    -webkit-user-select: text;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.28;
}

.spatial-text-node:hover {
    border-color: rgba(0, 122, 255, 0.25);
}

.spatial-text-node.focused-node {
    border-color: #007AFF;
    background-color: rgba(0, 122, 255, 0.04);
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.08);
    z-index: 30;
}

.drag-handle {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.spatial-text-node:hover .drag-handle,
.spatial-text-node.focused-node .drag-handle {
    opacity: 1;
    pointer-events: auto;
}

/* Spatial Photo Nodes */
.spatial-photo-node {
    position: absolute;
    padding: 5px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.06);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    user-select: none;
    z-index: 22;
}

.spatial-photo-node.focused-photo {
    box-shadow: 0 8px 24px rgba(0, 122, 255, 0.25), 0 0 0 2px #007AFF;
    z-index: 32;
}

.photo-drag-bar {
    cursor: grab;
}
.photo-drag-bar:active {
    cursor: grabbing;
}

/* iOS Slider Styling */
input[type="range"].ios-range {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}
input[type="range"].ios-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(60, 60, 67, 0.18);
}
input[type="range"].ios-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #FFFFFF;
    margin-top: -9px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.28);
    border: 0.5px solid rgba(0,0,0,0.08);
}

/* Sheet Slide-Up Animation */
@keyframes slideUpSheet {
    from {
        transform: translateY(24px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-slide-up {
    animation: slideUpSheet 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}