/* public/assets/css/base.css */
:root {
    --font-sans: "Manrope", "Plus Jakarta Sans", "Segoe UI", Tahoma, Arial, sans-serif;

    --bg-public: #f5f4ff;
    --bg-shell: #f4f5fa;

    --surface: #ffffff;
    --surface-soft: #f8f8ff;

    --text: #2f2b3d;
    --text-muted: #6f6b7d;

    --border: rgba(47, 43, 61, 0.12);

    --primary: #7f5aff;
    --primary-strong: #6a45ea;
    --primary-soft: #efe9ff;

    --danger: #ff4d53;
    --success: #56ca00;
    --warning: #ffb400;
    --info: #16b1ff;

    --sidebar-bg: #ffffff;
    --sidebar-surface: #ffffff;
    --sidebar-border: rgba(47, 43, 61, 0.12);
    --sidebar-text: #2f2b3d;
    --sidebar-muted: #8a8699;

    --shadow-sm: 0 8px 20px rgba(47, 43, 61, 0.08);
    --shadow-md: 0 20px 42px rgba(47, 43, 61, 0.13);
    --shadow-soft: 0 2px 10px rgba(47, 43, 61, 0.06);

    --radius-xs: 11px;
    --radius-sm: 14px;
    --radius-md: 18px;
    --radius-lg: 24px;

    --shell-topbar-h: 72px;
    --shell-sidebar-w: 272px;
    --max-public: 1180px;
    --max-shell: 1360px;
}

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

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--text);
    line-height: 1.5;
    background:
        radial-gradient(1100px 520px at -10% -12%, rgba(127, 90, 255, 0.18) 0%, rgba(127, 90, 255, 0) 68%),
        radial-gradient(940px 460px at 110% -8%, rgba(22, 177, 255, 0.14) 0%, rgba(22, 177, 255, 0) 67%),
        var(--bg-public);
    background-attachment: fixed;
}

body.is-public {
    background-image:
        radial-gradient(1100px 520px at -10% -12%, rgba(127, 90, 255, 0.18) 0%, rgba(127, 90, 255, 0) 68%),
        radial-gradient(940px 460px at 110% -8%, rgba(22, 177, 255, 0.14) 0%, rgba(22, 177, 255, 0) 67%),
        url("/assets/img/template/intro.svg"),
        linear-gradient(180deg, #f8f7ff 0%, #f4f5fb 100%);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: left top, right top, right -220px top -80px, center;
    background-size: auto, auto, min(820px, 54vw), cover;
}

body.is-shell {
    background-image:
        radial-gradient(860px 420px at 110% -16%, rgba(145, 85, 253, 0.14) 0%, rgba(145, 85, 253, 0) 67%),
        radial-gradient(760px 360px at -8% 104%, rgba(22, 177, 255, 0.1) 0%, rgba(22, 177, 255, 0) 66%),
        linear-gradient(180deg, #f5f6fb 0%, #f1f3fa 100%);
    background-repeat: no-repeat;
}

body.shell-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

h1,
h2,
h3,
h4 {
    margin: 0 0 10px;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.18;
}

h1 {
    font-size: clamp(1.52rem, 1vw + 1.2rem, 2.05rem);
}

h2 {
    font-size: clamp(1.26rem, 0.72vw + 1rem, 1.55rem);
}

h3 {
    font-size: clamp(1.05rem, 0.44vw + 0.92rem, 1.22rem);
}

p {
    margin: 0 0 14px;
    color: var(--text-muted);
}

small {
    color: var(--text-muted);
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 20px 0;
}

.container {
    width: min(var(--max-public), calc(100% - 40px));
    margin: 26px auto;
}

.public-main {
    position: relative;
    padding-top: 12px;
}

.public-frame {
    padding: 24px;
}

body.page-home .public-main > .public-frame {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding: 0;
    overflow: visible;
}

.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    overflow: clip;
}

.card + .card {
    margin-top: 12px;
}

pre,
code {
    font-family: "Cascadia Code", "Consolas", "Courier New", monospace;
}

pre {
    overflow: auto;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: #f7f8fc;
}

ul,
ol {
    margin: 10px 0 16px;
    padding-left: 20px;
}