.story-new-button { border:1px solid rgba(198,157,92,.5); color:#e6cba2; background:rgba(198,157,92,.08); padding:9px 12px; border-radius:10px; font:inherit; font-size:12px; cursor:pointer; }
.story-new-button[hidden] { display:none!important; }
#screen-list .my-section-head { align-items:center; flex-wrap:wrap; gap:8px; }
#screen-list .my-section-title { flex-shrink:0; white-space:nowrap; }
#screen-list .my-section-actions { margin-left:auto; display:flex; align-items:center; gap:8px; white-space:nowrap; }
#screen-list .my-section-actions .story-new-button { display:inline-flex; align-items:center; justify-content:center; padding:0 12px; min-height:44px; border:1px solid #ddb36a; border-radius:11px; background:#c89b4a; color:#271b0c; font-size:14px; font-weight:700; box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
#screen-list .my-section-actions .my-section-link { display:inline-flex; align-items:center; min-height:44px; color:#b3a28a; font-size:12px; letter-spacing:0; }
#screen-list .my-section-actions .my-section-link:hover { color:#e6cba2; }
@media (max-width:360px) {
  #screen-list .my-section-title { font-size:18px; }
  #screen-list .my-section-actions .story-new-button { padding:0 10px; }
}
.story-badge { display:inline-block; font-size:10px; font-weight:600; color:#e9c997; border:1px solid rgba(233,201,151,.3); border-radius:5px; padding:2px 5px; white-space:nowrap; }
.story-preview { color:#c9c1b9; font-size:11px; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:5px 0; }
.story-dialog-backdrop { position:fixed; inset:0; z-index:10020; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.72); }
.story-dialog { color:#f2e8dc; background:#211d1b; border:1px solid #514235; border-radius:20px; width:min(100%,420px); max-height:85dvh; overflow:auto; padding:24px; box-shadow:0 20px 80px #0008; }
.story-dialog header { display:flex; align-items:flex-start; gap:12px; justify-content:space-between; }
.story-dialog h2 { margin:0; font-size:20px; line-height:1.45; }
.story-dialog p { font-size:14px; line-height:1.65; color:#c9beb2; }
.story-dialog button { font:inherit; cursor:pointer; color:inherit; border:1px solid #645344; background:transparent; border-radius:10px; padding:10px 14px; }
.story-dialog button:disabled { opacity:.55; cursor:wait; }
.story-dialog button:focus-visible,.story-new-button:focus-visible { outline:2px solid #edc890; outline-offset:3px; }
.story-dialog footer { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.story-dialog .story-confirm { color:#241b13; background:#e5bf89; border-color:#e5bf89; }
.story-dialog-status { min-height:3em; }
.story-family-list { display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.story-family-list button { display:flex; align-items:center; gap:12px; width:100%; text-align:left; }
.story-family-list img,.story-family-avatar { width:48px; height:54px; border-radius:8px; object-fit:cover; }
.story-family-avatar { display:grid; place-items:center; background:#41352e; }
.story-family-list button>span:nth-child(2) { flex:1; }
.story-family-list small { display:block; margin-top:4px; color:#b4a697; font-size:11px; }
.my-chars-header .story-new-button { margin-left:auto; font-size:11px; }
#screen-list .my-grid>.character-card .card-name-row,#screen-my-characters .card-name-row { flex-wrap:wrap; gap:5px; }
#screen-list .my-grid>.character-card .card-name { font-size:17px!important; min-width:0; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#screen-list .my-grid>.character-card .card-relation { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#screen-list .my-grid>.character-card .story-preview,#screen-my-characters .story-preview { min-width:0; max-width:100%; }