/* Shared by /profile/ and /profile/db/. */
* { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            background: #0a0a0f;
            /* Horizontally centred, but starting at the top: the page has to
               sit where the players list sits, and a card that is vertically
               centred jumps as soon as its content grows. */
            display: flex; justify-content: center; align-items: flex-start;
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 16px;
            line-height: 1.5;
            color: #fff;
            padding: 20px;
        }

        /* Form controls do not inherit font-family or font-size on their own -
           they fall back to the browser's own, which is what made the inputs
           and buttons look different from everything around them. */
        input, button, textarea, select {
            font-family: inherit;
            font-size: inherit;
            line-height: inherit;
        }

        .profile-container {
            background: linear-gradient(135deg, #1a2a4a 0%, #0a1a2e 100%);
            border: 2px solid #4a6a9f;
            border-radius: 12px;
            padding: 36px 40px;
            box-shadow: 0 0 30px rgba(74, 106, 159, 0.4);
            width: 100%;
            /* The same width as the players list, so switching tab changes the
               content and nothing else. */
            max-width: 1200px;
        }

        .back-link {
            display: inline-block; margin-bottom: 14px;
            color: #6a9aff; text-decoration: none; font-size: 15px;
        }
        .back-link:hover { text-decoration: underline; }

        .profile-title {
            font-size: 28px; font-weight: bold;
            /* Left, like the heading of the players list - centred over a card
               this wide it would stand nowhere near the tabs below it. */
            margin-bottom: 26px; text-align: left;
        }

        .form-group { margin-bottom: 16px; text-align: left; }

        label {
            display: block; font-size: 16px; color: #a8b6c8;
            margin-bottom: 6px;
        }

        /* Only the fields of a form, never every input on the page. As a bare
           "input" rule this also hit the checkbox of the players filter, whose
           width: 100% then pushed the label text into three lines.
           The card is wide, a form field is not: a password stretched across
           the whole card is harder to use, not easier. */
        .form-group input[type="text"],
        .form-group input[type="email"],
        .form-group input[type="password"] {
            width: 100%; max-width: 420px; padding: 12px 15px;
            background: #0a0a0f; border: 1px solid #3a4a6a;
            border-radius: 8px; color: #fff;
        }
        .message-slot { max-width: 420px; }
        input:focus { outline: 2px solid #6a9aff; outline-offset: 1px; }

        /* A value reads as text, not as a disabled input - it is not a form
           field until somebody decides to change it. */
        .field-view {
            display: flex; align-items: center; gap: 8px;
            padding: 8px 0; min-height: 42px;
        }
        .field-value { color: #fff; word-break: break-all; }

        /* The pencil stays out of the way until the row is hovered or reached
           by keyboard. :focus-within matters - an icon that only appears on
           hover is invisible to anyone tabbing through. */
        .edit-icon {
            background: none; border: none; padding: 4px; cursor: pointer;
            color: #6a9aff; line-height: 0; border-radius: 6px;
            opacity: 0; transition: opacity .12s;
        }
        .form-group:hover .edit-icon,
        .form-group:focus-within .edit-icon { opacity: 1; }
        .edit-icon:focus-visible { opacity: 1; outline: 2px solid #6a9aff; outline-offset: 2px; }

        .edit-actions {
            display: flex; align-items: center; gap: 14px; margin-top: 10px;
        }
        .btn-small { padding: 8px 16px; }
        .muted { color: #8a9ab0; }

        .field-info { font-size: 15px; color: #a8b6c8; margin-top: 8px; }

        /* A button is as wide as its label plus its padding, never wider. One
           stretched across the card reads as a banner, not as something to
           click, and it stops being obvious where the click has to go. */
        .btn {
            display: inline-block; padding: 12px 20px;
            font-weight: 600; border: none; border-radius: 8px;
            cursor: pointer; text-decoration: none; text-align: center;
        }
        .btn-primary { background: #4a6aff; color: #fff; }
        .btn-primary:hover { background: #3a5aef; }
        .btn-secondary { background: #2a3a5a; color: #cfd8e6; }

        .link { color: #6a9aff; text-decoration: none; }
        /* Klassen statt style="…": ein Attribut im Markup laesst sich unter
           einer CSP nicht mit einer Nonce versehen, es braeuchte
           'unsafe-inline' fuer die ganze Seite. */
        .link-danger { color: #f87171; }
        .btn-spaced { margin-bottom: 12px; }
        .link:hover { text-decoration: underline; }

        /* What the tab bar is for everybody who has only the one page. Same
           place, same spacing, without pretending there is somewhere else to
           go. */
        .section-heading {
            margin: 0 0 24px; text-align: left;
            font-size: 1.05rem; font-weight: 600; color: #fff;
        }

        /* Tabs. Purely presentational - what somebody is allowed to do is
           decided on the server; this only switches which page is shown.
           They are anchors, so text-decoration has to be turned off explicitly:
           without it every tab carries the browser's link underline. */
        .tabs {
            display: flex; gap: 4px; margin-bottom: 24px;
            border-bottom: 1px solid #3a4a6a;
            /* Fixed, and the same on all three pages, so a tab does not change
               width when it is clicked. */
            max-width: 520px;
        }
        .tab {
            flex: 1; padding: 11px 12px; text-align: center;
            color: #a8b6c8; font-weight: 600; font-size: inherit;
            text-decoration: none; cursor: pointer;
            background: #101a2e;
            border: 1px solid #2a3a5a;
            border-bottom: none;
            border-radius: 8px 8px 0 0;
            /* Sits on the line rather than above it, so the active tab can
               open into the panel below. */
            margin-bottom: -1px;
        }
        .tab:hover { color: #cfd8e6; background: #16233c; text-decoration: none; }
        .tab.active {
            color: #fff; background: #1e2f52;
            border-color: #4a6a9f;
            /* The gap in the line under the active tab is what makes it read
               as a tab rather than a button. */
            border-bottom: 1px solid #1e2f52;
        }
        .tab:focus-visible { outline: 2px solid #6a9aff; outline-offset: -2px; }

        /* Both forms share one grid cell, so the taller of the two sets the
           height and the card does not jump when switching tabs. display:none
           would be the obvious way to hide the inactive one, and is exactly
           what makes it jump. */
        .panes { display: grid; }
        .panes > .pane { grid-area: 1 / 1; }
        .panes > .pane.hidden {
            display: block;
            visibility: hidden;
            pointer-events: none;
        }

        /* Under the fields, aligned with them. Centred it would sit in the
           middle of a card that is far wider than the form. */
        .pane-foot { margin-top: 14px; text-align: left; }

        .migration { display: flex; gap: 8px; align-items: baseline;
                     padding: 4px 0; font-size: 15px; }
        .migration .state { flex: none; width: 18px; }
        .migration.pending .state { color: #ffb86b; }
        .migration.applied .state { color: #6ee7a8; }
        /* No break-all here: a file name broken mid-word ("…name_history.sq /
           l") is harder to read than one that overflows. The container is wide
           enough for them. */
        .migration .file { color: #cfd8e6; }
        .migration.pending .file { color: #fff; font-weight: 600; }

        /* The message keeps its space whether or not anything is in it, so the
           card does not grow when one appears. Same reason the inactive pane is
           only made invisible: a box that appears out of nothing pushes
           everything below it down. */
        .message-slot { margin-top: 16px; height: 92px; }
        .message {
            height: 100%; padding: 12px 14px;
            border-radius: 8px; overflow: auto;
        }
        .message.hidden { display: block; visibility: hidden; }
        .message.error   { background: #3a1a1a; border: 1px solid #7a3a3a; color: #ffb0b0; }
        .message.success { background: #1a3a2a; border: 1px solid #3a7a5a; color: #b0ffcf; }

        .hidden { display: none; }

/* The real file input never shows: a label styled as a button sits on top of
   it. The browser's own widget cannot be styled and looks foreign in here. */
input[type=file] { display: none; }