/* SiMARCO — tema colorful: indigo-violet + oranye-pink dengan aksen pelangi. */
:root {
    --ink-950: #140F3A; --ink-900: #1E1B4B; --ink-800: #3730A3; --ink-700: #4338CA; --ink-600: #4F46E5; --ink-500: #6366F1; --ink-100: #E0E7FF; --ink-50: #EEF2FF;
    --brand: #FF6B00; --brand-400: #FF8A33; --brand-50: #FFF4EB;
    --pink: #EC4899; --violet: #8B5CF6; --sky: #0EA5E9; --teal: #14B8A6; --emerald: #10B981; --amber: #F59E0B; --rose: #F43F5E;
    --line: #E6E8F5;
    --rainbow: linear-gradient(90deg, #F43F5E, #F97316, #FACC15, #22C55E, #0EA5E9, #6366F1, #A855F7);
}

body { font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; }
.app-bg {
    background:
        radial-gradient(900px 420px at 0% 0%, rgba(236, 72, 153, .10), transparent 60%),
        radial-gradient(800px 420px at 100% 10%, rgba(14, 165, 233, .12), transparent 60%),
        radial-gradient(900px 500px at 50% 100%, rgba(250, 204, 21, .10), transparent 60%),
        #F7F7FF;
    background-attachment: fixed;
}
.app-header { background: linear-gradient(110deg, #312E81 0%, #6D28D9 45%, #C026D3 75%, #EC4899 100%); box-shadow: 0 10px 30px -18px rgba(109, 40, 217, .9); }
.app-footer { background: linear-gradient(110deg, #1E1B4B, #4C1D95 60%, #831843); }
.rainbow-bar, .brand-bar { height: 4px; background: var(--rainbow); }
.nav-active { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.logo-badge { background: linear-gradient(135deg, #FACC15, #F97316 50%, #EC4899); box-shadow: 0 8px 20px -8px rgba(249, 115, 22, .9); }
.logo-text { background: linear-gradient(90deg, #FDE047, #FDBA74, #F9A8D4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-h1 { background: linear-gradient(90deg, #4338CA, #9333EA 50%, #DB2777); -webkit-background-clip: text; background-clip: text; color: transparent; }

.card { background: #fff; border: 1px solid var(--line); border-radius: 1.1rem; box-shadow: 0 1px 2px rgba(30, 27, 75, .05), 0 14px 30px -22px rgba(79, 70, 229, .45); }
.card-top { position: relative; overflow: hidden; }
.card-top::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--top, var(--rainbow)); }

.input { width: 100%; border: 1.5px solid #DADDF0; background: #fff; border-radius: .7rem; padding: .6rem .8rem; font-size: .875rem; outline: none; transition: border-color .15s, box-shadow .15s; }
.input:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(139, 92, 246, .18); }
textarea.input { line-height: 1.55; }
.label { display: block; font-size: .72rem; font-weight: 800; color: var(--ink-700); margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .06em; }
.hint { font-size: .75rem; color: #64748B; margin-top: .3rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: .7rem; font-size: .875rem; font-weight: 700; transition: background .15s, color .15s, border-color .15s, box-shadow .15s, filter .15s, transform .15s; cursor: pointer; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-sm { padding: .4rem .75rem; font-size: .8rem; }
.btn-primary { background: linear-gradient(135deg, #F97316, #EC4899 60%, #A855F7); color: #fff; box-shadow: 0 10px 20px -10px rgba(236, 72, 153, .9); }
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 12px 24px -10px rgba(168, 85, 247, .9); }
.btn-dark { background: linear-gradient(135deg, #4F46E5, #7C3AED); color: #fff; box-shadow: 0 8px 18px -10px rgba(79, 70, 229, .9); }
.btn-dark:hover { filter: brightness(1.1); }
.btn-light { background: #fff; color: var(--ink-700); border: 1.5px solid #DADDF0; }
.btn-light:hover { border-color: var(--violet); background: #F5F3FF; color: #6D28D9; }
.btn-danger { background: #fff; color: #E11D48; border: 1.5px solid #FECDD3; }
.btn-danger:hover { background: #FFF1F2; border-color: #FB7185; }

.table { width: 100%; font-size: .875rem; }
.table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #fff; font-weight: 800; padding: .7rem .9rem; background: linear-gradient(90deg, #4F46E5, #7C3AED 55%, #DB2777); }
.table td { padding: .7rem .9rem; border-bottom: 1px solid #EEF0FA; vertical-align: top; }
.table tbody tr:nth-child(even) { background: #FAFAFF; }
.table tbody tr:hover { background: #FDF4FF; }

/* Kartu statistik berwarna */
.tile { border-radius: 1rem; padding: 1rem 1.15rem; color: #fff; position: relative; overflow: hidden; box-shadow: 0 14px 28px -18px rgba(0, 0, 0, .55); transition: transform .15s, filter .15s; display: block; }
.tile:hover { transform: translateY(-2px); filter: brightness(1.05); }
.tile::after { content: ''; position: absolute; right: -24px; top: -24px; width: 90px; height: 90px; border-radius: 999px; background: rgba(255, 255, 255, .16); }
.tile i.big { position: absolute; right: 14px; bottom: 10px; font-size: 2rem; opacity: .28; }
.tile-sky { background: linear-gradient(135deg, #0EA5E9, #6366F1); }
.tile-violet { background: linear-gradient(135deg, #8B5CF6, #EC4899); }
.tile-amber { background: linear-gradient(135deg, #F59E0B, #F43F5E); }
.tile-emerald { background: linear-gradient(135deg, #10B981, #0EA5E9); }
.tile-orange { background: linear-gradient(135deg, #F97316, #FACC15); }

/* Langkah pada formulir analisis */
.step-num { width: 2.2rem; height: 2.2rem; border-radius: .8rem; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .95rem; flex-shrink: 0; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .5); }
.step-1 { background: linear-gradient(135deg, #0EA5E9, #6366F1); }
.step-2 { background: linear-gradient(135deg, #F97316, #EC4899); }
.step-3 { background: linear-gradient(135deg, #8B5CF6, #D946EF); }
.step-4 { background: linear-gradient(135deg, #10B981, #14B8A6); }
.choice { display: block; border: 1.5px solid #DADDF0; border-radius: .9rem; padding: .85rem 1rem; cursor: pointer; background: #fff; transition: border-color .15s, background .15s, box-shadow .15s, transform .15s; --c: #8B5CF6; --cbg: #F5F3FF; }
.choice:hover { border-color: var(--c); transform: translateY(-1px); }
.choice:has(input:checked) { border-color: var(--c); background: var(--cbg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.choice input { accent-color: var(--c); }
.choice-sky { --c: #0EA5E9; --cbg: #F0F9FF; }
.choice-violet { --c: #8B5CF6; --cbg: #F5F3FF; }
.choice-amber { --c: #F59E0B; --cbg: #FFFBEB; }
.choice-emerald { --c: #10B981; --cbg: #ECFDF5; }
.choice-pink { --c: #EC4899; --cbg: #FDF2F8; }

/* IRAC */
.irac-chip { display: inline-flex; width: 1.7rem; height: 1.7rem; border-radius: .5rem; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; color: #fff; flex-shrink: 0; }

/* Hasil analisis (Markdown) */
.memo { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.02rem; line-height: 1.75; color: #1E293B; }
.memo h1, .memo h2, .memo h3, .memo h4 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--ink-900); line-height: 1.3; }
.memo h1 { font-size: 1.4rem; font-weight: 800; margin: 1.2rem 0 .6rem; }
.memo h2 { font-size: 1.12rem; font-weight: 800; margin: 2rem 0 .8rem; padding: .6rem .95rem; color: #fff; border-radius: .7rem; background: linear-gradient(90deg, #6366F1, #8B5CF6); box-shadow: 0 10px 20px -14px rgba(79, 70, 229, .9); }
.memo h2.irac-S { background: linear-gradient(90deg, #F97316, #EC4899); }
.memo h2.irac-I { background: linear-gradient(90deg, #0EA5E9, #6366F1); }
.memo h2.irac-R { background: linear-gradient(90deg, #7C3AED, #D946EF); }
.memo h2.irac-A { background: linear-gradient(90deg, #F59E0B, #F97316); }
.memo h2.irac-C { background: linear-gradient(90deg, #10B981, #14B8A6); }
.memo h2:first-child { margin-top: 0; }
.memo h3 { font-size: 1.02rem; font-weight: 800; margin: 1.3rem 0 .5rem; color: #6D28D9; }
.memo p { margin: .65rem 0; }
.memo ul, .memo ol { margin: .6rem 0 .6rem 1.4rem; }
.memo ul { list-style: disc; }
.memo ol { list-style: decimal; }
.memo li { margin: .25rem 0; }
.memo li::marker { color: #A855F7; font-weight: 700; }
.memo strong { color: #312E81; }
.memo blockquote { border-left: 4px solid #F472B6; background: #FDF2F8; padding: .5rem 1rem; color: #4A044E; margin: .8rem 0; border-radius: 0 .5rem .5rem 0; font-style: italic; }
.memo table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: .85rem; overflow: hidden; border-radius: .6rem; }
.memo th, .memo td { border: 1px solid #E4E2F7; padding: .45rem .6rem; text-align: left; vertical-align: top; }
.memo th { background: linear-gradient(90deg, #EEF2FF, #FAE8FF); font-weight: 800; color: #3730A3; }
.memo tr:nth-child(even) td { background: #FAFAFF; }
.memo code { font-size: .85em; background: #F5F3FF; color: #6D28D9; padding: .1rem .3rem; border-radius: .25rem; }
.memo a { color: #7C3AED; text-decoration: underline; }
.memo hr { margin: 1.5rem 0; border-color: #E9D5FF; }
.memo sup.cite a { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .68rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #8B5CF6, #EC4899); border-radius: 999px; padding: 0 .4rem; margin-left: 1px; text-decoration: none; }
.memo sup.cite a:hover { filter: brightness(1.15); }
.memo a.docref { display: inline-block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .7rem; font-weight: 800; line-height: 1.5; color: #fff; text-decoration: none; background: linear-gradient(135deg, #F97316, #EC4899); border-radius: 999px; padding: 0 .5rem; margin: 0 1px; vertical-align: 2px; white-space: nowrap; }
.memo a.docref:hover { filter: brightness(1.12); }
.doc-code { display: inline-block; font-size: .65rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #F97316, #EC4899); border-radius: 999px; padding: 0 .4rem; height: fit-content; }
.source-item:target { background: #FDF4FF; box-shadow: 0 0 0 2px #E879F9; }
.src-num { background: linear-gradient(135deg, #8B5CF6, #EC4899); }

.bubble-user { background: linear-gradient(135deg, #4F46E5, #9333EA 60%, #DB2777); color: #fff; border-radius: 1.1rem 1.1rem .3rem 1.1rem; box-shadow: 0 10px 22px -14px rgba(147, 51, 234, .9); }

.ref-strip { border-left: 5px solid var(--strip, #8B5CF6); }

@keyframes pulse-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.loading-bar { position: relative; overflow: hidden; height: 6px; border-radius: 999px; background: #EDE9FE; }
.loading-bar::after { content: ''; position: absolute; inset: 0; width: 45%; background: var(--rainbow); animation: pulse-bar 1.6s ease-in-out infinite; border-radius: 999px; }

@media print {
    .no-print { display: none !important; }
    body, .app-bg { background: #fff !important; }
    .card { box-shadow: none !important; border: none !important; }
    main { max-width: none !important; padding: 0 !important; }
    .memo { font-size: 11pt; }
    .memo h2 { break-after: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}