/* Desktop dashboard controls only. Lite uses its own page and styles. */
#section-control { color: #292524; font-size: 16px; }
#section-control [hidden] { display: none !important; }
#section-control button { font-family: inherit; cursor: pointer; }
#section-control button:focus-visible,
#section-control summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
#section-control .control-section-label { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
#section-control .bay-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
#section-control .control-bay { text-align: left; min-width: 0; padding: 18px; border: 2px solid #e3dcd6; border-radius: 16px; background: #fff; color: #292524; transition: border-color .15s, background .15s; }
#section-control .control-bay:hover { border-color: #b46b64; background: #fffaf8; }
#section-control .control-bay.is-selected { border-color: #8b2e2e; background: #fff6f3; box-shadow: 0 0 0 1px #8b2e2e; }
#section-control .control-bay-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; }
#section-control .control-bay-name { font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
#section-control .control-connection { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
#section-control .control-connection::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
#section-control .is-online { color: #187044; }
#section-control .is-offline { color: #8c4633; }
#section-control .control-bay-state { display: block; margin: 8px 0 18px; color: #655b55; font-size: 14px; }
#section-control .control-bay-bottom { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px; }
#section-control .control-small { display: block; font-size: 14px; font-weight: 500; line-height: 1.6; color: #655b55; }
#section-control .control-bay-bottom strong { display: block; font-size: 27px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.4; overflow-wrap: anywhere; }
#section-control .control-selection { color: #8b2e2e; font-size: 13px; font-weight: 600; }
#section-control .control-console { border: 1px solid #e3dcd6; border-radius: 20px; background: #fff; overflow: hidden; box-shadow: 0 4px 20px #442a1610; }
#section-control .control-console-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 24px 28px; border-bottom: 1px solid #e9e1db; background: #fffaf7; }
#section-control h2 { margin: 2px 0 8px; font-size: 28px; line-height: 1.4; overflow-wrap: anywhere; }
#section-control .control-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#section-control .control-status-line .control-connection { font-size: 14px; }
#section-control .control-usage { border-radius: 6px; padding: 3px 10px; background: #eeeae6; color: #534a44; font-size: 14px; font-weight: 600; }
#section-control .control-usage.is-busy { background: #fbe6d0; color: #854413; }
#section-control .control-balance { text-align: right; }
#section-control .control-balance strong { display: block; color: #8b2e2e; font-size: 44px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#section-control .control-offline { padding: 12px 28px; background: #fff3de; color: #805015; font-size: 14px; line-height: 1.6; }
#section-control .control-workspace { display: grid; grid-template-columns: 1fr 1fr; }
#section-control .control-quick,
#section-control .control-custom { min-width: 0; padding: 24px 28px; }
#section-control h3 { margin: 0 0 4px; font-size: 21px; font-weight: 700; line-height: 1.5; }
#section-control .control-description { color: #655b55; font-size: 14px; line-height: 1.65; margin: 0 0 20px; }
#section-control .control-command-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#section-control .control-command { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; min-height: 150px; text-align: left; border: 1px solid; border-radius: 12px; transition: box-shadow .15s; }
#section-control .control-command:hover { box-shadow: 0 3px 10px #442a1620; }
#section-control .control-command > i { font-size: 23px; }
#section-control .control-command strong { display: block; font-size: 18px; line-height: 1.5; }
#section-control .control-command small { display: block; font-size: 13px; line-height: 1.6; margin-top: 3px; }
#section-control .command-open { color: #17633f; background: #edf7f1; border-color: #acd3ba; }
#section-control .command-close { color: #942f32; background: #fff0f0; border-color: #e2b7b8; }
#section-control .command-add { color: #21578f; background: #eff6fc; border-color: #b9d0e7; }
#section-control .command-subtract { color: #855014; background: #fff6e9; border-color: #e5cca9; }
#section-control .control-command.sending { opacity: .6; pointer-events: none; }
#section-control .control-custom.action-card { margin: 0; border: 0; border-left: 1px solid #e9e1db; border-radius: 0; background: #fff; box-shadow: none; }
#section-control .mode-toggle { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; margin-bottom: 18px; background: #f3efeb; border-radius: 10px; }
#section-control .mode-btn { padding: 10px 12px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #655b55; font-size: 16px; font-weight: 600; }
#section-control .mode-btn.active { background: #fff; border-color: #b7cec0; color: #17633f; box-shadow: 0 1px 4px #442a1615; }
#section-control .mode-btn[data-mode="deduct"].active { color: #942f32; border-color: #e2b7b8; }
#section-control .control-amount-label { display: block; margin: 0 0 7px; font-size: 14px; font-weight: 600; }
#section-control .big-amount { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 16px; border: 1px solid #bcb0a7; border-radius: 10px; background: #fff; }
#section-control .big-amount:focus-within { border-color: #8b2e2e; box-shadow: 0 0 0 3px #8b2e2e18; }
#section-control .big-prefix { font-size: 25px; color: #655b55; }
#section-control .big-amount input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #292524; font-family: inherit; font-size: 28px !important; font-weight: 600; line-height: 1.5; text-align: left; }
#section-control .quick-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
#section-control .chip { padding: 8px 4px; border: 1px solid #d8cec6; border-radius: 7px; background: #fff; font-size: 15px; color: #534a44; }
#section-control .chip:hover { background: #fff1ec; border-color: #b46b64; color: #8b2e2e; }
#section-control .preview { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; min-height: 46px; margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: #f6f3f0; font-size: 16px; color: #655b55; }
#section-control .pv-now, #section-control .pv-op, #section-control .pv-eq { color: #655b55; }
#section-control .pv-result { color: #17633f; font-size: 20px; }
#section-control .mode-deduct .pv-result { color: #942f32; }
#section-control .submit-btn { display: block; width: 100%; padding: 13px 16px; border: 0; border-radius: 10px; background: #8b2e2e; font-size: 17px; font-weight: 600; color: #fff; box-shadow: none; }
#section-control .submit-btn:hover:not(:disabled) { background: #722424; transform: none; box-shadow: none; }
#section-control .submit-btn:disabled { cursor: default; color: #6b615a; background: #eae4df; opacity: 1; }
#section-control .control-tools { padding: 0 28px; border-top: 1px solid #e9e1db; background: #fdfbf9; }
#section-control .control-tools summary { cursor: pointer; padding: 16px 0; font-size: 14px; font-weight: 500; color: #655b55; }
#section-control .control-tools-body { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0 18px; }
#section-control .control-tools-body strong { font-size: 15px; }
#section-control .control-tools-body p { margin: 3px 0 0; color: #655b55; font-size: 13px; }
#section-control .control-tools-body button { flex-shrink: 0; padding: 9px 14px; border: 1px solid #d6aaa6; border-radius: 8px; color: #8b2e2e; background: #fff; font-size: 14px; }
@media (max-width: 1200px) {
    #section-control .bay-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #section-control .control-quick, #section-control .control-custom { padding: 22px; }
    #section-control .control-command { padding: 14px; }
}
@media (max-width: 800px) {
    #section-control .control-workspace { grid-template-columns: 1fr; }
    #section-control .control-custom.action-card { border-left: 0; border-top: 1px solid #e9e1db; }
    #section-control .control-console-header { padding: 20px; }
    #section-control .control-balance strong { font-size: 36px; }
}
@media (max-width: 480px) {
    #section-control .bay-strip { gap: 10px; }
    #section-control .control-bay { padding: 12px; }
    #section-control .control-bay-name { font-size: 18px; }
    #section-control .control-bay-bottom strong { font-size: 23px; }
    #section-control .control-balance { text-align: left; }
    #section-control .control-tools { padding: 0 20px; }
    #section-control .control-tools-body { align-items: flex-start; flex-direction: column; }
}