/* STOT Drill Compare page CSS v5.97 */
/* Compare */
.compare-selects{display:grid;grid-template-columns:1fr 38px 1fr;gap:8px;align-items:end;padding:11px}.compare-selects label{display:grid;gap:6px;font-size:9px;color:#8d98ab;font-weight:800;min-width:0}.compare-selects select{width:100%;min-width:0}.swap-btn{height:38px;border-radius:11px;border:1px solid #3a4359;background:#171d2a;color:#d8cffc;font-weight:1000;font-size:16px}.compare-picker-control{display:grid;grid-template-columns:34px minmax(0,1fr);gap:6px;align-items:center;min-width:0}.compare-mini-thumb{width:34px;height:34px;border:1px solid #3a4359;border-radius:9px;background:#0f1520;display:grid;place-items:center;overflow:hidden;color:#c8b6ff;font-size:7px;font-weight:1000}.compare-mini-thumb img,.compare-inline-icon img{width:100%;height:100%;object-fit:contain;display:block}.compare-mini-thumb span{font-size:7px;line-height:1;text-align:center}.compare-setup{margin-top:8px;padding:11px}.compare-setup-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.compare-setup-head strong{font-size:10px}.compare-setup-head span{font-size:7.5px;color:#7f8ba0}.compare-setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.compare-control{min-width:0}.compare-control>span{display:flex;align-items:center;gap:6px;margin:0 0 5px;font-size:7.5px;color:#8490a4;font-weight:900}.compare-inline-icon{width:22px;height:22px;flex:0 0 22px;border:1px solid #364158;border-radius:7px;background:#101621;display:grid;place-items:center;overflow:hidden}.compare-control select,.compare-control input{width:100%;height:38px}.compare-cards{display:grid;grid-template-columns:1fr 28px 1fr;gap:6px;align-items:stretch;margin-top:8px}.compare-card{padding:12px 9px;text-align:center;min-width:0}.compare-side-label{font-size:7px;color:#737f93;font-weight:1000;letter-spacing:.12em}.compare-logo{width:44px;height:44px;border:1px solid #343d52;background:#101722;border-radius:13px;margin:7px auto 6px;display:grid;place-items:center;color:#c9b7ff;font-size:10px;font-weight:1000}.compare-card h3{font-size:10.5px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compare-meta{justify-content:center;margin-top:6px}.compare-rate{margin-top:8px;font-size:14px;font-weight:1000;color:var(--cyan)}.compare-rate small{display:block;margin-top:2px;color:#69758a;font-size:6.8px}.compare-card-stats{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:8px}.compare-card-stat{padding:6px 4px;border:1px solid #252e40;border-radius:9px;background:#101620}.compare-card-stat span{display:block;font-size:6.5px;color:#727f94;font-weight:900}.compare-card-stat strong{display:block;margin-top:2px;font-size:8.5px}.compare-vs{display:grid;place-items:center;text-align:center;color:#5d687d;font-size:8px;font-weight:1000}.compare-table{margin-top:8px;padding:3px 10px}.compare-row{display:grid;grid-template-columns:1fr 86px 1fr;gap:6px;align-items:center;padding:9px 0;border-bottom:1px solid #252d3e;text-align:center}.compare-row:last-child{border-bottom:0}.compare-row span{font-size:7.5px;color:#747f93;font-weight:900}.compare-row strong{font-size:9px;overflow-wrap:anywhere}.compare-insight{margin-top:8px;padding:10px 12px;font-size:9px;color:#aeb8cb;line-height:1.5}.compare-insight strong{color:#dfe5f2}.compare-heart{display:none}.compare-heart.show{display:block}.compare-inputs-panel{margin-top:8px;padding:11px}.compare-inputs-panel .compare-count-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.compare-time-inline{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,.72fr);gap:10px;align-items:end;margin-top:8px;padding:8px 9px;border:1px solid #2f384c;border-radius:12px;background:#111722}.compare-time-inline .compare-time-copy strong{display:block;font-size:9px}.compare-time-inline .compare-time-copy span{display:block;margin-top:3px;font-size:7.2px;color:#7f8ba0}.compare-time-inline .compare-time-control>span{margin-bottom:4px}.compare-time-inline .compare-time-control input{height:36px}
@media(max-width:520px){.compare-selects{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);gap:6px;padding:9px}.compare-picker-control{grid-template-columns:30px minmax(0,1fr);gap:5px}.compare-mini-thumb{width:30px;height:30px;border-radius:8px}.compare-selects select{height:36px;font-size:10px;padding:0 6px}.swap-btn{height:36px;font-size:14px}.compare-setup{padding:9px}.compare-setup-grid{gap:7px}.compare-control>span{font-size:7.2px;gap:5px}.compare-inline-icon{width:20px;height:20px;flex-basis:20px}.compare-inputs-panel{padding:9px}.compare-time-inline{grid-template-columns:1fr 100px;gap:8px;padding:7px 8px}.compare-time-inline .compare-time-copy strong{font-size:8.5px}}
@media(min-width:700px){.compare-setup-grid{grid-template-columns:repeat(4,1fr)}.compare-card{padding:16px}.compare-logo{width:58px;height:58px}.compare-picker-control{grid-template-columns:38px minmax(0,1fr)}.compare-mini-thumb{width:38px;height:38px}}

/* v6.00 Compare Presets canonical layout — scoped only to #layoutcompareView. */
#layoutcompareView .v56-compare-intro{padding:9px 11px!important;margin:0 0 8px!important}
#layoutcompareView .v56-compare-intro .v56-hero{display:block!important}
#layoutcompareView .v56-compare-intro h2{margin:0!important;font-size:16px!important;line-height:1.15!important}
#layoutcompareView .v56-compare-intro p{margin:4px 0 0!important;font-size:8.5px!important;line-height:1.4!important;color:var(--muted)!important}
#layoutcompareView .v56-compare-intro .v56-back{display:none!important}
#layoutcompareView .v533-condition{padding:9px!important;margin:0 0 8px!important}
#layoutcompareView .v533-condition-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin:0 0 7px!important}
#layoutcompareView .v533-condition-head strong{font-size:11px!important}
#layoutcompareView .v533-condition-head span{font-size:7.5px!important;color:var(--muted)!important;text-align:right!important}
#layoutcompareView .v533-condition .layout-control-card{padding:0!important;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
#layoutcompareView .v533-condition .layout-control-head,#layoutcompareView .v533-condition .layout-control-card::before{display:none!important}
#layoutcompareView .v543-calc-intro{display:none!important}
#layoutcompareView #layoutModeTabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;margin:0 0 7px!important}
#layoutcompareView #layoutModeTabs button{min-width:0!important;min-height:46px!important;height:46px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:2px!important;padding:6px 9px!important;text-align:left!important;white-space:normal!important;border-radius:10px!important;overflow:hidden!important}
#layoutcompareView #layoutModeTabs button strong,#layoutcompareView #layoutModeTabs button small{display:none!important}
#layoutcompareView #layoutModeTabs button::before{display:block;font-size:11px;font-weight:950;line-height:1.05;white-space:nowrap}
#layoutcompareView #layoutModeTabs button::after{display:block;font-size:7px;font-weight:650;line-height:1.15;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#layoutcompareView #layoutModeTabs button[data-layoutmode="time"]::before{content:"Time → Oil"}
#layoutcompareView #layoutModeTabs button[data-layoutmode="time"]::after{content:"How much oil you’ll make"}
#layoutcompareView #layoutModeTabs button[data-layoutmode="target"]::before{content:"Oil → Time"}
#layoutcompareView #layoutModeTabs button[data-layoutmode="target"]::after{content:"When you’ll reach your target"}
#layoutcompareView .layout-mode-pane .field{padding:7px 9px!important;grid-template-columns:minmax(0,1fr) 96px!important;min-height:0!important}
#layoutcompareView .layout-mode-pane .field .labels strong{font-size:10.5px!important}
#layoutcompareView .layout-mode-pane .field .labels small{font-size:7.5px!important}
#layoutcompareView .layout-mode-pane .field input{height:36px!important}
#layoutcompareView #layoutTargetPane .target-box{margin-top:0!important}
#layoutcompareView #v524CompareSettings{padding:8px 9px!important;margin:0 0 8px!important}
#layoutcompareView #v524CompareSettings .v524-settings-head{display:grid!important;grid-template-columns:minmax(0,1fr) 104px!important;align-items:center!important;gap:8px!important}
#layoutcompareView #v524CompareSettings .v524-settings-copy strong{font-size:10.5px!important;line-height:1.2!important}
#layoutcompareView #v524CompareSettings .v524-settings-copy small{margin-top:2px!important;font-size:7.3px!important;line-height:1.3!important;color:var(--muted)!important}
#layoutcompareView #v524CompareSettings .v524-toggle{width:104px!important;min-width:0!important;padding:3px!important;gap:3px!important}
#layoutcompareView #v524CompareSettings .v524-toggle button{min-height:32px!important;padding:0 6px!important;font-size:8.5px!important}
#layoutcompareView #v524CompareSettings .v524-status{display:none!important}
#layoutcompareView #v526EditorSwitch{padding:8px 9px!important;margin:0 0 8px!important}
#layoutcompareView #v526EditorSwitch .v526-editor-switch-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:7px!important;margin-bottom:6px!important}
#layoutcompareView #v526EditorSwitch .v526-editor-switch-head strong{font-size:10.5px!important}
#layoutcompareView #v526EditorSwitch .v526-editor-switch-head span{font-size:7.3px!important;line-height:1.25!important;color:var(--muted)!important;text-align:right!important}
#layoutcompareView #v526EditorSwitch .ab-layout-switch{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important}
#layoutcompareView #v526EditorSwitch .ab-layout-switch button{min-height:36px!important;font-size:9.5px!important;border-radius:9px!important}
#layoutcompareView .v539-compare-boosts{margin:0 0 8px!important;padding:9px!important}
#layoutcompareView .v539-compare-boosts .v520-boosts-title{margin:0 0 4px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important}
#layoutcompareView .v539-compare-boosts .v520-boosts-title strong{font-size:11px!important}
#layoutcompareView .v539-compare-boosts .v520-boosts-title .v543-optional-hint{display:none!important}
#layoutcompareView .v539-compare-boosts .v520-boosts-title>span:not(.v524-shared-badge):not(.v543-optional-hint){font-size:7.5px!important;color:var(--muted)!important}
#layoutcompareView .v536-quick-fill{margin:0 0 8px!important}
#layoutcompareView .v536-advanced{margin:0 0 8px!important}
#layoutcompareView .layout-note{margin:6px 2px 8px!important;font-size:8px!important;line-height:1.35!important;color:var(--muted)!important}
#layoutcompareView #layoutVisualBuilder{display:block!important;margin:0 0 8px!important}
#layoutcompareView .ab-compare{margin:0 0 8px!important}
#layoutcompareView .v56-compare-actions{margin:0 0 8px!important}

/* Rebirth is a full-width Compare-owned boost card. */
#layoutcompareView .v603-boost-grid>label:has(#compareLayoutMole){order:1}
#layoutcompareView .v603-boost-grid>label:has(#compareLayoutFruit){order:2}
#layoutcompareView .v603-boost-grid>label:has(#compareLayoutLikes){order:3}
#layoutcompareView .v603-boost-grid>label:has(#compareLayoutX2){order:4}
#layoutcompareView .v603-boost-grid>label:has(#compareLayoutRebirth){order:5;grid-column:1/-1!important;display:grid!important;grid-template-columns:54px minmax(0,1fr) 150px!important;grid-template-rows:auto auto!important;align-items:center!important;column-gap:12px!important;row-gap:3px!important;min-width:0!important;min-height:82px!important;margin:2px 0 0!important;padding:12px 14px!important;border:1px solid #38445d!important;border-radius:16px!important;background:#111622!important;box-sizing:border-box!important;color:#f4f6fb!important;font-size:14px!important;font-weight:850!important;line-height:1.15!important}
#layoutcompareView .v603-boost-grid>label:has(#compareLayoutRebirth)::before{content:"";grid-column:1;grid-row:1/3;align-self:center;width:50px;height:50px;border-radius:13px;background:#0e1420 url("../../assets/images/ui/rebirth.webp") center/42px 42px no-repeat;border:1px solid #3d4964;box-sizing:border-box}
#layoutcompareView .v603-boost-grid>label:has(#compareLayoutRebirth) small{grid-column:2;grid-row:2;display:block!important;margin:0!important;font-size:10px!important;line-height:1.2!important;font-weight:650!important;color:#a3adbf!important;white-space:normal!important}
#layoutcompareView .v603-boost-grid>label:has(#compareLayoutRebirth) #compareLayoutRebirth{grid-column:3;grid-row:1/3;width:100%!important;min-width:0!important;height:50px!important;min-height:50px!important;margin:0!important;font-size:20px!important;font-weight:900!important;text-align:center!important;border-radius:13px!important}
@media(max-width:620px){#layoutcompareView .v603-boost-grid{grid-template-columns:1fr 1fr!important}#layoutcompareView .v603-boost-grid>label:has(#compareLayoutRebirth){grid-template-columns:46px minmax(0,1fr) 108px!important;column-gap:9px!important;min-height:72px!important;padding:10px!important;border-radius:14px!important;font-size:13px!important}#layoutcompareView .v603-boost-grid>label:has(#compareLayoutRebirth)::before{width:44px;height:44px;border-radius:11px;background-size:38px 38px}#layoutcompareView .v603-boost-grid>label:has(#compareLayoutRebirth) small{font-size:9px!important}#layoutcompareView .v603-boost-grid>label:has(#compareLayoutRebirth) #compareLayoutRebirth{height:46px!important;min-height:46px!important;font-size:18px!important;border-radius:11px!important}}
@media(max-width:430px){#layoutcompareView #layoutModeTabs button{padding:6px 7px!important}#layoutcompareView #layoutModeTabs button::before{font-size:10.5px}#layoutcompareView #layoutModeTabs button::after{font-size:6.7px}}