:root{color-scheme:light;--ink:#171b20;--muted:#525b65;--line:#d9dee3;--paper:#f4f5f6;--white:#fff;--focus:#334d65}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 Arial,Helvetica,sans-serif}a{color:inherit;text-underline-offset:3px}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}h1,h2,p{margin-top:0}h1{font-size:clamp(2rem,3vw,2.7rem);line-height:1.2;letter-spacing:-.035em}h2{font-size:1.25rem;line-height:1.35}.kicker{color:var(--muted);font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.brand{font-size:.9rem;font-weight:800;line-height:1.35;letter-spacing:.025em;text-decoration:none}.brand small{font-size:.65rem;font-weight:600;color:var(--muted)}.public-header{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:24px max(32px,calc((100vw - 1200px)/2));border-bottom:1px solid var(--line);background:var(--white)}nav{display:flex;gap:25px;flex-wrap:wrap}nav a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none}nav a:hover{text-decoration:underline}.public-main{max-width:1200px;margin:auto;padding:0 32px}.hero{padding:clamp(60px,9vw,140px) 0;max-width:850px;margin-inline:auto;text-align:center}.hero h1{font-size:clamp(3.5rem,9vw,8rem);line-height:.98;letter-spacing:-.065em}.hero h1 span{-webkit-text-stroke:2px var(--ink);color:transparent}.hero>p:not(.kicker){max-width:640px;font-size:1.18rem;margin-inline:auto}.button{background:var(--ink);color:var(--white);border:1px solid var(--ink);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;text-decoration:none;font:inherit;font-weight:700;cursor:pointer}.button:hover{background:#303942}.info{border-top:1px solid var(--line);padding:36px 0;max-width:760px}.auth-card{width:min(100%,440px);margin:70px auto;padding:36px;background:var(--white);border:1px solid var(--line);border-radius:10px}.auth-card form,.panel form{display:grid;gap:8px;max-width:520px}.panel form input{font:inherit;min-height:44px;padding:9px 12px;border:1px solid #7a8590;border-radius:5px;margin-bottom:12px}.auth-card input{font:inherit;min-height:44px;padding:9px 12px;border:1px solid #7a8590;border-radius:5px;margin-bottom:12px}.auth-card .button{margin-top:10px}.notice{border:1px solid #575f67;padding:12px;border-radius:5px}.shell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}
/* Sidebar fixed: hanya konten yang scroll. */
.sidebar{background:var(--white);border-right:1px solid var(--line);padding:34px 22px;display:flex;flex-direction:column;gap:38px;position:sticky;top:0;height:100vh;overflow-y:auto;flex-shrink:0}.sidebar nav{display:grid;gap:6px}.sidebar nav a{padding:6px 10px;border-radius:5px}.sidebar nav a:hover{background:var(--paper)}.text-button{border:0;background:none;padding:10px;font:inherit;cursor:pointer;color:var(--ink);text-align:left;min-height:44px}.text-button:hover{text-decoration:underline}.content{width:100%;min-width:0;padding:50px clamp(20px,5vw,72px)}.page-header{margin-bottom:38px}.page-header p:last-child{color:var(--muted)}.panel{border:1px solid var(--line);background:var(--white);border-radius:10px;padding:28px;margin-bottom:20px}.panel p{color:var(--muted)}.steps{display:flex;flex-wrap:wrap;gap:12px;padding:0;list-style:none}table{border-collapse:collapse;width:100%;margin:20px 0}caption{text-align:left;font-weight:700;margin-bottom:8px}th,td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;overflow-wrap:anywhere}thead th{background:var(--paper);color:var(--ink);font-size:.78rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border-bottom:2px solid #aab3bc;white-space:nowrap;line-height:1.3;vertical-align:bottom}table caption{font-size:.95rem}table{min-width:820px}th:nth-child(1),td:nth-child(1){min-width:320px}th:nth-child(2),td:nth-child(2){min-width:104px}th:nth-child(3),td:nth-child(3){min-width:76px}th:nth-child(4),td:nth-child(4){min-width:80px}th:nth-child(5),td:nth-child(5){min-width:84px}th:nth-child(6),td:nth-child(6){min-width:186px}td:nth-child(2),td:nth-child(3),td:nth-child(4),td:nth-child(5){white-space:nowrap}td select{min-width:104px}table form{gap:6px}.filters{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin:22px 0 12px;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.filters label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.filters input,.filters select{font:inherit;min-height:44px;padding:9px 12px;border:1px solid #7a8590;border-radius:5px;background:var(--white)}.filters input[type=search]{min-width:260px;flex:1}.result-count{color:var(--muted);font-size:.9rem}.pagination{display:flex;align-items:center;gap:14px;margin-top:16px}.page-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid #7a8590;border-radius:5px;text-decoration:none}.page-link[aria-disabled=true]{opacity:.45;pointer-events:none}tbody tr:nth-child(even){background:#fafbfc}tbody tr:hover{background:#f2f4f6}table form{display:flex;flex-wrap:wrap;gap:8px}select,textarea{font:inherit;padding:9px 12px;border:1px solid #7a8590;border-radius:5px;max-width:100%}button{min-height:44px;cursor:pointer}.panel{overflow-x:auto}.steps li{border:1px solid var(--line);padding:10px 16px;border-radius:5px}/* Tombol hamburger sidebar: hanya tampil mobile (≤760px), 44px tap target. */
.sidebar-toggle{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px;border:1px solid var(--color-primary-border);border-radius:10px;background:var(--color-surface);cursor:pointer}
.sidebar-toggle-bar{width:20px;height:2px;border-radius:2px;background:var(--color-text)}
.sidebar-toggle:hover{background:#FFF0F4;border-color:var(--color-primary)}
.sidebar-toggle:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}
.sidebar-backdrop{position:fixed;inset:0;z-index:40;background:rgba(23,25,32,.45);backdrop-filter:blur(2px)}
@media(max-width:760px){
  .sidebar-toggle{display:flex;position:fixed;top:14px;right:14px;z-index:60;box-shadow:0 2px 8px rgba(76,42,48,.08)}
  .sidebar{position:fixed;top:0;left:0;bottom:0;z-index:50;width:min(78vw,300px);height:100dvh;transform:translateX(-100%);transition:transform var(--motion-normal) var(--ease-standard);overflow-y:auto}
  .sidebar.drawer-open{transform:translateX(0);box-shadow:0 18px 40px rgba(76,42,48,.18)}
  .content{padding:70px 20px 30px}
}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}.progress-dialog{border:1px solid var(--line);border-radius:10px;padding:26px;max-width:min(92vw,460px);background:var(--white);color:var(--ink);box-shadow:0 18px 40px rgba(23,27,32,.18)}.progress-dialog::backdrop{background:rgba(23,27,32,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.progress-dialog h2{margin-bottom:8px}.progress-dialog p{color:var(--muted);margin-bottom:14px}.progress-dialog progress{width:100%;height:14px;margin-bottom:16px;accent-color:var(--focus)}.progress-dialog form{margin:0}.progress-dialog button{min-height:44px;padding:8px 18px;border:1px solid #7a8590;border-radius:5px;background:var(--white);font:inherit;cursor:pointer}.progress-dialog button:disabled{opacity:.5;cursor:not-allowed}.dashboard-cards{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(280px,1.8fr) minmax(170px,1fr) minmax(180px,1fr);gap:18px;margin-bottom:28px}.dashboard-card{min-width:0;padding:24px;background:var(--white);border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;align-items:flex-start}.dashboard-card p{margin-bottom:14px;color:var(--muted);font-size:.85rem;font-weight:700}.dashboard-card strong{display:block;max-width:100%;margin-bottom:8px;font-size:1.45rem;line-height:1.25;overflow-wrap:anywhere}.dashboard-card>span{margin-top:auto;color:var(--muted);font-size:.85rem}.dashboard-card-action .button{margin-bottom:10px}.dashboard-card-name strong{font-size:1rem}@media(max-width:1100px){.dashboard-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.dashboard-cards{grid-template-columns:1fr;gap:14px}.dashboard-card{padding:20px}}.dashboard-detail-grid{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.4fr);gap:20px}.dashboard-detail-grid .panel{margin:0}.chart-wrap{height:290px;position:relative}.chart-fallback{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;padding:0;list-style:none;color:var(--muted);font-size:.85rem}.preview-table-wrap{max-height:390px;overflow:auto}.preview-table{min-width:0;margin:0}.preview-table th:first-child,.preview-table td:first-child{min-width:260px}.preview-table th:nth-child(2),.preview-table td:nth-child(2){min-width:112px;white-space:nowrap}.upload-dialog{width:min(92vw,620px);max-height:90vh;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:28px;background:var(--white);color:var(--ink);box-shadow:0 20px 54px rgba(23,27,32,.24)}.upload-dialog::backdrop{background:rgba(23,27,32,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.upload-dialog-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.upload-dialog-header h2{margin-bottom:8px}.dialog-close{width:44px;min-width:44px;border:1px solid var(--line);border-radius:6px;background:var(--white);font-size:1.4rem}.upload-dialog form{display:grid;gap:8px}.upload-dialog input{font:inherit;min-height:44px;padding:9px 12px;border:1px solid #7a8590;border-radius:5px;margin-bottom:12px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}.dialog-actions button{padding:9px 18px;border:1px solid #7a8590;border-radius:6px;background:var(--white);font:inherit}.dialog-actions .button{background:#171b20;color:#fff;border-color:#171b20}.dialog-actions .button:hover{background:#303942;color:#fff;border-color:#303942}@media(max-width:900px){.dashboard-detail-grid{grid-template-columns:1fr}}@media(max-width:620px){.upload-dialog{padding:20px}.dialog-actions{flex-direction:column-reverse}.dialog-actions button{width:100%}}.preprocessing-stages{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:24px;margin:18px 0 28px;padding:0;list-style:none}.preprocessing-stages li{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;font-weight:700;line-height:1.35}.stage-icon{width:72px;height:72px;display:grid;place-items:center;border:2px solid var(--focus);border-radius:50%;background:var(--paper);color:var(--focus)}.stage-icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}@media(max-width:760px){.preprocessing-stages{grid-template-columns:repeat(2,minmax(120px,1fr));gap:22px 16px}}

/* Color and interaction refresh. Layout values intentionally remain unchanged. Superseded palette values now resolve through the warm pastel tokens below. */
:root{--color-primary:#F52D70;--color-primary-soft:#FF8D9F;--color-pink-blush:#FBD9CE;--color-lime-soft:#FAFFCB;--color-primary-hover:#DE1F60;--color-primary-active:#C92760;--color-primary-tint:rgba(245,45,112,.09);--color-primary-border:rgba(245,45,112,.25);--color-text:#17191F;--color-muted:#77747A;--color-surface:#FFF;--color-page:#FFF5F3;--color-border:#F1E4E2;--color-peach:#FBD9CE;--color-coral:#FF8D9F;--color-orange:#FFC18C;--focus:#F52D70;--shadow-brand:0 8px 22px rgba(245,45,112,.18);--shadow-soft:0 8px 24px rgba(76,42,48,.08);--motion-fast:150ms;--motion-normal:220ms;--motion-slow:360ms;--ease-standard:cubic-bezier(.2,0,0,1);--ink:var(--color-text);--muted:var(--color-muted);--line:var(--color-border);--paper:var(--color-page);--white:var(--color-surface)}
body{background:var(--color-page)}
a,button,input,select,textarea,.panel,.dashboard-card,.page-link,.stage-icon{transition:color var(--motion-fast) var(--ease-standard),background-color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard),box-shadow var(--motion-normal) var(--ease-standard),opacity var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--color-primary);outline-offset:3px}
::selection{background:var(--color-pink-blush);color:var(--color-text)}
.button{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text);box-shadow:0 2px 8px rgba(245,45,112,.10)}
.button:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#FFF;box-shadow:var(--shadow-brand);text-decoration:none}
.button:active{background:var(--color-primary-active);border-color:var(--color-primary-active);color:#FFF;box-shadow:none;transform:translateY(1px)}
button:disabled,.button[aria-disabled=true]{opacity:.48;cursor:not-allowed;box-shadow:none}
.brand{color:var(--color-primary-active)}
.brand small{color:var(--color-muted)}
.public-header,.sidebar,.panel,.auth-card,.dashboard-card,.progress-dialog,.upload-dialog{background:var(--color-surface);border-color:var(--color-border)}
.public-header nav a:hover,.sidebar nav a:hover{background:var(--color-primary-tint);color:var(--color-primary-active);box-shadow:inset 0 0 0 1px var(--color-primary-border);text-decoration:none}
.sidebar nav a[aria-current=page]{background:var(--color-primary-tint);color:var(--color-primary-active);box-shadow:inset 0 0 0 1px var(--color-primary-border);font-weight:700}
.text-button:hover{color:var(--color-primary-active);text-decoration:underline}
.kicker{color:var(--color-primary-active)}
.panel:hover{border-color:var(--color-primary-border)}
.dashboard-card{border-color:var(--color-border)}
.dashboard-card:hover{border-color:var(--color-primary-border);box-shadow:0 4px 14px rgba(245,45,112,.08)}
.dashboard-card strong{font-variant-numeric:tabular-nums}
.filters{background:rgba(249,208,205,.20);border-color:var(--color-primary-border)}
input:hover,select:hover,textarea:hover,.filters input:hover,.filters select:hover{border-color:var(--color-primary-soft)}
input:focus,select:focus,textarea:focus,.filters input:focus,.filters select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-tint)}
input:invalid:not(:placeholder-shown){border-color:var(--color-error-border)}
thead th{background:rgba(249,208,205,.28);border-bottom-color:var(--color-primary-soft)}
tbody tr:hover{background:var(--color-primary-tint)}
.page-link:hover{background:var(--color-primary-tint);border-color:var(--color-primary);color:var(--color-primary-active);text-decoration:none}
.steps li{border-color:var(--color-primary-border);background:rgba(249,208,205,.18)}
.stage-icon{border-color:var(--color-primary);background:var(--color-primary-tint);color:var(--color-primary-active)}
.preprocessing-stages li:hover .stage-icon{background:var(--color-pink-blush);border-color:var(--color-primary-hover);box-shadow:var(--shadow-brand)}
.notice{border-color:var(--color-primary-border);background:rgba(250,255,203,.45)}
.progress-dialog::backdrop,.upload-dialog::backdrop{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.progress-dialog[open],.upload-dialog[open]{animation:dialog-enter var(--motion-normal) var(--ease-standard)}
.progress-dialog progress{accent-color:var(--color-primary)}
.dialog-close:hover,.dialog-actions button:not(.button):hover,.progress-dialog button:hover{background:var(--color-primary-tint);border-color:var(--color-primary);color:var(--color-primary-active)}
.dialog-actions .button{background:#171B20;border-color:#171B20;color:#FFF}
.dialog-actions .button:hover{background:#303942;border-color:#303942;color:#FFF;box-shadow:0 5px 16px rgba(23,27,32,.18)}
.upload-dialog input:hover{border-color:var(--color-primary-soft)}
.upload-dialog input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-tint)}
.chart-fallback li{font-variant-numeric:tabular-nums}
@keyframes dialog-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.progress-dialog[open],.upload-dialog[open]{animation:none}}
/* Palet validasi error (merah terang, terpusat). Hanya berlaku untuk pesan/border error — bukan warna situs. */
:root{--color-error-text:#EF4444;--color-error-border:#EF4444;--color-error-bg:#FEF2F2;--color-error-border-soft:#F87171;--color-error-shadow:rgba(239,68,68,.14)}
.error-summary{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--color-error-border-soft);background:var(--color-error-bg);color:var(--color-error-text);padding:14px 16px;border-radius:8px;margin-bottom:16px}
.error-summary strong{color:var(--color-error-text)}
.field-error{display:flex;align-items:flex-start;gap:6px;color:var(--color-error-text)!important;font-size:.875rem;font-weight:600;margin:-8px 0 12px;overflow-wrap:anywhere}
.field-error-icon{width:15px;height:15px;flex:0 0 auto;margin-top:3px;fill:none;stroke:var(--color-error-text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[aria-invalid=true]{border-color:var(--color-error-border)!important;box-shadow:0 0 0 3px var(--color-error-shadow)!important}
/* Tombol login navbar: bergaya tombol penuh di semua halaman publik. */
.public-login-link{min-width:88px;padding:9px 20px;justify-content:center;background:var(--color-primary);border:1px solid var(--color-primary);border-radius:8px;color:#FFF;font-weight:700;box-shadow:0 2px 8px rgba(245,45,112,.10)}
.public-login-link:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#FFF;box-shadow:var(--shadow-brand);text-decoration:none}
.public-login-link:active{background:var(--color-primary-active);border-color:var(--color-primary-active);color:#FFF;box-shadow:none;transform:translateY(1px)}
/* Navbar publik memakai surface pink lembut yang sama seperti halaman login. */
.public-header{background:var(--color-pink-blush);border-bottom-color:var(--color-primary-soft)}
body{background:var(--color-page)}
.auth-links{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.auth-links p{margin:0;color:var(--color-muted);font-size:.92rem}
.auth-links a{color:var(--color-primary);font-weight:700;text-decoration:none}
.auth-links a:hover{text-decoration:underline}
/* Login & register: surface gradient halaman sama seperti home (tanpa potongan putih). */
.login-page .login-card{box-shadow:var(--card-shadow)}
.login-page .login-card form{margin-bottom:0}


/* Design refresh: warm pastel palette, restrained pink accents, and accessible motion. */
:root{
  --color-primary:#F52D70;
  --color-primary-soft:#FF8D9F;
  --color-primary-hover:#DE1F60;
  --color-primary-active:#C92760;
  --color-primary-tint:rgba(245,45,112,.09);
  --color-primary-border:rgba(245,45,112,.25);
  --color-text:#17191F;
  --color-muted:#77747A;
  --color-surface:#FFFFFF;
  --color-page:#FFF5F3;
  --color-border:#F1E4E2;
  --color-peach:#FBD9CE;
  --color-coral:#FF8D9F;
  --color-orange:#FFC18C;
  --focus:#F52D70;
  --shadow-brand:0 8px 22px rgba(245,45,112,.18);
  --shadow-soft:0 8px 24px rgba(76,42,48,.08);
  --motion-fast:150ms;
  --motion-normal:220ms;
  --motion-slow:360ms;
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ink:var(--color-text);
  --muted:var(--color-muted);
  --line:var(--color-border);
  --paper:var(--color-page);
  --white:var(--color-surface);
  /* Token shadow card terpusat — dipakai .panel, .auth-card, .dashboard-card. */
  --card-shadow:0 4px 16px rgba(76,42,48,.06);
  --card-shadow-hover:0 8px 24px rgba(76,42,48,.10);
}
html{scroll-behavior:smooth}
body{font-family:"Inter",Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#FFF8F6 0%,#FFF5F3 55%,#FCE4DF 100%) fixed;color:var(--ink)}
h1,h2,h3,h4,.brand,.dashboard-card strong{font-family:"Inter",Arial,Helvetica,sans-serif}
h1,h2,h3{letter-spacing:-.035em}
a,button,input,select,textarea,.panel,.dashboard-card,.auth-card,.steps li,.page-link{transition:color var(--motion-normal) var(--ease-standard),background-color var(--motion-normal) var(--ease-standard),border-color var(--motion-normal) var(--ease-standard),box-shadow var(--motion-normal) var(--ease-standard),transform var(--motion-normal) var(--ease-standard)}
.public-header{background:rgba(255,255,255,.88);border-bottom-color:rgba(241,228,226,.9);backdrop-filter:blur(12px)}
.brand{letter-spacing:-.015em}
nav a{border-radius:9px}
.public-header nav a:hover{color:var(--color-primary);text-decoration:none}
.sidebar{background:rgba(255,255,255,.92);border-right-color:var(--line)}
.sidebar nav a{min-height:44px;padding:8px 12px;color:var(--muted);text-decoration:none}
.sidebar nav a:hover{background:var(--color-primary-tint);color:var(--color-primary);transform:translateX(2px)}
.sidebar nav a[aria-current=page]{background:var(--color-primary-tint);color:var(--color-primary-active);box-shadow:inset 0 0 0 1px var(--color-primary-border);font-weight:700}
.sidebar nav a[aria-current=page]:hover{background:rgba(245,45,112,.16);color:var(--color-primary-active);box-shadow:inset 0 0 0 1px var(--color-primary-border);transform:none}
.content{animation:content-enter 420ms var(--ease-standard) both}
.page-header{animation:content-enter 460ms var(--ease-standard) both}
.page-header .kicker{color:var(--color-primary)}
.button{background:var(--color-primary);border-color:var(--color-primary);color:#fff;border-radius:10px;box-shadow:0 3px 8px rgba(245,45,112,.10)}
.button:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#fff;box-shadow:var(--shadow-brand);transform:translateY(-2px)}
.button:active{background:var(--color-primary-active);border-color:var(--color-primary-active);box-shadow:none;transform:translateY(0) scale(.985)}
.button:focus-visible,.text-button:focus-visible,.dialog-close:focus-visible,.page-link:focus-visible{outline:3px solid rgba(245,45,112,.35);outline-offset:3px}
.panel,.auth-card,.dashboard-card{border-color:rgba(241,228,226,.95);border-radius:16px;box-shadow:var(--card-shadow)}
.panel{background:rgba(255,255,255,.96)}
.panel:hover{border-color:rgba(245,45,112,.18);box-shadow:var(--card-shadow-hover)}
.auth-card{box-shadow:var(--shadow-soft)}
.dashboard-card{position:relative;overflow:hidden;box-shadow:var(--card-shadow)}
.dashboard-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,var(--color-primary),var(--color-coral),var(--color-orange));opacity:0;transition:opacity var(--motion-normal) var(--ease-standard)}
.dashboard-card:hover{transform:translateY(-4px);border-color:var(--color-primary-border);box-shadow:var(--card-shadow-hover)}
.dashboard-card:hover::before{opacity:1}
.dashboard-card:nth-child(1){animation:card-enter 420ms 40ms var(--ease-standard) both}
.dashboard-card:nth-child(2){animation:card-enter 420ms 90ms var(--ease-standard) both}
.dashboard-card:nth-child(3){animation:card-enter 420ms 140ms var(--ease-standard) both}
.dashboard-card:nth-child(4){animation:card-enter 420ms 190ms var(--ease-standard) both}
.dashboard-card p{color:var(--muted)}
.dashboard-card strong{font-variant-numeric:tabular-nums}
.kicker{letter-spacing:.07em}
input,select,textarea,.filters input,.filters select,.auth-card input,.panel form input{border-color:#E7D8D7;border-radius:9px;background:#fff}
input:hover,select:hover,textarea:hover{border-color:#E5A6B9}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--color-primary);box-shadow:0 0 0 4px var(--color-primary-tint)}
.notice{border-color:var(--color-primary-border);background:#FFF5F8;border-radius:10px}
.filters{background:#FFFAF9;border-color:var(--line);border-radius:12px}
.page-link{border-color:#E7D8D7;border-radius:9px;background:#fff}
.page-link:hover:not([aria-disabled=true]){border-color:var(--color-primary);color:var(--color-primary);background:#FFF5F8;transform:translateY(-1px)}
thead th{background:#FFF2F3;border-bottom-color:#F1C6D2;color:#6D4350}
tbody tr:nth-child(even){background:#FFFAF9}
tbody tr:hover{background:#FFF0F4}
td,th{border-bottom-color:#F1E8E6}
.steps li{border-color:var(--line);border-radius:10px;background:#fff}
.steps li:hover{border-color:var(--color-primary-border);background:#FFF5F8;transform:translateY(-2px)}
.progress-dialog,.upload-dialog{border-color:var(--line);border-radius:18px;box-shadow:0 24px 70px rgba(76,42,48,.2)}
.progress-dialog[open],.upload-dialog[open]{animation:dialog-enter 220ms var(--ease-standard) both}
.progress-dialog progress{accent-color:var(--color-primary)}
.dialog-close:hover{background:#FFF0F4;color:var(--color-primary);border-color:var(--color-primary-border);transform:rotate(3deg)}
.dialog-actions button:not(.button):hover{background:#FFF5F8;border-color:var(--color-primary-border)}
.chart-wrap{border-radius:12px}
.chart-fallback li{padding:4px 9px;border-radius:999px;background:#FFF5F8}
/* Tombol Logout sidebar: gaya sama dengan link menu sidebar (hover pink lembut). */
.sidebar form .text-button{display:block;width:100%;min-height:44px;padding:8px 12px;border-radius:9px;color:var(--muted);font-size:.95rem;text-align:left}
.sidebar form .text-button:hover{background:var(--color-primary-tint);color:var(--color-primary-active);box-shadow:inset 0 0 0 1px var(--color-primary-border);text-decoration:none}
.hero .button{margin-top:8px}
/* Animasi masuk halaman publik & auth (konsisten dengan konten dashboard). */
.public-header{animation:content-enter 420ms var(--ease-standard) both}
.hero{animation:content-enter 460ms var(--ease-standard) both}
.hero .kicker{animation:card-enter 420ms 60ms var(--ease-standard) both}
.hero h1{animation:card-enter 420ms 120ms var(--ease-standard) both}
.hero>p:not(.kicker){animation:card-enter 420ms 180ms var(--ease-standard) both}
.hero .button{animation:card-enter 420ms 240ms var(--ease-standard) both}
.info{animation:content-enter 460ms var(--ease-standard) both}
.auth-card{animation:card-enter 420ms var(--ease-standard) both}
.auth-card .kicker{animation:card-enter 420ms 80ms var(--ease-standard) both}
.auth-card h1{animation:card-enter 420ms 140ms var(--ease-standard) both}
.auth-card form,.auth-links{animation:card-enter 420ms 200ms var(--ease-standard) both}
.account-block,.sidebar form{animation:card-enter 420ms var(--ease-standard) both}
/* Blok akun sidebar: identitas akun + role; logout sebagai tombol di bawahnya. */
.account-block{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--color-primary-border);border-radius:10px;background:rgba(255,255,255,.96);box-shadow:0 2px 8px rgba(76,42,48,.04);margin-top:auto}
/* Avatar account (dipakai topbar & profil). */
.account-avatar{width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--color-primary),var(--color-coral));color:#fff;font-weight:700;font-size:.95rem}
.account-meta{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.account-meta strong{font-size:.85rem;overflow-wrap:anywhere}
.account-meta small{color:var(--color-muted);font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
@media(max-width:760px){.account-block{padding:8px 10px;margin-top:0}.account-avatar{width:30px;height:30px;font-size:.8rem}}
.public-login-link{border-radius:10px}
.public-login-link:hover{color:var(--color-primary)}
table a:hover{color:var(--color-primary)}
/* Halaman error 404/500: hero dipadatkan agar tidak terasa kosong. */
.error-hero{padding:clamp(48px,8vw,100px) 0}
.error-hero h1{font-size:clamp(3rem,10vw,6.5rem)}

@keyframes content-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes card-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
  .sidebar nav a:hover{transform:none}
  .dashboard-card:hover{transform:translateY(-2px)}
  .content,.page-header{animation-duration:260ms}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .content,.page-header,.dashboard-card,.hero,.hero .kicker,.hero h1,.hero>p:not(.kicker),.hero .button,.info,.public-header,.auth-card,.auth-card .kicker,.auth-card h1,.auth-card form,.auth-links,.account-block,.sidebar form{animation:none!important}
}