/* Panel Klienta DogCode — dedykowany, responsywny styl strony /panel/. */
.client-panel-page {
    --client-red: #e33445;
    --client-red-bright: #ff6b78;
    --client-ink: #0d0d0f;
    --client-surface: #131316;
    --client-line: #332b31;
    min-height: 100vh;
    color: #f4f0f2;
    background: var(--client-ink);
}
.client-panel-page main { min-height: calc(100vh - 82px); }
.client-panel-page .pixel-stars { opacity: .32; }
.client-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 82px;
    padding: 10px clamp(16px, 5vw, 82px);
    background: rgba(13,13,15,.94);
    border-bottom: 2px solid #292529;
    box-shadow: 0 5px 0 rgba(0,0,0,.25);
    backdrop-filter: blur(14px);
}
.client-brand { display: inline-flex; align-items: center; min-width: 0; text-decoration: none; }
.client-brand img { display: block; width: min(100%, 230px); height: 54px; object-fit: contain; object-position: left center; filter: drop-shadow(3px 3px 0 #050506); }
.client-topbar-actions { display: flex; align-items: center; gap: 14px; }
.client-topbar-tag { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; color: #c9bdc5; background: #171418; border: 1px solid #48323a; font: 700 10px var(--pixel); letter-spacing: .6px; white-space: nowrap; }
.client-topbar-tag i { color: var(--client-red-bright); font-size: 16px; }
.client-back-link, .client-home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 15px;
    color: #fff;
    background: var(--client-red);
    border: 2px solid #ff7a91;
    border-bottom-color: #691226;
    box-shadow: 3px 3px 0 #080809;
    font: 700 12px var(--pixel);
    text-decoration: none;
    transition: .18s ease;
}
.client-back-link:hover, .client-home-button:hover { color: #fff; background: #ef4d60; transform: translate(-1px,-1px); box-shadow: 5px 5px 0 #080809; }
.client-back-link i, .client-home-button i { font-size: 18px; }
.client-back-link:focus-visible, .client-home-button:focus-visible { outline: 2px solid #ff9aa4; outline-offset: 3px; }
.client-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1.08fr) minmax(320px,.92fr);
    align-items: center;
    gap: clamp(28px,5vw,76px);
    width: min(100% - 48px, 1280px);
    min-height: min(710px, calc(100svh - 82px));
    margin: 0 auto;
    padding: clamp(34px,6vw,82px) clamp(24px,5vw,72px);
    overflow: hidden;
    background: linear-gradient(135deg,rgba(20,19,23,.98),rgba(13,13,16,.97));
    border: 2px solid #332b31;
    box-shadow: 8px 8px 0 #060607, inset 0 0 0 2px rgba(255,255,255,.018);
}
.client-hero::before, .client-hero::after { content:''; position:absolute; width:38px; height:38px; border-color:var(--client-red); border-style:solid; pointer-events:none; }
.client-hero::before { top:-2px; left:-2px; border-width:3px 0 0 3px; }
.client-hero::after { right:-2px; bottom:-2px; border-width:0 3px 3px 0; }
.client-hero-copy { position:relative; z-index:1; max-width:650px; }
.client-eyebrow { display:inline-flex; align-items:center; gap:9px; margin-bottom:20px; color:#ff8491; font:700 12px var(--pixel); letter-spacing:1.5px; }
.client-eyebrow::before { content:''; width:8px; height:8px; background:var(--client-red); box-shadow:3px 3px 0 #74162d,0 0 13px rgba(227,52,69,.65); }
.client-title { color:#f4f0f2; font:700 clamp(42px,6.5vw,82px)/.98 var(--pixel); letter-spacing:.3px; text-shadow:4px 4px 0 #000; }
.client-title span { display:block; color:var(--client-red-bright); text-shadow:4px 4px 0 #54101e; }
.client-title-rule { width:min(100%,300px); height:4px; margin:22px 0 20px; background:linear-gradient(90deg,var(--client-red),rgba(227,52,69,0)); box-shadow:0 2px 0 rgba(0,0,0,.55); }
.client-intro { max-width:520px; color:#b8afb5; font:400 15px/1.85 var(--sans); }
.client-status { display:inline-flex; align-items:center; gap:10px; margin-top:25px; padding:10px 13px; color:#f0dfe5; background:rgba(227,52,69,.09); border:1px solid rgba(255,107,120,.32); font:700 10px var(--pixel); letter-spacing:.6px; }
.client-status-dot { position:relative; width:9px; height:9px; background:#ff6678; box-shadow:0 0 10px rgba(255,102,120,.65); }
.client-status-dot::after { content:''; position:absolute; inset:-5px; border:1px solid rgba(255,102,120,.5); animation:client-pulse 1.8s ease-out infinite; }
.client-home-button { margin-top:26px; min-height:48px; padding-inline:18px; }
.client-home-button .bx { transition:transform .18s ease; }
.client-home-button:hover .bx { transform:translateX(-3px); }
.client-preview-wrap { position:relative; display:grid; place-items:center; min-width:0; padding:20px; }
.client-preview-aura { position:absolute; width:75%; aspect-ratio:1; background:rgba(192,23,54,.15); filter:blur(55px); pointer-events:none; }
.client-preview-frame { position:absolute; inset:8%; border:1px solid rgba(255,91,120,.25); box-shadow:inset 0 0 0 7px rgba(227,52,69,.035),0 0 40px rgba(227,52,69,.07); transform:rotate(2deg); }
.client-preview-window { position:relative; z-index:1; width:min(100%,440px); padding:0; background:#09090b; border:2px solid #49323a; box-shadow:8px 8px 0 #050506,0 0 30px rgba(0,0,0,.45); transform:rotate(-1deg); }
.client-preview-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:42px; padding:0 13px; color:#c6b9c3; background:#171418; border-bottom:1px solid #39252d; font:600 10px var(--pixel); }
.client-preview-brand { display:flex; align-items:center; gap:8px; min-width:0; }
.client-window-dots { display:flex; gap:5px; }
.client-window-dots i { width:7px; height:7px; background:#e33445; }
.client-window-dots i:nth-child(2) { background:#bf854c; }
.client-window-dots i:nth-child(3) { background:#557d5d; }
.client-preview-label { padding:5px 7px; color:#ff8e9a; background:rgba(227,52,69,.1); border:1px solid #733644; font:700 8px var(--sans); letter-spacing:.8px; }
.client-preview-content { padding:clamp(20px,4vw,34px); }
.client-account-row { display:flex; align-items:center; gap:14px; padding-bottom:20px; border-bottom:1px solid #272228; }
.client-account-icon { display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; color:#ff9aa4; background:#21131a; border:1px solid #753044; box-shadow:3px 3px 0 #09090b; font-size:25px; }
.client-account-copy { min-width:0; }
.client-account-copy strong { display:block; color:#f4f0f2; font:700 14px var(--pixel); }
.client-account-copy small { display:block; margin-top:5px; color:#817780; font:500 10px var(--sans); }
.client-skeleton-label { margin:22px 0 10px; color:#a99ca5; font:700 9px var(--pixel); letter-spacing:.7px; }
.client-skeleton-card { display:flex; align-items:center; gap:11px; min-height:57px; margin-top:9px; padding:10px; background:#111114; border:1px solid #2b252c; }
.client-skeleton-icon { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; color:#ff8693; background:#21131a; font-size:17px; }
.client-skeleton-lines { flex:1; min-width:0; }
.client-skeleton-lines i { display:block; height:6px; margin:5px 0; background:#29242b; }
.client-skeleton-lines i:first-child { width:58%; background:#55424a; }
.client-skeleton-lines i:last-child { width:84%; height:4px; background:#252128; }
.client-skeleton-chip { padding:5px 6px; color:#92848d; background:#171418; border:1px solid #332a31; font:700 7px var(--sans); white-space:nowrap; }
.client-preview-foot { display:flex; align-items:center; gap:8px; margin-top:18px; color:#837981; font:600 9px var(--pixel); letter-spacing:.3px; }
.client-preview-foot i { color:#ff7787; font-size:16px; }
.client-float-mark { position:absolute; z-index:2; display:grid; place-items:center; width:36px; height:36px; color:#fff; background:var(--client-red); border:2px solid #ff9aa4; box-shadow:4px 4px 0 #64152c; font:700 14px var(--pixel); animation:client-float 4.5s ease-in-out infinite; }
.client-float-mark--one { top:8%; right:9%; }
.client-float-mark--two { bottom:10%; left:7%; width:22px; height:22px; font-size:9px; animation-delay:-2s; }
@keyframes client-pulse { 0% { transform:scale(.75); opacity:.8; } 100% { transform:scale(1.7); opacity:0; } }
@keyframes client-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }

@media (max-width: 900px) {
    .client-hero { grid-template-columns:minmax(0,1fr); gap:22px; width:min(100% - 32px,720px); min-height:0; margin:22px auto 38px; padding:clamp(26px,5vw,50px); }
    .client-hero-copy { max-width:100%; }
    .client-title { font-size:clamp(44px,9vw,72px); }
    .client-preview-wrap { min-height:400px; }
    .client-preview-window { width:min(100%,500px); }
}
@media (max-width: 600px) {
    .client-topbar { min-height:70px; padding:8px 14px; gap:10px; }
    .client-brand img { width:min(48vw,190px); height:44px; }
    .client-topbar-actions { gap:0; }
    .client-topbar-tag { display:none; }
    .client-back-link { min-height:41px; padding:0 10px; font-size:9px; }
    .client-back-link i { font-size:16px; }
    .client-hero { width:calc(100% - 24px); gap:9px; margin:14px auto 28px; padding:23px 17px 18px; }
    .client-eyebrow { margin-bottom:15px; font-size:10px; letter-spacing:1px; }
    .client-title { font-size:clamp(39px,12vw,58px); }
    .client-title-rule { margin:17px 0 15px; }
    .client-intro { font-size:14px; line-height:1.7; }
    .client-status { margin-top:19px; font-size:9px; }
    .client-home-button { width:100%; min-height:48px; margin-top:20px; font-size:10px; }
    .client-preview-wrap { min-height:320px; margin:0 -8px; padding:16px 8px; }
    .client-preview-frame { inset:9% 6%; }
    .client-preview-bar { min-height:38px; padding-inline:9px; font-size:9px; }
    .client-preview-content { padding:19px 14px; }
    .client-account-icon { flex-basis:42px; width:42px; height:42px; }
    .client-skeleton-card { gap:8px; padding:8px; }
    .client-float-mark { width:29px; height:29px; }
    .client-float-mark--two { width:19px; height:19px; }
    .client-panel-page .site-footer { padding:36px 16px 20px; }
}
@media (max-width: 360px) {
    .client-topbar { padding-inline:10px; }
    .client-back-link { padding-inline:8px; font-size:8px; }
    .client-hero { padding-inline:13px; }
    .client-preview-wrap { min-height:300px; }
    .client-skeleton-chip { display:none; }
}
@media (prefers-reduced-motion: reduce) {
    .client-status-dot::after, .client-float-mark { animation:none; }
    .client-back-link, .client-home-button { transition:none; }
}

/* Znaczki dekoracyjne poza treścią podglądu; na telefonie ukryte dla większej czytelności. */
.client-float-mark--one { top:8%; right:-21px; }
.client-float-mark--two { bottom:-18px; left:-20px; }
@media (max-width:600px) {
    .client-float-mark--one, .client-float-mark--two { display:none; }
}