@media (min-width: 769px) {
    .mobile-drawer-overlay {
        display: none;
    }
}

@media (max-width: 768px) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
        overflow-x: hidden;
    }

    .sidebar {
        display: none;
    }

    .app-content {
        width: 100%;
        max-width: 100vw;
        margin-left: 0;
        padding: 52px 14px 14px;
        overflow-x: hidden;
    }

    .mobile-header {
        position: fixed;
        inset: 0 0 auto 0;
        z-index: 40;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        background: #123B69;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        box-shadow: 0 6px 18px rgba(18, 59, 106, .18);
        color: #FFFFFF;
    }

    .mobile-header strong {
        min-width: 0;
        color: #FFFFFF;
        font-size: 15px;
        font-weight: 760;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-menu-button {
        display: inline-grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: #FFFFFF;
        cursor: pointer;
    }

    .mobile-avatar {
        width: auto;
        min-width: 48px;
        height: 34px;
        padding: 0 8px;
        font-size: 12px;
    }

    .mobile-header-spacer {
        width: 38px;
        height: 38px;
    }

    .mobile-drawer {
        position: fixed;
        z-index: 42;
        top: 48px;
        left: 0;
        bottom: 0;
        width: min(82vw, 304px);
        max-width: 304px;
        display: none;
        align-content: start;
        gap: 12px;
        overflow-y: auto;
        padding: 12px 10px calc(18px + env(safe-area-inset-bottom));
        border-right: 1px solid rgba(224, 231, 241, .84);
        border-radius: 0;
        background: var(--white);
        box-shadow: 14px 0 34px rgba(18, 59, 106, .11);
    }

    .mobile-drawer.open {
        display: grid;
    }

    .mobile-drawer-overlay {
        position: fixed;
        z-index: 41;
        inset: 48px 0 0 0;
        display: none;
        border: 0;
        background: rgba(15, 23, 42, .22);
        cursor: pointer;
    }

    .mobile-drawer-overlay.open {
        display: block;
    }

    .mobile-drawer-group {
        display: grid;
        gap: 3px;
    }

    .mobile-drawer-group > span {
        padding: 7px 10px 4px;
        color: var(--muted);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .mobile-drawer a,
    .mobile-drawer-item,
    .mobile-drawer-form button {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 42px;
        padding: 10px 11px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: var(--text);
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        transition: background .16s ease, color .16s ease;
    }

    .mobile-drawer-form {
        margin: 0;
    }

    .mobile-drawer a.active {
        background: rgba(20, 199, 214, .09);
        color: var(--blue);
        font-weight: 600;
    }

    .mobile-drawer-item.is-disabled {
        color: var(--muted);
        opacity: .72;
    }

    .mobile-drawer-form button {
        color: var(--red);
        cursor: pointer;
    }

    .mobile-nav-icon {
        display: inline-flex;
        width: 21px;
        height: 21px;
    }

    .mobile-nav-icon svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .page-heading {
        align-items: flex-start;
        margin-bottom: 12px;
    }

    .page-heading h1 {
        font-size: 20px;
    }

    .page-heading p {
        font-size: 12px;
    }

    .ranking-section-title {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .ranking-filter-bar {
        border-radius: 16px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .ranking-filter-bar button {
        padding: 9px 7px;
        white-space: normal;
    }

    .ranking-panel-header {
        gap: 8px;
    }

    .ranking-item {
        align-items: flex-start;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ranking-result,
    .ranking-value {
        grid-column: 2;
        justify-items: start;
        text-align: left;
    }

    .comparison-sort-bar,
    .comparison-sort-bar label,
    .comparison-sort-bar select {
        width: 100%;
    }

    .comparison-highlight-strip {
        gap: 6px;
    }

    .comparison-table-wrap {
        display: none;
    }

    .comparison-card-list {
        display: grid;
        gap: 10px;
    }

    .comparison-card {
        display: grid;
        gap: 12px;
        padding: 14px;
        border: 1px solid rgba(224, 231, 241, .78);
        border-radius: 16px;
        background: #fff;
    }

    .comparison-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
    }

    .comparison-card-header strong,
    .comparison-card-header span {
        display: block;
    }

    .comparison-card-header strong {
        color: var(--text);
        font-size: 15px;
        font-weight: 760;
    }

    .comparison-card-header span {
        color: var(--muted);
        font-size: 12px;
        font-weight: 650;
        margin-top: 2px;
    }

    .comparison-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .comparison-card-metrics {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .comparison-card-metrics span {
        display: grid;
        gap: 4px;
        min-width: 0;
        padding: 10px;
        border-radius: 12px;
        background: #f8fafc;
    }

    .comparison-card-metrics small {
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
    }

    .comparison-card-metrics strong {
        color: var(--text);
        font-size: 14px;
        font-weight: 760;
        word-break: break-word;
    }

    .cycle-comparison-title {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .cycle-comparison-filters {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }

    .cycle-comparison-filters label {
        flex: 0 0 160px;
    }

    .cycle-comparison-filters button {
        flex: 0 0 auto;
    }

    .cycle-comparison-table-wrap {
        display: none;
    }

    .cycle-comparison-card-list {
        display: grid;
        gap: 10px;
    }

    .cycle-comparison-card {
        display: grid;
        gap: 12px;
        padding: 14px;
        border: 1px solid rgba(224, 231, 241, .78);
        border-radius: 16px;
        background: #fff;
    }

    .cycle-action-bar {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 6px;
    }

    .cycle-action-bar .btn {
        min-height: 40px;
        padding-inline: 13px;
    }

    .metric-grid,
    .split-grid,
    .dashboard-decision-grid,
    .dashboard-live-grid,
    .daily-work-section,
    .dashboard-metric-grid,
    .dashboard-groups,
    .tank-ranking-grid,
    .round-hero,
    .round-grid,
    .card-grid,
    .plans-grid,
    .pond-card-grid,
    .pond-command-hero,
    .pond-command-grid,
    .pond-detail-metrics,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .pond-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 10px;
    }

    .pond-plan-strip {
        grid-column: 1 / -1;
        padding: 10px 12px;
        gap: 7px;
        border-radius: 13px;
    }

    .pond-plan-strip .eyebrow {
        font-size: 9px;
    }

    .pond-plan-strip p {
        font-size: 12px;
        line-height: 1.35;
    }

    .pond-plan-strip .progress-track {
        height: 4px;
    }

    .pond-mini-stat {
        min-height: 50px;
        padding: 9px 10px;
        border-radius: 13px;
    }

    .pond-mini-stat strong {
        font-size: 20px;
    }

    .pond-mini-stat span {
        font-size: 10px;
    }

    .section-disclosure {
        margin-bottom: 10px;
        border-radius: 14px;
    }

    .section-disclosure > summary {
        padding: 11px 12px;
        font-size: 13px;
    }

    .pond-list-title {
        margin: 2px 0 8px;
    }

    .pond-list-title h2 {
        font-size: 18px;
    }

    .dashboard-hero {
        align-items: stretch;
        flex-direction: column;
        min-height: 0;
        padding: 18px;
        border-radius: 14px;
    }

    .operation-summary-card {
        align-items: stretch;
        flex-direction: column;
        min-height: 0;
        padding: 20px;
    }

    .operation-summary-card h1 {
        font-size: 24px;
    }

    .operation-farm {
        min-width: 0;
    }

    .farm-quick-summary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .farm-quick-summary span {
        justify-content: center;
        min-width: 0;
        text-align: center;
    }

    .positive-status-line {
        width: 100%;
    }

    .daily-task-item {
        grid-template-columns: 42px minmax(0, 1fr);
        min-height: 82px;
        padding: 14px;
    }

    .daily-task-icon {
        width: 42px;
        height: 42px;
    }

    .daily-task-item em {
        grid-column: 2;
        white-space: normal;
    }

    .round-hero {
        gap: 12px;
        margin-bottom: 12px;
    }

    .round-hero h2 {
        font-size: 21px;
    }

    .round-progress-meter {
        padding: 12px;
        border-radius: 14px;
    }

    .round-task-item {
        grid-template-columns: 42px minmax(0, 1fr);
        min-height: 112px;
        padding: 14px;
    }

    .round-task-item .btn {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 44px;
    }

    .priority-alert-banner {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
        padding: 12px 14px;
        border-radius: 14px;
    }

    .alerts-list {
        grid-template-columns: 1fr;
    }

    .alert-card {
        padding: 13px;
    }

    .alert-card p {
        min-height: 0;
    }

    .alert-card .btn {
        width: 100%;
        min-height: 42px;
    }

    .dashboard-hero h1 {
        font-size: 24px;
    }

    .hero-metrics {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-action {
        width: 100%;
    }

    .hero-metrics div {
        min-width: 0;
    }

    .login-card-premium {
        padding: 24px;
    }

    .login-card h1 {
        font-size: 24px;
    }

    .brand-mark-login {
        width: auto;
        max-width: 228px;
        height: 104px;
    }

    .metric-card-feature {
        min-height: 118px;
    }

    .active-cycle-header,
    .active-cycle-stats {
        align-items: flex-start;
        flex-direction: column;
    }

    .span-2 {
        grid-column: span 1;
    }

    .metric-card {
        min-height: 84px;
    }

    .responsive-table thead {
        display: none;
    }

    .responsive-table,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table td {
        display: block;
        width: 100%;
    }

    .responsive-table tr {
        padding: 12px;
        border-bottom: 1px solid var(--line);
    }

    .responsive-table td {
        border: 0;
        padding: 7px 0;
        display: flex;
        justify-content: space-between;
        gap: 14px;
    }

    .responsive-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-weight: 600;
    }

    .actions-cell {
        width: 100%;
        white-space: normal;
    }

    .table-actions-stack,
    .secondary-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
        margin-left: 0;
        margin-top: 7px;
        width: 100%;
    }

    .table-actions-stack .btn {
        width: 100%;
        min-height: 40px;
    }

    .actions-cell form {
        margin-left: 0;
    }

    .form-actions {
        position: sticky;
        bottom: 72px;
        background: linear-gradient(to top, var(--bg), rgba(244, 246, 250, .84));
        padding-top: 10px;
    }

    .form-actions .btn {
        width: 100%;
    }

    .pond-card {
        padding: 18px;
        min-width: 0;
        max-width: 100%;
    }

    .pond-search-panel,
    .pond-card-grid,
    .pond-card,
    .pond-overview,
    .section-disclosure,
    .page-heading {
        min-width: 0;
        max-width: 100%;
    }

    .pond-search-panel {
        margin-bottom: 10px;
        padding: 11px 12px;
    }

    .pond-card-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        overflow: hidden;
    }

    .operator-pond-grid {
        gap: 10px;
        margin-top: 0;
    }

    .operator-pond-grid .pond-card {
        gap: 11px;
    }

    .operator-pond-grid .pond-card-actions .btn-primary {
        width: 100%;
        min-height: 48px;
        white-space: nowrap;
    }

    .pond-card-header {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 12px;
        align-items: start;
    }

    .pond-card-header h2,
    .pond-card-header p {
        overflow-wrap: anywhere;
    }

    .pond-card-header h2 {
        font-size: 24px;
    }

    .pond-status-dot {
        width: 30px;
        height: 30px;
    }

    .pond-card-day-chip {
        min-height: 34px;
        padding: 0 12px;
        font-size: 13px;
    }

    .pond-card-compact-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding-top: 15px;
    }

    .pond-card-compact-summary span {
        padding: 0;
        font-size: 10.5px;
    }

    .pond-card-stat strong {
        font-size: 20px;
    }

    .pond-card-stat small {
        font-size: 13px;
    }

    .pond-card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
    }

    .pond-card-open-hint {
        min-height: auto;
        border: 0;
        background: transparent;
        font-size: 12px;
    }

    .pond-card-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        width: 100%;
    }

    .pond-card-actions .btn-primary,
    .pond-card-more {
        width: 100%;
        min-width: 0;
    }

    .pond-card-more > summary {
        display: inline-grid;
        place-items: center;
        min-height: 34px;
        width: auto;
        padding: 0 12px;
        border: 1px solid rgba(224, 231, 241, .88);
        border-radius: 999px;
        background: #FFFFFF;
        color: #637083;
        font-size: 12px;
    }

    .pond-card-more > div,
    .pond-card-more .btn,
    .pond-card-more form,
    .pond-card-more button {
        width: 100%;
    }

    .pond-card-compact-summary {
        gap: 6px;
    }

    .pond-card-compact-summary span {
        font-size: 10.5px;
    }

    .pond-operator-heading {
        margin-bottom: 6px;
    }

    .pond-title-line {
        gap: 8px;
    }

    .pond-title-line h1 {
        font-size: 20px;
        line-height: 1.15;
    }

    .pond-compact-actions {
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        gap: 7px;
        width: 100%;
    }

    .pond-compact-actions .btn {
        width: auto;
        min-height: 34px;
        padding: 7px 10px;
        font-size: 12px;
    }

    .pond-cultivation-card {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 10px;
        padding: 16px 12px;
    }

    .pond-cultivation-orb {
        width: 50px;
        height: 50px;
    }

    .pond-cultivation-card strong {
        font-size: 22px;
    }

    .pond-cultivation-card small {
        margin-top: 8px;
        font-size: 14px;
    }

    .pond-command-hero {
        padding: 10px;
        gap: 8px;
    }

    .pond-operator-summary {
        grid-template-columns: 1fr;
        padding: 9px;
        margin-bottom: 8px;
    }

    .pond-status-strip {
        padding: 8px 9px;
    }

    .pond-operator-summary .pond-command-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    .pond-operator-summary .pond-command-metrics article {
        min-height: 52px;
        padding: 8px;
    }

    .pond-operator-summary .pond-command-metrics strong {
        margin-top: 4px;
        font-size: 14px;
    }

    .tank-section-nav {
        gap: 6px;
        margin-bottom: 8px;
        padding: 5px;
        border-radius: 12px;
    }

    .tank-section-nav a {
        padding: 7px 10px;
        font-size: 12px;
    }

    .pond-command-hero h2 {
        font-size: 18px;
    }

    .pond-command-metrics,
    .quick-operation-grid,
    .field-task-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pond-command-metrics article {
        min-height: 58px;
        padding: 9px;
    }

    .pond-command-metrics strong {
        font-size: 15px;
    }

    .pond-command-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .quick-operation-action {
        grid-template-columns: 1fr;
        justify-items: start;
        min-height: 68px;
        padding: 10px;
    }

    .quick-operations-primary {
        padding: 12px;
        margin-bottom: 0;
    }

    .quick-operations-primary .panel-header {
        align-items: flex-start;
    }

    .quick-operations-primary .panel-header h2 {
        font-size: 18px;
    }

    .quick-operations-primary .quick-operation-grid {
        gap: 8px;
    }

    .quick-operations-primary .quick-operation-action {
        min-height: 76px;
        padding: 12px;
        border-color: rgba(18, 59, 106, .36);
        background: #123B69;
        color: #FFFFFF;
        box-shadow: 0 12px 24px rgba(18, 59, 106, .18);
    }

    .quick-operations-primary .quick-operation-action span {
        width: 38px;
        height: 38px;
        background: rgba(255, 255, 255, .18);
        color: #FFFFFF;
        font-size: 18px;
    }

    .quick-operations-primary .quick-operation-action strong {
        color: #FFFFFF;
        font-size: 15px;
        font-weight: 800;
    }

    .tank-action-focus-header {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px;
        margin-bottom: 10px;
    }

    .tank-action-focus-header .btn {
        width: 100%;
        min-height: 42px;
    }

    .tank-action-focus-header h2 {
        font-size: 18px;
    }

    .tank-operation-forms {
        gap: 8px;
        margin-top: 12px;
    }

    .tank-operation-form > summary {
        min-height: 50px;
        padding: 11px 12px;
        font-size: 14px;
    }

    .tank-operation-form .form-panel {
        padding: 12px;
    }

    .tank-action-history {
        padding: 12px;
    }

    .tank-action-history article {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .tank-action-history time {
        grid-column: 2;
    }

    .tank-admin-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .tank-admin-actions .btn {
        width: 100%;
        min-height: 42px;
    }

    .quick-operation-action strong {
        font-size: 15px;
        line-height: 1.25;
    }

    .quick-operation-action span {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        font-size: 21px;
    }

    .field-task-item {
        grid-template-columns: 1fr;
        align-content: start;
        min-height: 98px;
        padding: 14px;
    }

    .field-task-item strong,
    .field-task-item small {
        grid-column: 1;
    }

    .field-task-positive {
        width: 100%;
        justify-content: center;
    }

    .field-flow-feedback {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
    }

    .field-flow-copy h2 {
        font-size: 18px;
    }

    .field-flow-actions {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .field-flow-actions > span {
        text-align: left;
    }

    .field-flow-actions .btn {
        width: 100%;
        min-height: 48px;
    }

    .pond-tabs .feeding-form,
    .pond-tabs .note-form {
        padding: 18px;
        border-radius: 16px;
    }

    .pond-tabs .feeding-form label,
    .pond-tabs .note-form label {
        gap: 9px;
        font-size: 14px;
    }

    .pond-tabs .feeding-form input,
    .pond-tabs .feeding-form select,
    .pond-tabs .feeding-form textarea,
    .pond-tabs .note-form input,
    .pond-tabs .note-form select,
    .pond-tabs .note-form textarea {
        min-height: 56px;
        font-size: 16px;
    }

    .pond-tabs .feeding-form textarea,
    .pond-tabs .note-form textarea {
        min-height: 112px;
    }

    .field-details {
        padding: 12px;
    }

    .field-details summary {
        min-height: 34px;
        display: flex;
        align-items: center;
    }

    .pond-tabs .btn-large {
        min-height: 60px;
        font-size: 15px;
    }

    .pond-record-item {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .pond-record-item time {
        grid-column: 2;
        white-space: normal;
    }

    .pond-timeline-panel {
        grid-column: auto;
    }

    .timeline-filter-bar {
        margin: 0 -2px;
        padding-bottom: 8px;
    }

    .timeline-filter-bar button {
        min-height: 38px;
        padding: 8px 11px;
    }

    .pond-timeline-item {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .pond-timeline-main {
        display: grid;
        gap: 5px;
    }

    .pond-timeline-main time {
        white-space: normal;
    }

    .economic-summary-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .economic-summary-list div {
        padding: 10px;
        border-radius: 12px;
    }

    .economic-summary-list strong {
        font-size: 16px;
    }

    .economic-summary-list .is-muted strong {
        font-size: 14px;
    }

    .profitability-panel {
        grid-column: auto;
    }

    .profitability-header {
        align-items: flex-start;
        gap: 10px;
    }

    .profitability-status {
        align-self: flex-start;
    }

    .profitability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .profitability-grid div,
    .profitability-price-field {
        padding: 10px;
        border-radius: 12px;
    }

    .profitability-grid strong,
    .profitability-price-field input {
        font-size: 15px;
    }

    .profitability-result {
        grid-column: 1 / -1;
    }

    .profitability-result strong {
        font-size: 20px;
    }

    .sale-simulator-panel {
        grid-column: auto;
    }

    .sale-simulator-header {
        align-items: flex-start;
        gap: 10px;
    }

    .sale-simulator-control,
    .sale-simulator-grid,
    .sale-comparison-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .sale-scenario-card {
        padding: 10px;
        border-radius: 12px;
    }

    .sale-scenario-card h3 {
        margin-bottom: 8px;
        font-size: 14px;
    }

    .sale-scenario-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .scenario-buttons {
        padding: 10px;
        gap: 7px;
    }

    .scenario-buttons button {
        flex: 1 1 calc(50% - 7px);
        min-height: 42px;
        padding: 8px 10px;
    }

    .sale-simulator-grid div,
    .sale-scenario-metrics div {
        padding: 10px;
        border-radius: 12px;
    }

    .sale-simulator-grid strong,
    .sale-scenario-metrics strong {
        font-size: 16px;
    }

    .sale-result strong {
        font-size: 20px;
    }

    .pond-card-header,
    .pond-card-actions,
    .page-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .pond-card-actions .btn,
    .pond-card-actions form,
    .pond-card-actions button,
    .page-actions .btn {
        width: 100%;
    }

    .pond-compact-actions .btn {
        width: auto;
    }

    .pond-card-data,
    .pond-info-grid,
    .feeding-edit-grid,
    .mortality-edit-grid,
    .biometric-edit-grid,
    .note-edit-grid,
    .water-edit-grid,
    .cost-edit-grid,
    .feeding-readonly,
    .mortality-readonly,
    .biometric-readonly,
    .water-readonly,
    .cost-readonly,
    .biometric-history-line {
        grid-template-columns: 1fr;
    }

    .water-edit-grid .span-2,
    .water-readonly strong,
    .water-readonly p,
    .water-indicators {
        grid-column: 1;
    }

    .cost-readonly p {
        grid-column: 1;
    }

    .feeding-item {
        grid-template-columns: 1fr;
    }

    .feeding-item .btn,
    .feeding-item form,
    .feeding-actions,
    .note-card .btn,
    .note-card form,
    .note-actions,
    .btn-large {
        width: 100%;
    }

    .tab-nav {
        margin: 0 -2px;
        padding: 5px;
        scroll-snap-type: x proximity;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 34px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 34px), transparent 100%);
    }

    .tab-nav button {
        min-width: max-content;
        scroll-snap-align: start;
    }

    /* Material 3 mobile refinement */
    .mobile-header {
        height: 52px;
        background: var(--md-primary);
        border-bottom: 0;
        box-shadow: var(--md-elevation-2);
    }

    .app-content {
        padding-top: 58px;
        background: var(--md-surface);
    }

    .mobile-menu-button {
        border-radius: 999px;
    }

    .mobile-menu-button:active,
    .mobile-drawer a:active,
    .quick-operation-action:active,
    .pond-card:active {
        transform: scale(.98);
    }

    .mobile-drawer {
        top: 52px;
        border-right: 0;
        border-radius: 0 24px 24px 0;
        background: var(--md-surface-container-lowest);
        box-shadow: var(--md-elevation-3);
    }

    .mobile-drawer-overlay {
        inset: 52px 0 0 0;
        background: rgba(20, 28, 33, .34);
    }

    .mobile-drawer a,
    .mobile-drawer-item,
    .mobile-drawer-form button {
        min-height: 48px;
        border-radius: 999px;
        color: var(--md-on-surface);
    }

    .mobile-drawer a.active {
        background: var(--md-secondary-container);
        color: var(--md-on-primary-container);
        font-weight: 800;
    }

    .page-heading h1 {
        font-size: 21px;
        font-weight: 700;
    }

    .panel,
    .table-card,
    .form-panel,
    .pond-card,
    .metric-card,
    .section-disclosure,
    .quick-operations-primary,
    .sale-scenario-card {
        border-radius: var(--md-radius-lg);
        box-shadow: var(--md-elevation-1);
    }

    .pond-card {
        padding: 16px;
    }

    .pond-card-open-hint {
        border-radius: 999px;
        background: var(--md-secondary-container);
        color: var(--md-on-primary-container);
        font-weight: 800;
    }

    .pond-card-more > summary {
        border-radius: 999px;
        background: var(--md-surface-container);
    }

    .quick-operations-primary {
        padding: 14px;
        background: var(--md-surface-container-low);
    }

    .quick-operations-primary .quick-operation-grid {
        gap: 10px;
    }

    .quick-operations-primary .quick-operation-action {
        min-height: 82px;
        border-radius: 20px;
        background: var(--md-primary);
        color: var(--md-on-primary);
        box-shadow: var(--md-elevation-2);
    }

    .quick-operations-primary .quick-operation-action span {
        width: 40px;
        height: 40px;
        border-radius: 16px;
        background: rgba(255, 255, 255, .18);
        color: var(--md-on-primary);
    }

    .quick-operations-primary .quick-operation-action strong {
        color: var(--md-on-primary);
        font-size: 15px;
        font-weight: 800;
    }

    .quick-operations-primary .quick-operation-action.is-decision-action {
        background: var(--md-tertiary);
    }

    .tank-section-nav {
        border-radius: 999px;
        background: var(--md-surface-container);
    }

    input,
    select,
    textarea {
        min-height: 50px;
        border-radius: 14px;
        background: var(--md-surface-container-lowest);
    }

    .btn {
        min-height: 46px;
        border-radius: 999px;
    }

    .btn-primary {
        box-shadow: var(--md-elevation-1);
    }

    .pond-card-grid .pond-card {
        padding: 18px;
        border-radius: 22px;
    }

    .pond-card-grid .pond-card-header {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 12px;
    }

    .pond-card-grid .pond-card-compact-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pond-card-grid .pond-card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}