html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
:root { --ink: #2F2A3E; --plum: #8E5A86; --plum-d: #73496F; --blue: #4E73A6; --sage: #557A38; --cream: #FBF7F1; --sand: #EFE0CC; }
body { background: var(--cream); color: var(--ink); }
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(142,90,134,.08) 1.3px, transparent 1.5px); background-size: 28px 28px; }
.bg-deco { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.bg-deco span { position: absolute; border-radius: 9999px; filter: blur(80px); opacity: .32; animation: float 26s ease-in-out infinite; }
.bg-deco .b1 { width: 460px; height: 460px; background: #EBC9E3; top: 30%; right: -180px; }
.bg-deco .b2 { width: 420px; height: 420px; background: #C7DAF1; bottom: -160px; left: -140px; animation-delay: -9s; }
.bg-deco .b3 { width: 340px; height: 340px; background: #D7E8C0; top: 70%; right: 35%; animation-delay: -15s; }
@keyframes float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(26px,-26px) scale(1.08); } }

/* header */
.topbar { background: rgba(255,253,249,.9); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 6px 24px -16px rgba(47,42,62,.35); }
.rainbow-bar { height: 4px; background: linear-gradient(90deg, #D7A6CF, #A9C5E8, #BCD99A, #EAC59C, #BDB2E2, #9FCFC7, #D7A6CF); background-size: 300% 100%; animation: slide 22s linear infinite; }
@keyframes slide { to { background-position: 300% 0; } }
.logo-mini { padding: 3px; border-radius: 9999px; background: conic-gradient(from 0deg, #D7A6CF, #A9C5E8, #BCD99A, #D7A6CF); box-shadow: 0 6px 16px -8px rgba(142,90,134,.6); }
.gradient-text { background: linear-gradient(90deg, #8E5A86, #6A6FA8 55%, #4E73A6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.glass { background: rgba(255,255,255,.9); }

/* hero */
.hero { background: linear-gradient(135deg, #F6E6F0 0%, #FBF4EA 40%, #E7EFF9 72%, #EAF3DF 100%); background-size: 200% 200%; animation: heroGrad 24s ease-in-out infinite; box-shadow: 0 30px 60px -36px rgba(110,74,112,.55); border: 1px solid rgba(255,255,255,.8); }
@keyframes heroGrad { 0%,100% { background-position: 0% 30%; } 50% { background-position: 100% 70%; } }
.blob { position: absolute; border-radius: 9999px; filter: blur(46px); pointer-events: none; animation: float 20s ease-in-out infinite; }
.blob.bl1 { width: 260px; height: 260px; background: #EBC6E2; top: -80px; right: -60px; opacity: .7; }
.blob.bl2 { width: 300px; height: 300px; background: #C3D7F0; bottom: -120px; left: 20%; opacity: .6; animation-delay: -7s; }
.blob.bl3 { width: 200px; height: 200px; background: #D5E8BD; top: 30%; left: -60px; opacity: .65; animation-delay: -12s; }
.wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 56px; }
@media (min-width: 640px) { .wave { height: 84px; } }
.hero-title { font-family: Rubik, system-ui, sans-serif; font-weight: 900; font-size: clamp(3.4rem, 12vw, 6.4rem); line-height: 1; letter-spacing: -.01em; color: #3A3150; }
.hero-title .hl { position: relative; display: inline-block; color: var(--plum); z-index: 0; }
.hero-title .hl::after { content: ""; position: absolute; right: -.04em; left: -.04em; bottom: .06em; height: .2em; border-radius: 9px; z-index: -1; background: linear-gradient(90deg, #EBC6E2, #C3D7F0, #D5E8BD); transform-origin: right; animation: underline 1.1s .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.chip { display: inline-flex; align-items: center; gap: .4rem; border-radius: 9999px; background: rgba(255,255,255,.8); border: 1px solid rgba(142,90,134,.18); padding: .3rem .85rem; font-size: .9rem; font-weight: 700; color: var(--plum-d); box-shadow: 0 6px 14px -10px rgba(110,74,112,.5); }
.hero-ico { width: 3.6rem; height: 3.6rem; padding: .45rem; border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%; background: var(--c3); border: 3px solid #fff; box-shadow: 0 10px 20px -12px rgba(47,42,62,.45); animation: bob 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1s); }
@media (min-width: 640px) { .hero-ico { width: 4.2rem; height: 4.2rem; } }
.logo-ring { position: relative; padding: 8px; border-radius: 9999px; background: conic-gradient(from 0deg, #EBC6E2, #fff, #C3D7F0, #fff, #D5E8BD, #fff, #EBC6E2); animation: spin 40s linear infinite; box-shadow: 0 24px 50px -24px rgba(110,74,112,.6); }
.logo-ring > img { animation: spin 40s linear infinite reverse; }
.logo-ring::before { content: ""; position: absolute; inset: -18px; border-radius: 9999px; background: rgba(255,255,255,.6); filter: blur(18px); z-index: -1; animation: pulse 5s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: .5; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.05); } }
.floaters { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.floaters .fl { position: absolute; font-family: "Secular One", Rubik, sans-serif; color: #B57AAB; line-height: 1; animation: drift 16s ease-in-out infinite; user-select: none; }
.floaters .fl:nth-child(3n+2) { color: #6F95C8; } .floaters .fl:nth-child(3n) { color: #7FA65A; }
.grade-hero .floaters .fl, .cat-hero .floaters .fl { color: var(--c2); }
@keyframes drift { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-20px) rotate(7deg); } }
@keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.reveal { animation: rise .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.section-title { font-family: Rubik, sans-serif; font-weight: 900; font-size: clamp(2rem, 6vw, 2.7rem); line-height: 1.1; position: relative; padding-bottom: .5rem; color: #3A3150; }
.section-title::after { content: ""; position: absolute; right: 0; bottom: 0; width: 76px; height: 6px; border-radius: 9px; background: linear-gradient(90deg, #D7A6CF, #A9C5E8, #BCD99A); }

/* illustrated icons */
.illu { display: block; width: 100%; height: 100%; overflow: visible; }
.illu path, .illu rect, .illu circle, .illu ellipse { fill: none; }
.illu .s { stroke: var(--c2); stroke-width: 2.5; }
.illu .f1 { fill: var(--c1); } .illu .f2 { fill: var(--c2); } .illu .f3 { fill: var(--c3); } .illu .fw { fill: #fff; }
.illu .fruit { fill: #EFA7A0; stroke: #fff; stroke-width: 1.5; }
.illu .ill-txt { font: 800 13px Rubik, sans-serif; fill: #fff; } .illu .ill-txt.dark { fill: var(--c2); }
.illu g, .illu path, .illu circle { transform-box: fill-box; }
.illu .em-l { font: 26px "Secular One", Rubik, sans-serif; fill: var(--c2); opacity: .55; animation: emFloat 4.5s ease-in-out infinite; animation-delay: var(--d); transform-box: fill-box; }
@keyframes emFloat { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(6deg); } }
.illu .sp { animation: twinkle 2.8s ease-in-out infinite; transform-origin: center; } .illu .sp + .sp { animation-delay: -1.4s; }
@keyframes twinkle { 0%,100% { opacity: .3; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
/* micro-animations on hover */
.group:hover .ill-waves .w1, .hero-ico:hover .ill-waves .w1 { animation: wave 1.1s ease-in-out infinite; }
.group:hover .ill-waves .w2, .hero-ico:hover .ill-waves .w2 { animation: wave 1.1s .25s ease-in-out infinite; }
@keyframes wave { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
.group:hover .ill-note { animation: note 1.2s ease-in-out infinite; }
@keyframes note { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-8deg); } }
.group:hover .ill-pencil, .hero-ico:hover .ill-pencil { animation: write .9s ease-in-out infinite; }
@keyframes write { 0%,100% { transform: translate(0,0) rotate(0); } 25% { transform: translate(-2px,1px) rotate(-4deg); } 50% { transform: translate(-4px,0) rotate(0); } 75% { transform: translate(-2px,-1px) rotate(4deg); } }
.illu .ill-scribble { stroke-dasharray: 40; stroke-dashoffset: 0; }
.group:hover .ill-scribble, .hero-ico:hover .ill-scribble { animation: scribble 1.6s ease-in-out infinite; }
@keyframes scribble { 0% { stroke-dashoffset: 40; } 60%,100% { stroke-dashoffset: 0; } }
.illu .ill-page { transform-origin: 0% 50%; }
.group:hover .ill-page, .hero-ico:hover .ill-page { animation: flip 1.6s ease-in-out infinite; }
@keyframes flip { 0%,20% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 80%,100% { transform: scaleX(1); } }
.group:hover .ill-glass { animation: peek 1.6s ease-in-out infinite; }
@keyframes peek { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-4px,-3px); } }
.group:hover .ill-top, .hero-ico:hover .ill-top { animation: lift 1.2s ease-in-out infinite; }
@keyframes lift { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-3deg); } }
.group:hover .ill-mark { animation: lift 1.2s .2s ease-in-out infinite; }
.group:hover .ill-bubble .d1, .hero-ico:hover .d1 { animation: dot .9s ease-in-out infinite; }
.group:hover .ill-bubble .d2, .hero-ico:hover .d2 { animation: dot .9s .15s ease-in-out infinite; }
.group:hover .ill-bubble .d3, .hero-ico:hover .d3 { animation: dot .9s .3s ease-in-out infinite; }
@keyframes dot { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.illu .ill-mic { transform-origin: 50% 100%; }
.group:hover .ill-mic { animation: sway 1.4s ease-in-out infinite; }
@keyframes sway { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-7deg); } }
.group:hover .ill-b1, .hero-ico:hover .ill-b1 { animation: dot 1.2s ease-in-out infinite; }
.group:hover .ill-b2, .hero-ico:hover .ill-b2 { animation: dot 1.2s .6s ease-in-out infinite; }
.illu .leaf { animation: leaf 5s ease-in-out infinite; }
.illu .leaf.l1, .illu .leaf.l3 { transform-origin: 100% 100%; } .illu .leaf.l2, .illu .leaf.l4 { transform-origin: 0% 100%; animation-delay: -2.5s; }
@keyframes leaf { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-5deg); } }
.group:hover .leaf { animation-duration: 1.4s; }
.illu .canopy { transform-origin: 50% 100%; animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.illu .fruit { transform-origin: center; }
.group:hover .fruit { animation: pop 1.2s ease-in-out infinite; } .group:hover .fruit:nth-of-type(2n) { animation-delay: .3s; }
@keyframes pop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); } }

/* grade cards */
.grade-card { position: relative; display: block; overflow: hidden; border-radius: 32px; padding: 1.6rem 1.5rem 1.5rem; min-height: 16rem; color: var(--ink);
  background: linear-gradient(160deg, var(--c3) 0%, #FFFDF9 85%); border: 1.5px solid color-mix(in srgb, var(--c1) 55%, white);
  box-shadow: 0 22px 44px -30px var(--c2); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
.grade-card:hover { transform: translateY(-8px); box-shadow: 0 32px 56px -30px var(--c2); }
.grade-card:active { transform: translateY(-2px) scale(.99); }
.gc-letter { position: absolute; left: .4rem; bottom: -3.6rem; font-family: "Secular One", sans-serif; font-size: 13rem; line-height: 1; color: var(--c1); opacity: .28; transition: transform .7s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.grade-card:hover .gc-letter { transform: rotate(-6deg) scale(1.06); }
.gc-art { position: absolute; left: .9rem; top: .9rem; width: 8.6rem; height: 8.6rem; padding: .5rem; border-radius: 46% 54% 58% 42% / 48% 42% 58% 52%; background: color-mix(in srgb, var(--c1) 30%, white); box-shadow: inset 0 0 0 6px rgba(255,255,255,.6); transition: border-radius .8s, transform .5s cubic-bezier(.2,.8,.2,1); }
.grade-card:hover .gc-art { border-radius: 56% 44% 42% 58% / 52% 58% 42% 48%; transform: scale(1.05) rotate(-3deg); }
.grade-card > .relative { max-width: calc(100% - 8.4rem); }
.gc-stage { display: inline-block; border-radius: 9999px; background: #fff; color: var(--c2); font-weight: 800; font-size: .85rem; padding: .2rem .75rem; box-shadow: 0 4px 12px -8px var(--c2); }
.gc-go { margin-top: 1.6rem; display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; background: var(--c2); color: #fff; font-weight: 800; border-radius: 9999px; padding: .55rem 1.1rem; box-shadow: 0 10px 20px -12px var(--c2); }
.gc-go .arrow, .cc-arrow { display: inline-block; transition: transform .3s; }
.grade-card:hover .arrow { transform: translateX(-6px); }

/* grade dashboard + category header */
.grade-hero, .cat-hero { background: linear-gradient(135deg, var(--c3), #FFFDF9 80%); border: 1.5px solid color-mix(in srgb, var(--c1) 50%, white); box-shadow: 0 26px 50px -36px var(--c2); }
.gh-letter { position: absolute; left: 1rem; top: -2.5rem; font-family: "Secular One", sans-serif; font-size: 12rem; line-height: 1; color: var(--c1); opacity: .3; animation: drift 14s ease-in-out infinite; }
@media (min-width: 640px) { .gh-letter { font-size: 17rem; top: -4rem; left: 3rem; } }
.gh-art { width: 6.5rem; height: 6.5rem; padding: .4rem; border-radius: 46% 54% 58% 42% / 48% 42% 58% 52%; background: color-mix(in srgb, var(--c1) 32%, white); box-shadow: inset 0 0 0 6px rgba(255,255,255,.6); }
@media (min-width: 640px) { .gh-art { width: 10rem; height: 10rem; } }
.grade-hero .hero-title { line-height: 1.05; }
.grade-switch { border-radius: 9999px; padding: .4rem 1rem; font-weight: 700; font-size: .95rem; background: rgba(255,255,255,.75); border: 1.5px solid color-mix(in srgb, var(--c1) 60%, white); color: var(--ink); transition: all .25s; }
.grade-switch:hover { background: #fff; border-color: var(--c2); }
.grade-switch.on { background: var(--c2); border-color: var(--c2); color: #fff; }
.ch-ico { width: 5.2rem; height: 5.2rem; padding: .55rem; border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%; background: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--c1) 35%, transparent), 0 16px 30px -18px var(--c2); animation: bob 6s ease-in-out infinite; }
@media (min-width: 640px) { .ch-ico { width: 7.5rem; height: 7.5rem; padding: .8rem; } }
.cat-hero:hover .ill-waves .w1 { animation: wave 1.1s ease-in-out infinite; } .cat-hero:hover .ill-waves .w2 { animation: wave 1.1s .25s ease-in-out infinite; }
.cat-hero { --anim: 1; }
.cat-card { position: relative; display: flex; align-items: center; gap: 1.1rem; overflow: hidden; border-radius: 28px; padding: 1.25rem 1.2rem; background: #FFFEFB;
  border: 1.5px solid color-mix(in srgb, var(--c1) 35%, white); box-shadow: 0 14px 32px -24px rgba(47,42,62,.5); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s; }
.cat-card::after { content: ""; position: absolute; width: 190px; height: 190px; border-radius: 9999px; left: -80px; bottom: -100px; background: var(--c3); transition: transform .6s; z-index: 0; }
.cat-card:hover { transform: translateY(-7px); border-color: var(--c1); box-shadow: 0 26px 46px -28px var(--c2); }
.cat-card:hover::after { transform: scale(1.5); }
.cat-card > .relative { z-index: 1; }
.cc-icon { position: relative; z-index: 1; flex-shrink: 0; width: 5.4rem; height: 5.4rem; padding: .6rem; border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%; background: var(--c3); box-shadow: inset 0 0 0 4px rgba(255,255,255,.7); transition: transform .45s cubic-bezier(.2,.8,.2,1), border-radius .8s; }
@media (min-width: 640px) { .cc-icon { width: 6rem; height: 6rem; } }
.cat-card:hover .cc-icon { transform: scale(1.08); border-radius: 55% 45% 42% 58% / 45% 55% 45% 55%; background: color-mix(in srgb, var(--c1) 40%, white); }
.cc-count { font-size: .8rem; font-weight: 800; border-radius: 9999px; padding: .2rem .7rem; color: var(--c2); background: var(--c3); white-space: nowrap; }
.cc-count:empty { visibility: hidden; }
.cc-arrow { font-size: 1.3rem; font-weight: 800; color: var(--c2); }
.cat-card:hover .cc-arrow { transform: translateX(-6px); }
.cat-mini { text-align: center; border-radius: 24px; padding: 1.1rem .8rem 1rem; background: #FFFEFB; border: 1.5px solid color-mix(in srgb, var(--c1) 35%, white); box-shadow: 0 12px 26px -22px rgba(47,42,62,.5); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.cat-mini:hover { transform: translateY(-5px); }
.cm-ico { display: block; margin: 0 auto; width: 4.4rem; height: 4.4rem; padding: .5rem; border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%; background: var(--c3); }

/* category page */
.crumb:hover { text-decoration: underline; }
.cat-tab { white-space: nowrap; border-radius: 9999px; padding: .45rem 1rem; font-size: .9rem; font-weight: 700; background: #fff; color: var(--ink); border: 2px solid color-mix(in srgb, var(--t) 22%, white); transition: all .2s; }
.cat-tab:hover { border-color: var(--t); color: var(--t); }
.cat-tab.on { background: var(--t); border-color: var(--t); color: #fff; box-shadow: 0 8px 18px -10px var(--t); }
.item-card { background: #FFFEFB; border: 1px solid rgba(47,42,62,.07); border-inline-start: 6px solid var(--cat, #8E5A86); box-shadow: 0 14px 30px -24px rgba(47,42,62,.45); transition: transform .3s, box-shadow .3s; }
.item-card:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -24px rgba(47,42,62,.5); }
.item-ico { background: linear-gradient(140deg, var(--c2, #8E5A86), color-mix(in srgb, var(--c2, #8E5A86) 70%, #2F2A3E)); box-shadow: 0 8px 18px -10px var(--c2, #8E5A86); }
.item-card .prose-text.bg-white\/70, .item-card .bg-white\/70 { background: var(--c3, #F7F2EA); }
.item-card a.bg-white\/80 { background: var(--c3, #F7F2EA); }
.item-card a.bg-white\/80:hover { background: color-mix(in srgb, var(--c1, #D7A6CF) 35%, white); }
.empty-card { background: linear-gradient(180deg, #FFFEFB, var(--c3, #F7F2EA)); }
.empty-art { width: 10.5rem; height: 10.5rem; }

/* generic */
.glass-card { background: #FFFEFB; border: 1px solid rgba(47,42,62,.08); box-shadow: 0 14px 30px -24px rgba(47,42,62,.45); }
.lift { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -20px rgba(47,42,62,.3); }
.view-enter { animation: viewIn .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.stagger > * { animation: popIn .7s cubic-bezier(.2,.9,.3,1.08) both; }
@keyframes popIn { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
.stagger > *:nth-child(2) { animation-delay: .08s } .stagger > *:nth-child(3) { animation-delay: .16s }
.stagger > *:nth-child(4) { animation-delay: .24s } .stagger > *:nth-child(5) { animation-delay: .32s } .stagger > *:nth-child(6) { animation-delay: .4s }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 9999px; padding: .7rem 1.3rem; font-weight: 700; transition: all .25s; }
.btn-primary { background: linear-gradient(135deg, #8E5A86, #5F76A6); color: #fff; box-shadow: 0 12px 22px -14px rgba(110,74,112,.9); }
.btn-primary:hover { filter: brightness(1.07); transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(110,74,112,.9); }
.btn-primary:disabled { opacity: .6; cursor: wait; }
.btn-white { background: #fff; color: var(--plum-d); font-weight: 800; font-size: 1.05rem; padding: .85rem 1.6rem; box-shadow: 0 14px 28px -16px rgba(47,42,62,.6); }
.btn-white:hover { transform: translateY(-3px); }
.btn-ghost { display: inline-flex; align-items: center; gap: .4rem; border-radius: 9999px; padding: .5rem 1rem; font-weight: 700; font-size: .9rem; background: #fff; color: var(--ink); border: 2px solid rgba(142,90,134,.2); transition: all .25s; }
.btn-ghost:hover { border-color: var(--plum); color: var(--plum-d); box-shadow: 0 8px 18px -12px rgba(110,74,112,.6); }
#adminBtn { background: linear-gradient(135deg, #8E5A86, #5F76A6); color: #fff; border-color: transparent; box-shadow: 0 8px 18px -12px rgba(110,74,112,.9); }
#adminBtn:hover { filter: brightness(1.08); color: #fff; transform: translateY(-1px); }
.icon-btn { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: #F5EEF3; border: 1px solid rgba(47,42,62,.08); transition: all .2s; }
.icon-btn:hover { background: #EDE0EA; transform: scale(1.08); }
.icon-btn.danger:hover { background: #fbe9e7; color: #b23a2c; }
:focus-visible { outline: 3px solid #6F82B4; outline-offset: 3px; border-radius: 12px; }
.field { width: 100%; border-radius: 14px; border: 2px solid rgba(47,42,62,.12); background: #fff; padding: .7rem .9rem; transition: border-color .2s, box-shadow .2s; }
.field:focus { outline: none; border-color: var(--plum); box-shadow: 0 0 0 4px rgba(142,90,134,.16); }
.seg { display: flex; background: #F4EEF2; border-radius: 9999px; padding: 4px; gap: 4px; }
.seg button { flex: 1; border-radius: 9999px; padding: .5rem .25rem; font-weight: 700; font-size: .92rem; transition: all .2s; color: rgba(47,42,62,.7); }
.seg button[aria-pressed="true"] { background: linear-gradient(135deg, #8E5A86, #5F76A6); color: #fff; box-shadow: 0 6px 14px -8px rgba(110,74,112,.8); }
.modal-backdrop { position: fixed; inset: 0; background: rgba(47,42,62,.45); backdrop-filter: blur(4px); z-index: 50; display: flex; align-items: flex-end; justify-content: center; animation: fadeIn .2s both; }
@media (min-width: 640px) { .modal-backdrop { align-items: center; padding: 1.5rem; } }
.modal-panel { width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; border-radius: 28px 28px 0 0; background: #FFFEFB; border-top: 6px solid #C9A0C2; animation: slideUp .3s cubic-bezier(.2,.8,.2,1) both; }
@media (min-width: 640px) { .modal-panel { border-radius: 28px; } }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { transform: translateY(30px); opacity: 0 } to { transform: none; opacity: 1 } }
.toast { position: fixed; bottom: 1.25rem; left: 50%; transform: translate(-50%, 140%); background: linear-gradient(135deg, #8E5A86, #5F76A6); color: #fff; padding: .75rem 1.3rem; border-radius: 9999px; font-weight: 600; z-index: 60; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s; max-width: 92vw; text-align: center; opacity: 0; pointer-events: none; box-shadow: 0 12px 26px -14px rgba(110,74,112,.8); }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.prose-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
.prose-text a { color: #4E73A6; text-decoration: underline; }
.progress { height: 8px; border-radius: 9999px; background: rgba(47,42,62,.08); overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #D7A6CF, #A9C5E8, #BCD99A); transition: width .2s; }
.drop { border: 2px dashed rgba(142,90,134,.45); border-radius: 18px; transition: all .2s; }
.drop.over { background: rgba(142,90,134,.07); border-color: var(--plum); }
.fab { position: fixed; bottom: 1.25rem; left: 1.25rem; z-index: 40; }
.pdf-frame { width: 100%; height: 70vh; min-height: 420px; border: 0; border-radius: 16px; background: #f4f4f6; }
.skeleton { background: linear-gradient(90deg, #F2EBE3, #FFFDF9, #F2EBE3); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 20px; }
@keyframes shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }
.site-footer { position: relative; background: linear-gradient(120deg, #5A4A6E, #4A5878); margin-top: 4.5rem; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -47px; height: 48px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 28c180-30 360-30 540-8s360 30 540 6 270-26 360-14v36H0z' fill='%235A4A6E'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.site-footer img { box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* multi-attachment editor + display */
.att-row { display: grid; gap: .45rem; padding: .75rem; border-radius: 16px; background: #FBF6F9; border: 1px solid rgba(142,90,134,.16); min-width: 0; }
.att-kind { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .9rem; color: var(--plum-d); }
.field-sm { padding: .5rem .75rem; font-size: .9rem; border-radius: 12px; }
.add-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.add-btn { display: inline-flex; align-items: center; gap: .35rem; border-radius: 9999px; padding: .55rem 1rem; font-weight: 700; font-size: .9rem; color: var(--plum-d); background: #fff; border: 2px dashed rgba(142,90,134,.4); transition: all .2s; }
.add-btn:hover, .add-btn.over { border-color: var(--plum); background: rgba(142,90,134,.07); }
.add-btn:focus-within { outline: 3px solid rgba(142,90,134,.3); outline-offset: 2px; }
.att + .att { padding-top: .75rem; border-top: 1px dashed rgba(47,42,62,.1); }
.att-label { display: inline-block; margin-bottom: .4rem; font-size: .78rem; font-weight: 700; padding: .15rem .65rem; border-radius: 9999px; background: var(--c3, #F3ECF2); color: var(--c2, #73496F); border: 1px solid color-mix(in srgb, var(--c2, #8E5A86) 25%, transparent); }