farming-code 2.2.6

package/frontend/skins/crt/styles/billing.css

@@ -0,0 +1,1003 @@
+#farming-crt .billing-area {
+    flex: 1;
+    min-width: 0;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: rgba(0, 10, 5, 0.48);
+}
+
+#farming-crt .billing-area.hidden {
+    display: none;
+}
+
+#farming-crt .billing-header,
+#farming-crt .billing-footer,
+#farming-crt .billing-panel-heading,
+#farming-crt .billing-provider-row,
+#farming-crt .billing-quota-copy,
+#farming-crt .billing-scope-axis {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+#farming-crt .billing-header {
+    flex: 0 0 auto;
+    gap: 18px;
+    padding: 0 0 12px;
+    border-bottom: 1px solid var(--crt-border);
+}
+
+#farming-crt .billing-header-actions,
+#farming-crt .billing-view-switch {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+#farming-crt .billing-view-switch button {
+    padding: 4px 7px;
+    color: var(--crt-phosphor-muted);
+    border: 1px solid rgba(12, 204, 104, 0.24);
+    background: transparent;
+    font: inherit;
+    font-size: 10px;
+    letter-spacing: 0.06em;
+    cursor: pointer;
+}
+
+#farming-crt .billing-view-switch button:hover,
+#farming-crt .billing-view-switch button:focus-visible,
+#farming-crt .billing-view-switch button.crt-nav-selected,
+#farming-crt .billing-view-switch button.active {
+    color: var(--crt-background);
+    background: var(--crt-phosphor-bright);
+    outline: none;
+}
+
+#farming-crt .billing-header h2 {
+    color: var(--crt-phosphor-bright);
+    font-family: var(--crt-font);
+    font-size: 24px;
+    font-weight: 400;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+#farming-crt .billing-status,
+#farming-crt .billing-footer,
+#farming-crt .billing-panel-heading span,
+#farming-crt .billing-scope-axis,
+#farming-crt .billing-meter small,
+#farming-crt .billing-provider-row small,
+#farming-crt .billing-quota-copy small {
+    color: var(--crt-phosphor-muted);
+    font-family: var(--crt-font);
+    font-size: 10px;
+    letter-spacing: 0.06em;
+}
+
+#farming-crt .billing-status {
+    padding: 4px 7px;
+    border: 1px solid rgba(12, 204, 104, 0.32);
+}
+
+#farming-crt .billing-status.is-busy::before {
+    content: "* ";
+    color: var(--crt-phosphor-bright);
+    animation: crt-billing-pulse 0.8s steps(2, end) infinite;
+}
+
+#farming-crt .billing-status.is-error {
+    color: #ef6f6f;
+    border-color: rgba(239, 111, 111, 0.5);
+}
+
+#farming-crt .billing-body {
+    flex: 1;
+    min-height: 0;
+    padding: 12px 0 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    overflow: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--crt-border) transparent;
+}
+
+#farming-crt .billing-view {
+    flex: 1 0 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+#farming-crt .billing-view.hidden {
+    display: none;
+}
+
+#farming-crt .billing-summary {
+    flex: 0 0 auto;
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 8px;
+}
+
+#farming-crt .billing-daily-summary {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    gap: 0;
+    border: 1px solid rgba(12, 204, 104, 0.28);
+    background: rgba(0, 20, 9, 0.58);
+}
+
+#farming-crt .billing-summary-item {
+    min-width: 0;
+    padding: 7px 9px 6px;
+    border-right: 1px solid rgba(12, 204, 104, 0.16);
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+}
+
+#farming-crt .billing-summary-item:last-child {
+    border-right: 0;
+}
+
+#farming-crt .billing-summary-item span,
+#farming-crt .billing-summary-item small {
+    color: var(--crt-phosphor-muted);
+    font-size: 8px;
+    letter-spacing: 0.07em;
+}
+
+#farming-crt .billing-summary-item strong {
+    margin-left: auto;
+    color: var(--crt-phosphor-bright);
+    font-size: 17px;
+    font-weight: 400;
+    text-shadow: 0 0 8px rgba(12, 204, 104, 0.4);
+}
+
+#farming-crt .billing-meter,
+#farming-crt .billing-panel,
+#farming-crt .billing-scope-panel {
+    border: 1px solid rgba(12, 204, 104, 0.28);
+    background: rgba(0, 20, 9, 0.58);
+    box-shadow: inset 0 0 16px rgba(12, 204, 104, 0.035);
+}
+
+#farming-crt .billing-daily-chart-panel {
+    min-height: 280px;
+    padding: 10px 12px 9px;
+}
+
+#farming-crt .billing-daily-legend {
+    margin-top: 6px;
+    display: flex;
+    justify-content: flex-end;
+    gap: 13px;
+    color: var(--crt-phosphor-muted);
+    font-size: 8px;
+    letter-spacing: 0.06em;
+}
+
+#farming-crt .billing-daily-legend span {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+#farming-crt .billing-daily-legend i {
+    width: 9px;
+    height: 7px;
+    border: 1px solid rgba(96, 255, 151, 0.42);
+}
+
+#farming-crt .billing-daily-legend .is-cache {
+    background: rgba(39, 157, 83, 0.52);
+}
+
+#farming-crt .billing-daily-legend .is-direct {
+    background: rgba(166, 255, 195, 0.96);
+}
+
+#farming-crt .billing-daily-legend .is-billion {
+    height: 2px;
+    border: 0;
+    background: var(--crt-phosphor-bright);
+    box-shadow: 0 0 5px rgba(112, 255, 166, 0.8);
+}
+
+#farming-crt .billing-daily-scroll {
+    min-width: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: var(--crt-border) transparent;
+}
+
+#farming-crt .billing-daily-plot,
+#farming-crt .billing-daily-x-axis {
+    position: relative;
+    min-width: 760px;
+}
+
+#farming-crt .billing-axis-meta {
+    margin-top: 5px;
+    display: flex;
+    justify-content: space-between;
+    color: rgba(129, 255, 168, 0.5);
+    font-size: 7px;
+    letter-spacing: 0.06em;
+}
+
+#farming-crt .billing-daily-chart-frame {
+    margin-top: 3px;
+    display: grid;
+    grid-template-columns: 46px minmax(0, 1fr);
+    gap: 5px;
+}
+
+#farming-crt .billing-y-axis {
+    position: relative;
+    height: 178px;
+    border-right: 1px solid rgba(12, 204, 104, 0.34);
+    color: rgba(129, 255, 168, 0.68);
+    font-size: 7px;
+    letter-spacing: 0.03em;
+}
+
+#farming-crt .billing-y-axis-label {
+    position: absolute;
+    right: 6px;
+    transform: translateY(50%);
+    white-space: nowrap;
+}
+
+#farming-crt .billing-y-axis-label::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: calc(100% + 3px);
+    width: 4px;
+    border-top: 1px solid rgba(12, 204, 104, 0.52);
+}
+
+#farming-crt .billing-y-axis-label.is-floor {
+    color: rgba(129, 255, 168, 0.46);
+}
+
+#farming-crt .billing-daily-plot {
+    height: 178px;
+    border-bottom: 1px solid rgba(12, 204, 104, 0.25);
+    background: rgba(0, 8, 4, 0.55);
+}
+
+#farming-crt .billing-log-guides {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+
+#farming-crt .billing-log-guide {
+    position: absolute;
+    right: 0;
+    left: 0;
+    height: 1px;
+    border-top: 1px dashed rgba(12, 204, 104, 0.16);
+}
+
+#farming-crt .billing-log-guide span {
+    display: none;
+}
+
+#farming-crt .billing-daily-bars,
+#farming-crt .billing-daily-x-axis {
+    display: grid;
+    grid-template-columns: repeat(var(--billing-chart-days, 120), minmax(3px, 1fr));
+    gap: 2px;
+}
+
+#farming-crt .billing-daily-bars {
+    position: absolute;
+    inset: 0;
+    padding: 0 3px;
+}
+
+#farming-crt .billing-daily-column {
+    position: relative;
+    min-width: 0;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+}
+
+#farming-crt .billing-daily-column::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    background: rgba(12, 204, 104, 0.09);
+}
+
+#farming-crt .billing-daily-bar {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    min-height: 2px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    overflow: visible;
+    border: 1px solid rgba(61, 238, 139, 0.3);
+    background: rgba(12, 204, 104, 0.12);
+}
+
+#farming-crt .billing-daily-bar span {
+    display: block;
+    min-height: 1px;
+}
+
+#farming-crt .billing-daily-cache {
+    order: 2;
+    background: rgba(39, 157, 83, 0.58);
+}
+
+#farming-crt .billing-daily-direct {
+    order: 1;
+    background: rgba(166, 255, 195, 0.94);
+    box-shadow: 0 0 4px rgba(112, 255, 166, 0.34);
+}
+
+#farming-crt .billing-daily-column[data-billion="true"] .billing-daily-bar::before {
+    content: "";
+    position: absolute;
+    top: -4px;
+    right: -1px;
+    left: -1px;
+    height: 2px;
+    background: var(--crt-phosphor-bright);
+    box-shadow: 0 0 7px rgba(112, 255, 166, 0.85);
+}
+
+#farming-crt .billing-daily-column:hover,
+#farming-crt .billing-daily-column:focus-visible,
+#farming-crt .billing-daily-column.selected {
+    outline: 1px solid rgba(183, 255, 207, 0.7);
+    outline-offset: 0;
+}
+
+#farming-crt .billing-daily-column.selected {
+    background: rgba(116, 255, 167, 0.08);
+}
+
+#farming-crt .billing-daily-column.selected::before {
+    content: "";
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    border-left: 1px dashed rgba(183, 255, 207, 0.72);
+    box-shadow: 0 0 4px rgba(112, 255, 166, 0.42);
+    pointer-events: none;
+}
+
+#farming-crt .billing-daily-x-axis {
+    min-height: 23px;
+    padding: 0 3px;
+    border-top: 1px solid rgba(12, 204, 104, 0.34);
+    color: var(--crt-phosphor-muted);
+    font-size: 7px;
+    line-height: 9px;
+}
+
+#farming-crt .billing-daily-x-axis span {
+    position: relative;
+    padding-top: 5px;
+    overflow: visible;
+    white-space: nowrap;
+}
+
+#farming-crt .billing-daily-x-axis span.has-label::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 4px;
+    border-left: 1px solid rgba(12, 204, 104, 0.52);
+}
+
+#farming-crt .billing-daily-x-axis span.is-end {
+    width: 34px;
+    transform: translateX(-30px);
+    text-align: right;
+}
+
+#farming-crt .billing-daily-x-axis span.is-end::before {
+    right: 0;
+    left: auto;
+}
+
+#farming-crt .billing-activity-row {
+    margin-top: 6px;
+    display: grid;
+    grid-template-columns: auto minmax(120px, 1fr) auto;
+    align-items: center;
+    gap: 8px;
+    color: var(--crt-phosphor-muted);
+    font-size: 7px;
+    letter-spacing: 0.05em;
+}
+
+#farming-crt .billing-activity-strip {
+    height: 8px;
+    display: grid;
+    grid-template-columns: repeat(var(--billing-activity-days, 364), minmax(1px, 1fr));
+    align-items: end;
+    gap: 1px;
+}
+
+#farming-crt .billing-activity-tick {
+    height: 2px;
+    background: rgba(12, 204, 104, 0.12);
+}
+
+#farming-crt .billing-activity-tick.is-active {
+    height: 5px;
+    background: rgba(61, 238, 139, 0.58);
+}
+
+#farming-crt .billing-activity-tick.is-billion {
+    height: 8px;
+    background: var(--crt-phosphor-bright);
+    box-shadow: 0 0 4px rgba(112, 255, 166, 0.62);
+}
+
+#farming-crt .billing-day-panel {
+    min-height: 94px;
+}
+
+#farming-crt .billing-day-details {
+    margin-top: 8px;
+    display: grid;
+    grid-template-columns: minmax(130px, 1.3fr) repeat(4, minmax(80px, 0.8fr)) minmax(170px, 1.4fr);
+    gap: 8px;
+}
+
+#farming-crt .billing-day-total,
+#farming-crt .billing-day-breakdown {
+    min-width: 0;
+    padding-right: 8px;
+    border-right: 1px solid rgba(12, 204, 104, 0.14);
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+#farming-crt .billing-day-details small,
+#farming-crt .billing-day-total span {
+    color: var(--crt-phosphor-muted);
+    font-size: 8px;
+    letter-spacing: 0.07em;
+}
+
+#farming-crt .billing-day-details strong {
+    overflow: hidden;
+    color: var(--crt-phosphor-bright);
+    font-size: 10px;
+    font-weight: 400;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+#farming-crt .billing-day-total strong {
+    font-size: 16px;
+    text-shadow: 0 0 8px rgba(12, 204, 104, 0.36);
+}
+
+#farming-crt .billing-day-insights {
+    margin-top: 10px;
+    padding-top: 9px;
+    border-top: 1px solid rgba(12, 204, 104, 0.2);
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
+    gap: 14px;
+}
+
+#farming-crt .billing-day-curve-panel,
+#farming-crt .billing-day-share-panel {
+    min-width: 0;
+}
+
+#farming-crt .billing-day-share-panel {
+    padding-left: 14px;
+    border-left: 1px solid rgba(12, 204, 104, 0.16);
+}
+
+#farming-crt .billing-day-subheading,
+#farming-crt .billing-day-curve-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    color: var(--crt-phosphor-muted);
+    font-size: 8px;
+    letter-spacing: 0.07em;
+}
+
+#farming-crt .billing-day-curve-frame {
+    height: 92px;
+    margin-top: 6px;
+    display: grid;
+    grid-template-columns: 40px minmax(0, 1fr);
+    gap: 6px;
+}
+
+#farming-crt .billing-day-curve-y-axis {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-end;
+    color: var(--crt-phosphor-muted);
+    font-size: 7px;
+    line-height: 1;
+}
+
+#farming-crt .billing-day-curve {
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+    border-left: 1px solid rgba(12, 204, 104, 0.23);
+    border-bottom: 1px solid rgba(12, 204, 104, 0.23);
+    background: rgba(0, 8, 4, 0.72);
+    filter: drop-shadow(0 0 3px rgba(61, 238, 139, 0.14));
+}
+
+#farming-crt .billing-day-curve-grid line {
+    stroke: rgba(12, 204, 104, 0.11);
+    stroke-width: 1;
+    vector-effect: non-scaling-stroke;
+}
+
+#farming-crt .billing-day-curve-total,
+#farming-crt .billing-day-curve-cache {
+    fill: none;
+    vector-effect: non-scaling-stroke;
+    stroke-linecap: square;
+    stroke-linejoin: bevel;
+}
+
+#farming-crt .billing-day-curve-total {
+    stroke: var(--crt-phosphor-bright);
+    stroke-width: 1.8;
+    filter: drop-shadow(0 0 2px rgba(112, 255, 166, 0.72));
+}
+
+#farming-crt .billing-day-curve-cache {
+    stroke: rgba(238, 191, 77, 0.82);
+    stroke-width: 1.2;
+    stroke-dasharray: 4 3;
+}
+
+#farming-crt .billing-day-curve-x-axis {
+    margin: 4px 0 0 46px;
+    display: flex;
+    justify-content: space-between;
+    color: var(--crt-phosphor-muted);
+    font-size: 7px;
+}
+
+#farming-crt .billing-day-curve-footer {
+    margin: 6px 0 0 46px;
+}
+
+#farming-crt #billing-day-insight-state.is-error {
+    color: #ef6f6f;
+}
+
+#farming-crt .billing-day-curve-legend {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+#farming-crt .billing-day-curve-legend i {
+    width: 10px;
+    height: 1px;
+    display: inline-block;
+    background: var(--crt-phosphor-bright);
+    box-shadow: 0 0 3px rgba(112, 255, 166, 0.6);
+}
+
+#farming-crt .billing-day-curve-legend i.is-cache {
+    margin-left: 4px;
+    background: rgba(238, 191, 77, 0.82);
+    box-shadow: none;
+}
+
+#farming-crt .billing-day-provider-shares {
+    min-height: 112px;
+    margin-top: 9px;
+    display: flex;
+    flex-direction: column;
+    gap: 9px;
+}
+
+#farming-crt .billing-day-share-row {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+#farming-crt .billing-day-share-copy {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 8px;
+    font-size: 9px;
+    letter-spacing: 0.05em;
+}
+
+#farming-crt .billing-day-share-copy span {
+    color: var(--crt-phosphor);
+}
+
+#farming-crt .billing-day-share-copy strong {
+    overflow: hidden;
+    color: var(--crt-phosphor-bright);
+    font-size: 9px;
+    font-weight: 400;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+#farming-crt .billing-day-share-track {
+    height: 7px;
+    border: 1px solid rgba(12, 204, 104, 0.22);
+    background: rgba(0, 7, 3, 0.78);
+}
+
+#farming-crt .billing-day-share-track span {
+    display: block;
+    height: 100%;
+    background: repeating-linear-gradient(90deg, rgba(83, 244, 137, 0.88) 0 5px, rgba(83, 244, 137, 0.42) 5px 7px);
+    box-shadow: 0 0 6px rgba(83, 244, 137, 0.28);
+}
+
+#farming-crt .billing-day-share-empty {
+    color: var(--crt-phosphor-muted);
+    font-size: 9px;
+    letter-spacing: 0.06em;
+}
+
+#farming-crt .billing-meter {
+    min-width: 0;
+    padding: 8px 10px 7px;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: baseline;
+    gap: 2px 8px;
+}
+
+#farming-crt .billing-meter > span {
+    color: var(--crt-phosphor-muted);
+    font-size: 10px;
+    letter-spacing: 0.08em;
+}
+
+#farming-crt .billing-meter strong {
+    color: var(--crt-phosphor-bright);
+    font-size: 20px;
+    font-weight: 400;
+    text-align: right;
+    text-shadow: 0 0 8px rgba(12, 204, 104, 0.42);
+}
+
+#farming-crt .billing-meter small {
+    grid-column: 1 / -1;
+    white-space: nowrap;
+}
+
+#farming-crt .billing-scope-panel {
+    flex: 1 1 260px;
+    min-height: 220px;
+    padding: 10px 12px 8px;
+    display: flex;
+    flex-direction: column;
+}
+
+#farming-crt .billing-panel-heading {
+    flex: 0 0 auto;
+    min-height: 18px;
+    gap: 12px;
+}
+
+#farming-crt .billing-panel-heading h3 {
+    color: var(--crt-phosphor);
+    font-size: 11px;
+    font-weight: 400;
+    letter-spacing: 0.08em;
+}
+
+#farming-crt .billing-scope-screen {
+    position: relative;
+    flex: 1;
+    min-height: 170px;
+    margin-top: 8px;
+    overflow: hidden;
+    border: 1px solid rgba(12, 204, 104, 0.2);
+    background:
+        linear-gradient(rgba(12, 204, 104, 0.055) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(12, 204, 104, 0.055) 1px, transparent 1px),
+        rgba(0, 8, 4, 0.92);
+    background-size: 25% 25%;
+    box-shadow:
+        inset 0 0 26px rgba(0, 0, 0, 0.75),
+        inset 0 0 14px rgba(12, 204, 104, 0.035);
+}
+
+#farming-crt #billing-scope {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#farming-crt .billing-scope-sweep {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 18%;
+    pointer-events: none;
+    opacity: 0.34;
+    background: linear-gradient(90deg, transparent, rgba(116, 255, 167, 0.07), rgba(116, 255, 167, 0.16), transparent);
+    animation: crt-billing-sweep 4.8s linear infinite;
+}
+
+#farming-crt .billing-scope-empty {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    color: rgba(12, 204, 104, 0.34);
+    font-size: 11px;
+    letter-spacing: 0.14em;
+    pointer-events: none;
+}
+
+#farming-crt .billing-scope-empty.hidden {
+    display: none;
+}
+
+#farming-crt .billing-scope-axis {
+    flex: 0 0 auto;
+    padding-top: 5px;
+}
+
+#farming-crt .billing-lower-grid {
+    flex: 0 0 auto;
+    display: grid;
+    grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
+    gap: 10px;
+}
+
+#farming-crt .billing-panel {
+    min-height: 120px;
+    padding: 9px 11px;
+}
+
+#farming-crt .billing-quota-list,
+#farming-crt .billing-provider-list {
+    margin-top: 7px;
+    display: grid;
+    gap: 7px;
+}
+
+#farming-crt .billing-quota-row {
+    display: grid;
+    grid-template-columns: minmax(100px, auto) minmax(80px, 1fr);
+    gap: 10px;
+    align-items: center;
+}
+
+#farming-crt .billing-quota-copy {
+    gap: 8px;
+    min-width: 0;
+}
+
+#farming-crt .billing-quota-copy strong,
+#farming-crt .billing-provider-row strong {
+    color: var(--crt-phosphor-bright);
+    font-size: 11px;
+    font-weight: 400;
+    white-space: nowrap;
+}
+
+#farming-crt .billing-quota-track {
+    position: relative;
+    height: 10px;
+    overflow: hidden;
+    border: 1px solid rgba(12, 204, 104, 0.28);
+    background: rgba(0, 7, 3, 0.8);
+}
+
+#farming-crt .billing-quota-fill {
+    display: block;
+    height: 100%;
+    background: repeating-linear-gradient(90deg, rgba(83, 244, 137, 0.9) 0 5px, rgba(83, 244, 137, 0.45) 5px 7px);
+    box-shadow: 0 0 8px rgba(83, 244, 137, 0.4);
+}
+
+#farming-crt .billing-quota-row.is-warning .billing-quota-fill {
+    background: repeating-linear-gradient(90deg, rgba(238, 191, 77, 0.92) 0 5px, rgba(238, 191, 77, 0.46) 5px 7px);
+}
+
+#farming-crt .billing-provider-row {
+    gap: 12px;
+    padding-bottom: 5px;
+    border-bottom: 1px solid rgba(12, 204, 104, 0.13);
+}
+
+#farming-crt .billing-provider-copy {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+#farming-crt .billing-provider-rate {
+    text-align: right;
+}
+
+#farming-crt .billing-message {
+    color: var(--crt-phosphor-muted);
+    font-size: 10px;
+    letter-spacing: 0.06em;
+}
+
+#farming-crt .billing-message.is-error {
+    color: #ef6f6f;
+}
+
+#farming-crt .billing-footer {
+    flex: 0 0 auto;
+    gap: 12px;
+    min-height: 28px;
+    padding-top: 8px;
+    border-top: 1px solid rgba(12, 204, 104, 0.25);
+}
+
+#farming-crt #billing-refresh {
+    padding: 4px 9px;
+    color: var(--crt-phosphor);
+    border: 1px solid rgba(12, 204, 104, 0.32);
+    background: transparent;
+    font: inherit;
+    font-size: 10px;
+    letter-spacing: 0.06em;
+    cursor: pointer;
+}
+
+#farming-crt #billing-refresh:hover,
+#farming-crt #billing-refresh:focus-visible,
+#farming-crt #billing-refresh.crt-nav-selected {
+    color: var(--crt-background);
+    background: var(--crt-phosphor-bright);
+    outline: none;
+}
+
+#farming-crt #billing-refresh:disabled {
+    opacity: 0.45;
+    cursor: wait;
+}
+
+@keyframes crt-billing-sweep {
+    from { transform: translateX(-120%); }
+    to { transform: translateX(660%); }
+}
+
+@keyframes crt-billing-pulse {
+    0%, 49% { opacity: 1; }
+    50%, 100% { opacity: 0.35; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    #farming-crt .billing-scope-sweep,
+    #farming-crt .billing-status.is-busy::before {
+        animation: none;
+    }
+}
+
+@media (max-width: 820px) {
+    #farming-crt .billing-area {
+        padding: 12px;
+    }
+
+    #farming-crt .billing-summary {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    #farming-crt .billing-daily-summary {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    #farming-crt .billing-summary-item:nth-child(3) {
+        border-right: 0;
+    }
+
+    #farming-crt .billing-summary-item:nth-child(-n+3) {
+        border-bottom: 1px solid rgba(12, 204, 104, 0.16);
+    }
+
+    #farming-crt .billing-daily-chart-panel {
+        min-height: 260px;
+    }
+
+    #farming-crt .billing-daily-plot {
+        height: 160px;
+    }
+
+    #farming-crt .billing-activity-row {
+        grid-template-columns: auto minmax(100px, 1fr);
+    }
+
+    #farming-crt .billing-activity-row #billing-daily-range {
+        display: none;
+    }
+
+    #farming-crt .billing-lower-grid {
+        grid-template-columns: 1fr;
+    }
+
+    #farming-crt .billing-header-actions {
+        gap: 5px;
+    }
+
+    #farming-crt .billing-view-switch button {
+        padding-inline: 5px;
+    }
+
+    #farming-crt .billing-day-details {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    #farming-crt .billing-day-insights {
+        grid-template-columns: 1fr;
+    }
+
+    #farming-crt .billing-day-share-panel {
+        padding-top: 9px;
+        padding-left: 0;
+        border-top: 1px solid rgba(12, 204, 104, 0.16);
+        border-left: 0;
+    }
+
+    #farming-crt .billing-day-total {
+        grid-column: 1 / -1;
+    }
+
+    #farming-crt .billing-day-total,
+    #farming-crt .billing-day-breakdown {
+        padding-bottom: 5px;
+        border-right: 0;
+        border-bottom: 1px solid rgba(12, 204, 104, 0.14);
+    }
+
+    #farming-crt .billing-scope-panel {
+        flex-basis: 230px;
+    }
+
+    #farming-crt .billing-footer > span,
+    #farming-crt .billing-panel-heading span {
+        display: none;
+    }
+}