.save-actions,.grand-view,.dialog-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.save-actions{margin:20px 0 10px}
.options{position:relative;width:max-content;max-width:100%;margin-inline:auto;align-items:center;gap:10px}
.draw-settings{position:relative;flex:none;text-align:left}
.draw-settings summary{padding:10px 12px;cursor:pointer;color:var(--accent);font-size:.88rem;border-radius:999px;list-style:none}
.draw-settings summary::-webkit-details-marker{display:none}
.draw-settings summary::before{content:'⚙';margin-right:5px}
.draw-settings summary:hover,.draw-settings[open] summary{background:#eee8f4}
.draw-settings summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.settings-content{position:absolute;right:0;top:calc(100% + 8px);z-index:10;width:min(360px,calc(100vw - 24px));display:grid;gap:18px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow)}
@media(max-width:620px){
  #options{width:100%}
  #options>.option-group{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:0}
  #options>.option-group>.option-label{min-height:36px;display:flex;align-items:center}
  .draw-settings{position:absolute;right:0;top:0}
  .draw-settings summary{min-height:44px}
}
.draw:hover{transform:none}
.draw-settings .option-group{flex-wrap:wrap;margin:0}
.draw-settings .people-options{width:100%;margin:0;justify-content:flex-start}
.draw-settings .significator-option{width:100%;margin:0;padding:14px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;justify-content:flex-start;flex-wrap:wrap}
.reading-nav{display:flex;justify-content:flex-start;margin:0 0 18px}
.reading-nav button{font:inherit;background:#fff;color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:11px 18px;min-height:44px;cursor:pointer}
.reading-nav button:hover{border-color:var(--accent)}
.save-actions button,.grand-view button,.dialog-actions button,.dialog-actions a,.history-actions button{font:inherit;border:1px solid var(--line);border-radius:999px;padding:11px 18px;background:#fff;color:var(--ink);cursor:pointer;text-decoration:none;min-height:44px}
.save-actions button:first-child,.grand-view button[aria-pressed="true"],#image-download{background:var(--accent);border-color:var(--accent);color:#fff}
button:disabled{cursor:default;opacity:.55}
#save-reading:disabled{background:#e2dfe5;border-color:#d4d0d9;color:#77717e;opacity:1}
.save-notification{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,12px);width:max-content;max-width:calc(100% - 32px);padding:14px 20px;border-radius:14px;background:var(--ink);color:#fff;box-shadow:var(--shadow);font-size:.95rem;line-height:1.5;text-align:center;z-index:1000;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,transform .15s}
.save-notification.visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
.result .save-note{font-size:.82rem;line-height:1.6;max-width:540px;margin:auto}
.feedback{min-height:1.5em;color:var(--accent);font-size:.9rem;line-height:1.6}
.grand-view{margin:0 0 18px}
.cards.spread-grand{min-width:0;grid-template-columns:repeat(8,minmax(0,1fr))}
.grand-stage.is-large .cards.spread-grand{min-width:870px}
.house{cursor:pointer;border-radius:12px}
.house:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.house:hover .card{border-color:var(--accent)}
.reading-history{width:min(680px,100%);margin:30px auto 0;text-align:left;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.7);padding:16px}
.reading-history summary{cursor:pointer;font-weight:600;padding:4px 0}
#history-count{display:inline-block;background:#eee8f5;border-radius:20px;padding:2px 9px;margin-left:6px;font-size:.8rem}
.history-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.history-item:first-child{margin-top:16px}
.history-info{min-width:0;flex:1}
.history-info h3{font-size:1rem;margin:0 0 5px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.history-info p,.history-empty{margin:4px 0;color:var(--muted);font-size:.82rem;line-height:1.6}
.history-info .history-cards{color:var(--accent);font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-empty{margin-top:16px}
.history-actions{display:flex;gap:6px;flex-shrink:0}
.history-actions button{padding:8px 12px;font-size:.88rem}
.history-actions button:last-child{background:#a33343;border-color:#a33343;color:#fff}
.history-actions button:last-child:hover{background:#862737;border-color:#862737}
.reading-dialog{position:fixed;width:min(390px,calc(100% - 24px));max-height:90dvh;overflow:auto;margin:auto;border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);padding:26px 20px;text-align:center;box-shadow:var(--shadow)}
.reading-dialog::backdrop{background:rgba(30,22,40,.5)}
.reading-dialog h2{font-size:1.25rem;margin:8px 24px 22px}
.dialog-close{position:absolute;right:7px;top:7px;border:0;background:transparent;color:var(--muted);font:inherit;width:44px;height:44px;cursor:pointer}
.reading-dialog p{color:var(--muted);line-height:1.6;font-size:.9rem}
#detail-card .card{width:180px;max-width:none;margin:auto;animation:none}
#detail-card .card-name{font-size:1.1rem}
#detail-card .card-number{font-size:1rem}
.image-dialog{width:min(760px,calc(100% - 24px))}
#image-preview{display:block;max-width:100%;max-height:58dvh;width:auto;height:auto;margin:auto;object-fit:contain;border-radius:8px}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
body:has(dialog[open]){overflow:hidden}
@media(max-width:620px){
  .draw-settings .option-group{grid-template-columns:repeat(2,minmax(0,1fr))}
  .draw-settings .people-options label{width:100%;flex-wrap:wrap}
  .draw-settings .people-options select{flex:1;min-height:44px;font-size:16px}
  .grand-view button{flex:1;max-width:180px}
  .stage.grand-stage{padding:3px 1px 14px}
  .grand-stage:not(.is-large) .cards.spread-grand{gap:10px 3px}
  .grand-stage:not(.is-large) .card{padding:3px 2px;border-radius:5px;box-shadow:0 3px 8px rgba(46,34,58,.08)}
  .grand-stage:not(.is-large) .card-number{font-size:9px;line-height:1.1}
  .grand-stage:not(.is-large) .card-name{font-size:clamp(7px,2.1vw,12px);line-height:1.2;white-space:nowrap;letter-spacing:0}
  .grand-stage:not(.is-large) .card img{width:84%;height:84%;min-height:0}
  .grand-stage:not(.is-large) .house figcaption{font-size:clamp(7px,2vw,11px);margin-top:4px;line-height:1.4;white-space:nowrap}
  .grand-stage.is-large .card-number{font-size:.86rem}
  .save-actions button{flex:1;min-height:48px}
  .history-item{align-items:flex-start;flex-direction:column;gap:10px}
  .history-info{width:100%}
  .history-actions{align-self:flex-end}
  .reading-dialog .dialog-actions>*{flex:1}
}
@media(prefers-reduced-motion:reduce){.card{animation:none}}