/* ========================================================================= */
/*  DESIGN TOKENS (RZAZ.pro)   */
/* ========================================================================= */
:root {
    --font-mono: 'JetBrains Mono', monospace;
    --font-sans: 'Inter', system-ui, sans-serif;
    
    --color-canvas: #f9fafb;      
    --color-surface: #ffffff;     
    --color-text-primary: #000000; 
    --color-text-secondary: #52525b; 
    --color-brand: #ef4444;       
    --color-brand-hover: #dc2626;
    --color-btn-offer: #facc15; 
    --color-btn-checklist: #22c55e;
    --color-cut-neon: #00E676; 
    
    --radius-hard: 0.0625rem; 
    --border-thick: 0.25rem solid var(--color-text-primary);
    --border-thin: 0.125rem solid var(--color-text-primary);
    --border-dashed: 0.125rem dashed var(--color-text-primary);
    
    --shadow-hard: 0.375rem 0.375rem 0 0 var(--color-text-primary);
    --shadow-hard-sm: 0.25rem 0.25rem 0 0 var(--color-text-primary);
    --shadow-hard-xl: 0.625rem 0.625rem 0 0 var(--color-text-primary);
    --shadow-hover: 0.125rem 0.125rem 0 0 var(--color-text-primary);
    
    --touch-target: 2.75rem;
    --touch-target-visual: 2.75rem;
    --touch-target-hidden: 4rem;

    --z-header: 100;
    --z-drawer-overlay: 1000;
    --z-drawer: 1050;
    --z-modal-critical: 3000;
    --z-toast: 9999;
}

:root[data-theme="light"] {
    --color-canvas: #f9fafb;      
    --color-surface: #ffffff;     
    --color-text-primary: #000000; 
    --color-text-secondary: #52525b; 
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-canvas: #121212;      
        --color-surface: #000000;     
        --color-text-primary: #ffffff; 
        --color-text-secondary: #a1a1aa; 
    }
}

:root[data-theme="dark"] {
    --color-canvas: #121212;      
    --color-surface: #000000;     
    --color-text-primary: #ffffff; 
    --color-text-secondary: #a1a1aa; 
}

/* ========================================================================= */
/* 2. RESET I BAZA HTML/CSS                                                  */
/* ========================================================================= */
*, *::before, *::after { 
    box-sizing: border-box; 
    margin-block: 0; 
    margin-inline: 0; 
    padding-block: 0; 
    padding-inline: 0; 
}

body, html {
    background-color: var(--color-canvas);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    min-block-size: 100dvh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-mono);
    font-weight: 800;
}

svg { 
    stroke-linecap: square; 
    stroke-linejoin: miter; 
    stroke-width: 0.15625rem; 
    fill: none; 
    stroke: currentColor; 
}

a { 
    text-decoration: none; 
}

/* ========================================================================= */
/* 3. GLOBALNY SYSTEM LAYOUTU (BENTO GRID)                                   */
/* ========================================================================= */
.layout-brutal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr); 
    gap: clamp(0.75rem, 1.71vw, 1.5rem);
    align-items: start;
    inline-size: 100%;
    max-inline-size: 87.5rem;
    margin-block: 0;
    margin-inline: auto;
}

@container app-container (min-width: 64rem) {
    .layout-brutal-grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: clamp(1rem, 2.28vw, 2rem);
    }
}

.layout-main-col {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.71vw, 1.5rem);
    inline-size: 100%;
    min-inline-size: 0; 
    container-name: main-col;
    container-type: inline-size;
}

.layout-side-col {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.71vw, 1.5rem);
    inline-size: 100%;
    min-inline-size: 0; 
    container-name: side-col;
    container-type: inline-size;
}

/* ========================================================================= */
/* 4. KLASY POMOCNICZE I HELPERY                                             */
/* ========================================================================= */
.w-100 { 
    inline-size: 100%; 
}

.text-truncate { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.mb-16 { 
    margin-block-end: clamp(0.5rem, 1.14vw, 1rem); 
}

.mt-16 { 
    margin-block-start: clamp(0.5rem, 1.14vw, 1rem); 
}

.haptic-target { 
    position: relative; 
}

.haptic-target::after {
    content: ''; 
    position: absolute; 
    inset-block-start: 50%; 
    inset-inline-start: 50%; 
    transform: translate(-50%, -50%);
    min-inline-size: 4rem; 
    min-block-size: 4rem;
    aspect-ratio: 1 / 1;
    background: transparent; 
    z-index: 1;
}

/* ========================================================================= */
/* 5. SYSTEM KOMPONENTÓW UI (SINGLE SOURCE OF TRUTH)                         */
/* ========================================================================= */

/* --- PRZYCISKI BAZOWE --- */
.btn-brutal { 
    display: inline-flex;
    align-items: center; 
    justify-content: center; 
    gap: clamp(0.25rem, 0.57vw, 0.5rem); 
    font-family: var(--font-mono); 
    font-weight: 800; 
    text-transform: uppercase; 
    font-size: 0.85rem; 
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    border: var(--border-thin); 
    border-radius: var(--radius-hard);
    padding-block: clamp(0.3125rem, 0.71vw, 0.625rem);
    padding-inline: clamp(0.5rem, 1.14vw, 1rem); 
    cursor: pointer; 
    box-shadow: var(--shadow-hard-sm);
    transition: none; 
    min-block-size: var(--touch-target);
    user-select: none; 
    text-align: center;
}

.btn-brutal:hover { background-color: var(--color-btn-offer); color: var(--color-text-primary); }
.btn-brutal:active { transform: translate(0.25rem, 0.25rem); box-shadow: 0 0 0 0 transparent !important; }

.btn-brand { 
    background-color: var(--color-brand) !important; 
    color: #ffffff !important; }
.btn-brand:hover { 
    background-color: var(--color-brand-hover) !important;
    color: #ffffff !important; }

/* --- PRZYCISKI NARZĘDZIOWE (TOOLS) --- */
.btn-tool, .icon-box {
    inline-size: var(--touch-target);
    aspect-ratio: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-surface);
    border: var(--border-thin);
    box-shadow: var(--shadow-hard-sm);
    cursor: pointer;
    border-radius: var(--radius-hard);
    color: var(--color-text-primary);
    padding-block: 0;
    padding-inline: 0;
    transition: none;
    flex-shrink: 0;
}

.btn-tool svg, .icon-box svg { 
    inline-size: 1.5rem;
    aspect-ratio: 1 / 1;
}
.btn-tool:hover, .icon-box:hover {       
    background-color: var(--color-btn-offer);
}
.btn-tool:active, .icon-box:active {  
    transform: translate(0.25rem, 0.25rem);
    box-shadow: 0 0 0 0 transparent !important; }

.btn-tool-delete { 
    border-color: var(--color-brand); 
    color: var(--color-brand); 
}
.btn-tool-delete:hover {
    background-color: var(--color-brand); 
    color: var(--color-surface); }
.btn-tool-delete:active {
    background-color: var(--color-brand-hover);
    color: var(--color-surface); }

.btn-tool-text {
    background: transparent;
    border: 0.125rem dashed var(--color-text-primary);
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--color-text-primary);
    cursor: pointer;
    padding-block: clamp(0.1875rem, 0.43vw, 0.375rem);
    padding-inline: clamp(0.375rem, 0.85vw, 0.75rem);
    transition: none;
    border-radius: var(--radius-hard);
    flex-shrink: 0; 
    white-space: nowrap;
    min-block-size: var(--touch-target);
    display: inline-flex;
    align-items: center;
}

.btn-tool-text:hover { 
  background-color: var(--color-brand);
  color: #ffffff; 
  border-color: var(--color-text-primary); 
  border-style: solid; 
}
.btn-tool-text:active { 
  transform: translate(0.25rem, 0.25rem); 
  box-shadow: 0 0 0 0 transparent !important; }

/* --- FORMULARZE I INPUTY --- */
.form-group { display: flex; flex-direction: column; gap: clamp(0.1875rem, 0.43vw, 0.375rem); }
.form-label { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--color-text-primary); }

.input-brutal { 
    font-family: var(--font-mono); font-size: 0.9rem; font-weight: 700; inline-size: 100%; 
    padding-block: clamp(0.3125rem, 0.71vw, 0.625rem);
    padding-inline: clamp(0.3125rem, 0.71vw, 0.625rem); 
    border: var(--border-thin); background-color: var(--color-surface); color: var(--color-text-primary); 
    border-radius: var(--radius-hard); box-shadow: 0.125rem 0.125rem 0 0 var(--color-text-primary); 
    transition: none; min-block-size: var(--touch-target); appearance: none;
}
.input-brutal:focus { outline: none; border-color: var(--color-brand); box-shadow: var(--shadow-hard-sm); }
.input-brutal.is-invalid,
select.input-brutal.is-invalid {
    border-color: var(--color-brand) !important;
    box-shadow: 0.125rem 0.125rem 0 0 var(--color-brand) !important;
}
.input-brutal-numeric { text-align: end; }

select.input-brutal { 
    background-image: url('data:image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="square" stroke-linejoin="miter"><polyline points="6 9 12 15 18 9"></polyline></svg>'); 
    background-repeat: no-repeat; background-position: right 0.75rem center; 
    padding-inline-end: clamp(0.9375rem, 2.14vw, 1.875rem); cursor: pointer; 
}

/* Checkbox */
.brutal-checkbox-label { 
    display: inline-flex; align-items: center; gap: clamp(0.3125rem, 0.71vw, 0.625rem); font-family: var(--font-mono); font-size: 0.75rem; 
    font-weight: 800; cursor: pointer; user-select: none; text-transform: uppercase; min-block-size: var(--touch-target);
}

.brutal-checkbox { 
    appearance: none; 
    inline-size: 1.5rem; 
    aspect-ratio: 1 / 1; 
    border: var(--border-thin); background: var(--color-surface); 
    cursor: pointer; position: relative; box-shadow: 0.125rem 0.125rem 0 0 var(--color-text-primary); transition: none; 
    border-radius: var(--radius-hard); flex-shrink: 0;
}
.brutal-checkbox:checked { background: var(--color-brand); box-shadow: 0 0 0 0 transparent; transform: translate(0.125rem, 0.125rem); }
.brutal-checkbox:checked::after { content: "✕"; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -46%); color: #ffffff; font-size: 1rem; font-weight: 800; font-family: var(--font-mono); }

/* Toggle */
.brutal-toggle { 
    appearance: none; inline-size: var(--touch-target-visual); block-size: 1.5rem; border: var(--border-thin); background: var(--color-canvas); 
    cursor: pointer; position: relative; box-shadow: 0.125rem 0.125rem 0 0 var(--color-text-primary); transition: none; border-radius: var(--radius-hard); flex-shrink: 0;
}
.brutal-toggle::before { content: ""; position: absolute; inline-size: 1rem; aspect-ratio: 1 / 1; background: var(--color-text-primary); inset-block-start: 0.125rem; inset-inline-start: 0.125rem; transition: none; }
.brutal-toggle:checked { background: var(--color-btn-checklist); box-shadow: 0 0 0 0 transparent; transform: translate(0.125rem, 0.125rem); }
.brutal-toggle:checked::before { transform: translateX(1.25rem); background: var(--color-surface); }

/* --- DIVIDER--- */
.divider-brutal { display: flex; align-items: center; text-align: center; color: var(--color-text-primary); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 800; margin-block: clamp(0.75rem, 1.71vw, 1.5rem); margin-inline: 0; text-transform: uppercase; inline-size: 100%; max-inline-size: 37.5rem; }
.divider-brutal::before, .divider-brutal::after { content: ''; flex: 1; border-block-end: var(--border-thick); }
.divider-brutal:not(:empty)::before { margin-inline-end: clamp(0.375rem, 0.85vw, 0.75rem); }
.divider-brutal:not(:empty)::after { margin-inline-start: clamp(0.375rem, 0.85vw, 0.75rem); }

/* --- BENTO CONTAINERS (KONTENERY) --- */
.bento-container {
    border: var(--border-thick);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-hard);
    border-radius: var(--radius-hard);
    display: flex;
    flex-direction: column;
    overflow: visible; 
    container-name: bento-container;
    container-type: inline-size;
}
.bento-container--no-top { border-block-start: none; border-start-start-radius: 0; border-start-end-radius: 0; }

.bento-header {
    background-color: var(--color-text-primary);
    border-block-end: var(--border-thick);
    padding-block: clamp(0.375rem, 0.85vw, 0.75rem);
    padding-inline: clamp(0.625rem, 1.42vw, 1.25rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-block-size: var(--touch-target);
}

.bento-title {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--color-surface);
    margin-block: 0;
    margin-inline: 0;
    display: flex;
    align-items: center;
    gap: clamp(0.375rem, 0.85vw, 0.75rem);
}

.bento-content {
    padding-block: clamp(0.75rem, 1.71vw, 1.5rem);
    padding-inline: clamp(0.75rem, 1.71vw, 1.5rem);
    background-color: var(--color-surface);
    min-block-size: 15.625rem;
}

/* Odznaki / Badges */
.bento-badge {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 800;
    padding-block: clamp(0.0625rem, 0.14vw, 0.125rem);
    padding-inline: clamp(0.25rem, 0.57vw, 0.5rem);
    background-color: var(--color-brand);
    color: #ffffff;
    border: var(--border-thin);
    border-radius: var(--radius-hard);
    box-shadow: 0.125rem 0.125rem 0 0 var(--color-text-primary);
}
.bento-badge--neutral { background-color: var(--color-surface); color: var(--color-text-primary); }

/* --- AKORDEONY (ACCORDION) --- */
.accordion-brutal { display: flex; flex-direction: column; gap: clamp(0.75rem, 1.71vw, 1.5rem); inline-size: 100%; }
.accordion-item { border: var(--border-thick); background-color: var(--color-surface); box-shadow: var(--shadow-hard); border-radius: var(--radius-hard); display: flex; flex-direction: column; inline-size: 100%; overflow: hidden; }

.accordion-header { 
    padding-block: clamp(0.375rem, 0.8vw, 0.625rem);
    padding-inline: clamp(0.625rem, 1.42vw, 1.25rem); 
    min-block-size: var(--touch-target-visual); 
    font-family: var(--font-mono); font-weight: 800; text-transform: uppercase; 
    font-size: 1rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: none; 
    user-select: none; background-color: var(--color-text-primary); color: var(--color-surface); border-block-end: var(--border-thick); gap: clamp(0.375rem, 0.85vw, 0.75rem); inline-size: 100%;
}
.accordion-header:hover { background-color: var(--color-btn-offer); color: var(--color-text-primary); }
.accordion-header:hover .btn-tool-delete, .accordion-header:hover .btn-tool-text { border-color: var(--color-text-primary); }
.accordion-header:active { transform: translate(0.375rem, 0.375rem); box-shadow: 0 0 0 0 transparent !important; }

.accordion-header > span { flex-grow: 1; min-inline-size: 0; }
.accordion-header > .accordion-icon { flex-grow: 0; flex-shrink: 0; }
.accordion-header > div { display: flex; align-items: center; gap: clamp(0.25rem, 0.57vw, 0.5rem); flex-shrink: 0; }

.accordion-icon { 
    display: flex; align-items: center; justify-content: center; 
    inline-size: 1.5rem; 
    aspect-ratio: 1 / 1; 
    transition: transform 0.2s linear; 
    flex-shrink: 0;
    flex-grow: 0;
}
.accordion-item.active .accordion-icon { transform: rotate(180deg); }

.accordion-content { 
    padding-block: clamp(0.75rem, 1.71vw, 1.5rem);
    padding-inline: clamp(0.625rem, 1.42vw, 1.25rem); 
    font-family: var(--font-sans); display: none; background-color: var(--color-canvas); 
}
.accordion-item.active .accordion-content { display: flex; flex-direction: column; gap: clamp(0.5rem, 1.14vw, 1rem); }

/* --- SYSTEM ŁADOWANIA (SKELETONS) --- */
.skeleton-brutal {
    block-size: 1.25rem;
    border: 0.125rem solid var(--color-text-primary);
    background: repeating-linear-gradient(45deg, #e4e4e7, #e4e4e7 0.5rem, #f4f4f5 0.5rem, #f4f4f5 1rem);
    animation: pulse-industrial-solid 1s infinite step-end;
}
.skeleton-title { inline-size: 50%; block-size: 1.75rem; margin-block-end: clamp(0.375rem, 0.85vw, 0.75rem); }

@keyframes pulse-industrial-solid { 
    50% { background: repeating-linear-gradient(45deg, #d4d4d8, #d4d4d8 0.5rem, #e4e4e7 0.5rem, #e4e4e7 1rem); border-color: var(--color-text-secondary); } 
}
@media (prefers-color-scheme: dark) {
    .skeleton-brutal { background: repeating-linear-gradient(45deg, #27272a, #27272a 0.5rem, #3f3f46 0.5rem, #3f3f46 1rem); }
    @keyframes pulse-industrial-solid { 50% { background: repeating-linear-gradient(45deg, #3f3f46, #3f3f46 0.5rem, #52525b 0.5rem, #52525b 1rem); } }
}

/* ========================================================================= */
/* 6. ELEMENTY STRUKTURALNE STRONY (NAGŁÓWEK, DRAWER, STOPKA)                */
/* ========================================================================= */
.app-container {
    display: flex; 
    flex-direction: column; 
    flex-grow: 1;
    inline-size: 100%;
    max-inline-size: 87.5rem;
    margin-block: 0;
    margin-inline: auto;
    overflow-x: clip;
    padding-block-start: 0;
    padding-block-end: calc(clamp(0.5rem, 1.14vw, 1rem) + env(safe-area-inset-bottom, 0px));
    padding-inline-start: calc(clamp(0.25rem, 0.57vw, 0.5rem) + env(safe-area-inset-left, 0px));
    padding-inline-end: calc(clamp(0.25rem, 0.57vw, 0.5rem) + env(safe-area-inset-right, 0px));
    gap: clamp(1rem, 2.28vw, 2rem);
    container-name: app-container;
    container-type: inline-size;
}
.main-content { 
    flex-grow: 1;
    padding-block: 0;
    padding-inline: 0; 
}

/* --- NAGŁÓWEK --- */
.brutal-header {
    position: sticky; 
    inset-block-start: 0; 
    z-index: var(--z-header); 
    background-color: var(--color-surface);
    border-block-end: var(--border-thick); 
    padding-block-start: calc(clamp(0.75rem, 1.14vw, 1rem) + env(safe-area-inset-top, 0px));
    padding-block-end: clamp(0.75rem, 1.14vw, 1rem);
    padding-inline-start: calc(clamp(1.25rem, 2.28vw, 2rem) + env(safe-area-inset-left, 0px));
    padding-inline-end: calc(clamp(1.25rem, 2.28vw, 2rem) + env(safe-area-inset-right, 0px));
    box-shadow: var(--shadow-hard);
    display: flex; justify-content: space-between; align-items: center; opacity: 1;
    container-name: header;
    container-type: inline-size;
}

.brand-logo-brutal {
    font-family: var(--font-mono); font-weight: 800; 
    font-size: clamp(1.5rem, 2.28vw, 2rem); 
    background-color: var(--color-brand); 
    color: #ffffff; 
    padding-block: clamp(0.25rem, 0.42vw, 0.375rem);
    padding-inline: clamp(0.75rem, 1.14vw, 1rem); 
    border: var(--border-thin); box-shadow: var(--shadow-hard-sm); 
    display: inline-block; line-height: 1.1; letter-spacing: -0.05em; text-transform: uppercase; 
    transition: none; border-radius: var(--radius-hard);
}

.brand-logo-brutal:hover { background-color: var(--color-brand-hover); }
.brand-logo-brutal:active { transform: translate(0.25rem, 0.25rem); box-shadow: 0 0 0 0 transparent !important; }

.header-actions-mobile { display: flex; gap: clamp(0.375rem, 0.85vw, 0.75rem); align-items: center; }
.desktop-nav { display: none; }

@container (min-width: 64rem) {
    .header-actions-mobile { display: none; } 
    
    .desktop-nav { display: flex; gap: clamp(0.5rem, 1.14vw, 1rem); align-items: center; }
    
    .nav-tile {
        font-family: var(--font-mono); font-weight: 800; 
        font-size: 0.85rem; 
        background-color: var(--color-surface); 
        border: var(--border-thin); color: var(--color-text-primary); text-transform: uppercase; 
        padding-block: clamp(0.3125rem, 0.71vw, 0.625rem);
        padding-inline: clamp(0.5rem, 1.14vw, 1rem); 
        min-block-size: var(--touch-target); display: inline-flex; align-items: center; justify-content: center; 
        box-shadow: var(--shadow-hard-sm); transition: none; user-select: none; border-radius: var(--radius-hard);
    }
    .nav-tile:hover { background-color: var(--color-btn-offer); }
    .nav-tile:active { transform: translate(0.25rem, 0.25rem); box-shadow: 0 0 0 0 transparent !important; }
    
    .nav-tile.tile-danger { background-color: var(--color-text-primary); color: var(--color-canvas); }
    .nav-tile.tile-danger:hover { background-color: var(--color-brand); color: #ffffff; }
}

/* --- MENU HAMBURGER / SZUFLADA MOBILNA --- */
.mobile-menu-wrapper {
    position: fixed; inset: 0; z-index: var(--z-modal-critical); pointer-events: none; 
    display: flex; flex-direction: column; justify-content: flex-end;
}
.mobile-menu-wrapper.is-active { pointer-events: auto; }

.drawer-overlay {
    position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); opacity: 0; 
    transition: opacity 200ms linear; z-index: var(--z-drawer-overlay);
}
.mobile-menu-wrapper.is-active .drawer-overlay { opacity: 1; }

.mobile-menu-content {
    position: relative; z-index: var(--z-drawer); background: var(--color-surface); border-block-start: var(--border-thick); 
    block-size: 100vh;
    block-size: 100dvh;
    transform: translateY(100%); transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; flex-direction: column; 
    padding-block-start: calc(clamp(0.625rem, 1.42vw, 1.25rem) + env(safe-area-inset-top, 0px));
    padding-block-end: calc(clamp(0.625rem, 1.42vw, 1.25rem) + env(safe-area-inset-bottom, 0px));
    padding-inline-start: calc(clamp(0.625rem, 1.42vw, 1.25rem) + env(safe-area-inset-left, 0px));
    padding-inline-end: calc(clamp(0.625rem, 1.42vw, 1.25rem) + env(safe-area-inset-right, 0px));
    overflow-y: auto; opacity: 1; border-radius: var(--radius-hard);
    container-name: mobile-menu;
    container-type: inline-size;
}
.mobile-menu-wrapper.is-active .mobile-menu-content { transform: translateY(0); }

.mobile-menu-header { 
    display: flex; justify-content: space-between; align-items: center; 
    border-block-end: var(--border-thick); 
    padding-block-end: clamp(0.5rem, 1.14vw, 1rem); 
    margin-block-end: clamp(0.75rem, 1.71vw, 1.5rem); 
}
.mobile-nav-list { display: flex; flex-direction: column; gap: 0; }

.mobile-nav-item {
    font-family: var(--font-mono); font-weight: 800; 
    font-size: clamp(1rem, 1.71vw, 1.5rem); 
    color: var(--color-text-primary); 
    text-transform: uppercase; 
    padding-block: clamp(0.75rem, 1.71vw, 1.5rem);
    padding-inline: 0; 
    border-block-end: var(--border-dashed); display: flex; 
    align-items: center; justify-content: space-between; transition: none; background: transparent; 
    cursor: pointer; border-inline: none; border-block-start: none; inline-size: 100%; text-align: start; border-radius: var(--radius-hard);
}
.mobile-nav-item:active { 
    background-color: var(--color-btn-offer); 
    padding-inline-start: clamp(0.375rem, 0.85vw, 0.75rem); 
    padding-inline-end: clamp(0.375rem, 0.85vw, 0.75rem); 
}
.mobile-nav-item.item-danger { color: var(--color-brand); }
.mobile-nav-item.item-danger:active { background-color: var(--color-brand); color: #ffffff; }

/* --- STOPKA --- */
.brutal-footer { 
    border-block-start: var(--border-thick); background-color: var(--color-surface); 
    padding-block-start: clamp(1rem, 2.28vw, 2rem);
    padding-block-end: calc(clamp(1rem, 2.28vw, 2rem) + env(safe-area-inset-bottom, 0px));
    padding-inline-start: calc(clamp(0.75rem, 1.42vw, 1.25rem) + env(safe-area-inset-left, 0px));
    padding-inline-end: calc(clamp(0.75rem, 1.42vw, 1.25rem) + env(safe-area-inset-right, 0px));
    margin-block-start: auto; border-radius: var(--radius-hard); 
    container-name: footer;
    container-type: inline-size;
}

.footer-grid { 
    display: flex; flex-direction: column; 
    gap: clamp(1rem, 2.28vw, 2rem); 
    max-inline-size: 87.5rem; 
    margin-block: 0;
    margin-inline: auto; 
}

@container (min-width: 48rem) { 
    .footer-grid { flex-direction: row; justify-content: space-between; align-items: flex-end; } 
}

.footer-brand { display: flex; flex-direction: column; gap: clamp(0.5rem, 1.14vw, 1rem); }
.footer-logo-wrap { display: flex; align-items: baseline; gap: clamp(0.25rem, 0.57vw, 0.5rem); }
.footer-ext { font-family: var(--font-mono); font-weight: 800; font-size: clamp(0.875rem, 1.14vw, 1rem); color: var(--color-text-secondary); }
.footer-contact { display: flex; flex-direction: column; gap: clamp(0.25rem, 0.57vw, 0.5rem); font-family: var(--font-mono); font-size: 0.85rem; font-weight: 800; }

.brutal-link { 
    font-family: var(--font-sans); color: var(--color-text-primary); text-decoration: underline; 
    text-decoration-thickness: 0.125rem; text-decoration-style: solid; text-underline-offset: 0.25rem; 
    transition: none; display: inline-block; 
    padding-block: 0.125rem;
    padding-inline: 0.25rem; 
    margin-block: -0.125rem;
    margin-inline: -0.25rem; 
}
.brutal-link:hover { background-color: var(--color-text-primary); color: var(--color-canvas); text-decoration-color: var(--color-canvas); }
.brutal-link:active { transform: translate(0.125rem, 0.125rem); }

.footer-user { 
    border: var(--border-thin); 
    padding-block: clamp(0.375rem, 0.85vw, 0.75rem);
    padding-inline: clamp(0.375rem, 0.85vw, 0.75rem); 
    box-shadow: var(--shadow-hard-sm); background-color: var(--color-canvas); border-radius: var(--radius-hard); 
}
.footer-label { 
    font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; 
    margin-block-end: 0.25rem; 
}
.footer-value {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.footer-copy {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-align: center;
    border-block-start: var(--border-dashed);
    padding-block-start: clamp(0.625rem, 1.14vw, 1rem);
    margin-block-start: clamp(1rem, 2vw, 1.5rem);
    text-transform: uppercase;
    max-inline-size: 87.5rem;
    margin-inline: auto;
}
/* ========================================================================= */
/* MASTER LAYOUT — NAWIGACJA I ZOPTYMALIZOWANA STOPKA UPPDATE                       */
/* ========================================================================= */

@container (min-width: 64rem) {
    .desktop-nav .nav-tile {
        gap: 0.4375rem;
    }

    .desktop-nav .nav-tile svg {
        inline-size: 1.125rem;
        block-size: 1.125rem;
        stroke-width: 2.5;
        flex-shrink: 0;
    }
}


.mobile-nav-item svg {
    inline-size: 1.375rem;
    block-size: 1.375rem;
    stroke-width: 2.5;
    flex-shrink: 0;
}

.brutal-footer {
    border-block-start: var(--border-thick);
    background-color: var(--color-surface);
}

.footer-grid {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
    max-inline-size: 87.5rem;
    margin-block: 0;
    margin-inline: auto;
}

@container (min-width: 48rem) {
    .footer-grid {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.footer-logo-wrap {
    display: flex;
    align-items: center;
}

.brand-logo-brutal--mono {
    background-color: var(--color-text-primary) !important;
    color: var(--color-surface) !important;
    border: var(--border-thin);
    box-shadow: 0.1875rem 0.1875rem 0 0 var(--color-text-secondary);
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    padding-block: 0.2rem;
    padding-inline: 0.75rem;
    filter: grayscale(100%);
    user-select: none;
}

.footer-subtitle {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.footer-user {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    border: var(--border-thin);
    padding-block: clamp(0.4375rem, 0.85vw, 0.625rem);
    padding-inline: clamp(0.625rem, 1.14vw, 0.875rem);
    box-shadow: var(--shadow-hard-sm);
    background-color: var(--color-canvas);
    border-radius: var(--radius-hard);
    min-block-size: var(--touch-target);
    text-align: start;
}

.footer-user__meta {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-inline-size: 0;
}

.footer-label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    margin-block-end: 0;
}



a.footer-user--admin {
    cursor: pointer;
    border-inline-start: 0.3125rem solid var(--color-brand);
    transition: none;
    user-select: none;
}

a.footer-user--admin:hover {
    background-color: var(--color-btn-offer);
    color: var(--color-text-primary);
}

a.footer-user--admin:hover .footer-label,
a.footer-user--admin:hover .footer-value,
a.footer-user--admin:hover .footer-user__arrow {
    color: var(--color-text-primary);
}

a.footer-user--admin:active {
    transform: translate(0.25rem, 0.25rem);
    box-shadow: 0 0 0 0 transparent !important;
}

.footer-user__arrow {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    stroke-width: 2.5;
    color: var(--color-brand);
    flex-shrink: 0;
}

/* ========================================================================= */
/* 7. TERMINAL OPERACYJNY (Logi Systemowe)                                   */
/* ========================================================================= */

.system-terminal-screen {
    background-color: #000000; 
    border: var(--border-thick);
    border-color: var(--color-text-primary);
    border-radius: var(--radius-hard);
    box-shadow: var(--shadow-hard);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    block-size: 100%;
    min-block-size: 25rem;
    container-name: terminal-screen;
    container-type: inline-size;
}

[data-theme="dark"] .system-terminal-screen { 
    border-color: #ffffff; 
}

.terminal-header {
    background-color: var(--color-text-primary);
    color: var(--color-surface);
    padding-block: clamp(0.25rem, 0.57vw, 0.5rem);
    padding-inline: clamp(0.5rem, 1.14vw, 1rem);
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-block-end: var(--border-thick);
    border-block-end-color: var(--color-text-primary);
}

[data-theme="dark"] .terminal-header { 
    border-block-end-color: #ffffff; 
}

.terminal-scroll-area {
    flex-grow: 1;
    overflow-y: hidden;
    padding-block: clamp(0.5rem, 1.14vw, 1rem);
    padding-inline: clamp(0.5rem, 1.14vw, 1rem);
    background-color: #000000;
    overscroll-behavior: contain;
}

.terminal-log-list {
    list-style: none;
    margin-block: 0;
    margin-inline: 0;
    padding-block: 0;
    padding-inline: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(0.125rem, 0.28vw, 0.25rem);
}

.terminal-log-line {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-cut-neon);
    line-height: 1.4;
    word-break: break-all;
    font-weight: 700;
}

.terminal-log-line::before {
    content: "> ";
    opacity: 0.7;
}

.terminal-log-line.log-error {
    color: #ef4444;
}

/* ========================================================================= */
/* NAGŁÓWEK I KONTENERY PROJEKTU                                             */
/* ========================================================================= */

.dimension-header-container {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1.14vw, 1rem);
    padding-block: clamp(0.75rem, 1.71vw, 1.5rem);
    padding-inline: clamp(0.75rem, 1.71vw, 1.5rem);
    background-color: var(--color-surface);
    border: var(--border-thick);
    border-radius: var(--radius-hard);
    box-shadow: var(--shadow-hard);
}

@container app-container (min-width: 48rem) { 
    .dimension-header-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        flex-wrap: wrap;
    }
}

/* --- SYSTEM ZARZĄDZANIA ROZKŁADEM NAGŁÓWKA (2/3 na 1/3) --- */

.header-left-panel {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-inline-size: min(100%, 18.75rem);
}

.header-right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(0.375rem, 0.85vw, 0.75rem);
    min-inline-size: min(100%, 15.625rem);
}

.header-right-panel--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    align-content: center;
}

/* --- ELEMENTY WEWNĘTRZNE NAGŁÓWKA --- */

.header-info-group {
    display: flex;
    flex-direction: column;
    gap: clamp(0.25rem, 0.57vw, 0.5rem);
    min-inline-size: 0;
}

.project-breadcrumbs {
    font-family: var(--font-mono);
    font-size: 0.75rem; 
    font-weight: 800;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: clamp(0.25rem, 0.57vw, 0.5rem);
    text-transform: uppercase;
}

.breadcrumb-highlight {
    color: var(--color-brand);
}

.project-title-edit {
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 1.71vw, 1.5rem);
    font-weight: 800;
    color: var(--color-text-primary);
    text-transform: uppercase;
}

.header-meta-text {
    font-family: var(--font-mono); 
    font-size: 0.75rem; 
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.input-transparent {
    border: none; 
    background: transparent; 
    inline-size: 100%; 
    outline: none; 
    margin-block: 0;
    margin-inline: 0; 
    padding-block: 0;
    padding-inline: 0; 
    color: inherit;
    font: inherit;
}

.input-transparent:focus {
    border-block-end: var(--border-dashed);
}

.btn-brutal-tall {
    min-block-size: 3.375rem;
}

/* ========================================================================= */
/* PRZYCISKI AKCJI (MODYFIKATORY NEOBRUTALISTYCZNE)                          */
/* ========================================================================= */

.btn-hover-brand {
    background-color: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
}

.btn-hover-brand:hover {
    background-color: var(--color-brand) !important;
    color: #ffffff !important;
    border-color: var(--color-text-primary) !important;
}

.btn-black-to-yellow {
    background-color: var(--color-text-primary) !important;
    color: var(--color-surface) !important;
}

.btn-black-to-yellow:hover {
    background-color: var(--color-btn-offer) !important;
    color: var(--color-text-primary) !important;
}

/* ========================================================================= */
/* HORYZONTALNY SCROLL DLA PRZYCISKÓW (MOBILE SWIPE)                         */
/* ========================================================================= */

.scrollable-buttons-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: clamp(0.5rem, 1.14vw, 1rem);
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
    padding-block-end: clamp(0.125rem, 0.28vw, 0.25rem);
}

.scrollable-buttons-row::-webkit-scrollbar {
    display: none; 
}

.scrollable-buttons-row > .btn-brutal {
    flex: 0 0 auto;
    min-inline-size: 10rem; 
}

@container (min-width: 40rem) {
    .scrollable-buttons-row > .btn-brutal {
        flex: 1 1 0;
        min-inline-size: 0;
    }
}

.action-buttons-stack {
    display: flex;
    flex-direction: column;
    gap: clamp(0.375rem, 0.85vw, 0.75rem);
    inline-size: 100%;
}

/* ========================================================================= */
/*  SYSTEM TRYBU FOCUS (UKRYWANIE PANELI - PEŁNE ZWOLNIENIE MIEJSCA)         */
/* ========================================================================= */

.header-persistent-tools {
    display: flex;
    gap: clamp(0.375rem, 0.85vw, 0.75rem);
    align-items: center;
}

.mobile-only-btn {
    display: inline-flex;
}

@container header (min-width: 64rem) {
    .mobile-only-btn {
        display: none !important;
    }
}

/* --------------- GŁÓWNE ZASADY TRYBU FOCUS (HTML CLASS) ----------------- */

html.is-focus-mode .brutal-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 0; 
    min-block-size: 0;
    padding: 0; 
    background: transparent;
    border: none;
    box-shadow: none;
    pointer-events: none;
    overflow: visible; 
}

/* Ukrywamy zbędne elementy nagłówka */
html.is-focus-mode .brand-logo-brutal,
html.is-focus-mode .desktop-nav,
html.is-focus-mode .mobile-only-btn {
    display: none !important;
}

html.is-focus-mode .brutal-footer {
    display: none !important; 
}

html.is-focus-mode .app-container {
    padding-block-start: calc(clamp(1rem, 2.28vw, 2rem) + env(safe-area-inset-top, 0px));
}


/* ========================================================================= */
/* TRYB EKSPERTA (UKRYCIE PODPOWIEDZI I ZNAKÓW [?])                          */
/* ========================================================================= */

.expert-mode-active span.tooltip-trigger,
body.expert-mode-active span.tooltip-trigger,
html.expert-mode-active span.tooltip-trigger,
.expert-mode-active .tooltip-trigger-badge,
body.expert-mode-active .tooltip-trigger-badge,
html.expert-mode-active .tooltip-trigger-badge {
    display: none !important;
}

/* --- FIXED FOCUS TOGGLE BUTTON --- */
.focus-toggle-fixed {
    position: fixed;
    z-index: var(--z-header);
    inset-block-end: calc(clamp(1rem, 2.28vw, 2rem) + env(safe-area-inset-bottom, 0px));
    inset-inline-end: calc(clamp(1.25rem, 2.28vw, 2rem) + env(safe-area-inset-right, 0px));
    gap: 0.5rem;
}

.focus-toggle-fixed svg {
    inline-size: 1.25rem;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}