/*
 * IKnowICT brand overrides for the Roundcube Elastic skin.
 *
 * IMPORTANT: When Roundcube sees this file at skins/iknowict/styles/styles.css
 * it uses it as the skin's primary stylesheet and STOPS loading Elastic's
 * own styles.min.css. We have to pull Elastic's compiled CSS in ourselves
 * before our overrides, or the page renders unstyled.
 *
 * Tokens are aligned with the IKnowICT design handoff
 * (/tmp/iknowict-design/iknowict-login-page/project/Login.html) and the
 * panel's Filament theme — same navy / orange / paper everywhere.
 *
 * Elastic's hardcoded brand-blue (#37beff, ~50 occurrences) and dark
 * taskmenu (#2f3a3f) get overridden below.
 */

@import url("../../elastic/styles/styles.min.css");
@import url("../../elastic/styles/print.min.css") print;

:root {
    /* Navy palette (was --iki-primary #173240 — switched to handoff
       navy-800 for parity with the panel auth shell). */
    --iki-navy-900: #0f1e2a;
    --iki-navy-800: #162a3a;
    --iki-navy-700: #1d3447;
    --iki-navy-600: #264158;

    /* Legacy alias names — kept so the post-login overrides below
       (taskmenu, list selection, etc.) keep working without rewriting
       every selector. They all point at the new navy now. */
    --iki-primary:        var(--iki-navy-800);
    --iki-primary-deep:   var(--iki-navy-900);
    --iki-primary-lite:   var(--iki-navy-600);
    --iki-primary-soft:   #E8EDF0;

    /* Paper system + accent + neutrals — straight from the handoff. */
    --iki-ink:            #1a1a1a;
    --iki-paper:          #f6f4ef;
    --iki-paper-2:        #ede9df;
    --iki-line:           #dcd6c8;
    --iki-line-strong:    #c7c0ae;
    --iki-muted:          #6b6354;
    --iki-accent:         #e87a2c;
    --iki-accent-deep:    #cf6516;
    --iki-accent-lite:    #f59f5f;
    --iki-ok:             #3f9e74;
    --iki-display:        'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    --iki-mono:           'IBM Plex Mono', ui-monospace, monospace;
}

/* ────────────────────────────────────────────────────────────────────
 * POST-LOGIN — webmail UI overrides on top of Elastic.
 * Unchanged behavior; just sourced from the new token set.
 * ──────────────────────────────────────────────────────────────────── */

/* Taskmenu / left sidebar */
#layout-menu,
#rcmdraglayer,
#taskmenu .special-buttons {
    background-color: var(--iki-primary) !important;
}

/* IKnowICT mark (bars + orange square, transparent background) at the
   top-left of the taskmenu sidebar. */
#layout-menu::before {
    content: "";
    display: block;
    height: 56px;
    background: url("../images/mark.svg") center/45px 45px no-repeat;
    margin-bottom: 1px;
}
#layout-menu .popover-header,
#layout-menu .menu-logo,
#layout-menu > .header,
#layout-menu .skin-logo,
#layout-menu > img,
#layout-menu > a > img,
#taskmenu > .header img,
#taskmenu > img,
#taskmenu .skin-logo,
body .popover-header,
html .popover-header.popover-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

#taskmenu a,
#taskmenu a .inner,
#taskmenu .button,
#taskmenu .button .inner {
    color: rgba(232, 221, 200, 0.85) !important;
}
#taskmenu a.selected,
#taskmenu a.selected .inner,
#taskmenu a:hover,
#taskmenu a:hover .inner,
#taskmenu .button:hover,
#taskmenu .button:hover .inner {
    color: #ffffff !important;
}
#taskmenu a:hover,
#taskmenu a:focus,
#taskmenu .button:not(.selected):hover,
.menu a:hover,
.menu a:focus {
    background-color: rgba(255, 255, 255, 0.05) !important;
}
#layout-menu .popover-header {
    background-color: var(--iki-primary-deep) !important;
}
#taskmenu .button.selected,
#taskmenu .button:hover {
    background-color: var(--iki-primary-lite) !important;
}
#taskmenu .action-buttons a,
.action-buttons > a,
.action-buttons a.compose,
a.compose[data-fab="true"],
.floating-action-buttons a.button {
    background-color: var(--iki-accent) !important;
    border-color: var(--iki-accent) !important;
    color: #fff !important;
}
#taskmenu .action-buttons a:hover,
.action-buttons > a:hover,
.action-buttons a.compose:hover,
a.compose[data-fab="true"]:hover,
.floating-action-buttons a.button:hover {
    background-color: var(--iki-accent-deep) !important;
    border-color: var(--iki-accent-deep) !important;
}

/* Primary buttons */
.btn-primary,
.formbuttons .button.mainaction {
    background-color: var(--iki-primary) !important;
    border-color: var(--iki-primary) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus,
.formbuttons .button.mainaction:hover,
.formbuttons .button.mainaction:focus {
    background-color: var(--iki-primary-lite) !important;
    border-color: var(--iki-primary-lite) !important;
}

/* Form focus rings */
.form-control:focus,
.input-group-text input:focus,
.multi-input > .content.focused,
.recipient-input.focus,
.tagedit-list[tabindex="-1"] {
    border-color: var(--iki-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(22, 42, 58, 0.18) !important;
}

.custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--iki-primary) !important;
    border-color: var(--iki-primary) !important;
}

/* Selection / hover */
.popupmenu .listing li.selected,
.popupmenu .listing li > a:not(.disabled):hover,
.popover .menu li a:not(.disabled):hover,
.popover .menu .dropbutton a.dropdown:hover {
    background-color: var(--iki-primary-soft) !important;
    color: var(--iki-primary) !important;
}
.listing tr.selected > td,
.listing tr.selected td,
.listing li.selected,
.listing tr[aria-selected="true"] > td {
    background-color: var(--iki-primary-soft) !important;
    border-color: var(--iki-primary-soft) !important;
}

/* Compose button — Elastic puts it as .btn.btn-primary in the toolbar
   and .floating-action-buttons .button.compose elsewhere. Both should
   read as the brand-orange primary action. */
.btn.btn-primary.compose,
.button.compose,
.floating-action-buttons .button.compose,
a.button.compose {
    background-color: var(--iki-accent) !important;
    border-color: var(--iki-accent) !important;
    color: #fff !important;
}
.btn.btn-primary.compose:hover,
.button.compose:hover,
.floating-action-buttons .button.compose:hover {
    background-color: var(--iki-accent-deep) !important;
    border-color: var(--iki-accent-deep) !important;
}

/* Unread badges + quota — orange accent */
.folderlist li.mailbox .unreadcount,
.folderlist li.mailbox.recent > a > .unreadcount,
.quota-widget .value {
    background-color: var(--iki-accent) !important;
    color: #fff !important;
}

/* jQuery UI integration */
.ui-menu .ui-state-active,
.ui-slider .ui-slider-handle.ui-state-active,
.ui-datepicker .ui-datepicker-days-cell-over a,
.ui-datepicker .ui-datepicker-days-cell-over a.ui-state-default,
.ui-datepicker .ui-state-highlight,
.ui-datepicker.ui-widget-content .ui-state-highlight,
.ui-datepicker a.ui-state-active {
    background-color: var(--iki-primary) !important;
    border-color: var(--iki-primary) !important;
    color: #fff !important;
}

.ui.alert.alert-info,
#messagestack .alert-info.information {
    background-color: var(--iki-primary-soft) !important;
    border-color: var(--iki-primary) !important;
    color: var(--iki-primary) !important;
}
.ui.alert a:not(.btn) { color: var(--iki-primary) !important; }

a, a:visited { color: var(--iki-primary); }
a:hover { color: var(--iki-primary-deep); }

/* ===== Dark mode overrides ===== */
html.dark-mode .listing tr.selected > td,
html.dark-mode .listing tr.selected td,
html.dark-mode .listing li.selected,
html.dark-mode .listing tr[aria-selected="true"] > td {
    background-color: rgba(232, 122, 44, 0.16) !important;
    color: #f1ead8 !important;
    border-color: rgba(232, 122, 44, 0.32) !important;
}

html.dark-mode #messagecontframe,
html.dark-mode #messagebody,
html.dark-mode .messageheader,
html.dark-mode #message-content,
html.dark-mode .message-partheaders,
html.dark-mode .layout-content,
html.dark-mode #mailpreviewframe,
html.dark-mode iframe#messagecontframe {
    background-color: var(--iki-primary-deep) !important;
    color: #e8e1cf !important;
}

html.dark-mode .message-htmlpart,
html.dark-mode .rcmBody {
    background: transparent !important;
    color: #e8e1cf !important;
}
html.dark-mode .message-htmlpart *:not(a):not(img):not(picture):not(svg):not(canvas):not(video):not(iframe),
html.dark-mode .rcmBody *:not(a):not(img):not(picture):not(svg):not(canvas):not(video):not(iframe) {
    background-color: transparent !important;
    color: #e8e1cf !important;
}
html.dark-mode .message-htmlpart blockquote,
html.dark-mode .rcmBody blockquote {
    border-left: 3px solid rgba(232, 122, 44, 0.55) !important;
    padding-left: 12px;
}

html.dark-mode body { background-color: var(--iki-primary-deep); color: #e8e1cf; }

html.dark-mode a.headers-details,
html.dark-mode a[href="#headers"],
html.dark-mode .header-links a,
html.dark-mode .messageheader a,
html.dark-mode a.rcmContactAddress,
html.dark-mode .rcmaddr a,
html.dark-mode .messageheader a[href^="mailto:"],
html.dark-mode .header a[href^="mailto:"],
html.dark-mode .ml-2 a[href^="mailto:"],
html.dark-mode #message-header a[href^="mailto:"],
html.dark-mode .message-htmlpart a,
html.dark-mode .message-htmlpart a:visited,
html.dark-mode .rcmBody a,
html.dark-mode .rcmBody a:visited,
html.dark-mode #messagebody a,
html.dark-mode #messagebody a:visited {
    color: var(--iki-accent-lite) !important;
}
html.dark-mode a.headers-details:hover,
html.dark-mode a[href="#headers"]:hover,
html.dark-mode .header-links a:hover,
html.dark-mode .messageheader a:hover,
html.dark-mode a.rcmContactAddress:hover,
html.dark-mode .rcmaddr a:hover,
html.dark-mode .messageheader a[href^="mailto:"]:hover,
html.dark-mode .header a[href^="mailto:"]:hover,
html.dark-mode #message-header a[href^="mailto:"]:hover,
html.dark-mode .message-htmlpart a:hover,
html.dark-mode .rcmBody a:hover,
html.dark-mode #messagebody a:hover {
    color: var(--iki-accent) !important;
}

/* ────────────────────────────────────────────────────────────────────
 * LOGIN PAGE — replace Elastic's centered-card login with the handoff
 * split-screen design. Custom templates/login.html in this skin provides
 * the new HTML structure (#layout-content.iki-shell > .iki-brand + .iki-form-pane).
 * ──────────────────────────────────────────────────────────────────── */

/* Login state reset — kill every default Elastic margin/padding so the
   brand-top row lines up with the panel login on the same y-position
   (the user spotted the misalignment when switching between the two). */
html.task-login,
body.task-login {
    background: var(--iki-paper) !important;
    color: var(--iki-ink);
    font-family: var(--iki-display) !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100dvh;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;
}
body.task-login #layout {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh;
    display: block !important;
    overflow: visible !important;
}

/* ===== Grid shell =====
 * Elastic's `#layout-content { display: flex; flex-direction: column }`
 * has ID specificity, so we need an ID-level selector here too — otherwise
 * the grid never engages and the brand panel ends up stacked on top of
 * the form (vertical split instead of horizontal). Same goes for
 * background, height, and text-align (Elastic forces text-align: center
 * on task-login #layout-content). */
body.task-login #layout-content.iki-shell {
    min-height: 100dvh;
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    background: var(--iki-paper);
    text-align: left;
    width: 100%;
    flex: none;
}

/* ===== LEFT: brand panel ===== */
body.task-login .iki-brand {
    position: relative;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(232, 122, 44, .10), transparent 55%),
        radial-gradient(80% 60% at 0% 100%, rgba(255, 255, 255, .04), transparent 60%),
        linear-gradient(180deg, var(--iki-navy-800), var(--iki-navy-900));
    color: #e6ddc8;
    padding: 36px 44px 44px;
    display: flex; flex-direction: column;
    overflow: hidden;
    isolation: isolate;
}
body.task-login .iki-brand::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(120% 90% at 60% 50%, black 30%, transparent 80%);
            mask-image: radial-gradient(120% 90% at 60% 50%, black 30%, transparent 80%);
    z-index: 0;
    pointer-events: none;
}
body.task-login .iki-brand > * { position: relative; z-index: 1; }

body.task-login .iki-brand-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; height: 40px;
}
body.task-login .iki-logo { display: flex; align-items: center; text-decoration: none; }
body.task-login .iki-logo-word { display: block; height: 28px; width: auto; }
body.task-login .iki-crumb {
    font-family: var(--iki-mono); font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: #8e9aa6;
    display: flex; align-items: center; gap: 10px;
}
body.task-login .iki-crumb .iki-pip {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--iki-ok);
    box-shadow: 0 0 0 3px rgba(63, 158, 116, .18);
}

body.task-login .iki-brand-body {
    margin-top: clamp(200px, 32vh, 360px);
    display: grid; grid-template-columns: 1fr; gap: 28px;
}
body.task-login .iki-eyebrow {
    font-family: var(--iki-mono);
    font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
    color: rgba(232, 221, 200, .55);
}
body.task-login h1.iki-headline {
    font-family: var(--iki-display);
    font-weight: 500;
    font-size: clamp(34px, 4.2vw, 56px);
    line-height: 1.05;
    letter-spacing: -.02em;
    margin: 14px 0 0;
    color: #f1ead8;
    max-width: 14ch;
    text-wrap: balance;
}
body.task-login h1.iki-headline em {
    font-style: normal;
    color: var(--iki-accent);
    font-weight: 600;
}
body.task-login h1.iki-headline .iki-underbar {
    display: inline-block; vertical-align: .06em;
    width: .46em; height: .16em; background: var(--iki-accent);
    margin-left: .06em; transform: translateY(-.18em);
}
body.task-login .iki-lede {
    color: rgba(232, 221, 200, .72);
    font-size: 15.5px; line-height: 1.55;
    max-width: 44ch;
}
body.task-login .iki-brand-foot {
    margin-top: auto;
    padding-top: 36px;
    display: flex; align-items: center; gap: 14px;
    font-family: var(--iki-mono); font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(232, 221, 200, .45);
}
body.task-login .iki-brand-foot .iki-logo-word-small { height: 22px; width: auto; }

/* ===== RIGHT: form pane ===== */
body.task-login .iki-form-pane {
    display: flex; flex-direction: column;
    padding: 36px 6vw 36px;
    background: var(--iki-paper);
    position: relative;
}
body.task-login .iki-form-top {
    display: flex; justify-content: flex-end; align-items: center; gap: 14px;
    min-height: 40px;
    font-family: var(--iki-mono); font-size: 12px; letter-spacing: .08em;
    color: var(--iki-muted);
}
body.task-login .iki-form-top a {
    color: var(--iki-ink); text-decoration: none;
    border-bottom: 1px solid var(--iki-line-strong); padding-bottom: 1px;
}
body.task-login .iki-form-top a:hover { border-color: var(--iki-accent); color: var(--iki-accent-deep); }

body.task-login .iki-form-wrap { margin: auto 0; max-width: 420px; width: 100%; padding: 24px 0; }

body.task-login .iki-kicker {
    font-family: var(--iki-mono); font-size: 11px; letter-spacing: .22em;
    text-transform: uppercase; color: var(--iki-accent-deep);
    display: flex; align-items: center; gap: 10px;
}
body.task-login .iki-kicker::before { content: ""; width: 22px; height: 1px; background: var(--iki-accent); }

body.task-login h2.iki-title {
    font-family: var(--iki-display); font-weight: 500;
    font-size: clamp(28px, 3vw, 36px); line-height: 1.1; letter-spacing: -.015em;
    margin: 14px 0 8px; color: var(--iki-ink);
}
body.task-login .iki-sub { color: var(--iki-muted); font-size: 15px; line-height: 1.55; margin: 0 0 28px; }

body.task-login .iki-form,
body.task-login .iki-form * { box-sizing: border-box; }
body.task-login .iki-field label,
body.task-login .iki-field input,
body.task-login .iki-check span,
body.task-login .iki-btn {
    margin: 0;
    line-height: 1.5;
}
body.task-login .iki-form,
body.task-login #login-form.iki-form {
    display: grid;
    gap: 14px;
    top: auto;
    position: static;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}
body.task-login .iki-field { display: grid; gap: 6px; }

body.task-login .iki-form input[type="hidden"] { display: none !important; }

body.task-login .iki-btn.iki-btn-primary.btn,
body.task-login .iki-btn.iki-btn-primary {
    padding: 14px 16px !important;
    border-radius: 12px !important;
    background-color: var(--iki-navy-800) !important;
    border: 0 !important;
    color: #fff !important;
    font-size: 15.5px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}
body.task-login .iki-btn.iki-btn-primary:hover { background-color: var(--iki-navy-700) !important; }

body.task-login .iki-ic.btn,
body.task-login .iki-ic.btn-secondary {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: var(--iki-muted) !important;
    width: 28px !important;
    height: 28px !important;
}
body.task-login .iki-field label {
    font-family: var(--iki-mono); font-size: 11px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--iki-muted);
    display: flex; justify-content: space-between; align-items: center;
}

body.task-login .iki-row {
    display: flex; align-items: center; justify-content: space-between;
    margin: 4px 0 6px;
}
body.task-login .iki-check {
    display: inline-flex; align-items: center; gap: 10px;
    cursor: pointer; font-size: 13.5px; color: var(--iki-ink);
    user-select: none;
}
body.task-login .iki-check input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 18px; height: 18px;
    border: 1px solid var(--iki-line-strong); border-radius: 5px;
    background: #fff; cursor: pointer;
    display: grid; place-items: center;
    transition: border-color .15s, background .15s;
    margin: 0; flex: none;
}
body.task-login .iki-check input[type="checkbox"]:checked {
    background: var(--iki-navy-800); border-color: var(--iki-navy-800);
}
body.task-login .iki-check input[type="checkbox"]:checked::after {
    content: ""; width: 9px; height: 5px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}

body.task-login .iki-input {
    position: relative;
    background: #fff;
    border: 1px solid var(--iki-line);
    border-radius: 12px;
    transition: border-color .15s, box-shadow .15s;
}
body.task-login .iki-input:focus-within {
    border-color: var(--iki-navy-800);
    box-shadow: 0 0 0 4px rgba(15, 30, 42, .08);
}
body.task-login .iki-input input {
    width: 100%; border: 0; outline: 0; background: transparent;
    font-family: var(--iki-display); font-size: 15.5px; color: var(--iki-ink);
    padding: 14px 44px 14px 16px;
    border-radius: 12px;
}
body.task-login .iki-input input::placeholder { color: #a59f90; }
body.task-login .iki-input .iki-ic {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; display: grid; place-items: center;
    color: var(--iki-muted); background: transparent; border: 0; cursor: pointer;
    border-radius: 6px;
}
body.task-login .iki-input .iki-ic:hover { color: var(--iki-ink); background: var(--iki-paper-2); }

body.task-login .iki-btn {
    appearance: none; border: 0; cursor: pointer;
    font-family: var(--iki-display); font-weight: 500; font-size: 15.5px;
    padding: 14px 16px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    transition: transform .12s ease, background .15s, box-shadow .2s;
    width: 100%;
}
body.task-login .iki-btn:active { transform: translateY(1px); }
body.task-login .iki-btn-primary {
    background: var(--iki-navy-800); color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 8px 22px -10px rgba(15, 30, 42, .6);
    position: relative; overflow: hidden;
}
body.task-login .iki-btn-primary:hover { background: var(--iki-navy-700); }
body.task-login .iki-btn-primary .iki-arrow { display: inline-block; transition: transform .2s ease; }
body.task-login .iki-btn-primary:hover .iki-arrow { transform: translateX(3px); }
body.task-login .iki-btn-oauth {
    background: transparent; color: var(--iki-navy-800);
    border: 1px solid rgba(15, 30, 42, .25);
    text-decoration: none;
}
body.task-login .iki-btn-oauth:hover { border-color: var(--iki-navy-800); background: var(--iki-paper-2); }
body.task-login .iki-btn-oauth .iki-arrow { display: inline-block; transition: transform .2s ease; }
body.task-login .iki-btn-oauth:hover .iki-arrow { transform: translateX(3px); }
body.task-login .iki-divider {
    display: flex; align-items: center; gap: 12px;
    color: var(--iki-muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em;
    margin: 2px 0;
}
body.task-login .iki-divider::before,
body.task-login .iki-divider::after {
    content: ""; flex: 1; height: 1px; background: rgba(15, 30, 42, .12);
}
/* The signature 6px orange accent square in the bottom-left. */
body.task-login .iki-btn-primary::after {
    content: ""; position: absolute; left: 14px; bottom: 10px;
    width: 6px; height: 6px; background: var(--iki-accent); border-radius: 1px;
}

body.task-login .iki-legal {
    margin-top: 28px;
    font-family: var(--iki-mono); font-size: 11px; letter-spacing: .06em;
    color: var(--iki-muted); line-height: 1.7;
}
body.task-login .iki-legal a {
    color: var(--iki-ink); text-decoration: none;
    border-bottom: 1px solid var(--iki-line-strong);
}
body.task-login .iki-legal a:hover { color: var(--iki-accent-deep); border-color: var(--iki-accent); }

body.task-login .iki-form-foot {
    margin-top: 28px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    font-family: var(--iki-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--iki-muted);
}
body.task-login .iki-form-foot a { color: var(--iki-ink); text-decoration: none; }
body.task-login .iki-form-foot a.iki-mail { border-bottom: 1px solid var(--iki-line-strong); }

body.task-login .iki-noscript-warning {
    position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%);
    background: var(--iki-accent); color: #fff; padding: 10px 18px;
    border-radius: 10px; font-family: var(--iki-mono); font-size: 12px;
}

@media (max-width: 980px) {
    body.task-login #layout-content.iki-shell { grid-template-columns: 1fr; }
    body.task-login .iki-brand { display: none; }
    body.task-login .iki-form-pane { padding: 24px 22px 36px; }
    body.task-login .iki-form-top { justify-content: space-between; }
    body.task-login .iki-form-wrap { margin: 24px auto; }
}
@media (max-width: 480px) {
    body.task-login .iki-form-pane { padding: 18px 18px 28px; }
    body.task-login h2.iki-title { font-size: 26px; }
    body.task-login .iki-form-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
}