/* AI Professor Lite | KELi-inspired visual theme
   Palette taken from the supplied reference: deep blue, cyan/teal, warm orange.
   Load AFTER tailwind.css and app.css to preserve original utilities and features.
*/
:root {
    --brand-navy: #073c76;
    --brand-blue: #075eaa;
    --brand-blue-bright: #0879bd;
    --brand-cyan: #39a7c3;
    --brand-teal: #0caaa0;
    --brand-orange: #f3a029;
    --brand-gold: #dfb25f;
    --brand-ink: #19324d;
    --brand-muted: #627b91;
    --brand-border: #dce9f1;
    --brand-bg: #f5f9fc;
    --brand-blue-glass: #eaf5fc;
    --brand-gradient: linear-gradient(115deg, #075ca6 4%, #087cb7 57%, #10aaa4 100%);
    --brand-dark-gradient: linear-gradient(150deg, #063568 0%, #064c8a 51%, #087e91 100%);

    /* Re-map the existing Tailwind indigo/violet tokens without recompiling CSS.
       Functional status colors (emerald/rose/amber) intentionally remain distinct. */
    --color-indigo-50: #eaf6fb;
    --color-indigo-100: #d8eff7;
    --color-indigo-300: #96d6e3;
    --color-indigo-400: #41accb;
    --color-indigo-500: #087fbd;
    --color-indigo-600: #0765ac;
    --color-indigo-700: #07538e;
    --color-indigo-800: #063e70;
    --color-indigo-950: #062f63;
    --color-violet-400: #33b7ae;
    --color-sky-400: #48bad1;
    --color-slate-50: #f5f9fc;
    --color-slate-100: #eaf2f8;
    --color-slate-200: #dce9f1;
    --color-slate-300: #c5d8e5;
    --color-slate-400: #91a6b8;
    --color-slate-500: #627b91;
    --color-slate-600: #48677e;
    --color-slate-700: #31506a;
    --color-slate-800: #1d3d59;
    --color-slate-900: #19324d;
    --color-slate-950: #083865;
}

html { color-scheme: light; }
body {
    min-width: 320px;
    background: var(--brand-bg);
    color: var(--brand-ink);
    font-family: Inter, Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
    letter-spacing: -0.012em;
}
::selection { background: #b2eae8; color: #073b6d; }
:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--brand-teal);
    outline-offset: 3px;
}
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a, button { transition: background-color .17s ease, border-color .17s ease, color .17s ease, box-shadow .17s ease, transform .17s ease; }

/* Graphic brand symbol, intentionally lightweight and fully CSS-based. */
.brand-mark {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px 4px 12px 4px;
    background: var(--brand-gradient);
    color: white;
    font-size: 17px;
    font-weight: 850;
    letter-spacing: -.075em;
    line-height: 1;
    box-shadow: 0 7px 17px rgba(5, 71, 134, .2);
}
.brand-mark::before, .brand-mark::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: var(--brand-orange);
    box-shadow: 0 2px 6px rgba(224, 141, 36, .18);
}
.brand-mark::before { width: 9px; height: 9px; top: -4px; right: -5px; }
.brand-mark::after { width: 5px; height: 5px; top: 7px; right: -8px; background: var(--brand-gold); }
.brand-mark--sm { width: 36px; height: 36px; border-radius: 10px 3px 10px 3px; font-size: 15px; }
.brand-name { font-weight: 750; letter-spacing: -.035em; }
.brand-name__lite { color: #70dad1; }

/* The navigation shell preserves the original routes and responsive behavior. */
.app-sidebar {
    background: var(--brand-dark-gradient) !important;
    border-right: 1px solid rgba(175, 229, 236, .18);
    box-shadow: 10px 0 30px rgba(5, 50, 99, .045);
}
.app-sidebar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 200px;
    pointer-events: none;
    background: radial-gradient(circle at 95% 0%, rgba(243, 160, 41, .13), transparent 55%);
}
.app-sidebar-brand { background: rgba(4, 42, 82, .2); border-bottom-color: rgba(194, 231, 236, .15) !important; }
.app-sidebar-brand a { position: relative; }
.app-sidebar nav > div > div:first-child { color: #93c8d7; font-weight: 750; }
.app-sidebar .app-nav-link {
    position: relative;
    font-weight: 600;
    color: #c8e3ec;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.app-sidebar .app-nav-link:hover { background: rgba(172, 230, 233, .12); color: #fff; transform: translateX(2px); }
.app-sidebar .app-nav-link.is-current {
    background: linear-gradient(95deg, rgba(85, 207, 216, .23), rgba(67, 177, 199, .09));
    color: #fff;
    box-shadow: inset 3px 0 0 var(--brand-orange);
}
.app-sidebar .app-nav-link > span:first-child { background: #54c7d2; box-shadow: 0 0 0 4px rgba(84, 199, 210, .12); }
.app-sidebar .app-nav-link.is-current > span:first-child { background: var(--brand-orange); box-shadow: 0 0 0 4px rgba(243,160,41,.16); }
.app-sidebar .app-subnav-link { color: #abd0df; }
.app-sidebar .app-subnav-link:hover, .app-sidebar .app-subnav-link.is-current { color: #fff; background: rgba(255,255,255,.07); }
.app-sidebar .app-account-card { background: rgba(8, 36, 73, .31); border: 1px solid rgba(183,229,235,.13); }
.app-sidebar .app-account-card .text-slate-400 { color: #b2cfdc; }
.app-sidebar .app-logout:hover { border-color: rgba(243,160,41,.4); background: rgba(243,160,41,.12); }

.app-topbar {
    position: sticky;
    z-index: 20;
    border-bottom: 1px solid #dce9f1;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 5px 24px rgba(6, 68, 118, .035);
    backdrop-filter: blur(14px);
}
.app-topbar::before {
    content: "";
    position: absolute;
    height: 2px;
    inset: 0 0 auto;
    background: linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-teal) 78%, var(--brand-orange) 100%);
}
.app-topbar .app-page-title { font-weight: 800; font-size: .95rem; letter-spacing: -.03em; color: var(--brand-navy); }
.app-topbar .app-page-subtitle { color: var(--brand-muted); }
.app-main {
    min-height: calc(100vh - 4rem);
    background:
      radial-gradient(ellipse 450px 320px at 98% 0%, rgba(43, 180, 192, .065), transparent 70%),
      radial-gradient(ellipse 460px 320px at 0% 100%, rgba(20, 109, 181, .04), transparent 75%),
      var(--brand-bg);
}

/* Heroes: geometric blue-to-teal sweep with two gold nodes from the reference. */
.app-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--brand-gradient) !important;
    border: 1px solid rgba(19, 140, 177, .28);
    border-radius: 22px;
    box-shadow: 0 16px 32px rgba(7, 80, 139, .13), 0 3px 7px rgba(7, 80, 139, .06);
}
.app-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    width: 400px;
    height: 400px;
    right: -125px;
    top: -205px;
    transform: rotate(35deg);
    border: 48px solid rgba(255,255,255,.09);
    border-radius: 46px;
}
.app-hero::after {
    content: "";
    position: absolute;
    top: 19px;
    right: 32px;
    width: 17px;
    height: 17px;
    pointer-events: none;
    border-radius: 50%;
    background: var(--brand-orange);
    box-shadow: -29px 28px 0 -4px #ddbb6c, 0 0 22px rgba(243,160,41,.12);
}
.app-hero .text-indigo-100, .app-hero .text-indigo-300 { color: #d8f6f7; }
.app-hero .text-slate-400, .app-hero .text-slate-300 { color: #d3eef2; }
.app-hero :is(.bg-indigo-500, .bg-indigo-600, .bg-slate-950) {
    background: #fff !important;
    color: #075eaa !important;
    box-shadow: 0 6px 16px rgba(4, 48, 94, .13);
}
.app-hero :is(a,button):is(.bg-indigo-500, .bg-indigo-600):hover { background: #e9f7f7 !important; transform: translateY(-1px); }

/* White content cards, statistic panels, and information blocks. */
.app-main :is(section, article, div).bg-white.rounded-2xl,
.app-main :is(section, article, div).bg-white.rounded-\[24px\],
.app-main :is(section, article, div).bg-white.rounded-\[22px\] {
    border-color: var(--brand-border);
}
.app-main section.bg-white:is(.shadow-panel, .shadow-sm),
.app-main div.bg-white:is(.shadow-panel, .shadow-sm) {
    box-shadow: 0 5px 19px rgba(13, 87, 136, .05), 0 1px 2px rgba(13, 87, 136, .025);
}
.app-main section.bg-white:is(.shadow-panel, .shadow-sm) { transition: box-shadow .18s ease, border-color .18s ease; }
.app-main section.bg-white:is(.shadow-panel, .shadow-sm):hover { border-color: #c7e1eb; box-shadow: 0 9px 28px rgba(13,87,136,.075); }
.app-main .rounded-2xl.border.border-slate-200.bg-white { border-color: var(--brand-border); }
.app-main h1, .app-main h2, .app-main h3 { letter-spacing: -.025em; }
.app-main h1:not(.text-white) { color: var(--brand-navy); }
.app-main :is(.text-3xl, .text-2xl).font-semibold:not(.text-white) { color: var(--brand-blue); }
.app-hero :is(h1, h2, h3) { color: #fff !important; }
.app-main .uppercase.text-indigo-600 { letter-spacing: .13em; }
.app-main .border-indigo-100 { border-color: #cdeaf2; }
.app-main .bg-indigo-50\/60, .app-main .bg-indigo-50\/70 { background-color: #eaf7fb; }
.app-main .divide-slate-100 > :not(:last-child) { border-color: #e8f1f6; }
.app-main a.text-indigo-600:hover { color: var(--brand-teal); }

/* Primary actions and coherent interactive states. */
:is(a, button).bg-slate-950,
:is(a, button).bg-indigo-500,
:is(a, button).bg-indigo-600,
:is(a, button).bg-indigo-700 {
    background: var(--brand-gradient) !important;
    color: white;
    border-color: transparent;
    box-shadow: 0 5px 14px rgba(7, 99, 169, .14);
}
:is(a, button).bg-slate-950:hover,
:is(a, button).bg-indigo-500:hover,
:is(a, button).bg-indigo-600:hover,
:is(a, button).bg-indigo-700:hover {
    background: linear-gradient(115deg, #064c8d, #0875b7 65%, #079a94) !important;
    color: white;
    box-shadow: 0 9px 19px rgba(7, 99, 169, .22);
    transform: translateY(-1px);
}
:is(a, button).bg-slate-950:active,
:is(a, button).bg-indigo-500:active,
:is(a, button).bg-indigo-600:active { transform: translateY(0); }
/* Keep negative/destructive actions red, and confirmed/success actions green. */
.danger-button, .bg-rose-600, .bg-emerald-600 { background-image: none; }

/* Inputs, forms and radio/checkbox feedback. */
.app-main :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea),
.auth-form-panel :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
    border-color: #cfdee9;
    color: var(--brand-ink);
}
.app-main :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus,
.auth-form-panel :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
    border-color: #21a6b4;
    outline: none;
    --tw-ring-color: rgba(30, 179, 180, .16);
    box-shadow: 0 0 0 3px rgba(30, 179, 180, .12);
}
.app-main :is(input[type="checkbox"], input[type="radio"]),
.auth-form-panel :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--brand-blue); }
.app-main .field {
    width: 100%;
    min-height: 44px;
    padding: .75rem 1rem;
    border: 1px solid #cfdee9;
    border-radius: 14px;
    background: var(--brand-bg);
    font-size: .875rem;
    color: var(--brand-ink);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.app-main textarea.field { min-height: 8rem; }
.app-main .field:focus { background: white; border-color: var(--brand-teal); box-shadow: 0 0 0 3px rgba(20, 181, 175, .13); outline: 0; }
.app-main .select-field { cursor: pointer; }
.app-main label:has(> input:checked).border-slate-200 { border-color: #6dcbd1; background-color: #effafb; }
.app-main .peer:checked ~ .peer-checked\:bg-indigo-600 { background: var(--brand-gradient); }
.app-progress::-webkit-progress-value { background: var(--brand-gradient); }
.app-progress::-moz-progress-bar { background: #0b8eb1; }

/* Mobile bottom navigation and menu sheet. */
.app-mobile-nav { border-top: 1px solid #d8e9f0; background: rgba(255,255,255,.97) !important; box-shadow: 0 -8px 30px rgba(5,64,117,.09); }
.app-mobile-nav a.text-indigo-600, .app-mobile-nav button.text-indigo-600 { color: var(--brand-blue); }
.app-mobile-nav .app-mobile-create { background: var(--brand-gradient) !important; box-shadow: 0 8px 18px rgba(5,101,164,.26); }
.mobile-menu-sheet { background: #f5fafc; box-shadow: 0 -20px 50px rgba(8,58,105,.20); }
.mobile-menu-handle { background: #96cbcf; }
.mobile-menu-primary-link { border-color: #d5e7ee; box-shadow: 0 2px 9px rgba(14,82,129,.035); }
.mobile-menu-primary-link.is-active { border-color: #4bbfbd; background: #edf9f9; box-shadow: inset 0 0 0 1px rgba(23,166,169,.16); }
.mobile-menu-row.is-active { background: #e8f7f9; color: var(--brand-blue); }
.mobile-menu-row:hover, .mobile-menu-row:focus-visible { background: #edf7fa; color: var(--brand-blue); }
.mobile-menu-icon.bg-slate-950 { background: var(--brand-gradient) !important; }
.mobile-menu-backdrop { background: rgba(5, 37, 71, .55); }

/* The sign-in/up area echoes the reference on a bright canvas. */
.auth-brand-panel { position: relative; isolation: isolate; overflow: hidden; background: var(--brand-dark-gradient) !important; }
.auth-brand-panel::before {
    content: ""; position: absolute; z-index: -1; width: 510px; height: 510px;
    right: -170px; top: 20%; border: 65px solid rgba(255,255,255,.065);
    border-radius: 80px; transform: rotate(40deg);
}
.auth-brand-panel::after {
    content: ""; position: absolute; width: 22px; height: 22px; right: 75px; top: 70px;
    border-radius: 50%; background: var(--brand-orange); box-shadow: -34px 34px 0 -5px var(--brand-gold);
}
.auth-brand-panel .text-slate-400, .auth-brand-panel .text-slate-500 { color: #c5e2e9; }
.auth-form-panel {
    background:
        radial-gradient(circle at 100% 0%, rgba(25,171,179,.07), transparent 34%),
        radial-gradient(circle at 0% 100%, rgba(7,94,170,.055), transparent 38%),
        #fff !important;
}
.auth-form-panel > div { max-width: 450px; }
.auth-form-panel h2 { color: var(--brand-navy); font-weight: 800; }
.auth-form-panel .brand-mark { vertical-align: middle; margin-right: 9px; }
.auth-form-panel input:not([type="hidden"]) { background: #f8fbfd; }
.auth-form-panel input:not([type="hidden"]):focus { background: #fff; }
.auth-form-panel button.bg-slate-950 { min-height: 48px; }

@media (min-width: 640px) {
    /* This particular responsive utility was absent from the bundled Tailwind build. */
    .app-topbar .app-topbar-new { display: inline-flex; }
}
@media (min-width: 1024px) {
    .app-main { padding-top: 2.4rem; }
    .app-sidebar nav { scrollbar-width: thin; }
}
@media (max-width: 640px) {
    .app-hero { border-radius: 18px; }
    .app-hero::before { width: 280px; height: 280px; right: -180px; top: -115px; border-width: 32px; }
    .app-hero::after { right: 20px; top: 16px; width: 12px; height: 12px; }
    .app-topbar .app-page-title { font-size: .85rem; }
    .app-topbar .app-page-subtitle { max-width: 54vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
    :is(a, button, input, select, textarea), .app-main section, .app-sidebar .app-nav-link { transition: none !important; }
}