.account-page{
    --kp-card: rgba(255,255,255,.94);
    --kp-text: #1f1f1f;
    --kp-muted: #6c6a66;
    --kp-line: rgba(0,0,0,.08);
    --kp-soft: #f5f3ef;
    --kp-radius: 24px;
    --kp-shadow: 0 12px 35px rgba(0,0,0,.08);

    max-width:1180px;
    margin:0 auto;
    display:grid;
    gap:22px;
}

.account-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    padding:18px 6px 8px;
}

.account-header h1{
    margin:3px 0 6px;
    font-size:clamp(42px,6vw,68px);
    line-height:1;
    letter-spacing:-.045em;
}

.account-header p{
    margin:0;
    color:var(--kp-muted);
}

.account-kicker,
.account-section-kicker{
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:12px;
    font-weight:800;
    color:#88847e;
}

.account-logout{
    color:#555;
    text-decoration:none;
    font-weight:700;
}

.account-logout:hover{
    text-decoration:underline;
}


/* Horní přehled */

.account-summary{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
}

.account-summary-card{
    background:var(--kp-card);
    border-radius:var(--kp-radius);
    box-shadow:var(--kp-shadow);
    padding:28px;
    min-height:150px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.account-summary-label{
    color:var(--kp-muted);
    font-weight:700;
    margin-bottom:8px;
}

.account-summary-card strong{
    font-size:38px;
    line-height:1;
    letter-spacing:-.04em;
}

.account-summary-card small{
    margin-top:10px;
    color:var(--kp-muted);
    line-height:1.4;
}


/* Sekce */

.account-section{
    background:var(--kp-card);
    border-radius:var(--kp-radius);
    box-shadow:var(--kp-shadow);
    padding:32px;
}

.account-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px;
}

.account-section-head h2{
    margin:4px 0 0;
    font-size:29px;
    letter-spacing:-.025em;
}

.account-columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}


/* Knihy */

.account-books{
    display:grid;
    gap:12px;
}

.account-book{
    background:var(--kp-soft);
    border-radius:18px;
    padding:20px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.account-book-meta{
    color:var(--kp-muted);
    font-size:14px;
    margin-bottom:5px;
}

.account-book h3{
    margin:0;
    font-size:22px;
    letter-spacing:-.02em;
}


/* Peněženka */

.account-money-row{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:13px 0;
    border-bottom:1px solid var(--kp-line);
}

.account-money-row span{
    color:var(--kp-muted);
}

.account-money-row strong{
    font-size:18px;
}

.account-money-total{
    margin-top:5px;
    border-bottom:0;
}

.account-money-total span,
.account-money-total strong{
    color:var(--kp-text);
    font-weight:800;
}

.account-money-total strong{
    font-size:24px;
}

.account-actions{
    margin-top:20px;
}


/* Affiliate */

.account-affiliate-code{
    display:inline-block;
    padding:10px 14px;
    border-radius:12px;
    background:var(--kp-soft);
    font-family:monospace;
    font-size:17px;
    font-weight:700;
    letter-spacing:.03em;
}

.account-muted{
    margin:22px 0 7px;
    color:var(--kp-muted);
    font-size:14px;
}

.account-copy-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
}

.account-copy-row input{
    min-width:0;
    border:1px solid rgba(0,0,0,.12);
    border-radius:14px;
    background:#fff;
}

.account-affiliate-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:22px;
}

.account-affiliate-stats > div{
    background:var(--kp-soft);
    border-radius:16px;
    padding:18px;
}

.account-affiliate-stats strong{
    display:block;
    font-size:22px;
    margin-bottom:4px;
}

.account-affiliate-stats span{
    color:var(--kp-muted);
    font-size:13px;
}


/* Ledger */

.account-ledger{
    display:grid;
}

.account-ledger-row{
    display:grid;
    grid-template-columns:120px 1fr auto;
    gap:20px;
    align-items:center;
    padding:15px 0;
    border-top:1px solid var(--kp-line);
}

.account-ledger-row:first-child{
    border-top:0;
}

.account-ledger-date{
    color:#555;
    font-size:14px;
}

.account-ledger-date small{
    display:block;
    color:#999;
    margin-top:2px;
}

.account-ledger-main strong{
    display:block;
    font-size:15px;
}

.account-ledger-main span{
    display:block;
    color:var(--kp-muted);
    font-size:13px;
    margin-top:3px;
}

.account-ledger-amount{
    font-weight:800;
    white-space:nowrap;
    font-size:16px;
}

.account-ledger-amount.is-positive{
    color:#246b42;
}

.account-ledger-amount.is-negative{
    color:#8a3b35;
}

.account-empty{
    color:var(--kp-muted);
}


/* Responsive */

@media(max-width:800px){

    .account-summary{
        grid-template-columns:1fr;
    }

    .account-columns{
        grid-template-columns:1fr;
    }

    .account-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .account-book{
        align-items:flex-start;
        flex-direction:column;
    }

    .account-ledger-row{
        grid-template-columns:90px 1fr;
    }

    .account-ledger-amount{
        grid-column:2;
    }
}

@media(max-width:520px){

    .account-section,
    .account-summary-card{
        padding:22px;
    }

    .account-copy-row{
        grid-template-columns:1fr;
    }

    .account-affiliate-stats{
        grid-template-columns:1fr;
    }

    .account-header h1{
        font-size:42px;
    }
}

.account-header-actions{
    display:flex;
    gap:18px;
    align-items:center;
}

.account-header-actions a{
    color:#555;
    text-decoration:none;
    font-weight:700;
}

.account-header-actions a:hover{
    text-decoration:underline;
}

.account-back{
    display:inline-block;
    margin-bottom:20px;
    color:#555;
    text-decoration:none;
    font-weight:700;
}

.account-back:hover{
    text-decoration:underline;
}

.account-auth-switch{
    margin-top:20px;
    color:var(--kp-muted);
}

.account-auth-switch a{
    color:var(--kp-text);
    font-weight:700;
    text-decoration:none;
}

.account-auth-switch a:hover{
    text-decoration:underline;
}


/* --------------------------------------------------
   Account buttons
   -------------------------------------------------- */

.account-page .kp-btn,
.account-page .account-actions a,
.account-page .account-copy-row button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 18px;
    border-radius:999px;
    text-decoration:none;
    font-weight:800;
    font-size:14px;
    line-height:1.2;
    cursor:pointer;
    border:1px solid rgba(0,0,0,.10);
}

.account-page .kp-btn-primary,
.account-page .account-actions a {
    background:#111;
    color:#fff;
}

.account-page .kp-btn-secondary {
    background:#fff;
    color:#111;
}

.account-page .account-copy-row button {
    background:#fff;
    color:#111;
}

.account-page .kp-btn:hover,
.account-page .account-actions a:hover,
.account-page .account-copy-row button:hover {
    text-decoration:none;
    opacity:.88;
}


/* Akce u knihy */

.account-book-actions {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}


.account-publishing-authors {
    display: grid;
    gap: 1.4rem;
}

.account-publishing-author {
    display: grid;
    gap: .9rem;
}

.account-publishing-author-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.account-publishing-author-name {
    display: grid;
    gap: .12rem;
}

.account-publishing-author-name strong {
    font-size: 1.15rem;
}

.account-publishing-books {
    display: grid;
    gap: .75rem;
}

.account-publishing-book {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;

    padding: .85rem;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 1rem;
    background: rgba(0, 0, 0, .025);
}

.account-publishing-cover {
    width: 82px;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: .55rem;
    border: 1px solid rgba(0, 0, 0, .08);
    background: rgba(0, 0, 0, .045);
}

.account-publishing-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-publishing-cover-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: .4rem;
    text-align: center;
    font-size: .72rem;
    color: #888;
}

.account-publishing-book-main {
    min-width: 0;
}

.account-publishing-book-title {
    margin: 0 0 .35rem;
    font-size: 1.15rem;
    line-height: 1.2;
}

.account-publishing-book-statuses,
.account-publishing-book-meta,
.account-publishing-book-prices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .65rem;
}

.account-publishing-book-meta,
.account-publishing-book-prices {
    margin-top: .45rem;
    color: #666;
    font-size: .88rem;
}

.account-publishing-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    padding: .13rem .52rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1;
}

.account-publishing-pill-status {
    background: #f3f4f6;
    border-color: #dde0e4;
    color: #5f646c;
}

.account-publishing-pill-active {
    background: #edf8f0;
    border-color: #c6e4ce;
    color: #2f6d40;
}

.account-publishing-pill-inactive {
    background: #f1f2f4;
    border-color: #dde0e4;
    color: #777c84;
}

.account-publishing-book-actions {
    display: flex;
    justify-content: flex-end;
}

.account-publishing-empty {
    padding: 1rem;
    border: 1px dashed rgba(0, 0, 0, .14);
    border-radius: .8rem;
    color: #777;
}

@media (max-width: 760px) {
    .account-publishing-book {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .account-publishing-cover {
        width: 68px;
    }

    .account-publishing-book-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .account-publishing-author-head {
        align-items: flex-start;
    }
}


/* =========================================================
   Account home tabs + adaptive overview
   ========================================================= */

.account-home {
    gap: 1.15rem;
}

.account-tabs {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--kp-line);
}

.account-tab {
    appearance: none;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    padding: .8rem .95rem;
    color: inherit;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.account-tab.is-active {
    border-bottom-color: currentColor;
}

.account-tab-panel[hidden] {
    display: none !important;
}

.account-tab-panel {
    display: grid;
    gap: 1rem;
}

.account-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
}

.account-overview-card {
    display: flex;
    flex-direction: column;
    min-height: 138px;
    padding: 1.15rem;
    border: 1px solid var(--kp-line);
    border-radius: 18px;
    background: var(--kp-card);
}

.account-overview-card > strong {
    margin-top: .35rem;
    font-size: 2rem;
    line-height: 1.05;
}

.account-overview-card > span {
    margin-top: .3rem;
    color: var(--kp-muted);
    font-size: .85rem;
}

.account-inline-link {
    align-self: flex-start;
    margin-top: auto;
    padding: .6rem 0 0;
    border: 0;
    background: transparent;
    color: var(--kp-text);
    font: inherit;
    font-size: .82rem;
    font-weight: 800;
    cursor: pointer;
}

.account-overview-book {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.account-overview-cover {
    width: 86px;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border: 1px solid var(--kp-line);
    border-radius: .6rem;
    background: var(--kp-soft);
}

.account-overview-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-overview-book-meta {
    margin-top: .35rem;
    color: var(--kp-muted);
    font-size: .9rem;
}

.account-overview-updated {
    margin-top: .55rem;
}

.account-continue-list {
    display: grid;
    gap: .65rem;
}

.account-continue-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
    border: 1px solid var(--kp-line);
    border-radius: 16px;
    background: var(--kp-soft);
}

.account-continue-row h3 {
    margin: .1rem 0;
    font-size: 1.05rem;
}

.account-author-profiles {
    display: grid;
    gap: .75rem;
}

.account-author-profile {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--kp-line);
    border-radius: 18px;
    background: var(--kp-soft);
}

.account-author-avatar {
    width: 92px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(0, 0, 0, .05);
}

.account-author-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-author-avatar-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 2rem;
    font-weight: 800;
    opacity: .35;
}

.account-author-profile h3 {
    margin: .2rem 0 .4rem;
    font-size: 1.35rem;
}

.account-author-bio {
    white-space: pre-line;
}

.account-author-profile-meta {
    margin-top: .65rem;
    color: var(--kp-muted);
    font-size: .82rem;
}

.account-author-note {
    margin-top: 1rem;
    padding: .9rem 1rem;
    border: 1px dashed rgba(0, 0, 0, .15);
    border-radius: 14px;
    color: var(--kp-muted);
    font-size: .88rem;
}

.account-profile-grid {
    display: grid;
    max-width: 680px;
}

.account-profile-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--kp-line);
}

.account-profile-row span {
    color: var(--kp-muted);
}

@media (max-width: 900px) {
    .account-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .account-continue-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .account-overview-grid {
        grid-template-columns: 1fr;
    }

    .account-author-profile {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    .account-author-avatar {
        width: 70px;
    }

    .account-profile-row {
        grid-template-columns: 1fr;
        gap: .25rem;
    }
}


/* Account home v2 ------------------------------------------------------ */

.account-overview-grid-fixed {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.account-overview-card-cta {
    font-size: 1.35rem !important;
    line-height: 1.1 !important;
    letter-spacing: -.02em !important;
}

.account-inline-link {
    text-decoration: none;
}

.account-overview-section-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.account-notice-error {
    border-color: rgba(150, 40, 30, .2);
    background: rgba(255, 240, 239, .92);
}

.account-author-edit {
    margin: 0;
}

.account-author-edit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .75fr);
    gap: 1.2rem;
    align-items: start;
}

.account-author-edit-main,
.account-author-edit-media {
    display: grid;
    gap: 1rem;
}

.account-author-edit-media .kp-media-card {
    padding: 1rem;
    border: 1px solid var(--kp-line);
    border-radius: 18px;
    background: var(--kp-soft);
}

.account-author-photo-preview {
    width: 180px;
    aspect-ratio: 1;
    overflow: hidden;
    margin: .8rem 0;
    border: 1px solid var(--kp-line);
    border-radius: 50%;
    background: #fff;
}

.account-author-background-preview {
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    margin: .8rem 0;
    border: 1px solid var(--kp-line);
    border-radius: 14px;
    background: #fff;
}

.account-author-photo-preview img,
.account-author-background-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-author-photo-preview .kp-media-placeholder,
.account-author-background-preview .kp-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 1rem;
    text-align: center;
}

.account-affiliate-copy {
    max-width: 760px;
}

.account-affiliate-copy p {
    margin: 0 0 1rem;
    line-height: 1.65;
}

@media (max-width: 900px) {
    .account-overview-grid-fixed {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-author-edit-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .account-overview-grid-fixed {
        grid-template-columns: 1fr;
    }

    .account-overview-grid-fixed .account-overview-card:nth-child(3),
    .account-overview-grid-fixed .account-overview-card:nth-child(4) {
        display: none;
    }

    .account-author-photo-preview {
        width: 130px;
    }
}


/* Affiliate v2 --------------------------------------------------------- */

.account-overview-affiliate-url {
    overflow: hidden;
    font-size: .92rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-inline-link-secondary {
    margin-left: .7rem;
    opacity: .75;
}

.account-affiliate-primary-grid {
    display: grid;
    grid-template-columns: minmax(180px, .35fr) minmax(0, 1fr);
    gap: 1.2rem;
    align-items: end;
    margin-bottom: 1.2rem;
}

.account-affiliate-label {
    margin-bottom: .35rem;
    color: var(--kp-muted);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.account-affiliate-coupons {
    display: grid;
    gap: 1rem;
}

.account-affiliate-coupon {
    padding: 1rem 1.1rem;
    border: 1px solid var(--kp-line);
    border-radius: 18px;
    background: var(--kp-soft);
}

.account-affiliate-coupon-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.account-affiliate-coupon-code {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.account-affiliate-coupon-benefit {
    margin-top: .9rem;
    font-size: 1.15rem;
    font-weight: 800;
}

.account-affiliate-coupon-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem 1rem;
    margin-top: .4rem;
    color: var(--kp-muted);
    font-size: .9rem;
}

.account-affiliate-coupon-usage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    margin-top: 1rem;
}

.account-affiliate-coupon-usage > div {
    padding: .8rem;
    border: 1px solid var(--kp-line);
    border-radius: 14px;
    background: #fff;
}

.account-affiliate-coupon-usage strong,
.account-affiliate-coupon-usage span {
    display: block;
}

.account-affiliate-coupon-usage strong {
    font-size: 1.05rem;
}

.account-affiliate-coupon-usage span {
    margin-top: .15rem;
    color: var(--kp-muted);
    font-size: .82rem;
}

.account-affiliate-request-state {
    padding: 1rem 1.1rem;
    border: 1px solid var(--kp-line);
    border-radius: 16px;
    background: var(--kp-soft);
}

.account-affiliate-request-state p {
    margin: .55rem 0;
}

.account-affiliate-request-form {
    max-width: 760px;
}

@media (max-width: 700px) {
    .account-affiliate-primary-grid {
        grid-template-columns: 1fr;
    }

    .account-affiliate-coupon-head {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* Library covers ------------------------------------------------------- */

.account-book-with-cover {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) auto;
    align-items: center;
}

.account-library-cover {
    width: 86px;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border: 1px solid var(--kp-line);
    border-radius: 12px;
    background: rgba(0, 0, 0, .035);
}

.account-library-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-library-cover-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: .5rem;
    color: var(--kp-muted);
    font-size: .76rem;
    text-align: center;
}

.account-library-current-part {
    margin-top: .3rem;
    font-weight: 700;
}

.account-library-owned-parts {
    margin-top: .45rem;
    margin-bottom: 0;
}

@media (max-width: 720px) {
    .account-book-with-cover {
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 14px;
        align-items: start;
    }

    .account-library-cover {
        width: 68px;
    }

    .account-book-with-cover .account-book-actions {
        grid-column: 1 / -1;
    }
}

.account-field {
    margin-bottom: 18px;
}

.account-field label {
    display: block;
    margin-bottom: 7px;
    font-weight: 600;
}

.account-field input {
    width: 100%;
    box-sizing: border-box;
}

.account-form-error {
    margin: 18px 0;
    padding: 11px 13px;

    border-radius: 10px;

    background: #f7e5e2;
    color: #7a2922;

    font-weight: 600;
}

.account-form-actions {
    margin-top: 24px;
}

.account-honeypot {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;
}


/* =========================================================
   Auth pages
   ========================================================= */

.account-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 24px;

    color: #666;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 700;
}

.account-back:hover {
    color: #222;
    text-decoration: none;
}


.panel.narrow {
    width: min(100%, 520px);
    margin: 20px auto 60px;
    padding: clamp(28px, 5vw, 48px);

    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .08);
}

.panel.narrow h1 {
    margin: 0 0 10px;

    font-size: clamp(34px, 5vw, 48px);
    line-height: 1.05;
    letter-spacing: -.035em;
}

.panel.narrow > p {
    margin: 0 0 28px;

    color: #6c6a66;
    line-height: 1.6;
}


.account-field {
    margin-bottom: 20px;
}

.account-field label,
.panel.narrow form > label {
    display: block;

    margin-bottom: 8px;

    color: #333;
    font-size: .9rem;
    font-weight: 800;
}

.account-field input,
.panel.narrow form > input:not([type="hidden"]) {
    width: 100%;
    box-sizing: border-box;

    min-height: 48px;
    padding: 12px 14px;

    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 13px;

    background: #fff;
    color: #222;

    font: inherit;
    font-size: 1rem;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.account-field input:focus,
.panel.narrow form > input:not([type="hidden"]):focus {
    outline: none;
    border-color: rgba(0, 0, 0, .42);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .055);
}


.account-form-actions {
    margin: 28px 0 0;
}

.account-form-actions .button,
.panel.narrow .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 12px 22px;

    border: 0;
    border-radius: 999px;

    background: #111;
    color: #fff;

    font: inherit;
    font-weight: 800;

    cursor: pointer;
}

.account-form-actions .button:hover,
.panel.narrow .button:hover {
    opacity: .88;
}


.account-form-error {
    margin: 0 0 22px;
    padding: 12px 14px;

    border: 1px solid rgba(122, 41, 34, .12);
    border-radius: 12px;

    background: #f8ebe8;
    color: #7a2922;

    font-weight: 700;
    line-height: 1.45;
}


.account-auth-switch {
    margin: 28px 0 0;
    padding-top: 22px;

    border-top: 1px solid rgba(0, 0, 0, .08);

    color: #777;
}

.account-auth-switch a {
    color: #222;
    font-weight: 800;
    text-decoration: none;
}

.account-auth-switch a:hover {
    text-decoration: underline;
}


/* CAPTCHA má být viditelná, ale ne dominantní */

.account-field label[for="captcha"] {
    color: #777;
    font-weight: 600;
}

.account-field label[for="captcha"] strong {
    color: #222;
}


/* OTP */

#otp {
    text-align: center;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: .22em;
}


/* stav po odeslání e-mailu */

.auth-email-status {
    margin: 24px 0 28px;
    padding: 18px 20px;

    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 16px;

    background: #f5f3ef;
}

.auth-email-status strong {
    color: #222;
}


@media (max-width: 600px) {

    .panel.narrow {
        margin-top: 8px;
        padding: 24px 20px;
        border-radius: 20px;
    }

    .panel.narrow h1 {
        font-size: 36px;
    }

    .account-form-actions .button,
    .panel.narrow .button {
        width: 100%;
    }
}

.account-auth-alternative {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-top: 30px;
    padding-top: 22px;

    border-top: 1px solid rgba(0, 0, 0, .08);
}

.account-auth-alternative > span {
    color: #888;
    font-size: .86rem;
}

.account-email-login {
    appearance: none;

    padding: 0;

    border: 0;
    background: transparent;

    color: #333;

    font: inherit;
    font-size: .9rem;
    font-weight: 800;

    cursor: pointer;
}

.account-email-login:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {

    .account-auth-alternative {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

}

.account-password-form {
    max-width: 520px;
}

.account-password-form .account-field {
    margin-bottom: 18px;
}

.account-settings-divider {
    height: 1px;
    margin: 40px 0;
    background: var(--kp-line);
}


/* =========================================================
   Account settings
   ========================================================= */

.account-settings-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.account-settings-card {
    padding: 28px;
}

.account-settings-card .account-section-head {
    margin-bottom: 22px;
}

.account-settings-card .account-section-head h2 {
    font-size: 26px;
}

.account-settings-form {
    max-width: none;
}

.account-settings-card .account-field {
    margin-bottom: 16px;
}

.account-settings-card .account-field input {
    min-height: 44px;
}

.account-field-help {
    margin-top: 7px;

    color: var(--kp-muted);
    font-size: 13px;
    line-height: 1.4;
}

.account-settings-actions {
    margin-top: 22px;
}


@media (max-width: 800px) {

    .account-settings-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 520px) {

    .account-settings-card {
        padding: 22px;
    }

}