/*
 * GymDesh — প্যানেলের বাইরের পাতাগুলোর সাজ ("০১ সংকেত")
 * ======================================================================
 *
 * যে পাতাগুলো Filament-এর বাইরে দাঁড়িয়ে থাকে: পাসওয়ার্ড পুনরুদ্ধার,
 * প্রথমবারের ইনস্টল ফর্ম, আর মডিউল বন্ধ থাকার বার্তা।
 *
 * রঙ ও হরফ অফিসের সাজের (panel.css) হুবহু এক — কংক্রিট-সাদা মেঝে,
 * সাদা কার্ড, মাথায় বেগুনি দাগ, Google Sans। লগইনের পাতা থেকে
 * "পাসওয়ার্ড ভুলে গেছেন?" চেপে এলে যেন মনে না হয় অন্য কোনো সাইটে
 * চলে এসেছি। সমতল — কোনো ছায়া নেই।
 *
 * এই পাতাগুলো Filament-এর থিম-বদলের বোতাম পায় না, তাই গাঢ় থিম আসে
 * যন্ত্রের নিজের পছন্দ (prefers-color-scheme) থেকে।
 *
 * বাংলার নিয়ম: `uppercase` ও `letter-spacing` কোথাও নয় — দুটোই
 * যুক্তাক্ষর ভেঙে দেয় ("মালিকের তথ্য" আগে এখানেই ভাঙত)।
 */

:root {
    --gd-canvas:  #EFEEF4;
    --gd-surface: #FFFFFF;
    --gd-hair:    #CFCDD9;
    --gd-ctl:     #8C86A0;
    --gd-ink:     #16131D;
    --gd-muted:   #58536B;
    --gd-act:     #7318CC;   /* সংকেত-বেগুনি — বোতাম (সাদা লেখা ৭.৬৯:১) */
    --gd-act-text: #7318CC;
    --gd-on-act:  #FFFFFF;
    --gd-tint:    #F1EAFD;

    --gd-ok:      #0A7A3B;
    --gd-ok-bg:   #E7F5EC;
    --gd-stop:    #C4122F;
    --gd-stop-bg: #FDE8EC;
    --gd-pause:   #58536B;

    --gd-font: 'Google Sans', 'Noto Sans Bengali', ui-sans-serif, system-ui, sans-serif;

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --gd-canvas:  #17121F;
        --gd-surface: #221B2D;
        --gd-hair:    #3B3249;
        --gd-ctl:     #7A7390;
        --gd-ink:     #F2EFF7;
        --gd-muted:   #ADA6BD;
        --gd-act:     #BC8CFF;   /* লেখা #17121F, ৭.২৯:১ */
        --gd-act-text: #C4A3FF;
        --gd-on-act:  #17121F;
        --gd-tint:    #2E2540;

        --gd-ok:      #4FCB84;
        --gd-ok-bg:   #17301F;
        --gd-stop:    #FF6F86;
        --gd-stop-bg: #3A1520;
        --gd-pause:   #ADA6BD;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    padding: 24px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gd-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--gd-ink);
    background-color: var(--gd-canvas);
    -webkit-font-smoothing: antialiased;
}

/* সাদা কার্ড, মাথায় চাপার রঙের সরু দাগ — লগইনের কার্ডের মতোই */
.box {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 28rem;
    background-color: var(--gd-surface);
    border: 1px solid var(--gd-hair);
    border-radius: 14px;
    padding: 34px 30px 30px;
}

.box::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 6px;
    background-color: var(--gd-act);
}

/* একাধিক লাইনের বাংলা শিরোনামে line-height ১.৪-এর কম নয় (ু নিচের লাইনে ঠেকে) */
h1 {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.4;
    margin: 0 0 .35rem;
    text-align: center;
    text-wrap: balance;
}

.lede {
    font-size: .95rem;
    color: var(--gd-muted);
    margin: .6rem 0 18px;
    text-align: center;
}

label {
    display: block;
    font-size: .94rem;
    font-weight: 600;
    margin: 16px 0 6px;
}

input {
    width: 100%;
    min-height: 44px;
    padding: .6rem .85rem;
    font: inherit;
    color: var(--gd-ink);
    background-color: var(--gd-surface);
    border: 1px solid var(--gd-ctl);
    border-radius: 10px;
}

input:focus {
    border-color: var(--gd-act-text);
    outline: 1px solid var(--gd-act-text);
}

button {
    width: 100%;
    min-height: 48px;
    margin-top: 22px;
    padding: .7rem;
    font: inherit;
    font-weight: 600;
    font-size: 1rem;
    color: var(--gd-on-act);
    background-color: var(--gd-act);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

button:hover {
    filter: brightness(1.08);
}

.msg {
    border-radius: 10px;
    padding: .72rem .9rem;
    font-size: .95rem;
    margin-bottom: 14px;
}

.err { background-color: var(--gd-stop-bg); color: var(--gd-stop); border: 1px solid var(--gd-stop); }
.ok  { background-color: var(--gd-ok-bg); color: var(--gd-ok); border: 1px solid var(--gd-ok); }

.hint {
    font-size: .88rem;
    color: var(--gd-muted);
    margin: 6px 0 0;
}

/*
 * ফর্মের ভেতরের ভাগের নাম — uppercase/letter-spacing ছাড়াই চেনা যায়
 * উপরের সরু রেখা আর চাপার রঙে।
 */
.section {
    margin: 26px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--gd-hair);
    font-weight: 700;
    font-size: 1rem;
    color: var(--gd-act-text);
}

.foot {
    margin-top: 20px;
    text-align: center;
    font-size: .94rem;
}

a {
    color: var(--gd-act-text);
    font-weight: 600;
}

:focus-visible {
    outline: 2px solid var(--gd-act-text);
    outline-offset: 3px;
}

/*
 * মডিউল বন্ধ থাকার বার্তা — ফর্ম নয়, তাই কেবল লেখাটুকু মাঝখানে; উপরে
 * "বিরতি"-র ভাঙা বৃত্ত (অবস্থার চারটি চিহ্নের একটি)।
 */
.notice {
    text-align: center;
    max-width: 32rem;
}

.notice::before {
    content: "";
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background-color: var(--gd-pause);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.6' fill='none' stroke='%23000' stroke-width='2.6' stroke-dasharray='4.1 3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.6' fill='none' stroke='%23000' stroke-width='2.6' stroke-dasharray='4.1 3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.notice p {
    color: var(--gd-muted);
}

@media (prefers-reduced-motion: reduce) {
    button:hover { filter: none; }
}