/* DropX Story Theme Layer — Light only. Dark theme remains untouched. */

body.light-mode #story-create-modal .story-create-panel {
    background: linear-gradient(145deg, #f0e5d4 0%, #e4d4bd 54%, #d8c4a8 100%);
    color: #3e3428;
    border-color: rgba(151, 105, 34, .42);
    box-shadow: 0 24px 80px rgba(62, 45, 27, .28), 0 0 0 1px rgba(255, 249, 237, .55) inset;
}
body.light-mode #story-create-modal .story-modal-header {
    background: linear-gradient(180deg, rgba(250, 243, 231, .94), rgba(231, 215, 193, .94));
    border-bottom-color: rgba(105, 76, 46, .16);
}
body.light-mode #story-create-modal .story-modal-header h3,
body.light-mode #story-create-modal .story-section-heading,
body.light-mode #story-create-modal .story-control-section label,
body.light-mode #story-create-modal .story-control-section strong { color: #3c3024; }
body.light-mode #story-create-modal .story-kicker { color: #9a6718; }
body.light-mode #story-create-modal .story-close {
    color: #5b4b39;
    background: rgba(255, 249, 239, .55);
    border-color: rgba(91, 75, 57, .20);
}
body.light-mode #story-create-modal .story-close:hover {
    color: #241b14;
    background: rgba(255, 250, 241, .86);
    border-color: rgba(151, 105, 34, .42);
}
body.light-mode #story-create-modal .story-editor-layout {
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 250, 239, .34), transparent 32%),
        radial-gradient(circle at 84% 76%, rgba(156, 108, 37, .08), transparent 36%),
        linear-gradient(145deg, rgba(239, 227, 210, .72), rgba(216, 196, 168, .66));
}
body.light-mode #story-create-modal .story-control-section {
    background: rgba(255, 249, 239, .54);
    border-color: rgba(100, 73, 44, .15);
    box-shadow: 0 8px 22px rgba(72, 52, 33, .07), inset 0 1px 0 rgba(255, 255, 255, .48);
}
body.light-mode #story-create-modal .story-control-section:hover { border-color: rgba(151, 105, 34, .25); }
body.light-mode #story-create-modal .story-control-section textarea,
body.light-mode #story-create-modal .story-control-section input[type="url"],
body.light-mode #story-create-modal .story-control-section input[type="text"],
body.light-mode #story-create-modal .story-font-select,
body.light-mode #story-create-modal .story-text-editor-wrap textarea,
body.light-mode #story-create-modal .story-control-section select {
    background: rgba(255, 251, 243, .82);
    color: #3c3024;
    border-color: rgba(95, 70, 43, .20);
    box-shadow: inset 0 2px 7px rgba(74, 53, 32, .06), 0 1px 0 rgba(255, 255, 255, .55);
}
body.light-mode #story-create-modal .story-control-section textarea::placeholder,
body.light-mode #story-create-modal .story-control-section input::placeholder { color: #8b7864; }
body.light-mode #story-create-modal .story-format-btn,
body.light-mode #story-create-modal .story-tool-btn,
body.light-mode #story-create-modal .story-rotate-btn,
body.light-mode #story-create-modal .story-emoji-inline-btn {
    background: rgba(255, 250, 241, .72);
    color: #5d4b37;
    border-color: rgba(91, 70, 45, .18);
}
body.light-mode #story-create-modal .story-format-btn:hover,
body.light-mode #story-create-modal .story-format-btn.active,
body.light-mode #story-create-modal .story-tool-btn:hover,
body.light-mode #story-create-modal .story-rotate-btn:hover,
body.light-mode #story-create-modal .story-emoji-inline-btn:hover {
    background: rgba(229, 158, 0, .12);
    color: #8a5d12;
    border-color: rgba(151, 105, 34, .45);
}
body.light-mode #story-create-modal .story-format-hint,
body.light-mode #story-create-modal .story-format-label,
body.light-mode #story-create-modal .story-control-hint,
body.light-mode #story-create-modal .story-style-fixed-note,
body.light-mode #story-create-modal .story-editor-note,
body.light-mode #story-create-modal .story-editor-help { color: #75624e; }
body.light-mode #story-create-modal .story-editor-stage {
    background: #eee2d0;
    border-color: rgba(151, 105, 34, .48);
    box-shadow: 0 18px 48px rgba(67, 48, 29, .20), 0 0 0 1px rgba(255, 250, 240, .46) inset;
}
body.light-mode #story-create-modal .story-editor-media-placeholder {
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 251, 242, .80), transparent 42%),
        linear-gradient(145deg, #eee3d2, #d9c5a8);
    color: #5d4c38;
}
body.light-mode #story-create-modal .story-editor-media-placeholder small { color: #806e59; }
body.light-mode #story-create-modal .story-upload-icon { color: #a56f12; }
body.light-mode #story-create-modal .story-editor-safe {
    border-color: rgba(91, 70, 45, .08);
    background: linear-gradient(to bottom, rgba(255,255,255,.10), transparent 18%, transparent 78%, rgba(91,70,45,.05));
}
body.light-mode #story-create-modal .story-preview-controls,
body.light-mode #story-create-modal .story-mobile-editor-bar,
body.light-mode #story-create-modal .story-page-pager {
    background: rgba(246, 236, 220, .90);
    border-color: rgba(91, 70, 45, .16);
    box-shadow: 0 12px 30px rgba(67, 48, 29, .16), inset 0 1px 0 rgba(255,255,255,.50);
}
body.light-mode #story-create-modal .story-preview-control-btn,
body.light-mode #story-create-modal .story-preview-volume-btn,
body.light-mode #story-create-modal .story-mobile-tool {
    color: #5c4b38;
    background: rgba(255, 250, 241, .56);
    border-color: rgba(91, 70, 45, .14);
}
body.light-mode #story-create-modal .story-preview-time,
body.light-mode #story-create-modal .story-preview-duration { color: #685642; }
body.light-mode #story-create-modal .story-form-footer {
    background: linear-gradient(180deg, transparent, rgba(225, 208, 184, .96) 34%);
}

body.light-mode #story-viewer-modal .story-viewer-backdrop,
body.light-mode #story-viewers-modal .story-viewer-backdrop {
    background: rgba(74, 57, 39, .20);
    backdrop-filter: blur(3px);
}
body.light-mode #story-viewer-modal .story-viewer-shell {
    background: linear-gradient(145deg, #efe3d1, #d8c3a5);
    border-color: rgba(151, 105, 34, .42);
    box-shadow: 0 26px 90px rgba(62, 45, 27, .30), 0 0 0 1px rgba(255, 250, 240, .40) inset;
}
body.light-mode #story-viewer-modal .story-viewer-card { background: linear-gradient(145deg, #e9dbc7, #d5bea0); }
body.light-mode #story-viewer-modal .story-viewer-media-stage {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 250, 239, .55), transparent 48%),
        linear-gradient(145deg, #e7dac8, #d3bea2);
}
body.light-mode #story-viewer-modal .story-viewer-media { background: transparent; }
body.light-mode #story-viewer-modal .story-viewer-gradient {
    background: linear-gradient(to bottom, rgba(65, 48, 32, .22), transparent 24%, transparent 68%, rgba(65, 48, 32, .28));
}
body.light-mode #story-viewer-modal .story-profile-link,
body.light-mode #story-viewer-modal .story-viewer-caption,
body.light-mode #story-viewer-modal .story-viewer-bottom-hint { color: #3d3023; }
body.light-mode #story-viewer-modal .story-profile-link strong { color: #33271c; }
body.light-mode #story-viewer-modal .story-profile-link small,
body.light-mode #story-viewer-modal .story-viewer-bottom-hint { color: #705d48; }
body.light-mode #story-viewer-modal .story-pause-toggle,
body.light-mode #story-viewer-modal .story-viewers-button,
body.light-mode #story-viewer-modal .story-nav,
body.light-mode #story-viewer-modal .story-viewer-play,
body.light-mode #story-viewer-modal .story-viewer-volume-btn {
    background: rgba(248, 239, 225, .82);
    color: #51402e;
    border-color: rgba(91, 70, 45, .20);
    box-shadow: 0 5px 16px rgba(62, 45, 27, .10);
}
body.light-mode #story-viewer-modal .story-pause-toggle:hover,
body.light-mode #story-viewer-modal .story-viewers-button:hover,
body.light-mode #story-viewer-modal .story-nav:hover:not(:disabled),
body.light-mode #story-viewer-modal .story-viewer-play:hover,
body.light-mode #story-viewer-modal .story-viewer-volume-btn:hover {
    background: rgba(229, 158, 0, .16);
    border-color: rgba(151, 105, 34, .48);
    color: #754d0b;
}
body.light-mode #story-viewer-modal .story-viewer-media-controls {
    background: rgba(244, 232, 213, .88);
    border-color: rgba(91, 70, 45, .18);
    box-shadow: 0 8px 24px rgba(62, 45, 27, .14);
}
body.light-mode #story-viewer-modal .story-viewer-time { color: #624f3b; }
body.light-mode #story-viewer-modal .story-viewer-close {
    color: #4c3c2b;
    text-shadow: 0 1px 2px rgba(255,255,255,.45);
}
body.light-mode #story-viewer-modal .story-viewer-close:hover { color: #8a5d12; }
body.light-mode #story-viewers-modal .story-viewers-panel {
    background: linear-gradient(145deg, #efe3d1, #d9c5a9);
    color: #3d3023;
    border-color: rgba(151, 105, 34, .42);
    box-shadow: 0 22px 65px rgba(62, 45, 27, .26);
}
body.light-mode #story-viewers-modal .story-viewers-summary {
    color: #705d48;
    border-bottom-color: rgba(91, 70, 45, .15);
}
body.light-mode #story-viewers-modal .story-viewer-row { color: #3d3023; }
body.light-mode #story-viewers-modal .story-viewer-row:hover { background: rgba(229, 158, 0, .10); }
body.light-mode #story-viewers-modal .story-viewer-row small,
body.light-mode #story-viewers-modal .story-viewers-empty { color: #806d58; }

@media (max-width: 700px) {
    body.light-mode #story-create-modal .story-create-panel { background: linear-gradient(145deg, #eee1cf, #d9c3a5); }
    body.light-mode #story-create-modal .story-modal-header {
        background: linear-gradient(180deg, rgba(247, 239, 226, .97), rgba(228, 210, 186, .97));
    }
    body.light-mode #story-create-modal .story-editor-layout {
        background:
            radial-gradient(circle at 50% 30%, rgba(255, 250, 240, .42), transparent 40%),
            linear-gradient(145deg, #eadcc9, #d5bea0);
    }
    body.light-mode #story-create-modal .story-mobile-sheet-panel {
        background: linear-gradient(180deg, #f0e4d2, #ddc8aa);
        border-color: rgba(151, 105, 34, .28);
        box-shadow: 0 -18px 50px rgba(62, 45, 27, .22);
    }
    body.light-mode #story-create-modal .story-mobile-sheet-head { border-bottom-color: rgba(91, 70, 45, .15); }
    body.light-mode #story-create-modal .story-mobile-sheet-head h4 { color: #3d3023; }
    body.light-mode #story-create-modal .story-mobile-sheet-close {
        background: rgba(255, 250, 241, .70);
        color: #5c4b38;
        border-color: rgba(91, 70, 45, .18);
    }
    body.light-mode #story-create-modal .story-form-footer {
        background: linear-gradient(180deg, transparent, rgba(218, 199, 172, .96) 30%);
    }
}

/* Mobile story creator — Light theme final override */
@media (max-width: 700px) {
    html body.light-mode #story-create-modal .story-create-panel {
        background: linear-gradient(145deg, #f4eadb, #ddc8aa);
        border-color: rgba(151, 105, 34, .42);
        box-shadow: 0 18px 55px rgba(62, 45, 27, .24), 0 0 0 1px rgba(255,255,255,.48) inset;
    }
    html body.light-mode #story-create-modal .story-modal-header {
        background: linear-gradient(180deg, #f8f0e3, #e7d5ba);
        border-bottom-color: rgba(91, 70, 45, .16);
        color: #3d3023;
    }
    html body.light-mode #story-create-modal .story-modal-header h3 { color: #33271c; }
    html body.light-mode #story-create-modal .story-kicker { color: #9a6914; }
    html body.light-mode #story-create-modal .story-close {
        color: #5c4b38;
        background: rgba(255,250,241,.72);
        border-color: rgba(91,70,45,.16);
    }
    html body.light-mode #story-create-modal .story-editor-layout {
        background: linear-gradient(145deg, #eee1cf, #d8c2a4);
    }
    html body.light-mode #story-create-modal .story-editor-stage {
        background: #e8dbc9;
        border-color: rgba(151,105,34,.42);
        box-shadow: 0 16px 42px rgba(62,45,27,.18), 0 0 0 1px rgba(255,250,240,.45) inset;
    }
    html body.light-mode #story-create-modal .story-editor-media-placeholder {
        background:
            radial-gradient(circle at 50% 38%, rgba(255,251,242,.84), transparent 42%),
            linear-gradient(145deg, #eee3d2, #d7c1a3);
        color: #5d4c38;
    }
    html body.light-mode #story-create-modal .story-editor-media-placeholder small { color: #806e59; }
    html body.light-mode #story-create-modal .story-upload-icon { color: #a56f12; }
    html body.light-mode #story-create-modal .story-editor-safe {
        border-color: rgba(91,70,45,.08);
        background: linear-gradient(to bottom, rgba(255,255,255,.12), transparent 18%, transparent 78%, rgba(91,70,45,.05));
    }
    html body.light-mode #story-create-modal .story-editor-help { color: #75624e; }
    html body.light-mode #story-create-modal .story-mobile-editor-bar {
        background: rgba(246,236,220,.94);
        border-color: rgba(151,105,34,.28);
        box-shadow: 0 12px 35px rgba(62,45,27,.20);
    }
    html body.light-mode #story-create-modal .story-mobile-tool {
        color: #665441;
        background: rgba(255,250,241,.52);
        border-color: rgba(91,70,45,.14);
    }
    html body.light-mode #story-create-modal .story-mobile-tool:active,
    html body.light-mode #story-create-modal .story-mobile-tool:focus-visible {
        color: #8a5d12;
        border-color: rgba(151,105,34,.52);
        background: rgba(229,158,0,.12);
    }
    html body.light-mode #story-create-modal .story-page-pager {
        background: rgba(246,236,220,.94);
        border-color: rgba(91,70,45,.14);
        color: #5d4b37;
        box-shadow: 0 8px 24px rgba(62,45,27,.12);
    }
    html body.light-mode #story-create-modal .story-mobile-sheet-panel {
        background: linear-gradient(180deg, #f0e4d2, #ddc8aa);
        border-color: rgba(151,105,34,.28);
        box-shadow: 0 -18px 50px rgba(62,45,27,.22);
    }
    html body.light-mode #story-create-modal .story-mobile-sheet-head {
        border-bottom-color: rgba(91,70,45,.15);
    }
    html body.light-mode #story-create-modal .story-mobile-sheet-head h4 { color: #3d3023; }
    html body.light-mode #story-create-modal .story-mobile-sheet-close {
        background: rgba(255,250,241,.70);
        color: #5c4b38;
        border-color: rgba(91,70,45,.18);
    }
    html body.light-mode #story-create-modal .story-mobile-sheet-backdrop { background: rgba(74,57,39,.22); }
    html body.light-mode #story-create-modal .story-form-footer {
        background: linear-gradient(180deg, transparent, rgba(218,199,172,.96) 30%);
    }
}

/* PATCH 20 — Mobile Story Creator: force Light styling on the actual modal + external mobile sheet. */
@media (max-width:700px){
  body:not(.dark-mode) #story-create-modal,
  body:not(.dark-mode) #story-create-modal .story-create-panel{
    background:linear-gradient(145deg,#f5ecdf 0%,#e5d2b7 100%);
    color:#3b3026;
    border-color:rgba(151,105,34,.40);
  }
  body:not(.dark-mode) #story-create-modal .story-modal-header{
    background:linear-gradient(180deg,#faf3e8,#e7d6bd);
    color:#33281e;
    border-bottom-color:rgba(91,70,45,.16);
  }
  body:not(.dark-mode) #story-create-modal .story-modal-header h3,
  body:not(.dark-mode) #story-create-modal .story-section-heading,
  body:not(.dark-mode) #story-create-modal .story-control-section label,
  body:not(.dark-mode) #story-create-modal .story-control-section strong{color:#3b3026;}
  body:not(.dark-mode) #story-create-modal .story-kicker{color:#9a6914;}
  body:not(.dark-mode) #story-create-modal .story-close{
    background:#f3eadc;
    color:#5b4b39;
    border-color:rgba(91,70,45,.22);
  }
  body:not(.dark-mode) #story-create-modal .story-editor-layout{
    background:linear-gradient(145deg,#eee2d0,#d9c4a7);
  }
  body:not(.dark-mode) #story-create-modal .story-editor-stage{
    background:#eadfce;
    border-color:rgba(151,105,34,.42);
  }
  body:not(.dark-mode) #story-create-modal .story-editor-media-placeholder{
    background:linear-gradient(145deg,#f1e7d8,#dcc7a8);
    color:#5d4c38;
  }
  body:not(.dark-mode) #story-create-modal .story-editor-media-placeholder small,
  body:not(.dark-mode) #story-create-modal .story-editor-help,
  body:not(.dark-mode) #story-create-modal .story-control-hint,
  body:not(.dark-mode) #story-create-modal .story-editor-note{color:#75624e;}
  body:not(.dark-mode) #story-create-modal .story-mobile-editor-bar{
    background:rgba(248,240,229,.96);
    border-color:rgba(151,105,34,.30);
    box-shadow:0 12px 35px rgba(62,45,27,.20);
  }
  body:not(.dark-mode) #story-create-modal .story-mobile-tool{
    color:#5d4b38;
    background:#f6eee2;
    border-color:rgba(91,70,45,.18);
  }
  body:not(.dark-mode) #story-create-modal .story-mobile-tool.is-active{
    color:#8a5d12;
    background:rgba(229,158,0,.14);
    border-color:rgba(151,105,34,.48);
  }
  body:not(.dark-mode) #story-create-modal .story-form-footer .btn{
    background:linear-gradient(180deg,#e9b22e,#c88b08);
    color:#fff8eb;
    border-color:#a96f08;
    box-shadow:0 8px 22px rgba(151,105,34,.22);
  }

  /* The mobile inspector is a sibling of #story-create-modal, so it needs its own Light selectors. */
  body:not(.dark-mode) #story-mobile-sheet .story-mobile-sheet-backdrop{background:rgba(74,57,39,.20);}
  body:not(.dark-mode) #story-mobile-sheet .story-mobile-sheet-panel{
    background:linear-gradient(180deg,#f4e9d8,#dfc9aa);
    color:#3b3026;
    border-color:rgba(151,105,34,.32);
    box-shadow:0 18px 55px rgba(62,45,27,.24),0 0 0 1px rgba(255,255,255,.42) inset;
  }
  body:not(.dark-mode) #story-mobile-sheet .story-mobile-sheet-head{
    background:linear-gradient(180deg,#faf3e8,#e8d7bd);
    border-bottom-color:rgba(91,70,45,.16);
  }
  body:not(.dark-mode) #story-mobile-sheet .story-mobile-sheet-head h4{color:#3b3026;}
  body:not(.dark-mode) #story-mobile-sheet .story-mobile-sheet-close{
    background:#f4eadc;
    color:#5c4b38;
    border-color:rgba(91,70,45,.20);
  }
  body:not(.dark-mode) #story-mobile-sheet .story-control-section{
    background:rgba(255,250,241,.62);
    border-color:rgba(91,70,45,.16);
    box-shadow:0 5px 15px rgba(62,45,27,.06);
  }
  body:not(.dark-mode) #story-mobile-sheet .story-control-section label,
  body:not(.dark-mode) #story-mobile-sheet .story-control-section strong,
  body:not(.dark-mode) #story-mobile-sheet .story-section-heading{color:#4a3a2a;}
  body:not(.dark-mode) #story-mobile-sheet input,
  body:not(.dark-mode) #story-mobile-sheet textarea,
  body:not(.dark-mode) #story-mobile-sheet select{
    background:#fbf5eb;
    color:#3b3026;
    border-color:rgba(91,70,45,.22);
  }
  body:not(.dark-mode) #story-mobile-sheet .story-mobile-option-label,
  body:not(.dark-mode) #story-mobile-sheet .story-editor-note{color:#75624e;}
  body:not(.dark-mode) #story-mobile-sheet .story-mobile-segmented button{
    background:#f7efe3;
    color:#665441;
    border-color:rgba(91,70,45,.18);
  }
  body:not(.dark-mode) #story-mobile-sheet .story-mobile-segmented button.is-active{
    color:#8a5d12;
    background:rgba(229,158,0,.13);
    border-color:rgba(151,105,34,.48);
  }
  body:not(.dark-mode) #story-mobile-sheet .story-mobile-color-row label{
    background:#f7efe3;
    color:#665441;
    border-color:rgba(91,70,45,.18);
  }
  body:not(.dark-mode) #story-mobile-sheet .story-trim-track{background:rgba(91,70,45,.20);}
  body:not(.dark-mode) #story-mobile-sheet .story-trim-handle{background:#fbf5eb;}
}