/* ARZAN agent mobile app layer: frontend-only, no business behavior. */
:root{
    --hf-mobile-bg:#f6f7f4;
    --hf-mobile-panel:#ffffff;
    --hf-mobile-line:#e6e1da;
    --hf-mobile-text:#1f1c18;
    --hf-mobile-muted:#766f66;
    --hf-mobile-accent:#d86d2a;
    --hf-mobile-accent-dark:#9a4f20;
    --hf-mobile-green:#168a52;
    --hf-mobile-red:#c34040;
    --hf-mobile-top:58px;
    --hf-mobile-tab:66px;
}

.hf-mobile-appbar,
.hf-mobile-tabbar,
.hf-mobile-filter-toggle,
.hf-mobile-card-list,
.hf-mobile-backtop,
.hf-mobile-toast-wrap,
.hf-mobile-drawer-close{
    display:none;
}

.hf-mobile-copy{
    border:0;
    border-radius:7px;
    padding:6px 9px;
    background:#fff5ec;
    color:var(--hf-mobile-accent-dark);
    font-size:12px;
    font-weight:800;
    line-height:1;
    cursor:pointer;
}

.hf-mobile-empty{
    padding:18px 10px;
    border:1px dashed var(--hf-mobile-line);
    border-radius:10px;
    color:var(--hf-mobile-muted);
    text-align:center;
    font-weight:750;
    background:#fffdf9;
}

@media (min-width:768px){
    .hf-mobile-card-list{
        display:none !important;
    }
}

@media (max-width:767px){
    html,
    body{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        overflow-x:hidden !important;
        background:var(--hf-mobile-bg) !important;
    }

    body.hf-fixed-agent-menu,
    body.hf-fixed-menu-page,
    body.hf-agent-fixed-sidebar-page{
        padding-left:0 !important;
        padding-top:calc(var(--hf-mobile-top) + env(safe-area-inset-top)) !important;
        padding-bottom:calc(var(--hf-mobile-tab) + env(safe-area-inset-bottom) + 14px) !important;
        color:var(--hf-mobile-text);
    }

    body.hf-mobile-auth-page{
        padding-top:0 !important;
        padding-bottom:0 !important;
    }

    body.hf-mobile-menu-open{
        overflow:hidden !important;
        touch-action:none;
    }

    body.hf-fixed-agent-menu .page-shell,
    body.hf-fixed-agent-menu .page-dashboard,
    body.hf-fixed-agent-menu .agent-layout,
    body.hf-fixed-agent-menu .main-layout,
    body.hf-fixed-agent-menu .layout,
    body.hf-fixed-agent-menu .agent-content,
    body.hf-fixed-agent-menu .agent-main,
    body.hf-fixed-agent-menu main,
    body.hf-fixed-agent-menu .content,
    body.hf-fixed-agent-menu .main{
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        margin:0 !important;
        padding-left:0 !important;
        padding-right:0 !important;
        box-sizing:border-box !important;
        transform:none !important;
    }

    body.hf-fixed-agent-menu .agent-content{
        padding:12px 12px 0 !important;
    }

    body.hf-fixed-agent-menu *,
    body.hf-mobile-auth-page *{
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }

    body.hf-fixed-agent-menu *{
        transition-property:color, background-color, border-color, opacity, transform, visibility !important;
        transition-duration:.16s !important;
        transition-timing-function:ease !important;
    }

    .hf-mobile-appbar{
        position:fixed;
        left:0;
        right:0;
        top:0;
        z-index:1000001;
        display:grid;
        grid-template-columns:44px minmax(0,1fr) auto;
        align-items:center;
        gap:10px;
        min-height:calc(var(--hf-mobile-top) + env(safe-area-inset-top));
        padding:calc(env(safe-area-inset-top) + 8px) 12px 8px;
        box-sizing:border-box;
        background:#fffffc;
        border-bottom:1px solid rgba(221,213,204,.95);
        box-shadow:0 1px 0 rgba(21,19,17,.04);
    }

    .hf-mobile-menu-btn{
        position:static !important;
        display:inline-flex !important;
        width:42px !important;
        height:42px !important;
        min-width:42px !important;
        border:1px solid #eadfd4 !important;
        border-radius:10px !important;
        align-items:center !important;
        justify-content:center !important;
        gap:0 !important;
        padding:0 !important;
        background:#fff7ef !important;
        color:#3a2920 !important;
        box-shadow:none !important;
        font-size:0 !important;
        line-height:1 !important;
    }

    .hf-mobile-menu-icon{
        display:grid !important;
        width:18px !important;
        gap:4px !important;
    }

    .hf-mobile-menu-icon i{
        display:block !important;
        height:2px !important;
        width:18px !important;
        border-radius:99px !important;
        background:#3a2920 !important;
    }

    .hf-mobile-menu-label{
        display:none !important;
    }

    .hf-mobile-app-heading{
        min-width:0;
    }

    .hf-mobile-app-title{
        overflow:hidden;
        color:var(--hf-mobile-text);
        font-size:17px;
        font-weight:900;
        line-height:1.2;
        letter-spacing:0;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .hf-mobile-app-sub{
        margin-top:2px;
        color:var(--hf-mobile-muted);
        font-size:11px;
        font-weight:700;
        line-height:1.2;
    }

    .hf-mobile-app-action{
        min-height:36px;
        padding:0 12px;
        border:1px solid #f0d7c2;
        border-radius:9px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        background:#fff3e8;
        color:var(--hf-mobile-accent-dark);
        font-size:13px;
        font-weight:850;
        text-decoration:none;
        white-space:nowrap;
    }

    body .hf-side{
        display:block !important;
        left:0 !important;
        top:0 !important;
        bottom:0 !important;
        width:min(86vw,320px) !important;
        min-width:0 !important;
        max-width:320px !important;
        height:100dvh !important;
        margin:0 !important;
        padding:18px 14px calc(18px + env(safe-area-inset-bottom)) !important;
        border-radius:0 18px 18px 0 !important;
        background:#25211f !important;
        box-shadow:4px 0 18px rgba(19,18,16,.16) !important;
        transform:translateX(-105%) !important;
        transition:transform .18s ease !important;
        will-change:transform;
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch;
    }

    body.hf-mobile-menu-open .hf-side{
        transform:translateX(0) !important;
    }

    .hf-mobile-menu-overlay{
        position:fixed !important;
        inset:0 !important;
        z-index:1000000 !important;
        display:block !important;
        pointer-events:none !important;
        opacity:0 !important;
        visibility:hidden !important;
        background:rgba(30,27,24,.34) !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
        transition:opacity .16s ease, visibility .16s ease !important;
    }

    body.hf-mobile-menu-open .hf-mobile-menu-overlay{
        pointer-events:auto !important;
        opacity:1 !important;
        visibility:visible !important;
    }

    .hf-brand{
        position:relative;
        padding-right:44px !important;
    }

    .hf-mobile-drawer-close{
        position:absolute;
        right:0;
        top:0;
        width:36px;
        height:36px;
        border:1px solid rgba(255,255,255,.16);
        border-radius:10px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        background:rgba(255,255,255,.08);
        color:#fff;
        font-size:22px;
        line-height:1;
    }

    .hf-menu-item{
        min-height:44px !important;
        border-radius:10px !important;
    }

    .hf-mobile-tabbar{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:1000001;
        display:grid;
        grid-template-columns:repeat(5,minmax(0,1fr));
        gap:0;
        min-height:calc(var(--hf-mobile-tab) + env(safe-area-inset-bottom));
        padding:7px 6px calc(7px + env(safe-area-inset-bottom));
        box-sizing:border-box;
        background:#fffffc;
        border-top:1px solid rgba(221,213,204,.98);
        box-shadow:0 -1px 0 rgba(21,19,17,.04);
    }

    .hf-mobile-tab{
        min-width:0;
        min-height:52px;
        border-radius:11px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        color:#73695f;
        font-size:11px;
        font-weight:800;
        line-height:1;
        text-decoration:none;
    }

    .hf-mobile-tab-icon{
        width:22px;
        height:22px;
        border-radius:9px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        background:#f1eee8;
        color:#645c52;
        font-size:14px;
        line-height:1;
    }

    .hf-mobile-tab.active{
        color:var(--hf-mobile-accent-dark);
        background:#fff4e9;
    }

    .hf-mobile-tab.active .hf-mobile-tab-icon{
        background:#e5782f;
        color:#fff;
    }

    .hero-top,
    .summary-grid,
    .agent-grid-2,
    .product-columns,
    .apply-grid,
    .balance-stat-grid,
    .simple-stats,
    .filter-row,
    .balance-filter,
    .agent-grid-2{
        grid-template-columns:1fr !important;
        width:100% !important;
        min-width:0 !important;
        gap:12px !important;
    }

    .hero-top,
    .section-card,
    .page-card,
    .balance-main,
    .stat-box,
    .simple-stat,
    .simple-mini,
    .table-card,
    .tight-card,
    .product-column,
    .balance-card,
    .balance-filter-card,
    .balance-table-card,
    .apply-card,
    .history-card,
    .bank-card,
    .panel-card,
    .agent-card,
    .login-card{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        margin-left:0 !important;
        margin-right:0 !important;
        border-radius:12px !important;
        box-sizing:border-box !important;
        box-shadow:0 1px 0 rgba(21,19,17,.06) !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }

    .hero-top{
        min-height:auto !important;
        padding:18px 16px !important;
        display:block !important;
    }

    .hero-left h1,
    .page-title,
    .section-title,
    .tight-title,
    .balance-title,
    .card-title{
        font-size:20px !important;
        line-height:1.25 !important;
        letter-spacing:0 !important;
        word-break:break-word;
    }

    .hero-left p,
    .balance-subtitle,
    .tight-sub,
    .section-mini,
    .balance-table-note,
    .card-tag{
        font-size:12px !important;
        line-height:1.45 !important;
    }

    .summary-grid{
        margin-top:12px !important;
        padding:0 !important;
    }

    .balance-main,
    .stat-box{
        min-height:auto !important;
        padding:18px 16px !important;
    }

    .wallet-art,
    .stat-icon{
        transform:scale(.82) !important;
        transform-origin:right top !important;
    }

    .agent-grid-2{
        padding:0 !important;
        display:grid !important;
    }

    .section-card,
    .table-card,
    .tight-card,
    .balance-filter-card,
    .balance-table-card,
    .apply-card,
    .history-card{
        padding:16px !important;
        margin-top:12px !important;
    }

    .chart-wrap{
        height:230px !important;
        padding:6px 0 0 !important;
        overflow:hidden !important;
    }

    .hf-pc-table-view{
        display:none !important;
    }

    .agent-table-wrap,
    .table-wrap,
    .product-table-wrap,
    .balance-table-wrap{
        width:100% !important;
        max-width:100% !important;
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch;
    }

    table,
    .agent-table,
    .product-table,
    .balance-table,
    .recharge-history-table{
        min-width:760px;
    }

    .hf-mobile-card-list{
        display:grid !important;
        grid-template-columns:1fr;
        gap:10px;
        margin-top:12px;
    }

    .hf-mobile-card{
        width:100%;
        min-width:0;
        padding:13px 13px 12px;
        border:1px solid var(--hf-mobile-line);
        border-radius:12px;
        box-sizing:border-box;
        background:var(--hf-mobile-panel);
        box-shadow:0 1px 0 rgba(21,19,17,.04);
    }

    .hf-mobile-card-top{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:10px;
        margin-bottom:10px;
    }

    .hf-mobile-card-title{
        min-width:0;
        color:var(--hf-mobile-text);
        font-size:15px;
        font-weight:900;
        line-height:1.35;
        word-break:break-all;
    }

    .hf-mobile-card-sub{
        margin-top:3px;
        color:var(--hf-mobile-muted);
        font-size:12px;
        font-weight:700;
        line-height:1.35;
        word-break:break-all;
    }

    .hf-mobile-fields{
        display:grid;
        grid-template-columns:1fr;
        gap:7px;
    }

    .hf-mobile-field{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:12px;
        min-width:0;
        padding-top:7px;
        border-top:1px solid #f0ece6;
        color:var(--hf-mobile-text);
        font-size:13px;
        line-height:1.45;
    }

    .hf-mobile-field-label{
        flex:0 0 auto;
        color:var(--hf-mobile-muted);
        font-weight:800;
    }

    .hf-mobile-field-value{
        min-width:0;
        max-width:68%;
        text-align:right;
        font-weight:850;
        word-break:break-all;
    }

    .hf-mobile-card-actions{
        display:flex;
        flex-wrap:wrap;
        justify-content:flex-end;
        gap:8px;
        margin-top:10px;
    }

    .hf-mobile-primary-link{
        min-height:36px;
        padding:0 12px;
        border-radius:9px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        background:#e5782f;
        color:#fff !important;
        font-size:13px;
        font-weight:850;
        text-decoration:none !important;
    }

    .filter-card,
    .balance-filter-card{
        position:relative !important;
    }

    .filter-row,
    .balance-filter{
        display:grid !important;
    }

    input,
    select,
    textarea,
    .agent-input,
    .agent-select,
    .filter-input,
    .filter-select,
    .file-input{
        width:100% !important;
        min-width:0 !important;
        min-height:46px !important;
        box-sizing:border-box !important;
        font-size:16px !important;
    }

    textarea,
    .agent-textarea{
        min-height:112px !important;
    }

    button,
    .agent-btn,
    .filter-btn,
    .balance-btn,
    .balance-reset,
    .service-btn{
        min-height:44px;
        white-space:normal;
    }

    .action-row,
    .table-head,
    .section-head,
    .history-head,
    .balance-table-head{
        flex-direction:column !important;
        align-items:stretch !important;
        gap:10px !important;
    }

    .quick-date-bar{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
        overflow:visible !important;
    }

    .quick-date-btn{
        min-width:0 !important;
        justify-content:center !important;
    }

    .product-columns{
        display:grid !important;
    }

    .product-column{
        padding:14px !important;
    }

    .code-block,
    pre,
    code{
        max-width:100% !important;
        overflow-x:auto !important;
        white-space:pre-wrap;
        word-break:break-word;
    }

    .fade-up,
    .delay-1,
    .delay-2,
    .delay-3,
    .delay-4{
        animation:none !important;
        opacity:1 !important;
        transform:none !important;
    }

    .btn-ripple{
        display:none !important;
    }

    .hf-mobile-toast-wrap{
        position:fixed;
        left:12px;
        right:12px;
        top:calc(var(--hf-mobile-top) + env(safe-area-inset-top) + 10px);
        z-index:1000003;
        display:grid;
        gap:8px;
        pointer-events:none;
    }

    .hf-mobile-toast{
        justify-self:center;
        max-width:100%;
        padding:10px 13px;
        border:1px solid #ead7c8;
        border-radius:10px;
        background:#fffaf4;
        color:#4d3422;
        font-size:13px;
        font-weight:850;
        box-shadow:0 4px 12px rgba(31,24,18,.10);
    }

    .hf-mobile-toast.err{
        border-color:#f0c7c7;
        background:#fff5f5;
        color:#9d3030;
    }

    .hf-mobile-backtop{
        position:fixed;
        right:12px;
        bottom:calc(var(--hf-mobile-tab) + env(safe-area-inset-bottom) + 14px);
        z-index:1000002;
        display:inline-flex;
        width:42px;
        height:42px;
        border:1px solid #eadfd4;
        border-radius:12px;
        align-items:center;
        justify-content:center;
        background:#ffffff;
        color:#3a2920;
        font-size:18px;
        font-weight:900;
        box-shadow:0 4px 12px rgba(31,24,18,.10);
        opacity:0;
        visibility:hidden;
        transform:translateY(8px);
        transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
    }

    .hf-mobile-backtop.is-visible{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }

    .login-shell{
        min-height:100dvh !important;
        padding:20px 12px !important;
        box-sizing:border-box !important;
    }

    .login-card{
        padding:24px 16px !important;
    }

    .login-brand h1{
        font-size:26px !important;
        letter-spacing:0 !important;
    }

    .web-kf{
        right:12px !important;
        bottom:18px !important;
    }
}