/* iForm Foundation Layer */

[v-cloak] { display: none; }

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

:root {
    color-scheme: light dark;
    --bg-primary:   #ffffff;
    --bg-secondary: #f6f8fa;
    --bg-tertiary:  #eaeef2;
    --card-bg:      #ffffff;
    --input-bg:     #ffffff;
    --canvas-bg:    #FFFFFF;

    --text-primary:   #1f2328;
    --text-secondary: #636e7b;
    --text-tertiary:  #818b98;
    --text-on-accent: #FFFFFF;

    --border:        #d0d7de;
    --border-strong: #8c959f;
    --chart-grid:    rgba(140, 149, 159, 0.22);
    --chart-axis:    rgba(140, 149, 159, 0.4);
    --input-border:  #d0d7de;

    --accent:       #0969da;
    --accent-hover: #0550ae;
    --accent-muted: rgba(9, 105, 218, 0.08);
    --accent-soft:  rgba(9, 105, 218, 0.15);
    --btn-primary-bg: #0969da;
    --btn-primary-border: #0969da;
    --btn-primary-hover-bg: #0550ae;
    --btn-primary-hover-border: #0550ae;
    --btn-disabled-opacity: 0.5;
    --danger:  #cf222e;
    --success: #1a7f37;
    --warning: #9a6700;
    --info:    var(--accent);

    --toast-shadow: 0 4px 12px rgba(31, 35, 40, 0.15);
    --toast-success-bg: #dafbe1;
    --toast-success-fg: #116329;
    --toast-success-border: #aceebb;
    --toast-error-bg: #ffebe9;
    --toast-error-fg: #a40e26;
    --toast-error-border: #ffcecb;
    --toast-info-bg: #ddf4ff;
    --toast-info-fg: #0550ae;
    --toast-info-border: #80ccff;
    --toast-warning-bg: #fff8c5;
    --toast-warning-fg: #7d4e00;
    --toast-warning-border: #e3b341;

    --control-bg: var(--input-bg);
    --control-border: var(--input-border);
    --control-radius: var(--radius-sm);
    --control-min-height: 36px;
    --loading-surface-radius: var(--radius-xl);
    --loading-control-radius: var(--control-radius);
    --loading-pill-radius: var(--radius-full);
    --feedback-surface: color-mix(in srgb, var(--bg-secondary) 78%, var(--card-bg));
    --feedback-border: color-mix(in srgb, var(--border) 78%, transparent);

    --shadow-sm: 0 1px 0 rgba(31, 35, 40, 0.04);
    --shadow-md: 0 3px 6px rgba(140, 149, 159, 0.15);
    --shadow-lg: 0 8px 24px rgba(140, 149, 159, 0.2);
    --shadow-xl: 0 12px 28px rgba(31, 35, 40, 0.12);
    --card-shadow: none;

    --radius-xs:    2px;
    --radius-sm:    6px;
    --radius-md:    6px;
    --radius-lg:    8px;
    --radius-xl:   12px;
    --radius-full: 2em;
    --radius-circle: 50%;

    --space-1:  4px;
    --space-2:  8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-md:   15px;
    --text-lg:   17px;
    --text-xl:   22px;
    --text-2xl:  28px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
    --transition: 0.15s ease;
    --nav-height: 48px;
    --min-touch: 44px;

    --notice-bg:     #fff8c5;
    --notice-fg:     #7d4e00;
    --notice-border: #e3b341;

    --nav-bg:               #f6f8fa;
    --nav-border-bottom:    #d0d7de;
    --nav-brand-color:      #1f2328;
    --nav-link-color:       rgba(31, 35, 40, 0.75);
    --nav-link-hover-bg:    rgba(208, 215, 222, 0.48);
    --nav-link-hover-color: #1f2328;
    --nav-link-active-bg:   rgba(208, 215, 222, 0.48);
    --nav-link-active-border: transparent;
    --nav-username-color:   #636e7b;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary:   #0d1117;
        --bg-secondary: #161b22;
        --bg-tertiary:  #21262d;
        --card-bg:      #161b22;
        --input-bg:     #0d1117;
        --canvas-bg:    #FFFFFF;

        --text-primary:   #e6edf3;
        --text-secondary: #8b949e;
        --text-tertiary:  #6e7681;
        --text-on-accent: #FFFFFF;

        --border:        #30363d;
        --border-strong: #484f58;
        --chart-grid:    rgba(110, 118, 129, 0.22);
        --chart-axis:    rgba(110, 118, 129, 0.34);
        --input-border:  #30363d;

        --accent:       #2f81f7;
        --accent-hover: #1f6feb;
        --accent-muted: rgba(47, 129, 247, 0.1);
        --accent-soft:  rgba(47, 129, 247, 0.18);
        --btn-primary-bg: #1f6feb;
        --btn-primary-border: #2f81f7;
        --btn-primary-hover-bg: #388bfd;
        --btn-primary-hover-border: #388bfd;
        --danger:  #f85149;
        --success: #3fb950;
        --warning: #d29922;

        --toast-shadow: 0 4px 12px rgba(1, 4, 9, 0.4);
        --toast-success-bg: #12261e;
        --toast-success-fg: #3fb950;
        --toast-success-border: #26a641;
        --toast-error-bg: #2d1117;
        --toast-error-fg: #f85149;
        --toast-error-border: #da3633;
        --toast-info-bg: #0d2d6b;
        --toast-info-fg: #79c0ff;
        --toast-info-border: #1f6feb;
        --toast-warning-bg: #2d2300;
        --toast-warning-fg: #e3b341;
        --toast-warning-border: #9e6a03;
        --feedback-surface: color-mix(in srgb, var(--bg-secondary) 72%, var(--card-bg));
        --feedback-border: color-mix(in srgb, var(--border) 82%, transparent);

        --shadow-sm: 0 1px 0 rgba(1, 4, 9, 0.2);
        --shadow-md: 0 3px 6px rgba(1, 4, 9, 0.4);
        --shadow-lg: 0 8px 24px rgba(1, 4, 9, 0.4);
        --shadow-xl: 0 12px 28px rgba(1, 4, 9, 0.4);

        --notice-bg:     #2d2300;
        --notice-fg:     #e3b341;
        --notice-border: #9e6a03;

        --nav-bg:               #161b22;
        --nav-border-bottom:    #21262d;
        --nav-brand-color:      #e6edf3;
        --nav-link-color:       rgba(230, 237, 243, 0.75);
        --nav-link-hover-bg:    rgba(177, 186, 196, 0.12);
        --nav-link-hover-color: #e6edf3;
        --nav-link-active-bg:   rgba(177, 186, 196, 0.12);
        --nav-link-active-border: rgba(230, 237, 243, 0.1);
        --nav-username-color:   rgba(230, 237, 243, 0.6);
        --overlay-canvas-bg:    #1c2128;
        --overlay-canvas-border: #373e47;
    }
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --accent-muted: rgba(9, 105, 218, 0.08);
        --accent-soft:  rgba(9, 105, 218, 0.15);
        --toast-success-bg:     #dafbe1;
        --toast-success-fg:     #116329;
        --toast-success-border: #aceebb;
        --toast-error-bg:       #ffebe9;
        --toast-error-fg:       #a40e26;
        --toast-error-border:   #ffcecb;
        --toast-info-bg:        #ddf4ff;
        --toast-info-fg:        #0550ae;
        --toast-info-border:    #80ccff;
        --toast-warning-bg:     #fff8c5;
        --toast-warning-fg:     #7d4e00;
        --toast-warning-border: #e3b341;
    }
    @media (prefers-color-scheme: dark) {
        :root {
            --btn-primary-bg:           #1f6feb;
            --btn-primary-border:       #2f81f7;
            --btn-primary-hover-bg:     #388bfd;
            --btn-primary-hover-border: #388bfd;
            --toast-success-bg:     #12261e;
            --toast-success-fg:     #3fb950;
            --toast-success-border: #26a641;
            --toast-error-bg:       #2d1117;
            --toast-error-fg:       #f85149;
            --toast-error-border:   #da3633;
            --toast-info-bg:        #0d2d6b;
            --toast-info-fg:        #79c0ff;
            --toast-info-border:    #1f6feb;
            --toast-warning-bg:     #2d2300;
            --toast-warning-fg:     #e3b341;
            --toast-warning-border: #9e6a03;
        }
    }
}

html {
    background: var(--bg-primary);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    background: var(--bg-secondary);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: 1.125rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }

p, li { color: var(--text-primary); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img,
svg {
    display: inline-block;
}

:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 76%, white);
    outline-offset: 2px;
}

[hidden],
.u-hidden,
.is-hidden {
    display: none !important;
}