
/* Lv.1–Lv.50 Dimension Force calculator: scoped to avoid deck builder CSS conflicts. */
.dimension-force{margin:26px 0;background:#fff;border:1px solid #e9dfed;border-radius:24px;padding:clamp(16px,2.5vw,28px);box-shadow:0 14px 36px #29223c10;color:#26223a}
.df-heading{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:20px}
.df-heading h2{font-size:clamp(21px,2.6vw,29px);letter-spacing:-.04em;margin:6px 0 8px;color:#232943}
.df-heading p{color:#706780;font-size:14px;line-height:1.65;margin:0}
.df-heading .eyebrow{font-size:11px;letter-spacing:.16em;color:#9279cd;font-weight:800}
.df-level-badge{flex:none;background:#f1edff;color:#6b56ad;border:1px solid #ddd4f7;border-radius:50px;padding:8px 12px;font-size:12px;font-weight:800}
.df-input-grid{display:grid;grid-template-columns:1fr 1.2fr 1.1fr;gap:13px}
.df-input-grid label{display:flex;flex-direction:column;gap:8px;font-weight:700;color:#514a68;font-size:13px}
.df-input-grid input,.df-input-grid select{display:block;width:100%;height:48px;border:1px solid #ddd5e9;border-radius:12px;background:#fff;padding:0 14px;color:#302940;font-size:16px;font-weight:750;box-sizing:border-box}
.df-input-grid input:focus-visible,.df-input-grid select:focus-visible{outline:2px solid #9679de;outline-offset:1px}
.df-input-description{font-size:12px;color:#847a91;line-height:1.65;margin:10px 0 16px}
.df-result{background:linear-gradient(135deg,#f4efff,#fff9f8);border:1px solid #e4d8f5;border-radius:17px;padding:20px;margin-bottom:22px;min-height:95px}
.df-result-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.df-result-top strong{display:block;font-size:clamp(24px,3vw,36px);color:#5f45a7;margin-top:5px;letter-spacing:-.05em}
.df-result-label{font-size:12px;font-weight:800;color:#7c6a9f}
.df-status{font-size:12px;font-weight:800;padding:9px 12px;border-radius:12px;color:#766797;background:#fff;border:1px solid #e3dcef;white-space:nowrap}
.df-ready{color:#285c45;background:#e8f9f0;border-color:#bce6d0}
.df-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:14px 0}
.df-stat-grid>div{background:#ffffffb8;border:1px solid #e7dff3;border-radius:12px;padding:12px;min-width:0}
.df-stat-grid span{display:block;color:#8a8099;font-size:11px;margin-bottom:5px}
.df-stat-grid b{font-size:16px;color:#32284c;overflow-wrap:anywhere}
.df-progress{height:9px;background:#ded5ef;border-radius:30px;overflow:hidden}
.df-progress span{display:block;height:100%;background:linear-gradient(90deg,#9273dc,#b59bec);border-radius:30px}
.df-future{display:flex;align-items:center;justify-content:space-between;gap:6px;border-top:1px solid #e2d8f0;margin-top:14px;padding-top:12px;color:#6d6481;font-size:12px}
.df-future small{color:#9388a4}
.df-future b{font-size:16px;color:#514188;text-align:right}
.df-validation{color:#bd4050;font-weight:700;margin:8px 0}
.df-table-toggle{border:1px solid #e7e2ed;border-radius:15px;overflow:hidden}
.df-table-toggle>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;background:#f9f7fc;padding:15px 16px;font-size:15px;font-weight:850;color:#302940}
.df-table-toggle>summary::-webkit-details-marker{display:none}
.df-table-toggle>summary small{font-weight:550;color:#867c95}
.df-toggle-arrow{font-size:18px}.df-table-toggle[open] .df-toggle-arrow{transform:rotate(180deg)}
.df-table-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.df-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px;text-align:right}
.df-table th{background:#f5f1fc;color:#6d6089;font-size:11px;padding:12px 13px;border-bottom:1px solid #e4dbea}
.df-table td{padding:12px 13px;border-bottom:1px solid #efeaf3;color:#575064}
.df-table td:first-child,.df-table th:first-child{text-align:left}
.df-table td strong{color:#3b3053}
.df-table tbody tr:nth-child(even){background:#fcfaff}
.df-table tbody tr.df-active-row{background:#ede6ff}
.df-table tbody tr.df-active-row td:first-child{box-shadow:inset 4px 0 #8869ce}
.df-max-row{background:#f2fbf6!important}
.df-note{font-size:12px;color:#817789;line-height:1.8;margin:14px 1px 0}
@media(max-width:660px){.dimension-force{padding:15px;margin:18px 0}.df-heading{flex-wrap:wrap}.df-input-grid{grid-template-columns:1fr}.df-stat-grid{gap:5px}.df-stat-grid>div{padding:9px}.df-stat-grid b{font-size:14px}.df-future{flex-direction:column;align-items:start}.df-table th,.df-table td{padding:10px 12px}.df-result{padding:14px}}

/* V20: stage-driven force production */
.df-rate-summary{margin:0 0 14px;padding:12px 15px;background:#f3efff;border:1px solid #e5dcfc;border-radius:13px;color:#62508b;font-size:13px;line-height:1.6}
.df-rate-summary strong{color:#5838ae;font-weight:850}
@media(min-width:661px) and (max-width:900px){.df-input-grid{grid-template-columns:1fr 1fr}.df-input-grid label:last-child{grid-column:1/-1}}
