/* Small additions for the standalone version. */
#tools .size-box { height: auto; }
.mock-badge { position: fixed; bottom: 8px; right: 8px; z-index: 50; font: 500 11px/1 system-ui, sans-serif; background: #f0c27a; color: #241505; padding: 6px 8px; border-radius: 6px; }
.fine.break { color: #f0c27a; }
[hidden]{display:none!important}

/* Spool Plus (subscription) dialog */
.plus { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100% - 32px); overflow: auto; max-width: 380px; width: calc(100% - 32px); border: 1px solid #ffffff38; border-radius: 14px; background: #121214; color: #f2efe9; padding: 18px 18px 14px; font: 400 14px/1.4 system-ui, sans-serif; }
.plus::backdrop { background: #000a; }
.plus h2 { margin: 0 0 6px; font: 500 20px/1.2 Newsreader, Georgia, serif; }
.plus-close { float: right; margin: -6px -6px 0 0; }
.plus-close .btn { flex: none; }
.plus-lede { margin: 0 0 8px; color: #d9d4ca; }
.plus-points { margin: 0 0 12px; padding-left: 18px; color: #d9d4ca; }
.plus-label { display: block; margin: 6px 0 4px; font-size: 12px; color: #bdb7ab; }
.plus input { width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid #ffffff38; background: #0c0c0d; color: inherit; font: inherit; }
.plus [id^="plus-step"] { display: flex; flex-direction: column; gap: 6px; }
.plus [id^="plus-step"][hidden] { display: none !important; }
.plus .btn { min-height: 2.1rem; font-size: .8rem; }
.plus-who { margin: 0 0 4px; color: #d9d4ca; }
.plus-small { margin: 10px 0 0; font-size: 11px; color: #8f897e; }
#btn-account { flex: none; }

/* Free / Pro (Grok) mode picker */
.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 8px; }
.mode-opt { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid #ffffff2e; border-radius: 10px; cursor: pointer; font: 400 12px/1.3 system-ui, sans-serif; color: #d9d4ca; background: #ffffff08; }
.mode-opt input { margin: 2px 0 0; accent-color: #f0c27a; }
.mode-opt b { display: block; font-size: 13px; font-weight: 600; color: #f2efe9; }
.mode-opt small { display: block; font-size: 11px; color: #a9a397; }
.mode-opt.on { border-color: #f0c27a; background: #f0c27a14; }
.cost-tag { font-style: normal; font-weight: 600; font-size: 10px; color: #241505; background: #f0c27a; border-radius: 4px; padding: 1px 4px; margin-left: 4px; vertical-align: 1px; }
.free-tools { margin: 0 0 8px; }
.free-tools .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.free-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 8px; font: 400 11px/1.2 system-ui, sans-serif; color: #bdb7ab; }
.free-sliders label { display: flex; flex-direction: column; gap: 2px; }
.free-sliders input { width: 100%; accent-color: #f0c27a; }
.free-small { margin: 6px 0 0; font: 400 11px/1.3 system-ui, sans-serif; color: #8f897e; }
.pro-only[disabled] { opacity: .5; }