/* ── Reset & base ─────────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f0f2f5;
    color: #333;
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 15px;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    gap: 8px;
    flex-wrap: nowrap;
    position: relative;
    padding: 6px 10px;
    border-radius: 12px 12px 0 0;
    background-color: transparent;
    background-image:
        radial-gradient(120% 180% at 0% 0%, rgba(26,115,232,0.08), transparent 60%),
        radial-gradient(120% 180% at 100% 0%, rgba(15,157,88,0.08), transparent 60%);
    background-repeat: no-repeat;
}
@media (min-width: 900px) {
    /* Halvany, dokumentum-szeru hatter-grafikak a FEJLEC-DOBOZ teljes
       szelesseben - EGYETLEN, szeles (2200px) SVG-vel, "retegzett
       veletlenszerusegu" elhelyezessel (a szelesseg 11 szegmensre osztva,
       mindegyikben 1 valodi veletlenszeru pozicioju/meretu/forgatasu
       ikonnal) - ez garantalja a teljes lefedettseget (nincs nagy ures
       folt), de NEM csempeszeruen ismetlodo mintat ad. Nagyobb sziluettek. */
    .header-bar { overflow: hidden; position: relative; background-color: transparent; }
    .header-bar::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%222200%22%20height%3D%22140%22%20viewBox%3D%220%200%202200%20140%22%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%23c5cdd6%22%20stroke-width%3D%222.5%22%20opacity%3D%220.42%22%20stroke-linejoin%3D%22round%22%3E%0A%20%20%3Cg%20transform%3D%22translate%28-15.0%2C8.0%29%20rotate%28-8.0%29%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200%20H74.1%20L95.0%2020.9%20V118.0%20H0%20Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M74.1%200%20V20.9%20H95.0%20Z%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%2214.2%22%20y1%3D%2244.8%22%20x2%3D%2280.8%22%20y2%3D%2244.8%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%2214.2%22%20y1%3D%2261.4%22%20x2%3D%2280.8%22%20y2%3D%2261.4%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%2214.2%22%20y1%3D%2277.9%22%20x2%3D%2252.3%22%20y2%3D%2277.9%22/%3E%0A%20%20%3C/g%3E%0A%3Cg%20transform%3D%22translate%282115.0%2C14.0%29%20rotate%288.0%29%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200%20H74.1%20L95.0%2020.9%20V118.0%20H0%20Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M74.1%200%20V20.9%20H95.0%20Z%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%2214.2%22%20y1%3D%2244.8%22%20x2%3D%2280.8%22%20y2%3D%2244.8%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%2214.2%22%20y1%3D%2261.4%22%20x2%3D%2280.8%22%20y2%3D%2261.4%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%2214.2%22%20y1%3D%2277.9%22%20x2%3D%2252.3%22%20y2%3D%2277.9%22/%3E%0A%20%20%3C/g%3E%0A%3Cg%20transform%3D%22translate%28304.4%2C13.0%29%20rotate%28-11.0%29%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200%20H40.8%20L52.3%2011.5%20V64.3%20H0%20Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M40.8%200%20V11.5%20H52.3%20Z%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%227.8%22%20y1%3D%2224.5%22%20x2%3D%2244.4%22%20y2%3D%2224.5%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%227.8%22%20y1%3D%2233.5%22%20x2%3D%2244.4%22%20y2%3D%2233.5%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%227.8%22%20y1%3D%2242.5%22%20x2%3D%2228.8%22%20y2%3D%2242.5%22/%3E%0A%20%20%3C/g%3E%0A%3Cg%20transform%3D%22translate%28446.4%2C38.1%29%20rotate%28-3.0%29%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200%20H63.9%20L81.9%2018.0%20V100.8%20H0%20Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M63.9%200%20V18.0%20H81.9%20Z%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%2212.3%22%20y1%3D%2238.3%22%20x2%3D%2269.6%22%20y2%3D%2238.3%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%2212.3%22%20y1%3D%2252.4%22%20x2%3D%2269.6%22%20y2%3D%2252.4%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%2212.3%22%20y1%3D%2266.5%22%20x2%3D%2245.0%22%20y2%3D%2266.5%22/%3E%0A%20%20%3C/g%3E%0A%3Cg%20transform%3D%22translate%28626.5%2C25.2%29%20rotate%28-1.0%29%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200%20H48.7%20L62.4%2013.7%20V76.8%20H0%20Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M48.7%200%20V13.7%20H62.4%20Z%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%229.4%22%20y1%3D%2229.2%22%20x2%3D%2253.1%22%20y2%3D%2229.2%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%229.4%22%20y1%3D%2240.0%22%20x2%3D%2253.1%22%20y2%3D%2240.0%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%229.4%22%20y1%3D%2250.7%22%20x2%3D%2234.3%22%20y2%3D%2250.7%22/%3E%0A%20%20%3C/g%3E%0A%3Cg%20transform%3D%22translate%28809.7%2C38.3%29%20rotate%28-6.0%29%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200%20H38.7%20L49.6%2010.9%20V61.1%20H0%20Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M38.7%200%20V10.9%20H49.6%20Z%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%227.4%22%20y1%3D%2223.2%22%20x2%3D%2242.2%22%20y2%3D%2223.2%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%227.4%22%20y1%3D%2231.8%22%20x2%3D%2242.2%22%20y2%3D%2231.8%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%227.4%22%20y1%3D%2240.3%22%20x2%3D%2227.3%22%20y2%3D%2240.3%22/%3E%0A%20%20%3C/g%3E%0A%3Cg%20transform%3D%22translate%281055.8%2C33.4%29%20rotate%282.0%29%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200%20H39.0%20L50.0%2011.0%20V61.6%20H0%20Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M39.0%200%20V11.0%20H50.0%20Z%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%227.5%22%20y1%3D%2223.4%22%20x2%3D%2242.5%22%20y2%3D%2223.4%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%227.5%22%20y1%3D%2232.0%22%20x2%3D%2242.5%22%20y2%3D%2232.0%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%227.5%22%20y1%3D%2240.6%22%20x2%3D%2227.5%22%20y2%3D%2240.6%22/%3E%0A%20%20%3C/g%3E%0A%3Cg%20transform%3D%22translate%281210.2%2C22.0%29%20rotate%2812.0%29%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200%20H41.4%20L53.1%2011.7%20V65.3%20H0%20Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M41.4%200%20V11.7%20H53.1%20Z%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%228.0%22%20y1%3D%2224.8%22%20x2%3D%2245.1%22%20y2%3D%2224.8%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%228.0%22%20y1%3D%2234.0%22%20x2%3D%2245.1%22%20y2%3D%2234.0%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%228.0%22%20y1%3D%2243.1%22%20x2%3D%2229.2%22%20y2%3D%2243.1%22/%3E%0A%20%20%3C/g%3E%0A%3Cg%20transform%3D%22translate%281415.0%2C7.7%29%20rotate%28-6.0%29%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200%20H35.9%20L46.1%2010.1%20V56.7%20H0%20Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M35.9%200%20V10.1%20H46.1%20Z%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%226.9%22%20y1%3D%2221.5%22%20x2%3D%2239.1%22%20y2%3D%2221.5%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%226.9%22%20y1%3D%2229.5%22%20x2%3D%2239.1%22%20y2%3D%2229.5%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%226.9%22%20y1%3D%2237.4%22%20x2%3D%2225.3%22%20y2%3D%2237.4%22/%3E%0A%20%20%3C/g%3E%0A%3Cg%20transform%3D%22translate%281662.5%2C36.0%29%20rotate%2816.0%29%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200%20H51.6%20L66.1%2014.5%20V81.4%20H0%20Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M51.6%200%20V14.5%20H66.1%20Z%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%229.9%22%20y1%3D%2230.9%22%20x2%3D%2256.2%22%20y2%3D%2230.9%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%229.9%22%20y1%3D%2242.3%22%20x2%3D%2256.2%22%20y2%3D%2242.3%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%229.9%22%20y1%3D%2253.7%22%20x2%3D%2236.4%22%20y2%3D%2253.7%22/%3E%0A%20%20%3C/g%3E%0A%3Cg%20transform%3D%22translate%281792.5%2C33.6%29%20rotate%28-5.0%29%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200%20H63.3%20L81.2%2017.9%20V99.9%20H0%20Z%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M63.3%200%20V17.9%20H81.2%20Z%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%2212.2%22%20y1%3D%2238.0%22%20x2%3D%2269.0%22%20y2%3D%2238.0%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%2212.2%22%20y1%3D%2252.0%22%20x2%3D%2269.0%22%20y2%3D%2252.0%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%2212.2%22%20y1%3D%2266.0%22%20x2%3D%2244.7%22%20y2%3D%2266.0%22/%3E%0A%20%20%3C/g%3E%0A%3C/g%3E%0A%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        pointer-events: none;
        z-index: 0;
    }
    .header-bar > * { position: relative; z-index: 1; }
}

@media (min-width: 769px) {
    .header-bar { justify-content: center; }
    .header-actions { position: absolute; top: 10px; right: 14px; }
    .title-area { text-align: center; }
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    cursor: pointer;
}
.logo-area:hover .logo-icon { transform: scale(1.05); }
.logo-area:hover .title-area h1 { transform: scale(1.03); }
.title-area h1 { transition: transform 0.25s ease; }

.logo-icon {
    width: 72px;
    height: 72px;
    animation: logoSnapIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes logoSnapIn {
    0%   { transform: scale(0.75) rotate(-6deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.title-area { display: flex; flex-direction: column; }
.title-area h1 {
    font-size: 2.6em;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: #2d3a4a;
    margin-bottom: 2px;
    animation: titleFadeIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
}
@keyframes titleFadeIn {
    0%   { transform: translateX(-10px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
.title-area h1 .brand-crop { color: #1a73e8; }
.title-area h1 .brand-it   { color: #0f9d58; }
.title-area h1 .brand-fast { color: #1590c4; }
.title-area h1 .title-suffix {
    font-size: 0.42em;
    font-weight: 700;
    color: #2d3a4a;
    letter-spacing: normal;
}
.subtitle {
    font-size: 0.78em;
    color: #757575;
    animation: titleFadeIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.coffee-btn {
    background: linear-gradient(135deg, #ffdd57, #ffc107);
    padding: 4px 12px;
    border-radius: 20px;
    text-decoration: none;
    color: #4a3200;
    font-weight: bold;
    font-size: 12px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.coffee-btn:hover { background: linear-gradient(135deg, #ffc107, #ffb300); transform: translateY(-1px); }

.lang-switch {
    background: white;
    padding: 4px 10px;
    border-radius: 20px;
    text-decoration: none;
    color: #1a73e8;
    font-weight: bold;
    font-size: 12px;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.lang-switch:hover { background: #1a73e8; color: white; }

@media (max-width: 768px) {
    .header-actions { flex-direction: column; align-items: flex-end; gap: 6px; }
    .coffee-btn, .lang-switch { font-size: 10px; padding: 3px 8px; }
    .title-area h1 .title-suffix { display: block; margin-top: 2px; }

    /* A Menü blokkjai mobilon mindig teljes szélességűek - ez felülírja
       az esetleges, asztali nézetben (sarok-húzással) beállított és
       elmentett szélességet is, ami inline style-ként öröklődhetne át. */
    .menu-content .toolbar-section {
        width: 100% !important;
        position: static !important;
    }
}

.header-wave {
    display: block;
    width: 100%;
    height: 46px;
    margin-bottom: 14px;
    filter: drop-shadow(0 4px 5px rgba(26,115,232,0.18));
}

/* ── Messages ────────────────────────────────────────────────────────────── */

.message-container { text-align: center; margin-bottom: 8px; }

.success {
    color: #0f9d58; padding: 6px 12px; background: #e6f4ea;
    border-radius: 5px; font-size: 13px; display: inline-block;
    transition: opacity 0.5s ease;
}
.error {
    color: #db4437; padding: 6px 12px; background: #fce8e6;
    border-radius: 5px; font-size: 13px; display: inline-block;
}

.info-box {
    background: #fff3cd;
    border: 1px solid #ffc107;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 13px;
    text-align: center;
    display: none;
}
.info-box a { color: #1a73e8; font-weight: bold; }

/* ── Filename bar ────────────────────────────────────────────────────────── */

.filename-bar {
    background: white;
    padding: 6px 12px;
    margin-bottom: 6px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    overflow: hidden;
}
.filename-label { flex-shrink: 0; }
.filename-text  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #555; flex: 1; }

@media (min-width: 769px) {
    /* Asztali nézetben a fájlválasztó + oldallapozó a fájlnév-sor jobb
       szélére kerül, ne álljon magányosan külön sorban. */
    .filename-bar .file-nav-block {
        flex-shrink: 0;
        margin-left: auto;
    }
}
@media (max-width: 768px) {
    /* Mobilon marad a korábbi, külön soros elrendezés - a fájlnév-sor
       tördelhető, a file-nav-block teljes szélességben, új sorban. */
    .filename-bar { flex-wrap: wrap; }
    .filename-bar .file-nav-block {
        flex: 1 1 100%;
        order: 3;
        margin-top: 6px;
    }
}

/* ── Sticky toolbar ──────────────────────────────────────────────────────── */

.sticky-toolbar-container {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #f0f2f5;
    padding: 5px 0;
    margin: -5px -15px 0;
    padding-left: 15px;
    padding-right: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.unified-toolbar {
    background: white;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
}

/* ── File + navigator block ──────────────────────────────────────────────── */

.file-nav-block {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 4px 6px;
    display: flex;
    gap: 8px;
}

@media (min-width: 769px) {
    .file-nav-block {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        max-width: none;
        padding: 4px 8px;
    }
    .file-nav-block .file-input-wrapper { width: auto; }
    .file-nav-block .file-input-label { font-size: 12px; padding: 6px 10px; white-space: nowrap; }
}

@media (max-width: 768px) {
    .file-nav-block {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 4px 8px;
    }
    .file-nav-block .file-input-label { font-size: 11px; padding: 4px 6px; }
}

.file-input-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

.file-input-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border: 2px dashed #1a73e8;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    width: 100%;
    background: #fafafa;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    transition: background 0.2s;
}

/* ── Nagyobb, hangsúlyosabb drop-zone asztali nézetben ──────────────────── */
.dropzone-hint { display: none; }
@media (min-width: 769px) {
    .upload-dropzone {
        max-width: 520px;
        margin: 20px auto;
        border: 2.5px dashed #b9c6d3;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 6px 20px rgba(0,0,0,0.08);
        transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
        padding: 60px 30px !important;
    }
    .upload-dropzone:hover {
        border-color: #1a73e8;
        box-shadow: 0 10px 28px rgba(0,0,0,0.12);
    }
    .upload-dropzone.dropzone-active {
        border-color: #0f9d58;
        background: #f0fbf5;
        box-shadow: 0 10px 28px rgba(15,157,88,0.25);
    }
    .dropzone-hint {
        display: block;
        margin-top: 10px;
        font-size: 0.85em;
        color: #999;
    }
}
.file-input-label:hover { background: #e8f0fe; }

.file-input-wrapper input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* ── Page navigator ──────────────────────────────────────────────────────── */

.page-navigator {
    display: flex;
    align-items: center;
    gap: 6px;
}

@media (min-width: 769px) {
    .page-navigator { justify-content: center; gap: 4px; }
}

.page-nav-btn {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
    border: 1px solid #bdbdbd;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    transition: all 0.2s;
    position: relative;
}
.page-nav-btn:hover { background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%); transform: scale(1.05); }
.page-nav-btn:active { transform: scale(0.97); }
.page-nav-btn:disabled { opacity: 0.5; cursor: default; transform: none; }

.page-info {
    font-size: 12px; font-weight: bold; color: #333;
    min-width: 45px; text-align: center;
}
.menu-header .page-navigator { margin-left: auto; margin-right: 10px; }
.menu-header .page-info { color: white; }

/* ── Menü-wrapper (az összes eszköztár-szekciót egybefogja) ─────────────── */

.menu-wrapper {
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    /* Mindig teljes szélesség - enélkül mobilon (ahol nincs külön
       min-width:769px-es szabály) a .menu-wrapper a saját (keskenyebb)
       tartalmához igazodna, és a szülő .unified-toolbar
       justify-content:center szabálya miatt középre kerülve nagy üres
       sávot hagyott volna mindkét oldalon. */
    width: 100%;
}
.menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(135deg, #1a73e8, #0f9d58);
    color: white;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}
.menu-header .toggle-icon { width: 14px; height: 14px; filter: brightness(0) invert(1); transition: transform 0.2s; }
.menu-wrapper.collapsed .menu-header .toggle-icon { transform: rotate(-90deg); }
.menu-wrapper.collapsed .menu-content { display: none; }
.menu-reset-btn {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.4);
    color: white;
    font-size: 11px;
    font-weight: normal;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
    margin-left: auto;
    margin-right: 10px;
    transition: background 0.2s;
}
.menu-reset-btn:hover { background: rgba(255,255,255,0.32); }
.menu-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
}
@media (min-width: 769px) {
    /* Asztali nézetben "masonry" (Pinterest-szerű) elrendezés - EZ NEM
       CSS Grid, mert a Grid soronként EGYSÉGES magasságot használ (a
       legmagasabb elemhez igazítva MINDEN oszlopban), emiatt egy
       alacsony szekció (pl. Zoom) egy másik alacsony szekció (pl. Vágás)
       alá téve is nagy üres hellyel jelenne meg, ha a SORBAN máshol egy
       magas szekció (pl. Arány) van. Ehelyett a konténer relatív
       pozicionálású, a szekciók pedig abszolút pozicionáltak, pixelre
       pontos hellyel - ezt a JS számolja ki (initMenuSectionReorder →
       relayout), oszloponként KÜLÖN-KÜLÖN követve a magasságot. */
    .menu-content {
        position: relative;
        /* Ha a szekciók (a most javított sortörés miatt) több
           "oszlop-sorba" kerülnek, és ez összesen magasabb, mint amennyi
           kényelmesen elférne a képernyőn (pl. fekvő tájolásban, alacsony
           magasságú nézetben), a tartalom NE a .menu-wrapper elrejtett
           (overflow:hidden) része alá tűnjön el elérhetetlenül, hanem
           legyen belül görgethető - a "Menü" fejléc/gombsor így mindig
           látható marad felül, csak a szekciók listája görgethető alatta. */
        max-height: 70vh;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .menu-content .toolbar-section {
        position: absolute;
        resize: both;
        overflow: auto;
        min-width: 220px;
        min-height: 80px;
        max-width: 100%;
        transition: left 0.15s ease, top 0.15s ease;
    }
}

/* ── Toolbar sections ────────────────────────────────────────────────────── */

.toolbar-section {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 80px;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
}
.toolbar-section.section-dragging {
    opacity: 0.4;
}
.toolbar-section.section-drag-over {
    box-shadow: 0 0 0 3px #1a73e8;
}
.menu-drag-arrow {
    position: fixed;
    z-index: 2000;
    font-size: 20px;
    color: #1a73e8;
    pointer-events: none;
    text-shadow: 0 0 3px white, 0 0 3px white, 0 0 3px white;
}

.section-header {
    background: #e8eaed;
    padding: 6px 10px;
    font-size: 10px;
    font-weight: bold;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #e0e0e0;
    cursor: grab;
    /* A mobil (érintéses) átrendezéshez - amíg a fejlécet nyomva tartva
       húzza a felhasználó, a böngésző alap görgetés/nagyítás-gesztusai
       ne zavarják be a saját JS-es húzás-kezelésünket. */
    touch-action: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    border-radius: 7px 7px 0 0;
}
.section-header:hover { background: #d5d9dd; }
.section-header .toggle-icon {
    width: 12px; height: 12px; opacity: 0.5;
    transition: transform 0.2s ease;
}
.toolbar-section.collapsed .section-header .toggle-icon { transform: rotate(-90deg); }
.toolbar-section.collapsed .section-content { display: none; }
.menu-content .toolbar-section.collapsed { min-height: 0; height: auto !important; }

.section-content {
    padding: 6px;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    flex: 1;
}

/* ── Save section ────────────────────────────────────────────────────────── */

.save-section { min-width: 180px; }

.save-section-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
}

.checkbox-group { display: flex; flex-direction: column; gap: 6px; flex: 1; }

.checkbox-wrapper {
    display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap;
}
.checkbox-wrapper input[type="checkbox"] { cursor: pointer; width: 16px; height: 16px; }
.checkbox-wrapper label { font-size: 11px; cursor: pointer; user-select: none; white-space: nowrap; }

.save-buttons { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Quality settings ────────────────────────────────────────────────────── */

.quality-settings-inline {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px;
}
.quality-group { display: flex; align-items: center; gap: 4px; }
.quality-group label { font-weight: bold; color: #555; white-space: nowrap; font-size: 11px; }
.quality-group select {
    padding: 3px 6px; border: 1px solid #ddd; border-radius: 4px;
    font-size: 11px; background: white; cursor: pointer;
}
.dpi-info { font-size: 10px; color: #666; text-align: center; white-space: nowrap; }

/* ── Icon buttons ────────────────────────────────────────────────────────── */

.icon-btn {
    width: 44px; height: 44px; padding: 0;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 30%, #d0d0d0 60%, #e8e8e8 100%);
    border: 1px solid #bdbdbd; border-radius: 10px; cursor: pointer;
    transition: all 0.2s;
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.8);
}
.icon-btn:hover {
    background: linear-gradient(135deg, #e8e8e8 0%, #d5d5d5 30%, #c8c8c8 60%, #ddd 100%);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.7);
    transform: translateY(-1px);
    z-index: 99999;
}
.icon-btn:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0 2px 4px rgba(0,0,0,0.2);
    transform: translateY(1px);
}
.icon-btn img {
    width: 24px; height: 24px;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
}

.icon-btn.reset-btn {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 30%, #ef9a9a 60%, #ffcdd2 100%);
    border-color: #e57373;
}
.icon-btn.reset-btn:hover {
    background: linear-gradient(135deg, #ffcdd2 0%, #ef9a9a 30%, #e57373 60%, #ef9a9a 100%);
}

/* "Régió hozzáadása" mód bekapcsolt állapota - jól látható, hogy aktív */
.icon-btn.active {
    background: linear-gradient(135deg, #1a73e8 0%, #1765cc 60%, #1a73e8 100%);
    border-color: #0d47a1;
    box-shadow: 0 2px 4px rgba(26,115,232,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
.icon-btn.active img { filter: brightness(0) invert(1) drop-shadow(1px 1px 1px rgba(0,0,0,0.3)); }

.icon-btn.page-zoom-btn {
    width: 30px; height: 30px; border-radius: 6px;
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.15) 100%);
    border: 1px solid rgba(255,255,255,0.4);
}
.icon-btn.page-zoom-btn img { width: 14px; height: 14px; }
.icon-btn.page-zoom-btn:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.3) 100%);
    transform: scale(1.1); z-index: 99999;
}

.zoom-level { font-weight: bold; min-width: 40px; text-align: center; font-size: 12px; flex-shrink: 0; }

/* ── JS-alapú tooltip ─────────────────────────────────────────────────────
   A korábbi CSS content:attr()+white-space:pre-line trükk mobil böngészőkben
   (pl. MIUI/Xiaomi) megbízhatatlanul viselkedett - nem korlátozta a
   szélességet, egy vízszintes sávként futott ki a képernyőről. Helyette ez a
   JS-ben pozicionált, valódi DOM-elem, ami mindig a viewport-on belül marad
   és helyesen tördelődik (lásd main.js initTooltips()). */
.js-tooltip {
    display: none;
    position: fixed;
    background: #2b2b2b;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    max-width: 260px;
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}
.js-tooltip.visible { display: block; opacity: 1; }

/* ── Progress bar ────────────────────────────────────────────────────────── */

.crop-progress {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px 40px;
    border-radius: 12px;
    box-shadow: 0 0 28px rgba(0,0,0,0.4), 0 0 4px rgba(0,0,0,0.25);
    z-index: 9999;
    min-width: 320px;
    text-align: center;
}
.crop-progress-bar { width: 100%; height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.crop-progress-fill { height: 100%; background: linear-gradient(90deg, #1a73e8, #0f9d58); border-radius: 4px; transition: width 0.3s ease; width: 0%; }
.crop-progress-text { font-size: 13px; color: #555; font-weight: bold; }

/* ── Editor area ─────────────────────────────────────────────────────────── */

.editor-container {
    background: #e8eaed;
    border-radius: 8px;
    padding: 15px;
    min-height: 400px;
    margin-top: 15px;
}

.loading { text-align: center; padding: 50px; color: #666; font-size: 18px; }

/* ── Page container ──────────────────────────────────────────────────────── */

.page-container {
    margin-bottom: 25px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: visible;
    position: relative;
}

.page-header {
    background: #1a73e8;
    color: white;
    padding: 6px 10px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
.page-header-left  { display: flex; align-items: center; gap: 10px; }
.page-header-right { display: flex; align-items: center; gap: 6px; }
.page-zoom-group   { display: flex; align-items: center; gap: 3px; }
.page-crop-undo-last { margin-right: 28px; }
@media (max-width: 768px) {
    .page-crop-undo-last { margin-right: 0; }
}
.page-zoom-level   { font-size: 11px; min-width: 35px; text-align: center; opacity: 0.9; }

.page-status {
    font-size: 11px; padding: 2px 6px;
    border-radius: 10px; background: rgba(255,255,255,0.3);
}
.page-status.cropped { background: #0f9d58; }

.pan-hint {
    font-size: 9px; background: rgba(0,0,0,0.2);
    padding: 2px 5px; border-radius: 10px;
}

/* ── Region cards (több téglalap egy oldalról - shift+kattintás) ────────── */

.region-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 14px 16px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
}

.region-card {
    position: relative;
    background: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.region-card-delete {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e57373;
    color: white;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
}
.region-card-delete:hover { background: #d32f2f; }

.region-card-label {
    font-size: 11px;
    color: #666;
    margin-bottom: 4px;
    font-weight: bold;
}

.region-card-canvas {
    display: block;
    max-width: 220px;
    max-height: 220px;
    width: auto;
    height: auto;
    border: 1px solid #eee;
}

@media (max-width: 768px) {
    /* Mobilon a kártyák a konténer szélességének kb. felét kapják (a gap
       figyelembevételével), hogy pontosan 2 férjen el egymás mellett -
       ez robusztusabb, mint egy fix pixelméret, mert bármilyen
       képernyőszélességnél helyesen 2 oszlopba rendez. */
    .region-card {
        flex: 0 1 calc(50% - 6px);
        box-sizing: border-box;
    }
    .region-card-canvas {
        max-width: 100%;   /* a kártya szélességéhez igazodik */
        max-height: 165px; /* kb. az eredeti 220px 3/4-e */
    }
}

/* ── Canvas wrapper ──────────────────────────────────────────────────────── */

.canvas-wrapper {
    position: relative;
    overflow: auto;
    background: #f5f5f5;
    min-height: 400px;
    max-height: 70vh;
    cursor: grab;
    z-index: 1;
    /* FONTOS: NEM flex+justify-content/align-items:center! Az a kombináció
       overflow:auto mellett, nagyobb (a konténernél nagyobb) tartalomnál
       ismert böngésző-hibát okoz: a tartalom egy része görgetéssel
       elérhetetlenné válik ("flexbox centering clipping" hiba). Helyette a
       JS (updateSinglePageZoom) margóval középre igazítja a tartalmat, ha az
       kisebb a konténernél - ez normál block-elrendezésben, hiba nélkül
       működik mindkét esetben (kisebb ÉS nagyobb tartalomnál is). */
    display: block;
    text-align: center; /* vízszintes középre igazítás - overflow:auto mellett is helyesen görgethető, nincs benne a flex-center hiba */
}
.canvas-wrapper.panning { cursor: grabbing; }

/* Egyoldalas PDF-nél nincs szükség a görgethető, fix magasság-korlátra -
   a konténer pontosan az oldal tényleges méretéhez igazodhat, jóval
   magasabb is lehet. Többoldalas dokumentumnál (nincs .single-page-doc
   osztály a body-n) a korlát változatlan marad. */
body.single-page-doc .canvas-wrapper {
    max-height: 88vh;
}

.canvas-inner-wrapper {
    display: inline-block; /* shrinks to content size for CSS transform to work */
    min-height: 200px;
    flex-shrink: 0;
}

/* CSS-transform-based zoom: container is always canvas native px,
   inner-wrapper is expanded to scaled size for proper scrollbars */
.fabric-canvas-container {
    position: relative;
    flex-shrink: 0;
    transform-origin: top left;
}

/* ── Mobile navigation overlay ───────────────────────────────────────────── */

.mobile-nav-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 25;
}

.mobile-nav-btn {
    position: absolute;
    width: 44px; height: 44px;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto;
    z-index: 26;
    touch-action: manipulation;
}
.mobile-nav-btn:active { transform: scale(0.93); background: rgba(0,0,0,0.85); }

.mobile-nav-left  { left: 10px;    top: 50%; transform: translateY(-50%); }
.mobile-nav-right { right: 10px;   top: 50%; transform: translateY(-50%); }
.mobile-nav-up    { top: 50px;     left: 50%; transform: translateX(-50%); }
.mobile-nav-down  { bottom: 10px;  left: 50%; transform: translateX(-50%); }

.mobile-hint {
    /* Egyelőre elrejtve - könnyen visszakapcsolható a display:none törlésével. */
    display: none;
    font-size: 8px; background: rgba(0,0,0,0.2);
    padding: 2px 4px; border-radius: 10px;
    font-weight: normal; text-align: center;
    line-height: 1.2; white-space: normal;
    max-width: 70px; flex-shrink: 0;
}

/* ── Responsive breakpoints ──────────────────────────────────────────────── */

@media (max-width: 768px) {
    .icon-btn { width: 40px; height: 40px; }
    .icon-btn img { width: 20px; height: 20px; }
    .logo-icon { width: 50px; height: 50px; }
    .lang-switch { font-size: 10px; padding: 3px 8px; }
    .title-area h1 { font-size: 1.6em; }
    .subtitle { font-size: 0.6em; }
    .header-wave { height: 30px; margin-bottom: 10px; }
    .container { padding: 6px; }
    .editor-container { padding: 10px; }
    .sticky-toolbar-container { margin: -5px -6px 0; padding-left: 6px; padding-right: 6px; }
    .unified-toolbar { gap: 6px; padding: 6px 8px; }
    .quality-settings-inline { flex-direction: column; gap: 4px; width: 100%; }
    .toolbar-section { width: 100%; min-height: auto; }
    .save-section-content { flex-direction: column; align-items: stretch; }
    .checkbox-group { align-items: flex-start; gap: 8px; }
    .save-buttons { justify-content: center; }
    .page-nav-btn { width: 28px; height: 28px; font-size: 14px; }
    .page-info { font-size: 12px; min-width: 45px; }
    .pan-hint { display: none; }
    .mobile-nav-overlay { display: block; }
}

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

    /* Sorkizárt szövegelrendezés - CSAK asztali (szélesebb) nézetben.
       Mobilon szándékosan bal-igazított marad: keskeny oszlopban a
       sorkizárás egyenetlen, "folyó" szóközöket okozna, ami rontaná az
       olvashatóságot - szélesebb, asztali hasábban viszont jól mutat. */
    .landing-features li,
    .faq-item p,
    .legal-widget p {
        text-align: justify;
        text-align-last: left; /* az utolsó sor ne nyúljon szét */
        hyphens: auto;
    }
}

@media (max-width: 480px) {
    .icon-btn { width: 34px; height: 34px; }
    .icon-btn img { width: 16px; height: 16px; }
    .mobile-nav-btn { width: 36px; height: 36px; font-size: 16px; }
    .quality-group select { font-size: 10px; padding: 2px 4px; }
    .page-nav-btn { width: 26px; height: 26px; font-size: 12px; }
}

/* ── Funkciólista (kezdőoldal) ────────────────────────────────────────────── */
/* ── Két kártya (Mit tud / GYIK) - asztalin egymás mellett, mobilon egymás alatt ── */
.landing-cards-row {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 640px;
    margin: 10px auto 30px;
}
.landing-cards-row > * {
    animation: cardFadeUp 0.6s ease both;
}
.landing-cards-row > *:nth-child(2) { animation-delay: 0.12s; }
@keyframes cardFadeUp {
    0%   { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Két ÖNÁLLÓ kártya egymás mellett (asztalin), egymás alatt (mobilon) -
   a "Mit tud" és a GYIK esetén is. */
.features-cards-row, .faq-cards-row {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
@media (min-width: 769px) {
    .landing-cards-row { max-width: 1200px; }
    .features-cards-row, .faq-cards-row {
        flex-direction: row;
        align-items: stretch;
        gap: 40px;
    }
    .features-cards-row .landing-features,
    .faq-cards-row .faq-section {
        flex: 1 1 0;
        max-width: none;
        margin: 0;
    }
}

.landing-features {
    max-width: 640px;
    margin: 10px auto 30px;
    padding: 24px 28px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.14), 0 3px 8px rgba(0,0,0,0.08);
}
.landing-features h2 {
    font-size: 1.15em;
    color: #2d3a4a;
    margin-bottom: 14px;
    text-align: center;
}
.landing-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.landing-features li {
    position: relative;
    padding: 8px 12px 8px 28px;
    font-size: 0.92em;
    color: #444;
    line-height: 1.45;
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.landing-features li:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.14);
}
.landing-features li:nth-child(odd)  { background: #e6f7ec; }
.landing-features li:nth-child(even) { background: #e4edf5; }
.landing-features li:last-child { margin-bottom: 0; }
.landing-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 8px;
    width: 18px;
    height: 18px;
    color: white;
    background: linear-gradient(135deg, #1a73e8, #0f9d58);
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s ease;
}
.landing-features li:hover::before {
    transform: rotate(360deg) scale(1.15);
}

/* ── GYIK szekció ──────────────────────────────────────────────────────────── */
.faq-section {
    max-width: 640px;
    margin: 0 auto 30px;
    padding: 24px 28px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.14), 0 3px 8px rgba(0,0,0,0.08);
}
.faq-section h2 {
    font-size: 1.15em;
    color: #2d3a4a;
    margin-bottom: 14px;
    text-align: center;
}
.faq-item {
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.faq-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.14);
}
.faq-item:nth-child(odd)  { background: #e6f7ec; }
.faq-item:nth-child(even) { background: #e4edf5; }
.faq-item:last-child { margin-bottom: 0; }
.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    color: #2d3a4a;
    font-size: 0.94em;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f0f2f5;
    color: #1a73e8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: transform 0.2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
    margin-top: 10px;
    color: #666;
    font-size: 0.9em;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .landing-features, .faq-section, .legal-widgets { padding: 18px 16px; margin-left: 8px; margin-right: 8px; }
}

/* ── Jogi widgetek (fájlkezelés + GDPR) ──────────────────────────────────── */
.legal-widgets {
    max-width: 640px;
    margin: 50px auto 40px;
    padding: 18px 28px;
    background: white;
    border-radius: 10px;
    border: 1px solid #eee;
    box-shadow: 0 10px 28px rgba(0,0,0,0.14), 0 3px 8px rgba(0,0,0,0.08);
}
.legal-widget {
    padding: 8px 0;
    border-bottom: 1px solid #e5e5e5;
}
.legal-widget:last-child { border-bottom: none; }
.legal-widget summary {
    cursor: pointer;
    font-weight: 600;
    color: #555;
    font-size: 0.82em;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.legal-widget summary::-webkit-details-marker { display: none; }
.legal-widget summary::after {
    content: '▾';
    flex-shrink: 0;
    color: #999;
    font-size: 11px;
    transition: transform 0.2s;
}
.legal-widget[open] summary::after { transform: rotate(180deg); }
.legal-widget p {
    margin-top: 8px;
    color: #777;
    font-size: 0.78em;
    line-height: 1.5;
}
.legal-widget .legal-contact {
    margin-top: 12px;
    font-style: italic;
    color: #999;
}

.copyright-line {
    text-align: center;
    color: #999;
    font-size: 0.75em;
    margin: 0 0 30px;
}

/* ── Kapcsolat-gomb (lebegő) + modal ──────────────────────────────────────── */
.contact-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 500;
    background: linear-gradient(135deg, #1a73e8, #0f9d58);
    color: white;
    border: none;
    border-radius: 24px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    transition: transform 0.2s;
}
.contact-btn:hover { transform: translateY(-2px); }

/* Kis "X" jelvény a lebegő Kapcsolat-gomb jobb felső sarkában - csak a
   futó munkamenetre tünteti el a gombot (DOM-manipuláció, nincs
   localStorage/sessionStorage mentés), tehát oldal-újratöltésre mindig
   visszatér. */
.contact-btn-close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    line-height: 18px;
    border-radius: 50%;
    background: #fff;
    color: #333;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    cursor: pointer;
}
.contact-btn-close:hover { background: #f2f2f2; transform: none; }

.scroll-top-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 500;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a73e8, #0f9d58);
    color: white;
    border: none;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    transition: transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scroll-top-btn:hover { transform: translateY(-2px); }

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.modal-overlay.visible { display: flex; }

.modal {
    background: white;
    border-radius: 12px;
    padding: 28px;
    max-width: 420px;
    width: 90%;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
@media (min-width: 769px) {
    .modal { max-width: 640px; }
}
.modal h2 { margin-bottom: 16px; font-size: 1.2em; color: #2d3a4a; }
.modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 22px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}
.modal-close:hover { color: #333; }

.modal form { display: flex; flex-direction: column; gap: 12px; }
.modal input, .modal textarea {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
}
.modal input:focus, .modal textarea:focus { outline: none; border-color: #1a73e8; }

.modal-submit-btn {
    background: linear-gradient(135deg, #1a73e8, #0f9d58);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s;
}
.modal-submit-btn:hover { opacity: 0.9; }
.modal-submit-btn:disabled { opacity: 0.6; cursor: default; }

.contact-status { font-size: 0.85em; margin-top: 4px; }
.contact-status.success { color: #0f9d58; }
.contact-status.error   { color: #d32f2f; }

@media (max-width: 768px) {
    .contact-btn { padding: 10px 16px; font-size: 12px; bottom: 16px; right: 16px; }
    .scroll-top-btn { width: 38px; height: 38px; font-size: 15px; bottom: 16px; left: 16px; }
    .modal { padding: 20px; }
}

/* ── Precíziós vágás: sablonok, arányzár, numerikus bevitel ────────────────── */
.precision-section-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
}
.precision-two-col {
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
}
.precision-main-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 180px;
}
.precision-side-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 110px;
    border-left: 1px solid #e0e0e0;
    padding-left: 10px;
}
.precision-side-col .precision-row { flex-wrap: wrap; }
.precision-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.precision-select, .precision-select-small {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 12px;
    background: white;
}
.precision-select-small { flex: 0 0 70px; }
.precision-input {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 12px;
}
.precision-num-small {
    width: 50px;
    padding: 6px 4px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 12px;
    text-align: center;
}
.small-btn { width: 34px; height: 34px; flex-shrink: 0; }
.small-btn img { width: 16px; height: 16px; }
.apply-btn { width: 100%; height: auto; padding: 8px 12px; white-space: nowrap; }

.numeric-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.numeric-grid label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: #555;
    gap: 4px;
}
.numeric-grid input {
    width: 60px;
    padding: 5px 6px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 12px;
    text-align: right;
}

.share-link-result {
    position: relative;
    margin-top: 10px;
    padding: 12px 28px 12px 12px;
    background: #f0f7ff;
    border: 1px solid #b3d7ff;
    border-radius: 8px;
    font-size: 12px;
}
.share-link-result button.share-link-close {
    position: absolute;
    top: 4px;
    right: 6px;
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 4px 6px;
    margin: 0;
}
.share-link-result button.share-link-close:hover { color: #d32f2f; background: none; }
.share-link-result a {
    color: #1a73e8;
    font-weight: bold;
    word-break: break-all;
}
.share-link-result .share-link-meta {
    margin-top: 6px;
    color: #777;
    font-size: 11px;
}
.share-link-result button {
    margin-top: 8px;
    padding: 6px 12px;
    background: #1a73e8;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .numeric-grid { grid-template-columns: 1fr 1fr; }
    .precision-select, .precision-input { font-size: 11px; }

    /* Az ikonok/gombok/mezők egymás mellett maradjanak (ne törjenek új
       sorba) mobilon - a bal/jobb, fent/lent elrendezés (.numeric-grid)
       változatlan marad, ahogy fentebb is látszik. Csak mobilon aktív,
       asztali nézetben nincs hatása. */
    .precision-row { flex-wrap: nowrap; }
    .precision-select, .precision-input, .precision-select-small { min-width: 0; }

    /* A két-oszlopos (Arány/mm jobbra) elrendezés csak asztali nézetben
       aktív - mobilon visszaáll az eredeti, egy oszlopos, egymás alatti
       elrendezésre. */
    .precision-two-col { flex-direction: column; }
    .precision-side-col { border-left: none; padding-left: 0; border-top: 1px solid #e0e0e0; padding-top: 8px; }
    .small-btn { flex-shrink: 0; }
}