body {
    margin: 0;
    padding: 0;
    font-family: system-ui, Arial, sans-serif;
    background: #faf7fd;
    overflow-y: scroll; /* Prevent layout width jump when vertical scrollbar appears/disappears */
}

html { scrollbar-gutter: stable; }

/* === Accordion Component (Refactored, no animations) === */
.accordion { max-width:420px; margin:26px auto 0 auto; }
.accordion:first-of-type { margin-top:32px; }
.accordion-header { margin:0; }
/* Separate font-size variables */
:root { 
    --action-font-size: 1.1em;          /* upload / primary action buttons */
    --accordion-font-size: 1.0em;       /* slightly smaller than primary actions */
}

.accordion-trigger {
    width:100%;
    background:#f3e6fa;
    color:#6c3483;
    border:1px solid #f3e6fa;
    border-radius:8px;
    padding:12px 14px;
    font-size:var(--accordion-font-size); /* smaller than upload button */
    cursor:pointer;
    box-shadow:0 1px 4px #0001;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    box-sizing:border-box;
    font-family:inherit;
    text-align:center;
}
.accordion-trigger:hover { background:#ead9f5; }
.accordion-trigger:active { background:#e1cdef; }
.accordion-trigger:focus-visible { outline:2px solid #6c3483; outline-offset:2px; }
.accordion-title { pointer-events:none; }
.accordion-icon { width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:12px solid #6c3483; position:absolute; right:14px; top:50%; transform:translateY(-50%); }
.accordion-trigger[aria-expanded="true"] .accordion-icon { transform:translateY(-50%) rotate(180deg); }
.accordion-panel { background:#fff; border:1px solid #f3e6fa; border-top:none; border-radius:0 0 8px 8px; padding:16px 16px 18px 16px; font-size:0.9em; box-shadow:0 2px 8px #0001; color:#555; box-sizing:border-box; }
.accordion-panel[hidden] { display:none; }

/* Utility: full width inside forms */
.upload-form .accordion { width:100%; }


/* Cookie banner */
.cookie-banner { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); max-width: 860px; width: calc(100% - 24px); background:#ffffff; border:1px solid #e2d7f3; box-shadow:0 6px 18px -2px #4a235a33, 0 2px 6px #4a235a1a; border-radius:14px; z-index:1000; font-size:0.95em; line-height:1.4; }
.cookie-banner .cookie-inner { display:flex; flex-direction:column; gap:14px; padding:18px 20px 18px 20px; }
@media (min-width:720px){ .cookie-banner .cookie-inner { flex-direction:row; align-items:center; } }
.cookie-banner .cookie-text { flex:1; color:#4a235a; }
.cookie-banner a { color:#6c3483; text-decoration:underline; }
.cookie-actions { display:flex; gap:10px; justify-content:flex-end; }
.cookie-actions .btn { font:inherit; cursor:pointer; padding:9px 18px; border-radius:8px; border:1px solid transparent; transition:background .18s, color .18s; }
.cookie-actions .btn-primary { background:#6c3483; color:#fff; }
.cookie-actions .btn-primary:hover { background:#5e2d75; }
.cookie-actions .btn-secondary { background:#ede7f6; color:#4a235a; border-color:#d1c4e9; }
.cookie-actions .btn-secondary:hover { background:#e1d5f2; }
.cookie-inline-link { font:inherit; color:#6c3483; background:none; border:none; cursor:pointer; text-decoration:underline; padding:0; }
.cookie-inline-link:focus-visible, .cookie-actions .btn:focus-visible { outline:2px solid #6c3483; outline-offset:2px; }
.cookie-banner[aria-hidden="true"] { display:none !important; }
.reopen-cookie { position:fixed; bottom:12px; right:12px; background:#6c3483; color:#fff; border:none; padding:8px 14px; border-radius:30px; font-size:0.85em; cursor:pointer; box-shadow:0 2px 8px #0002; }
.reopen-cookie:hover { background:#5e2d75; }
.container { 
    --card-pad: 32px; /* used by tabs for left alignment */
    max-width: 420px; 
    margin: 48px auto 0 auto; 
    background: #fff; 
    border-radius: 0 12px 12px 12px; 
    box-shadow: 0 2px 12px #0001; 
    padding: 32px var(--card-pad) 24px var(--card-pad); 
    text-align: center; /* Center all text in container */
    position: relative; /* anchor for tabs */
}
/* Top tabs (BerryShare / BerryMage) — classic sheet tabs style */
.top-tabs {
    /* fixed strip height to compute exact baseline alignment */
    --tab-strip-height: 34px;
    display:flex;
    justify-content:flex-start; /* internal layout of tabs */
    align-items:flex-end;
    gap:4px;
    border-bottom:none; /* remove strip bottom line */
    padding-left:0; /* flush with card left edge */
    padding-right:0;
    height: var(--tab-strip-height);
    /* Move the strip so its bottom edge sits exactly on card top border and align to left edge */
    margin: calc(-1 * (var(--card-pad) + var(--tab-strip-height))) 0 8px calc(-1 * var(--card-pad));
}
.top-tabs .tab {
    display:inline-block;
    padding:6px 12px;
    border:1px solid #d8cdea;
    border-bottom:none;
    border-radius:8px 8px 0 0;
    text-decoration:none;
    background:#f6f3fb;
    color:#4a235a;
    font-weight:600;
    font-size:0.95em;
    position:relative;
    top:0; /* align exactly with strip line */
}
.top-tabs .tab:hover { background:#efe9f9; }
.top-tabs .tab.active {
    background:#fff;
    color:#2d1650;
    border:none; /* remove border from active tab */
    /* shadow handled by clipped pseudo-element to avoid bottom bleed */
    box-shadow: none;
    z-index: 1;
}
/* Create top/side-only shadow by clipping a shadow-casting pseudo-element */
.top-tabs .tab.active::before {
    content: "";
    position: absolute;
    inset: 0; /* cover the tab */
    border-radius: 8px 8px 0 0;
    pointer-events: none;
    /* cast shadows */
    box-shadow:
        0 -1px 6px #0001,  /* top, half */
        1px 0 6px #0001,   /* right side, half */
        -1px 0 6px #0001;  /* left side, half */
    /* clip out any shadow area below the bottom edge */
    clip-path: inset(-14px -14px 0 -14px round 8px 8px 0 0);
}
.top-tabs .tab:focus-visible { outline:2px solid #6c3483; outline-offset:2px; }

h1 { margin-bottom: 0; color: #4a235a; font-size: 2.2em; letter-spacing: 1px; }
.subtitle { color: #888; margin-bottom: 18px; font-size: 1.1em; }
.desc { color: #555; margin-bottom: 28px; font-size: 1em; }
.success, .error { margin: 12px 0 18px 0; padding: 14px 12px; border-radius: 8px; font-size: 1.08em; text-align: center; }
.success { background: #e8f5e9; color: #388e3c; border: 1px solid #c8e6c9; }
.error { background: #ffebee; color: #b71c1c; border: 1px solid #ffcdd2; }
.download-link-wrap { 
    margin-top: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    word-break: break-all;
    flex-wrap: wrap;
}
.copy-btn { 
    background: #ede7f6; 
    color: #6c3483; 
    border: none; 
    border-radius: 6px; 
    padding: 6px 16px; 
    cursor: pointer; 
    font-size: 1em; 
    margin-left: 4px;
    transition: background 0.2s; 
}
.copy-btn:active { background: #d1c4e9; }
.upload-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.upload-label { 
    display: block;
    background: #f3e6fa; 
    color: #6c3483; 
    border-radius: 8px; 
    padding: 18px 0; 
    text-align: center; 
    font-size: 1.08em; 
    cursor: pointer; 
    margin-bottom: 8px;
    transition: background 0.2s;
    border: 2px dashed #e1bee7;
    user-select: none;
}
.upload-label.dragover { 
    background: #e1bee7; 
    color: #4a235a; 
    border-color: #ab47bc; 
}
input[type="file"] { display: none; }
button[type="submit"] { 
    background: #7e57c2; 
    color: #fff; 
    border: none; 
    border-radius: 6px; 
    padding: 12px 0; 
    font-size: var(--action-font-size); /* match accordion */
    cursor: pointer; 
    transition: background 0.2s; 
    width: 100%; 
}
button[type="submit"]:hover { background: #5e35b1; }
.faq-container {
    max-width: 420px;
    margin: 32px auto 0 auto;
}
.register-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
}
.register-input {
    width: 100%;
    max-width: 260px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1em;
    margin-bottom: 0;
    box-sizing: border-box;
}
.register-btn {
    width: 100%;
    max-width: 260px;
    background: #7e57c2;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 0;
    font-size: 1em;
    cursor: pointer;
    margin-top: 6px;
    transition: background 0.2s;
}
.register-btn:active {
    background: #5e35b1;
}
.register-back {
    margin-top: 18px;
    text-align: center;
}
.register-back a {
    color: #6c3483;
    text-decoration: underline;
    font-size: 1em;
}
#register-heading {
    text-align: center;
    margin-bottom: 0.2em;
}
#register-subtitle {
    text-align: center;
    color: #888;
    margin-bottom: 18px;
    font-size: 1.08em;
}
@media (max-width: 600px) {
    .container, .faq-container {
        max-width: 98vw;
        margin: 12px auto 0 auto;
        box-sizing: border-box;
    }
    .container { --card-pad: 4vw; padding: 16px var(--card-pad) 16px var(--card-pad); }
    .upload-label {
        font-size: 1em;
        padding: 14px 0;
    }
    .faq-container {
        padding: 0 2vw;
    }
    .desc, .subtitle, #max-size-label, #size-error, #progress-text {
        font-size: 1em !important;
    }
    .download-link-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .success, .error {
        font-size: 1em;
        padding: 10px 6px;
    }
}
@media (max-width: 400px) {
    .container { --card-pad: 2vw; padding: 8px var(--card-pad) 8px var(--card-pad); }
    .upload-label {
        font-size: 0.97em;
        padding: 10px 0;
    }
}