:root {
            --ink: #16140F;
            --ink-2: #262219;
            --gold: #C9A227;
            --gold-deep: #917411;
            --paper: #FCFBF8;
            --paper-2: #F4EEE2;
            --gray: #6E6A5F;
            --line: #E7E0D1;
            --disp: "Fraunces", Georgia, serif;
            --body: "Plus Jakarta Sans", system-ui, sans-serif;
            --mono: "Space Mono", ui-monospace, monospace;
            --bn: "Hind Siliguri", sans-serif;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }

        body {
            font-family: var(--body);
            background: var(--paper);
            color: var(--ink);
            -webkit-font-smoothing: antialiased;
            min-height: 100vh
        }

        body.bn {
            font-family: var(--bn)
        }

        body.bn .mono {
            font-family: var(--mono)
        }

        h1,
        h2 {
            font-family: var(--disp);
            font-weight: 500;
            letter-spacing: -.01em;
            line-height: 1.1
        }

        body.bn h1,
        body.bn h2 {
            font-family: var(--bn);
            font-weight: 600;
            letter-spacing: 0;
            line-height: 1.3
        }

        .mono {
            font-family: var(--mono);
            font-size: 12px;
            letter-spacing: .14em;
            text-transform: uppercase
        }

        :focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 2px
        }

        .split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 100vh
        }

        .panel {
            background: var(--ink);
            color: var(--paper);
            padding: 52px 56px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden
        }

        .panel .wordmark {
            font-family: var(--disp);
            font-size: 26px
        }

        .panel .wordmark b {
            color: var(--gold)
        }

        .panel h1 {
            font-size: clamp(30px, 3.6vw, 44px);
            color: var(--paper);
            max-width: 11em
        }

        .panel h1 em {
            font-style: italic;
            color: var(--gold)
        }

        .panel p {
            color: #b8b2a3;
            margin-top: 16px;
            max-width: 26em;
            font-size: 15.5px;
            line-height: 1.6
        }

        .panel .eyebrow {
            color: var(--gold);
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 18px
        }

        .panel .eyebrow::before {
            content: "";
            width: 24px;
            height: 1px;
            background: var(--gold)
        }

        .panel .foot {
            font-family: var(--mono);
            font-size: 11px;
            letter-spacing: .12em;
            color: #7d786b
        }

        .routebg {
            position: absolute;
            right: -40px;
            top: 40%;
            width: 120%;
            opacity: .5
        }

        .routebg path {
            stroke: var(--gold);
            fill: none;
            stroke-dasharray: 2 8;
            stroke-width: 1.5
        }

        .pblock {
            display: none
        }

        .pblock.on {
            display: block
        }

        .formside {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px
        }

        .card {
            width: 100%;
            max-width: 400px
        }

        .card .logo {
            height: 34px;
            margin-bottom: 28px
        }

        .tabs {
            display: flex;
            background: var(--paper-2);
            border-radius: 9px;
            padding: 4px;
            margin-bottom: 26px
        }

        .tab {
            flex: 1;
            border: none;
            background: none;
            font-family: inherit;
            font-size: 14.5px;
            font-weight: 600;
            color: var(--gray);
            padding: 10px;
            border-radius: 6px;
            cursor: pointer;
            transition: all .2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px
        }

        .tab svg {
            width: 16px;
            height: 16px
        }

        .tab.active {
            background: #fff;
            color: var(--ink);
            box-shadow: 0 1px 3px rgba(22, 20, 15, .08)
        }

        .pane {
            display: none
        }

        .pane.on {
            display: block
        }

        .pane h2 {
            font-size: 24px;
            margin-bottom: 4px
        }

        .pane .s {
            color: var(--gray);
            font-size: 14px;
            margin-bottom: 24px
        }

        .lab {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: var(--ink-2);
            margin-bottom: 7px
        }

        .lab .opt {
            color: var(--gray);
            font-weight: 400
        }

        .inp {
            position: relative;
            margin-bottom: 17px
        }

        input {
            width: 100%;
            font-family: inherit;
            font-size: 15px;
            color: var(--ink);
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 7px;
            padding: 13px 14px;
            transition: border-color .2s, box-shadow .2s
        }

        input:focus {
            outline: none;
            border-color: var(--gold);
            box-shadow: 0 0 0 3px rgba(201, 162, 39, .14)
        }

        .reveal-pw {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            color: var(--gray);
            padding: 6px
        }

        .reveal-pw svg {
            width: 18px;
            height: 18px
        }

        .btn {
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-family: inherit;
            font-weight: 600;
            font-size: 15.5px;
            border-radius: 7px;
            padding: 14px;
            cursor: pointer;
            border: none;
            background: var(--ink);
            color: var(--paper);
            transition: background .2s, transform .15s;
            margin-top: 4px
        }

        .btn:hover {
            background: var(--gold);
            color: var(--ink);
            transform: translateY(-1px)
        }

        .btn.gold {
            background: var(--gold);
            color: var(--ink)
        }

        .btn.gold:hover {
            background: #d8b132
        }

        .hint {
            font-size: 13px;
            color: var(--gray);
            margin-top: 18px;
            line-height: 1.6
        }

        .hint a {
            color: var(--gold-deep);
            font-weight: 600
        }

        .note {
            font-size: 12.5px;
            color: var(--gray);
            text-align: center;
            margin-top: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px
        }

        .note svg {
            width: 14px;
            height: 14px;
            color: var(--gold-deep)
        }

        .err {
            color: #a3402d;
            font-size: 13px;
            margin-bottom: 14px;
            display: none
        }

        .lang {
            position: absolute;
            top: 24px;
            right: 24px;
            font-family: var(--mono);
            font-size: 11px;
            letter-spacing: .1em;
            border: 1px solid var(--line);
            border-radius: 4px;
            background: #fff;
            cursor: pointer;
            padding: 6px 9px;
            color: var(--ink-2);
            z-index: 5
        }

        .lang b {
            color: var(--gold-deep)
        }

        @media (max-width:820px) {
            .split {
                grid-template-columns: 1fr
            }

            .panel {
                padding: 36px 30px;
                gap: 22px
            }

            .routebg {
                display: none
            }

            .panel h1 {
                font-size: 27px
            }
        }