<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{ $title ?? config('app.name', 'ZT Client Portal') }}</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="{{ asset('css/portal.css') }}">
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        <link rel="stylesheet" href="{{ asset('css/client-portal-responsive.css') }}?v={{ time() }}">
        <style>
            .client-layout { max-width: 1480px; margin: 0 auto; padding: 28px 22px 64px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
            .client-layout-main { min-width: 0; }
            .client-sidebar { position: sticky; top: 96px; }
            .client-sidebar-card { border: 1px solid rgba(15,23,42,.08); border-radius: 24px; background: #fff; box-shadow: 0 18px 50px rgba(15,23,42,.08); padding: 18px; }
            .client-sidebar-user { padding: 12px 12px 16px; border-bottom: 1px solid rgba(15,23,42,.08); margin-bottom: 12px; }
            .client-sidebar-user span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #64748b; font-weight: 800; margin-bottom: 8px; }
            .client-sidebar-user strong { display: block; color: #0f172a; font-size: 16px; line-height: 1.25; }
            .client-sidebar-user small { display: block; margin-top: 4px; color: #64748b; word-break: break-word; }
            .client-sidebar-credit { margin: 0 0 14px; padding: 15px; border-radius: 16px; background: linear-gradient(135deg, #f5f3ff, #eef2ff); border: 1px solid #ddd6fe; }
            .client-sidebar-credit > span { display:block; color:#64748b; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
            .client-sidebar-credit > strong { display:block; margin-top:7px; color:#0f172a; font-size:20px; letter-spacing:-.03em; }
            .client-sidebar-credit > a { display:inline-flex; margin-top:12px; padding:8px 11px; border-radius:10px; background:linear-gradient(90deg,#6f00ff,#9200ff); color:#fff; text-decoration:none; font-size:12px; font-weight:900; box-shadow:0 8px 20px rgba(120,0,255,.20); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; }
            .client-sidebar-credit > a:hover { transform:translateY(-1px); box-shadow:0 11px 24px rgba(120,0,255,.28); filter:brightness(.97); }
            .client-sidebar-credit > a:focus-visible { outline:3px solid rgba(124,0,255,.22); outline-offset:3px; }
            .client-sidebar-credit > small { display:block; margin-top:8px; color:#92400e; }
            .client-sidebar-nav { display: grid; gap: 6px; }
            .client-sidebar-link { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border-radius: 14px; color: #334155; font-weight: 700; text-decoration: none; transition: .18s ease; }
            .client-sidebar-link:hover, .client-sidebar-link.active { background: #eff6ff; color: #075985; }
            .client-sidebar-logout { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(15,23,42,.08); }
            .client-sidebar-logout button { width: 100%; border: 0; border-radius: 14px; padding: 11px 12px; background: #f8fafc; color: #475569; font-weight: 800; cursor: pointer; }
            .client-sidebar-logout button:hover { background: #fee2e2; color: #991b1b; }
            .alert { border-radius: 16px; padding: 14px 16px; margin: 0 0 18px; font-size: 14px; font-weight: 800; line-height: 1.45; border: 1px solid transparent; box-shadow: 0 12px 30px rgba(15,23,42,.06); }
            .alert-success { background: #dcfce7; color: #166534; border-color: #86efac; }
            .alert-error, .alert-danger { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
            .alert-warning { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
            .pending-invoice-alert { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid rgba(245,158,11,.35); background: #fffbeb; border-radius: 20px; padding: 16px 18px; margin: 0 0 20px; box-shadow: 0 14px 40px rgba(245,158,11,.12); }
            .pending-invoice-alert strong { display: block; color: #78350f; margin-bottom: 4px; }
            .pending-invoice-alert p { margin: 0; color: #92400e; font-size: 14px; }
            .pending-invoice-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
            .pending-invoice-close { border: 0; background: transparent; color: #92400e; font-weight: 800; cursor: pointer; padding: 8px; }
            .client-clean-table { width: 100%; border-collapse: collapse; }
            .client-clean-table th { text-align: left; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #64748b; padding: 14px 16px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
            .client-clean-table td { padding: 16px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; color: #334155; }
            .client-clean-table tr:last-child td { border-bottom: 0; }
            .client-clean-table strong { color: #0f172a; }
            .status-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 7px 11px; font-size: 12px; font-weight: 800; text-transform: capitalize; background: #f1f5f9; color: #475569; }
            .status-pill.paid, .status-pill.active { background: #dcfce7; color: #166534; }
            .status-pill.unpaid, .status-pill.payment_pending, .status-pill.pending { background: #fef3c7; color: #92400e; }
            .status-pill.cancelled, .status-pill.refunded, .status-pill.suspended, .status-pill.terminated { background: #fee2e2; color: #991b1b; }
            .service-card-list { display: grid; gap: 14px; }
            .service-card { border: 1px solid #e2e8f0; border-radius: 22px; background: #fff; padding: 18px; display: grid; grid-template-columns: minmax(220px, 1.5fr) minmax(150px, .8fr) minmax(150px, .8fr) minmax(130px, .65fr) auto; gap: 16px; align-items: center; }
            .service-card-link { color: inherit; text-decoration: none; transition: .18s ease; }
            .service-card-link:hover { border-color: #93c5fd; box-shadow: 0 16px 45px rgba(15,23,42,.08); transform: translateY(-1px); }
            .service-card-title { display: grid; gap: 5px; }
            .service-card-title strong { color: #0f172a; font-size: 16px; }
            .service-card-title small, .service-muted { color: #64748b; font-size: 13px; }
            .service-price strong { color: #0f172a; }
            .hosting-details { margin-top: 10px; }
            .hosting-details summary { cursor: pointer; color: #075985; font-weight: 800; font-size: 13px; }
            .hosting-details-grid { margin-top: 10px; display: grid; gap: 7px; font-size: 13px; color: #475569; }
            .hosting-password { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
            .hosting-password input { width: 132px; max-width: 100%; border: 1px solid #e2e8f0; border-radius: 10px; padding: 5px 8px; font-size: 12px; background: #fff; }
            .tiny-link-btn { border: 0; background: #f1f5f9; color: #0f172a; border-radius: 10px; padding: 6px 9px; font-size: 12px; font-weight: 800; cursor: pointer; }
            .service-page-wrap { max-width: 1180px; }
            .service-topbar { margin-bottom: 14px; }
            .service-back-link { display: inline-flex; align-items: center; gap: 8px; color: #475569; font-size: 14px; font-weight: 800; text-decoration: none; }
            .service-back-link:hover { color: #075985; }
            .service-hero-card { border: 1px solid rgba(15,23,42,.08); border-radius: 28px; background: linear-gradient(135deg, #ffffff 0%, #f8fbff 54%, #f5f3ff 100%); box-shadow: 0 22px 65px rgba(15,23,42,.08); padding: 26px; display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 18px; }
            .service-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: #64748b; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
            .service-hero-main h1 { margin: 0; color: #0f172a; font-size: clamp(26px, 3vw, 38px); line-height: 1.08; letter-spacing: -.04em; }
            .service-hero-main p { margin: 8px 0 0; color: #64748b; font-size: 15px; }
            .service-hero-status { display: grid; justify-items: end; gap: 10px; white-space: nowrap; }
            .service-hero-status small { color: #64748b; font-weight: 700; }
            .service-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
            .service-dashboard-main { display: grid; gap: 18px; min-width: 0; }
            .service-dashboard-side { position: sticky; top: 96px; }
            .service-panel { border: 1px solid rgba(15,23,42,.08); border-radius: 24px; background: #fff; box-shadow: 0 18px 50px rgba(15,23,42,.06); padding: 22px; }
            .service-panel-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
            .service-panel-head.inline { align-items: center; }
            .service-panel-head h2, .service-summary-panel h2 { margin: 0; color: #0f172a; font-size: 20px; letter-spacing: -.02em; }
            .service-panel-head p { max-width: 370px; margin: 0; color: #64748b; font-size: 14px; line-height: 1.55; }
            .service-panel-head small { color: #64748b; font-weight: 700; }
            .service-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
            .service-action-card { min-height: 132px; border: 1px solid #e2e8f0; border-radius: 20px; padding: 18px; background: #f8fafc; color: #0f172a; text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; transition: .18s ease; }
            .service-action-card:hover { transform: translateY(-2px); border-color: #93c5fd; box-shadow: 0 18px 40px rgba(15,23,42,.08); background: #fff; }
            .service-action-card.primary { background: linear-gradient(135deg, #0f172a, #1d4ed8); color: #fff; border-color: transparent; }
            .service-action-card.primary small, .service-action-card.primary .service-action-icon { color: rgba(255,255,255,.76); }
            .service-action-icon { width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(15,23,42,.06); color: #334155; font-weight: 900; }
            .service-action-card strong { display: block; margin-top: 14px; font-size: 16px; line-height: 1.2; }
            .service-action-card small { display: block; margin-top: 5px; color: #64748b; font-size: 13px; line-height: 1.35; }
            .usage-stat-grid.refined { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
            .usage-stat-box.refined { border: 1px solid #e2e8f0; border-radius: 18px; padding: 18px; background: #f8fafc; }
            .usage-stat-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 14px; }
            .usage-stat-top span { color: #475569; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
            .usage-stat-top strong { color: #0f172a; font-size: 24px; letter-spacing: -.04em; }
            .usage-meter { height: 10px; border-radius: 999px; background: #e2e8f0; overflow: hidden; margin-bottom: 10px; }
            .usage-meter i { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: linear-gradient(90deg, #2563eb, #7c3aed); }
            .usage-stat-box.refined small { color: #64748b; font-weight: 700; }
            .change-password-inline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; }
            .change-password-inline input { width: 100%; min-height: 48px; border: 1px solid #cbd5e1; border-radius: 14px; padding: 0 15px; font-size: 15px; color: #0f172a; outline: none; }
            .change-password-inline input:focus { border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.10); }
            .service-submit-btn { min-height: 48px; border: 0; border-radius: 14px; padding: 0 20px; background: #0f172a; color: #fff; font-weight: 900; cursor: pointer; white-space: nowrap; }
            .service-submit-btn:hover { background: #1d4ed8; }
            .service-summary-panel { display: grid; gap: 10px; }
            .service-summary-list.refined { margin: 8px 0 0; display: grid; gap: 0; }
            .service-summary-list.refined div { display: grid; gap: 5px; padding: 14px 0; border-bottom: 1px solid #e2e8f0; }
            .service-summary-list.refined div:last-child { border-bottom: 0; padding-bottom: 0; }
            .service-summary-list.refined dt { color: #64748b; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
            .service-summary-list.refined dd { margin: 0; color: #0f172a; font-weight: 800; word-break: break-word; }

            .domain-table-link { color:#0f172a; text-decoration:none; }
            .domain-table-link:hover { color:#1d4ed8; }
            .domain-manage-btn { min-height:36px; padding:0 13px; font-size:12px; white-space:nowrap; }
            .domain-overview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 26px; }
            .domain-renewal-form { display:grid; gap:18px; }
            .domain-renewal-form > label > span { display:block; margin-bottom:8px; color:#334155; font-size:13px; font-weight:900; }
            .domain-renewal-form select { width:100%; min-height:48px; border:1px solid #cbd5e1; border-radius:14px; background:#fff; color:#0f172a; padding:0 14px; font-weight:800; }
            .domain-renewal-submit { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px; border:1px solid #dbeafe; border-radius:16px; background:#eff6ff; }
            .domain-renewal-submit strong { display:block; color:#0f172a; }
            .domain-renewal-submit small { display:block; margin-top:4px; color:#64748b; line-height:1.45; }
            .domain-renewal-pending { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px; border:1px solid #fde68a; border-radius:16px; background:#fffbeb; }
            .domain-renewal-pending strong { display:block; color:#78350f; }
            .domain-renewal-pending span { display:block; margin-top:4px; color:#92400e; font-size:13px; }
            .domain-overview-item { display:grid; gap:7px; padding:17px 0; border-bottom:1px solid #e2e8f0; min-width:0; }
            .domain-overview-item span { color:#64748b; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
            .domain-overview-item strong { color:#0f172a; font-size:15px; line-height:1.45; overflow-wrap:anywhere; }
            .domain-nameserver-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
            .domain-nameserver-form label { display:grid; gap:7px; min-width:0; }
            .domain-nameserver-form label span { color:#334155; font-size:12px; font-weight:900; }
            .domain-nameserver-form input { width:100%; min-height:48px; border:1px solid #cbd5e1; border-radius:14px; padding:0 15px; color:#0f172a; background:#fff; }
            .domain-nameserver-form input:focus { border-color:#2563eb; box-shadow:0 0 0 4px rgba(37,99,235,.10); outline:none; }
            .domain-form-actions { grid-column:1 / -1; display:flex; justify-content:flex-end; padding-top:4px; }
            .domain-inline-notice { margin-bottom:14px; padding:12px 14px; border:1px solid #fde68a; border-radius:14px; background:#fffbeb; color:#92400e; font-size:13px; font-weight:700; line-height:1.5; }
            .domain-unavailable-panel { text-align:center; padding:38px 24px; }
            .domain-unavailable-panel h2 { margin:8px 0; color:#0f172a; }
            .domain-unavailable-panel p { margin:0 auto; max-width:620px; color:#64748b; line-height:1.7; }

            .dashboard-page { max-width: 1220px; }
            .dashboard-welcome-refined { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:22px; }
            .dashboard-welcome-refined h1 { margin:0; color:#0f172a; font-size:clamp(28px,3vw,42px); line-height:1.08; letter-spacing:-.04em; }
            .dashboard-welcome-refined p { margin:8px 0 0; color:#64748b; }
            .dashboard-primary-action, .dashboard-card-link { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 15px; border-radius:12px; background:#0f172a; color:#fff; font-size:13px; font-weight:900; text-decoration:none; white-space:nowrap; }
            .dashboard-primary-action:hover, .dashboard-card-link:hover { background:#6d28d9; }
            .dashboard-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
            .dashboard-metric-card { display:flex; align-items:center; gap:14px; min-height:112px; padding:18px; border:1px solid #e2e8f0; border-radius:20px; background:#fff; box-shadow:0 14px 36px rgba(15,23,42,.05); text-decoration:none; transition:.18s ease; }
            .dashboard-metric-card:hover { transform:translateY(-2px); border-color:#c4b5fd; box-shadow:0 18px 42px rgba(15,23,42,.08); }
            .dashboard-metric-icon { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:#f3e8ff; color:#7c3aed; font-weight:900; }
            .dashboard-metric-card strong { display:block; color:#0f172a; font-size:28px; line-height:1; }
            .dashboard-metric-card div span { display:block; margin-top:7px; color:#64748b; font-size:12px; font-weight:800; }
            .dashboard-content-grid { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:18px; align-items:start; }
            .dashboard-content-main { display:grid; gap:18px; }
            .dashboard-feature-card, .dashboard-action-card, .dashboard-domain-card, .dashboard-invoice-panel { border:1px solid #e2e8f0; border-radius:22px; background:#fff; box-shadow:0 16px 44px rgba(15,23,42,.05); padding:22px; }
            .dashboard-feature-card { display:flex; justify-content:space-between; align-items:center; gap:20px; background:linear-gradient(135deg,#fff,#faf5ff); }
            .dashboard-card-copy h2, .dashboard-action-card h2, .dashboard-domain-card h2, .dashboard-section-head h2 { margin:0; color:#0f172a; font-size:20px; letter-spacing:-.02em; }
            .dashboard-card-copy p, .dashboard-action-card p, .dashboard-domain-card p { margin:8px 0 0; color:#64748b; line-height:1.6; font-size:14px; }
            .dashboard-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
            .dashboard-action-card { min-height:190px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; }
            .dashboard-domain-card { display:grid; gap:18px; }
            .dashboard-domain-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
            .dashboard-domain-form .input { min-height:46px; border-radius:13px; padding:0 14px; }
            .dashboard-section-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding-bottom:16px; border-bottom:1px solid #e2e8f0; }
            .dashboard-section-head a { color:#6d28d9; font-weight:900; font-size:13px; text-decoration:none; }
            .dashboard-invoice-list { display:grid; }
            .dashboard-invoice-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid #e2e8f0; text-decoration:none; }
            .dashboard-invoice-row:last-child { border-bottom:0; padding-bottom:0; }
            .dashboard-invoice-row strong { display:block; color:#0f172a; }
            .dashboard-invoice-row div span { display:block; margin-top:4px; color:#64748b; font-size:13px; }
            .dashboard-empty-state { padding:24px; border:1px dashed #cbd5e1; border-radius:16px; color:#64748b; text-align:center; background:#f8fafc; }
            .upgrade-carousel-wrap { position:relative; }
            .upgrade-carousel { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(310px, 370px); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; padding:4px 4px 14px; }
            .upgrade-product-card { scroll-snap-align:start; border:1px solid #e2e8f0; border-radius:22px; background:#fff; padding:20px; display:flex; flex-direction:column; min-height:520px; box-shadow:0 14px 36px rgba(15,23,42,.05); }
            .upgrade-product-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
            .upgrade-product-label { color:#64748b; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
            .upgrade-product-card h3 { margin:5px 0 0; color:#0f172a; font-size:20px; }
            .upgrade-badge { padding:6px 9px; border-radius:999px; background:#dcfce7; color:#166534; font-size:11px; font-weight:900; white-space:nowrap; }
            .upgrade-feature-list { margin:18px 0; padding:0; list-style:none; display:grid; gap:10px; color:#475569; font-size:13px; line-height:1.45; }
            .upgrade-feature-list li { position:relative; padding-left:21px; }
            .upgrade-feature-list li::before { content:'✓'; position:absolute; left:0; color:#16a34a; font-weight:900; }
            .upgrade-product-form { display:grid; gap:12px; margin-top:auto; padding-top:16px; border-top:1px solid #e2e8f0; }
            .upgrade-product-form label span { display:block; margin-bottom:7px; color:#334155; font-size:12px; font-weight:900; }
            .upgrade-product-form select { width:100%; min-height:46px; border:1px solid #cbd5e1; border-radius:13px; padding:0 12px; }
            .upgrade-carousel-btn { position:absolute; top:45%; z-index:2; width:40px; height:40px; border:1px solid #e2e8f0; border-radius:999px; background:#fff; color:#0f172a; box-shadow:0 10px 28px rgba(15,23,42,.12); font-size:28px; cursor:pointer; }
            .upgrade-carousel-btn.prev { left:-14px; } .upgrade-carousel-btn.next { right:-14px; }
            .payment-method-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; padding:5px; border-radius:14px; background:#f1f5f9; }
            .payment-method-tab { min-height:42px; border:0; border-radius:10px; background:transparent; color:#475569; font-weight:900; cursor:pointer; }
            .payment-method-tab.active { background:#fff; color:#6d28d9; box-shadow:0 5px 16px rgba(15,23,42,.08); }
            .payment-method-content { display:none; padding-top:16px; }
            .payment-method-content.active { display:block; }
            .payment-method-content h3 { margin:0 0 8px; color:#0f172a; font-size:16px; }
            .payment-full-btn { width:100%; }
            .bank-payment-form { display:grid; gap:12px; }
            .bank-payment-form .select, .bank-payment-form .input, .bank-payment-form .textarea { width:100%; margin-top:7px; border-radius:12px; }
            .bank-details-box { padding:13px; border-radius:12px; background:#fffbeb; border:1px solid #fde68a; color:#92400e; white-space:pre-line; font-size:13px; line-height:1.55; }
            @media (max-width: 1100px) { .client-layout { grid-template-columns: 1fr; } .client-sidebar { position: static; } .client-sidebar-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .service-card { grid-template-columns: 1fr 1fr; } .dashboard-content-grid { grid-template-columns:1fr; } .dashboard-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .service-detail-grid, .service-dashboard-grid { grid-template-columns: 1fr; } .service-dashboard-side { position: static; } }
            @media (max-width: 720px) {
                html, body { max-width:100%; overflow-x:hidden; }
                .client-layout { width:100%; padding:14px 10px 40px; gap:14px; }
                .client-layout-main, .portal-container, .dashboard-page, .service-page-wrap { width:100%; max-width:100%; min-width:0; }

                /* Compact mobile account header and swipeable navigation */
                .client-sidebar-card { padding:12px; border-radius:18px; box-shadow:0 10px 30px rgba(15,23,42,.06); }
                .client-sidebar-user { padding:4px 4px 11px; margin-bottom:10px; }
                .client-sidebar-user span { margin-bottom:5px; font-size:10px; }
                .client-sidebar-user strong { font-size:15px; }
                .client-sidebar-user small { font-size:12px; }
                .client-sidebar-credit { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:3px 10px; margin-bottom:10px; padding:11px 12px; border-radius:14px; }
                .client-sidebar-credit > span { font-size:9px; }
                .client-sidebar-credit > strong { margin-top:0; font-size:17px; }
                .client-sidebar-credit > a { grid-column:2; grid-row:1 / span 2; margin-top:0; min-height:36px; align-items:center; padding:7px 10px; white-space:nowrap; }
                .client-sidebar-credit > small { grid-column:1 / -1; }
                .client-sidebar-nav { display:flex; gap:7px; overflow-x:auto; padding:1px 1px 7px; scroll-snap-type:x proximity; scrollbar-width:none; }
                .client-sidebar-nav::-webkit-scrollbar { display:none; }
                .client-sidebar-link { flex:0 0 auto; min-height:38px; padding:9px 12px; border:1px solid #e2e8f0; border-radius:999px; background:#fff; font-size:12px; white-space:nowrap; scroll-snap-align:start; }
                .client-sidebar-link.active { border-color:#bfdbfe; background:#eff6ff; }
                .client-sidebar-logout { display:none; }

                .pending-invoice-alert { align-items:stretch; flex-direction:column; padding:14px; border-radius:16px; }
                .pending-invoice-actions { width:100%; display:grid; grid-template-columns:1fr auto; }
                .pending-invoice-actions form, .pending-invoice-actions .primary-btn { width:100%; }

                /* Dashboard */
                .dashboard-welcome-refined { align-items:flex-start; flex-direction:column; gap:14px; margin-bottom:16px; }
                .dashboard-welcome-refined h1 { font-size:28px; line-height:1.12; }
                .dashboard-welcome-refined p { font-size:13px; line-height:1.55; }
                .dashboard-primary-action { width:100%; min-height:46px; }
                .dashboard-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-bottom:14px; }
                .dashboard-metric-card { min-height:92px; padding:13px 11px; gap:10px; border-radius:16px; }
                .dashboard-metric-icon { width:34px; height:34px; border-radius:11px; font-size:12px; flex:0 0 auto; }
                .dashboard-metric-card strong { font-size:23px; }
                .dashboard-metric-card div span { margin-top:5px; font-size:10px; line-height:1.25; }
                .dashboard-content-grid, .dashboard-content-main { gap:12px; }
                .dashboard-feature-card, .dashboard-action-card, .dashboard-domain-card, .dashboard-invoice-panel { padding:16px; border-radius:18px; }
                .dashboard-feature-card { align-items:stretch; flex-direction:column; gap:15px; }
                .dashboard-card-grid { grid-template-columns:1fr; gap:12px; }
                .dashboard-action-card { min-height:0; gap:16px; }
                .dashboard-card-link { width:100%; min-height:43px; }
                .dashboard-domain-form { grid-template-columns:1fr; }
                .dashboard-domain-form .primary-btn { width:100%; min-height:44px; }
                .dashboard-section-head { align-items:center; }
                .dashboard-invoice-row { align-items:flex-start; padding:14px 0; }
                .dashboard-invoice-row .status-pill { flex:0 0 auto; max-width:48%; text-align:center; justify-content:center; padding:6px 8px; font-size:10px; white-space:normal; }

                /* Service, upgrade and invoice screens */
                .service-card { grid-template-columns:1fr; gap:12px; padding:16px; border-radius:18px; }
                .service-hero-card { flex-direction:column; padding:18px; border-radius:20px; gap:14px; }
                .service-hero-main h1 { font-size:27px; overflow-wrap:anywhere; }
                .service-hero-status { width:100%; grid-template-columns:auto 1fr; justify-items:start; align-items:center; }
                .service-panel-head { flex-direction:column; gap:8px; margin-bottom:14px; }
                .service-panel { min-width:0; padding:16px; border-radius:18px; overflow:hidden; }
                .service-panel-head h2, .service-summary-panel h2 { font-size:18px; }
                .service-actions-grid, .usage-stat-grid, .change-password-inline { grid-template-columns:1fr; }
                .domain-overview-grid, .domain-nameserver-form { grid-template-columns:1fr; }
                .domain-form-actions { justify-content:stretch; }
                .domain-renewal-submit, .domain-renewal-pending { align-items:stretch; flex-direction:column; }
                .domain-renewal-submit .service-submit-btn, .domain-renewal-pending .primary-btn { width:100%; text-align:center; justify-content:center; }
                .domain-form-actions .service-submit-btn { width:100%; }
                .service-action-card { min-height:112px; padding:15px; }
                .change-password-row, .usage-card-head { flex-direction:column; align-items:stretch; }
                .client-clean-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
                .client-clean-table th, .client-clean-table td { padding:11px 12px; font-size:12px; }
                .upgrade-carousel { grid-auto-columns:calc(100vw - 52px); gap:12px; padding:2px 2px 12px; }
                .upgrade-product-card { min-height:auto; padding:16px; border-radius:18px; }
                .upgrade-product-top { flex-direction:column; }
                .upgrade-carousel-btn { display:none; }
                .payment-method-tabs { grid-template-columns:1fr; }
                .payment-method-tab { min-height:44px; }
                .bank-payment-form input, .bank-payment-form select, .bank-payment-form textarea { max-width:100%; }
            }
            @media (max-width: 390px) {
                .client-layout { padding-left:8px; padding-right:8px; }
                .dashboard-metrics { grid-template-columns:1fr 1fr; }
                .dashboard-metric-card { padding:12px 9px; }
                .dashboard-metric-icon { display:none; }
                .dashboard-welcome-refined h1 { font-size:25px; }
                .upgrade-carousel { grid-auto-columns:calc(100vw - 38px); }
            }


            /*
             * No-build mobile hotfix.
             * Kept inline so Blade changes work immediately without rebuilding Vite/Tailwind assets.
             */
            @media (max-width: 767px) {
                *, *::before, *::after { box-sizing:border-box; }

                html,
                body,
                .portal-shell,
                .portal-shell > main,
                .client-layout,
                .client-layout-main,
                .client-sidebar,
                .client-sidebar-card,
                .portal-container,
                .dashboard-page,
                .dashboard-page > *,
                .dashboard-content-grid,
                .dashboard-content-main,
                .dashboard-invoice-panel {
                    width:100% !important;
                    max-width:100% !important;
                    min-width:0 !important;
                }

                html, body { overflow-x:hidden !important; }
                .portal-shell, .portal-shell > main { overflow-x:clip !important; }

                .client-layout {
                    display:block !important;
                    margin:0 auto !important;
                    padding:12px 10px 36px !important;
                }

                .client-sidebar {
                    position:static !important;
                    top:auto !important;
                    margin:0 0 14px !important;
                }

                .client-sidebar-card {
                    overflow:hidden !important;
                    padding:12px !important;
                    border-radius:18px !important;
                }

                .client-sidebar-user,
                .client-sidebar-credit,
                .client-sidebar-nav {
                    min-width:0 !important;
                    max-width:100% !important;
                }

                .client-sidebar-user strong,
                .client-sidebar-user small,
                .dashboard-page h1,
                .dashboard-page h2,
                .dashboard-page p,
                .dashboard-invoice-row strong,
                .dashboard-invoice-row span {
                    overflow-wrap:anywhere;
                    word-break:normal;
                }

                .client-sidebar-nav {
                    width:100% !important;
                    display:flex !important;
                    grid-template-columns:none !important;
                    gap:7px !important;
                    overflow-x:auto !important;
                    overflow-y:hidden !important;
                    overscroll-behavior-inline:contain;
                    -webkit-overflow-scrolling:touch;
                }

                .client-sidebar-link { flex:0 0 auto !important; }

                .dashboard-page { padding:0 !important; margin:0 !important; }

                .dashboard-welcome-refined {
                    display:grid !important;
                    grid-template-columns:minmax(0, 1fr) !important;
                    align-items:start !important;
                    gap:14px !important;
                }

                .dashboard-welcome-refined > div { min-width:0 !important; }
                .dashboard-primary-action { width:100% !important; white-space:normal !important; text-align:center; }

                .dashboard-metrics {
                    width:100% !important;
                    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
                    gap:9px !important;
                }

                .dashboard-metric-card {
                    width:100% !important;
                    min-width:0 !important;
                    max-width:100% !important;
                    padding:13px 10px !important;
                    overflow:hidden;
                }

                .dashboard-metric-card > div { min-width:0 !important; }
                .dashboard-metric-card div span { overflow-wrap:anywhere; }

                .dashboard-content-grid,
                .dashboard-card-grid,
                .dashboard-domain-form {
                    display:grid !important;
                    grid-template-columns:minmax(0, 1fr) !important;
                }

                .dashboard-feature-card,
                .dashboard-action-card,
                .dashboard-domain-card,
                .dashboard-invoice-panel {
                    width:100% !important;
                    min-width:0 !important;
                    max-width:100% !important;
                    overflow:hidden;
                }

                .dashboard-feature-card {
                    display:grid !important;
                    grid-template-columns:minmax(0, 1fr) !important;
                    align-items:stretch !important;
                }

                .dashboard-card-link,
                .dashboard-domain-form .primary-btn {
                    width:100% !important;
                    max-width:100% !important;
                    white-space:normal !important;
                    text-align:center;
                }

                .dashboard-domain-form .input,
                .dashboard-domain-form input,
                .dashboard-domain-form button {
                    width:100% !important;
                    min-width:0 !important;
                    max-width:100% !important;
                }

                .dashboard-section-head {
                    display:flex !important;
                    flex-wrap:wrap !important;
                    align-items:flex-start !important;
                }

                .dashboard-invoice-row {
                    width:100% !important;
                    min-width:0 !important;
                    flex-wrap:wrap !important;
                }

                .dashboard-invoice-row > div { min-width:0 !important; flex:1 1 150px; }
                .dashboard-invoice-row .status-pill { max-width:100% !important; flex:0 1 auto !important; }

                img, svg, video, canvas, iframe { max-width:100%; }
                input, select, textarea, button { max-width:100%; }
            }

            @media (max-width: 350px) {
                .dashboard-metrics { grid-template-columns:minmax(0, 1fr) !important; }
                .client-sidebar-credit { grid-template-columns:minmax(0, 1fr) !important; }
                .client-sidebar-credit > a { grid-column:1 !important; grid-row:auto !important; width:100%; justify-content:center; }
            }
        </style>
    </head>
    <body>
        @php
            $showClientShell = auth()->check() && request()->routeIs('client.*', 'dashboard', 'profile.*');
            $pendingInvoiceKey = $pendingInvoice ? 'pending-invoice-'.$pendingInvoice->id : null;
        @endphp

        <div class="portal-shell">
            @include('layouts.portal-nav')
            <main>
                @if ($showClientShell)
                    <div class="client-layout">
                        @include('layouts.client-sidebar')
                        <div class="client-layout-main">
                            @if ($pendingInvoice)
                                @php
                                    $invoiceDisplayNumber = $pendingInvoice->whmcs_invoice_id ?: preg_replace('/\D+/', '', (string) $pendingInvoice->invoice_number) ?: $pendingInvoice->invoice_number;
                                @endphp
                                <div class="pending-invoice-alert" data-pending-invoice-alert="{{ $pendingInvoiceKey }}" style="display:none;">
                                    <div>
                                        <strong>Invoice #{{ $invoiceDisplayNumber }} is pending payment</strong>
                                        <p>Complete payment now to avoid service activation or renewal delays.</p>
                                    </div>
                                    <div class="pending-invoice-actions">
                                        <form method="POST" action="{{ route('client.invoices.pay', $pendingInvoice) }}">
                                            @csrf
                                            <button class="primary-btn" type="submit">Pay Now</button>
                                        </form>
                                        <button class="pending-invoice-close" type="button" data-pending-invoice-close="{{ $pendingInvoiceKey }}">Close</button>
                                    </div>
                                </div>
                            @endif
                            {{ $slot }}
                        </div>
                    </div>
                @else
                    {{ $slot }}
                @endif
            </main>
            @include('layouts.portal-footer')
        </div>

        @if ($pendingInvoice)
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    const key = @json($pendingInvoiceKey);
                    const alertBox = document.querySelector('[data-pending-invoice-alert="' + key + '"]');
                    const closeBtn = document.querySelector('[data-pending-invoice-close="' + key + '"]');

                    if (alertBox && localStorage.getItem(key) !== 'closed') {
                        alertBox.style.display = 'flex';
                    }

                    if (closeBtn) {
                        closeBtn.addEventListener('click', function () {
                            localStorage.setItem(key, 'closed');
                            if (alertBox) alertBox.remove();
                        });
                    }
                });
            </script>
        @endif
    </body>
</html>
