/*
 * DROPX STORY STUDIO — DESKTOP PRESENTATION
 * Scope: min-width 701px only.
 * Mobile Story Studio is intentionally untouched.
 */
@media (min-width: 701px) {
  #story-create-modal .story-create-panel {
    width: min(1240px, calc(100vw - 44px));
    max-height: min(900px, calc(100vh - 36px));
    background:
      radial-gradient(circle at 24% 35%, rgba(229,158,0,.045), transparent 34%),
      linear-gradient(145deg, #151513 0%, #0d0e10 58%, #090a0c 100%);
    border: 1px solid rgba(229,158,0,.48);
    border-radius: 18px;
    box-shadow: 0 30px 100px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.025) inset;
  }

  #story-create-modal .story-modal-header {
    min-height: 76px;
    padding: 17px 24px 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0));
    border-bottom: 1px solid rgba(255,255,255,.075);
  }

  #story-create-modal .story-modal-header h3 {
    font-size: 1.55rem;
    letter-spacing: .015em;
  }

  #story-create-modal .story-kicker {
    font-size: .62rem;
    letter-spacing: .22em;
  }

  #story-create-modal .story-close {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    color: rgba(255,255,255,.58);
    background: rgba(255,255,255,.025);
    transition: .18s ease;
  }

  #story-create-modal .story-close:hover {
    color: #fff;
    border-color: rgba(229,158,0,.58);
    background: rgba(229,158,0,.09);
    transform: rotate(90deg);
  }

  #story-create-modal .story-create-panel > form {
    min-height: 0;
  }

  #story-create-modal .story-editor-layout {
    display: grid;
    grid-template-columns: minmax(430px, 0.92fr) minmax(500px, 1.08fr);
    gap: 22px;
    padding: 18px 20px 16px;
    overflow: hidden;
    align-items: stretch;
    background: linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,0));
  }

  #story-create-modal .story-editor-stage-wrap {
    min-width: 0;
    min-height: 0;
    padding: 2px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #story-create-modal .story-editor-stage {
    width: auto;
    height: min(71vh, 690px);
    max-height: calc(100% - 4px);
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    border: 1px solid rgba(229,158,0,.50);
    background: #030405;
    box-shadow: 0 22px 55px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.025) inset;
  }

  #story-create-modal .story-editor-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 7;
    border-radius: inherit;
    box-shadow: inset 0 0 70px rgba(0,0,0,.28);
  }

  #story-create-modal .story-editor-help {
    width: min(420px, 100%);
    margin: 9px auto 0;
    color: rgba(255,255,255,.36);
    font-size: .62rem;
    line-height: 1.35;
    font-style: italic;
  }

  #story-create-modal .story-editor-controls {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 5px 8px 1px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(229,158,0,.55) transparent;
  }

  #story-create-modal .story-editor-controls::-webkit-scrollbar {
    width: 7px;
  }

  #story-create-modal .story-editor-controls::-webkit-scrollbar-thumb {
    background: rgba(229,158,0,.48);
    border-radius: 99px;
  }

  #story-create-modal .story-control-section {
    margin: 0;
    padding: 14px;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,.075);
    background: linear-gradient(145deg, rgba(24,25,28,.92), rgba(11,12,14,.92));
    box-shadow: 0 10px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  }

  #story-create-modal .story-control-section:hover {
    border-color: rgba(229,158,0,.22);
    box-shadow: 0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.045);
  }

  #story-create-modal .story-control-section label {
    margin-bottom: 7px;
    color: #e7e2da;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .035em;
  }

  #story-create-modal .story-control-primary {
    min-height: 44px;
    border-radius: 10px;
    border-color: rgba(229,158,0,.55);
    background: linear-gradient(135deg, rgba(229,158,0,.13), rgba(229,158,0,.035));
    color: #ffc21a;
    font-size: .78rem;
    letter-spacing: .035em;
    transition: .18s ease;
  }

  #story-create-modal .story-control-primary:hover {
    border-color: #e59e00;
    background: linear-gradient(135deg, rgba(229,158,0,.20), rgba(229,158,0,.06));
    box-shadow: 0 0 24px rgba(229,158,0,.10);
    transform: translateY(-1px);
  }

  #story-create-modal .story-control-hint,
  #story-create-modal .story-style-fixed-note,
  #story-create-modal .story-editor-note {
    color: rgba(255,255,255,.40);
    font-size: .61rem;
    line-height: 1.35;
    font-style: italic;
  }

  #story-create-modal .story-control-hint {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 9px;
    background: rgba(0,0,0,.20);
    border-color: rgba(255,255,255,.055);
  }

  #story-create-modal .story-control-section textarea,
  #story-create-modal .story-control-section input[type="url"],
  #story-create-modal .story-control-section input[type="text"],
  #story-create-modal .story-font-select {
    min-height: 42px;
    border-radius: 10px;
    background: rgba(3,4,6,.72);
    border-color: rgba(255,255,255,.09);
    color: #f4f2ee;
    font-size: .86rem;
    transition: .18s ease;
  }

  #story-create-modal .story-control-section textarea {
    min-height: 92px;
    resize: vertical;
    line-height: 1.45;
  }

  #story-create-modal .story-control-section textarea:focus,
  #story-create-modal .story-control-section input:focus,
  #story-create-modal .story-font-select:focus {
    border-color: rgba(229,158,0,.72);
    box-shadow: 0 0 0 3px rgba(229,158,0,.07);
  }

  #story-create-modal .story-mobile-text-tools {
    display: grid;
    grid-template-columns: 38px 38px 38px minmax(0,1fr);
    gap: 6px;
    margin-top: 8px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 11px;
    background: rgba(0,0,0,.20);
  }

  #story-create-modal .story-mobile-format-btn {
    width: 38px;
    height: 34px;
    border-radius: 8px;
    border-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.035);
    color: #d7d3cc;
  }

  #story-create-modal .story-mobile-format-btn:hover,
  #story-create-modal .story-mobile-format-btn.is-active {
    color: #ffc21a;
    border-color: rgba(229,158,0,.65);
    background: rgba(229,158,0,.10);
  }

  #story-create-modal #story-mobile-caption-style {
    min-height: 34px;
    font-size: .70rem;
  }

  #story-create-modal .story-mobile-format-hint {
    margin-top: 6px;
    color: rgba(255,255,255,.32);
    font-size: .58rem;
    font-style: italic;
  }

  #story-create-modal .story-desktop-emoji-controls {
    margin-top: 8px;
  }

  #story-create-modal .story-desktop-emoji-controls .story-tool-btn {
    min-height: 38px;
    border-radius: 9px;
  }

  #story-create-modal .story-mobile-link-options {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.055);
  }

  #story-create-modal .story-mobile-segmented {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  #story-create-modal .story-mobile-segmented button,
  #story-create-modal .story-tool-btn {
    min-height: 38px;
    border-radius: 9px;
    border-color: rgba(229,158,0,.24);
    background: rgba(255,255,255,.025);
    color: #bcb7af;
    font-size: .68rem;
    transition: .18s ease;
  }

  #story-create-modal .story-mobile-segmented button:hover,
  #story-create-modal .story-tool-btn:hover {
    color: #ffc21a;
    border-color: rgba(229,158,0,.62);
    background: rgba(229,158,0,.08);
  }

  #story-create-modal .story-mobile-color-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 8px;
  }

  #story-create-modal .story-mobile-color-row label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 38px;
    margin: 0;
    padding: 6px 8px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.025);
    font-size: .63rem;
    color: #aaa49a;
  }

  #story-create-modal .story-mobile-color-row input[type="color"] {
    width: 32px;
    height: 25px;
    min-height: 0;
    padding: 0;
    border-radius: 6px;
  }

  #story-create-modal .story-transform-controls {
    border-color: rgba(229,158,0,.14);
    background: linear-gradient(145deg, rgba(229,158,0,.055), rgba(10,11,13,.94));
  }

  #story-create-modal .story-appearance-group {
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid rgba(255,255,255,.055);
  }

  #story-create-modal .story-format-row {
    display: flex;
    gap: 6px;
    margin-top: 7px;
  }

  #story-create-modal .story-format-btn {
    width: 38px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.035);
    color: #d7d3cc;
    cursor: pointer;
    transition: .18s ease;
  }

  #story-create-modal .story-format-btn:hover,
  #story-create-modal .story-format-btn.is-active {
    color: #ffc21a;
    border-color: rgba(229,158,0,.65);
    background: rgba(229,158,0,.10);
  }

  #story-create-modal .story-color-picker-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) 38px auto;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    min-height: 36px;
    padding: 5px 8px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.065);
    background: rgba(255,255,255,.02);
  }

  #story-create-modal .story-color-picker-row span {
    color: #aaa49a;
    font-size: .65rem;
  }

  #story-create-modal .story-color-picker-row input[type="color"] {
    width: 34px;
    height: 26px;
    padding: 0;
    border-radius: 6px;
  }

  #story-create-modal .story-color-picker-row output {
    min-width: 62px;
    color: rgba(255,255,255,.48);
    font: 600 .58rem/1 'JetBrains Mono',monospace;
    text-align: right;
  }

  #story-create-modal .story-video-trim-left {
    width: 100%;
    margin-top: 10px;
    padding: 13px;
    border-radius: 13px;
    border: 1px solid rgba(229,158,0,.20);
    background: rgba(10,11,13,.92);
  }

  #story-create-modal .story-trim-track-wrap {
    height: 42px;
    margin-top: 10px;
  }

  #story-create-modal .story-trim-track {
    top: 16px;
    height: 8px;
  }

  #story-create-modal .story-trim-times {
    font-size: .60rem;
  }

  #story-create-modal .story-form-footer {
    min-height: 66px;
    padding: 11px 20px;
    border-top: 1px solid rgba(255,255,255,.075);
    background: rgba(7,8,10,.62);
    backdrop-filter: blur(14px);
    box-shadow: 0 -10px 30px rgba(0,0,0,.16);
  }

  #story-create-modal .story-form-footer span {
    color: rgba(255,255,255,.40);
    font-size: .64rem;
    font-style: italic;
  }

  #story-create-modal .story-form-footer .btn {
    min-height: 42px;
    min-width: 168px;
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid rgba(229,158,0,.70);
    background: linear-gradient(135deg, rgba(229,158,0,.16), rgba(229,158,0,.045));
    box-shadow: 0 8px 26px rgba(0,0,0,.30), 0 0 24px rgba(229,158,0,.06);
    color: #ffc21a;
    font-size: .74rem;
    letter-spacing: .07em;
    transition: .18s ease;
  }

  #story-create-modal .story-form-footer .btn:hover {
    border-color: #e59e00;
    background: linear-gradient(135deg, rgba(229,158,0,.23), rgba(229,158,0,.07));
    box-shadow: 0 10px 30px rgba(0,0,0,.34), 0 0 28px rgba(229,158,0,.10);
    transform: translateY(-1px);
  }

  /* Mobile-only infrastructure must never leak into the desktop editor. */
  #story-create-modal .story-mobile-editor-bar,
  #story-create-modal .story-mobile-sheet {
    display: none;
  }
}

@media (min-width: 701px) and (max-height: 820px) {
  #story-create-modal .story-modal-header { min-height: 66px; padding-top: 13px; padding-bottom: 12px; }
  #story-create-modal .story-editor-layout { padding-top: 12px; padding-bottom: 10px; gap: 18px; }
  #story-create-modal .story-editor-stage { height: min(66vh, 600px); }
  #story-create-modal .story-control-section { padding: 11px; }
  #story-create-modal .story-form-footer { min-height: 58px; padding-top: 8px; padding-bottom: 8px; }
}

/* V33 — desktop Story Studio refinement. Mobile layout remains isolated in stories.css. */
@media (min-width:701px){
  #story-create-modal .story-editor-layout{
    grid-template-columns:minmax(420px,.88fr) minmax(560px,1.12fr);
    column-gap:0;
    padding:20px 22px 18px;
  }
  #story-create-modal .story-editor-stage-wrap{
    position:relative;
    padding-right:28px;
  }
  #story-create-modal .story-editor-stage-wrap::before{
    content:"ELŐNÉZET";
    display:block;
    width:min(420px,100%);
    margin:0 auto 8px;
    color:rgba(255,255,255,.48);
    font:800 .58rem/1 'Orbitron',sans-serif;
    letter-spacing:.22em;
  }
  #story-create-modal .story-editor-stage-wrap::after{
    content:"";
    position:absolute;
    top:2px;
    right:0;
    bottom:0;
    width:1px;
    background:linear-gradient(180deg,transparent,rgba(229,158,0,.35) 14%,rgba(255,255,255,.08) 50%,rgba(229,158,0,.25) 86%,transparent);
    pointer-events:none;
  }
  #story-create-modal .story-editor-controls{
    padding:2px 4px 10px 26px;
    gap:12px;
  }
  #story-create-modal .story-editor-controls > .story-control-section{
    position:relative;
    padding:15px 16px;
    border-radius:15px;
    background:linear-gradient(145deg,rgba(23,24,27,.94),rgba(9,10,12,.96));
    border-color:rgba(255,255,255,.075);
  }
  #story-create-modal .story-editor-controls > .story-control-section:hover{
    transform:none;
    border-color:rgba(229,158,0,.24);
  }
  #story-create-modal .story-editor-controls > .story-control-section:nth-child(1){order:1}
  #story-create-modal .story-editor-controls > .story-transform-controls{order:2}
  #story-create-modal .story-editor-controls > .story-text-section{order:3}
  #story-create-modal .story-editor-controls > .story-link-section{order:4}
  #story-create-modal .story-editor-controls > .story-editor-note{order:5}

  #story-create-modal .story-section-heading{
    display:flex;align-items:center;gap:10px;margin-bottom:12px;
  }
  #story-create-modal .story-section-heading label{margin:0;font-size:.78rem;letter-spacing:.04em;color:#f2eee7}
  #story-create-modal .story-section-heading small{display:block;margin-top:2px;color:rgba(255,255,255,.42);font-size:.58rem;font-style:italic;font-weight:500}
  #story-create-modal .story-section-step{
    width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
    border:1px solid rgba(229,158,0,.28);background:rgba(229,158,0,.07);color:#e59e00;
    font:800 .55rem/1 'Orbitron',sans-serif;
  }

  #story-create-modal #story-caption{
    display:none;
  }
  #story-create-modal .story-desktop-caption-editor{
    position:absolute;z-index:20;display:block;min-width:70px;max-width:86%;pointer-events:auto;
    padding:7px 11px;border:1px dashed rgba(229,158,0,.38);border-radius:9px;
    background:rgba(0,0,0,.22);color:#fff;text-align:center;line-height:1.18;
    white-space:pre-wrap;word-break:break-word;outline:none;cursor:text;user-select:text;
    text-shadow:var(--story-caption-shadow,0 2px 8px #000);
    transform-origin:center;box-shadow:0 0 0 0 rgba(229,158,0,0);
    transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
  }
  #story-create-modal .story-desktop-caption-editor.is-empty::before{
    content:attr(data-placeholder);color:rgba(255,255,255,.38);font:600 .78rem/1.2 'Rajdhani',sans-serif;font-style:italic;
  }
  #story-create-modal .story-desktop-caption-editor.is-editing{
    border-color:rgba(229,158,0,.8);background:rgba(5,6,8,.44);box-shadow:0 0 0 3px rgba(229,158,0,.08);
  }
  #story-create-modal .story-desktop-caption-editor .story-rotate-handle,
  #story-create-modal .story-desktop-caption-editor .story-scale-handle,
  #story-create-modal .story-link-overlay .story-scale-handle{
    position:absolute;z-index:30;width:25px;height:25px;display:grid;place-items:center;padding:0;
    border:1px solid rgba(229,158,0,.85);border-radius:50%;background:rgba(10,11,13,.86);
    color:#e59e00;box-shadow:0 4px 14px rgba(0,0,0,.42);cursor:grab;touch-action:none;
  }
  #story-create-modal .story-desktop-caption-editor .story-rotate-handle,
  #story-create-modal .story-link-overlay .story-rotate-handle{right:-12px;top:-12px}
  #story-create-modal .story-desktop-caption-editor .story-scale-handle,
  #story-create-modal .story-link-overlay .story-scale-handle{right:-12px;bottom:-12px}
  #story-create-modal .story-rotate-handle svg,#story-create-modal .story-scale-handle svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

  #story-create-modal .story-desktop-text-format-bar,
  #story-create-modal .story-desktop-link-format-bar{
    display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:9px;
  }
  #story-create-modal .story-desktop-text-format-bar .story-font-select{flex:1 1 150px;min-width:150px}
  #story-create-modal .story-format-btn{
    width:34px;height:34px;padding:0;border-radius:9px;border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.035);color:#d9d5ce;display:grid;place-items:center;cursor:pointer;
  }
  #story-create-modal .story-format-btn:hover,#story-create-modal .story-format-btn.active{color:#ffc21a;border-color:rgba(229,158,0,.68);background:rgba(229,158,0,.09)}
  #story-create-modal .story-inline-color{display:inline-flex!important;align-items:center;gap:6px!important;margin:0!important;padding:4px 6px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:rgba(255,255,255,.025);color:rgba(255,255,255,.52)!important;font-size:.54rem!important;font-weight:600!important}
  #story-create-modal .story-inline-color span{display:inline!important;margin:0!important;color:inherit!important;font-size:inherit!important}
  #story-create-modal .story-inline-color input[type=color]{width:25px;height:25px;padding:2px;border:1px solid rgba(255,255,255,.12);border-radius:7px;background:#0a0b0d;cursor:pointer}
  #story-create-modal .story-desktop-caption-hint,
  #story-create-modal .story-editor-note,
  #story-create-modal .story-control-hint{font-size:.57rem;line-height:1.3;font-style:italic;font-weight:500;color:rgba(255,255,255,.38)}
  #story-create-modal .story-desktop-caption-hint{margin:3px 0 8px}
  #story-create-modal .story-mobile-format-hint,#story-create-modal .story-mobile-text-tools,#story-create-modal .story-mobile-link-options{display:none}

  #story-create-modal .story-link-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:8px}
  #story-create-modal .story-link-style-row{display:flex;align-items:center;gap:10px;margin-top:10px}
  #story-create-modal .story-link-style-row > span{color:rgba(255,255,255,.44);font-size:.58rem;font-weight:700;white-space:nowrap}
  #story-create-modal .story-segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;flex:1}
  #story-create-modal .story-segmented button{min-height:34px;padding:0 9px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:rgba(255,255,255,.025);color:#bdb8b0;font:700 .58rem 'Rajdhani',sans-serif;cursor:pointer}
  #story-create-modal .story-segmented button:hover,#story-create-modal .story-segmented button.is-active{color:#ffc21a;border-color:rgba(229,158,0,.62);background:rgba(229,158,0,.08)}
  #story-create-modal .story-desktop-link-format-bar{margin-top:9px;margin-bottom:0}

  #story-create-modal .story-transform-controls .story-control-row{margin-top:7px}
  #story-create-modal .story-transform-controls input[type=range]{accent-color:#e59e00}
  #story-create-modal .story-transform-controls .story-tool-btn{min-height:34px;font-size:.62rem}
  #story-create-modal .story-editor-note{padding:2px 4px 8px}
  #story-create-modal .story-form-footer{min-height:62px;padding:12px 18px;background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(0,0,0,.12));}
  #story-create-modal .story-form-footer span{font-size:.58rem;font-style:italic;color:rgba(255,255,255,.38)}
  #story-create-modal .story-form-footer .btn{min-width:150px;border-radius:12px}
}

@media (max-width:700px){
  #story-create-modal .story-desktop-caption-editor{display:none}
}


/* V34 — desktop canvas interaction cleanup. Mobile is isolated in stories_mobile_v34.css. */
@media (min-width:701px){
  #story-create-modal .story-section-step{display:none!important;}
  #story-create-modal .story-section-heading{gap:0;margin-bottom:10px;}
  #story-create-modal .story-section-heading label{font-size:.82rem;}
  #story-create-modal .story-section-heading small{font-size:.55rem;}

  /* Compact, consistent formatting controls. */
  #story-create-modal .story-format-btn{
    width:30px;height:30px;min-width:30px;border-radius:8px;font-size:.72rem;
  }
  #story-create-modal .story-format-btn em,
  #story-create-modal .story-format-btn i{font-size:.78rem;line-height:1;font-style:italic;}
  #story-create-modal .story-inline-color{padding:3px 5px;font-size:.50rem!important;}
  #story-create-modal .story-inline-color input[type=color]{width:22px;height:22px;}

  /* The canvas itself is the primary text editor. */
  #story-create-modal .story-desktop-caption-editor{
    pointer-events:auto;
    cursor:text;
    min-width:90px;
    min-height:34px;
  }
  #story-create-modal .story-desktop-caption-editor:focus{cursor:text;}

  /* Small SVG-style handles; never dominate the Story canvas. */
  #story-create-modal .story-desktop-caption-editor .story-rotate-handle,
  #story-create-modal .story-desktop-caption-editor .story-scale-handle,
  #story-create-modal .story-link-overlay .story-rotate-handle,
  #story-create-modal .story-link-overlay .story-scale-handle{
    width:22px;height:22px;font-size:0;
  }
  #story-create-modal .story-desktop-caption-editor .story-rotate-handle::before,
  #story-create-modal .story-link-overlay .story-rotate-handle::before{
    content:'↻';font:700 11px/1 Arial,sans-serif;
  }
  #story-create-modal .story-desktop-caption-editor .story-scale-handle::before,
  #story-create-modal .story-link-overlay .story-scale-handle::before{
    content:'↗';font:700 11px/1 Arial,sans-serif;
  }
}

/* V40 — reliable desktop canvas text input. The visible editor is a real textarea;
   the wrapper remains the transform/handle surface. */
@media (min-width:701px){
  #story-create-modal .story-desktop-caption-editor{
    display:block;
    overflow:visible;
    pointer-events:auto;
    user-select:none;
    -webkit-user-select:none;
    touch-action:none;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  #story-create-modal .story-desktop-caption-editor.is-empty{
    min-width:150px;
    min-height:44px;
    padding:7px 11px;
    border:1px dashed rgba(229,158,0,.38);
    border-radius:9px;
    background:transparent;
  }
  #story-create-modal .story-desktop-caption-editor.is-empty::before{
    display:none;
  }
  #story-create-modal #story-caption-canvas-input{
    display:block;
    box-sizing:border-box;
    width:100%;
    min-width:90px;
    min-height:34px;
    margin:0;
    padding:7px 11px;
    border:0;
    border-radius:0;
    outline:none;
    resize:none;
    overflow:hidden;
    background:transparent;
    color:#fff;
    text-align:center;
    line-height:1.18;
    white-space:pre-wrap;
    caret-color:#ffc21a;
    cursor:text;
    user-select:text;
    -webkit-user-select:text;
    touch-action:auto;
    font-family:'Rajdhani',sans-serif;
    text-shadow:var(--story-caption-shadow,0 2px 8px #000);
  }
  #story-create-modal #story-caption-canvas-input:focus{
    border-color:rgba(229,158,0,.82);
    background:transparent;
    box-shadow:none;
  }
  #story-create-modal #story-caption-canvas-input::placeholder{color:rgba(255,255,255,.32);font-style:italic;font-weight:500;opacity:.78;}
  #story-create-modal #story-caption-canvas-input:focus::placeholder{color:transparent;opacity:0;}
  #story-create-modal .story-desktop-caption-editor.is-empty #story-caption-canvas-input{color:transparent;}
  #story-create-modal .story-desktop-caption-editor.is-empty #story-caption-canvas-input:focus{color:#fff;}
  #story-create-modal .story-desktop-caption-editor .story-rotate-handle,
  #story-create-modal .story-desktop-caption-editor .story-scale-handle{z-index:40;}
}


/* V42 — Premium desktop studio finish.
   Keeps the mobile studio isolated while giving the desktop controls a cleaner
   glass/high-tech hierarchy and removing the duplicate canvas placeholder. */
@media (min-width:701px){
  #story-create-modal .story-editor-layout{
    grid-template-columns:minmax(430px,.92fr) minmax(540px,1.08fr);
    gap:28px;
    padding:20px 24px 18px;
  }

  #story-create-modal .story-editor-stage-wrap{
    position:relative;
    padding-right:26px;
  }

  #story-create-modal .story-editor-stage-wrap::after{
    content:"";
    position:absolute;
    top:8px;
    bottom:8px;
    right:0;
    width:1px;
    background:linear-gradient(180deg,transparent,rgba(229,158,0,.26) 16%,rgba(255,255,255,.10) 50%,rgba(229,158,0,.26) 84%,transparent);
    box-shadow:0 0 18px rgba(229,158,0,.08);
    pointer-events:none;
  }

  #story-create-modal .story-control-section{
    border:1px solid rgba(255,255,255,.10);
    background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018) 48%,rgba(4,5,7,.42));
    box-shadow:0 16px 38px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.045);
    backdrop-filter:blur(16px) saturate(125%);
    -webkit-backdrop-filter:blur(16px) saturate(125%);
  }

  #story-create-modal .story-control-section:hover{
    border-color:rgba(229,158,0,.28);
    background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(229,158,0,.025) 48%,rgba(4,5,7,.44));
  }

  #story-create-modal .story-control-section label,
  #story-create-modal .story-section-heading label{
    font-size:.90rem;
    letter-spacing:.025em;
  }

  #story-create-modal .story-section-heading small,
  #story-create-modal .story-desktop-caption-hint,
  #story-create-modal .story-control-hint,
  #story-create-modal .story-style-fixed-note,
  #story-create-modal .story-editor-note{
    font-size:.68rem;
    line-height:1.4;
  }

  #story-create-modal .story-control-section input[type="url"],
  #story-create-modal .story-control-section input[type="text"],
  #story-create-modal .story-control-section textarea,
  #story-create-modal .story-font-select{
    font-size:.96rem;
  }

  #story-create-modal .story-link-grid input{
    min-height:46px;
    padding-inline:13px;
  }

  #story-create-modal .story-desktop-caption-editor.is-empty{
    min-width:150px;
    min-height:38px;
    padding:0;
    border:1px dashed rgba(229,158,0,.38);
    background:transparent;
  }

  #story-create-modal .story-desktop-caption-editor.is-empty::before{
    content:none;
    display:none;
  }

  #story-create-modal #story-caption-canvas-input{
    min-height:38px;
    padding:6px 8px;
    background:transparent;
    border:0;
    box-shadow:none;
    font-size:1.02rem;
    font-weight:500;
  }

  #story-create-modal #story-caption-canvas-input::placeholder{
    color:rgba(255,255,255,.34);
    font-size:.98rem;
    font-style:italic;
    font-weight:500;
    opacity:1;
  }

  #story-create-modal #story-caption-canvas-input:focus::placeholder{
    color:transparent;
    opacity:0;
  }

  #story-create-modal .story-desktop-caption-editor .story-rotate-handle,
  #story-create-modal .story-link-overlay .story-rotate-handle{
    top:-11px;
    right:-11px;
    bottom:auto;
  }

  #story-create-modal .story-desktop-caption-editor .story-scale-handle,
  #story-create-modal .story-link-overlay .story-scale-handle{
    right:-11px;
    bottom:-11px;
  }

  #story-create-modal .story-desktop-caption-editor .story-rotate-handle,
  #story-create-modal .story-desktop-caption-editor .story-scale-handle,
  #story-create-modal .story-link-overlay .story-rotate-handle,
  #story-create-modal .story-link-overlay .story-scale-handle{
    width:21px;
    height:21px;
    padding:0;
    font-size:0;
    border-radius:50%;
    background:rgba(10,11,13,.72);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }

  #story-create-modal .story-rotate-handle svg,
  #story-create-modal .story-scale-handle svg{
    width:11px;
    height:11px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  #story-create-modal .story-link-overlay{
    overflow:visible;
  }
}