/* ═══════════════════════════════════════════
   UCMAC DESIGN SYSTEM  (tokens: primitive → semantic → component)
   🎨 Kid-Friendly Vibrant Theme
═══════════════════════════════════════════ */
:root {
  --p-indigo-400:#A78BFA; --p-indigo-500:#8B5CF6; --p-indigo-600:#7C3AED;
  --p-amber-400:#FFC93C;  --p-amber-500:#FFA500;  --p-amber-600:#F97316;
  --p-emerald-400:#4ADE80; --p-emerald-500:#22C55E;
  --p-rose-400:#FF6B9D;   --p-rose-500:#F5387C;
  --p-sky-400:#38DFF5;
  --p-pink-400:#FF4FA3;   --p-pink-500:#EC4899;
  --p-lime-400:#BEF264;
  --p-slate-50:#FFFDFB; --p-slate-400:#C9B8F5; --p-slate-600:#8B7FC7;
  --p-dark-0:#3B0F70;

  --color-bg:         var(--p-dark-0);
  --color-surface:    rgba(255,255,255,0.10);
  --color-surface-md: rgba(255,255,255,0.14);
  --color-surface-hi: rgba(255,255,255,0.20);
  --color-border:     rgba(255,255,255,0.18);
  --color-border-hi:  rgba(255,255,255,0.30);
  --color-primary:    var(--p-indigo-500);
  --color-primary-hi: var(--p-indigo-400);
  --color-accent:     var(--p-amber-500);
  --color-accent-hi:  var(--p-amber-400);
  --color-success:    var(--p-emerald-500);
  --color-danger:     var(--p-rose-500);
  --color-info:       var(--p-sky-400);
  --color-text:       var(--p-slate-50);
  --color-text-md:    var(--p-slate-400);
  --color-text-lo:    var(--p-slate-600);

  --card-radius: 28px;
  --btn-radius: 18px;
  --pill-radius: 100px;
  --btn-h: 54px;
  --input-h: 54px;
  --gap-xs:4px; --gap-sm:8px; --gap-md:16px; --gap-lg:24px; --gap-xl:32px;
  --anim-fast:150ms; --anim-mid:250ms;
  --ease-out:cubic-bezier(0.0,0.0,0.2,1);
  --ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
  --font: system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --shadow-card: 0 10px 34px rgba(59,15,112,0.45), 0 1px 0 rgba(255,255,255,0.12) inset;
  --shadow-glow: 0 0 28px rgba(236,72,153,0.35);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font); background:var(--color-bg); color:var(--color-text);
  min-height:100%; line-height:1.5; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(ellipse 70% 55% at 15% 8%,  rgba(255,79,163,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 88% 12%, rgba(56,223,245,0.28) 0%, transparent 55%),
    radial-gradient(ellipse 65% 55% at 85% 90%, rgba(255,169,60,0.30) 0%, transparent 58%),
    radial-gradient(ellipse 55% 45% at 10% 88%, rgba(190,242,100,0.20) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 50% 45%, rgba(139,92,246,0.25) 0%, transparent 60%);
  background-attachment:fixed;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}
input[type=number]{-moz-appearance:textfield}
a{color:inherit}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.25);border-radius:4px}

/* ── Kid-friendly animation library ── */
@keyframes bounce-float{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-10px) rotate(2deg)}
}
@keyframes wiggle{
  0%,100%{transform:rotate(0deg)}
  25%{transform:rotate(-6deg)}
  75%{transform:rotate(6deg)}
}
@keyframes pop-in{
  0%{opacity:0;transform:scale(0.7) translateY(10px)}
  60%{opacity:1;transform:scale(1.05) translateY(-2px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes tada{
  0%{transform:scale(1)}
  10%,20%{transform:scale(0.92) rotate(-3deg)}
  30%,50%,70%,90%{transform:scale(1.08) rotate(3deg)}
  40%,60%,80%{transform:scale(1.08) rotate(-3deg)}
  100%{transform:scale(1) rotate(0)}
}
@keyframes sparkle-drift{
  0%{transform:translateY(0) scale(1);opacity:0.8}
  50%{transform:translateY(-14px) scale(1.2);opacity:1}
  100%{transform:translateY(0) scale(1);opacity:0.8}
}
@keyframes shimmer-sweep{
  0%{transform:translateX(-120%) skewX(-15deg)}
  100%{transform:translateX(220%) skewX(-15deg)}
}

/* Layout helpers */
.page{min-height:100svh;display:flex;flex-direction:column;align-items:center}
.container{width:100%;max-width:720px;padding:var(--gap-lg) var(--gap-md)}
.container-wide{width:100%;max-width:1100px;padding:var(--gap-lg) var(--gap-md)}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100svh}

/* Topbar */
.topbar{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:0 16px;height:56px;background:rgba(59,15,112,0.82);
  border-bottom:1px solid var(--color-border);backdrop-filter:blur(16px);
  position:sticky;top:0;z-index:50;
}
.topbar .logo{font-size:22px;display:inline-block;animation:wiggle 2.4s ease-in-out infinite}
.topbar .title{font-size:14px;font-weight:800;color:var(--color-accent);flex:1}
.topbar .spacer{flex:1}

/* Hero */
.hero{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:8px;text-align:center;position:relative}
.hero::before,.hero::after{
  content:'✨';position:absolute;font-size:20px;animation:sparkle-drift 2.6s ease-in-out infinite;
  pointer-events:none;
}
.hero::before{top:-4px;left:calc(50% - 70px);animation-delay:0.3s}
.hero::after{top:6px;left:calc(50% + 55px);animation-delay:1.1s}
.hero-icon{
  width:84px;height:84px;border-radius:26px;
  background:linear-gradient(135deg, var(--p-pink-500), var(--p-indigo-500) 55%, var(--p-sky-400));
  border:2px solid rgba(255,255,255,0.5);
  display:flex;align-items:center;justify-content:center;font-size:42px;
  box-shadow:var(--shadow-glow), var(--shadow-card);
  animation:bounce-float 3s ease-in-out infinite;
}
.hero-title{font-size:clamp(20px,5vw,28px);font-weight:900;letter-spacing:-0.5px}
.hero-title span{
  background:linear-gradient(90deg, var(--p-amber-400), var(--p-pink-400) 50%, var(--p-sky-400));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub{font-size:12px;font-weight:800;color:var(--color-text-md);text-transform:uppercase;letter-spacing:2px}

/* Cards */
.glass-card{
  width:100%;background:var(--color-surface);border:1.5px solid var(--color-border-hi);
  border-radius:var(--card-radius);padding:var(--gap-lg) var(--gap-md);
  backdrop-filter:blur(16px);box-shadow:var(--shadow-card);
  animation:pop-in 0.4s var(--ease-bounce);
}

/* Form fields */
.field{margin-bottom:var(--gap-md)}
.field label{
  display:block;font-size:11px;font-weight:800;color:var(--color-accent);
  text-transform:uppercase;letter-spacing:1.2px;margin-bottom:7px;
}
.field .required{color:var(--p-rose-400)}
.field input, .field select, .field textarea{
  width:100%;min-height:var(--input-h);background:rgba(255,255,255,0.12);
  border:2px solid var(--color-border);border-radius:16px;color:var(--color-text);
  font-family:var(--font);font-size:15px;font-weight:600;padding:12px 16px;outline:none;
  transition:border-color var(--anim-fast) var(--ease-out), background var(--anim-fast) var(--ease-out), transform var(--anim-fast) var(--ease-out);
}
.field textarea{min-height:80px;resize:vertical;font-weight:500}
.field input::placeholder,.field textarea::placeholder{color:var(--color-text-lo)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--color-accent);background:rgba(255,255,255,0.18);
  box-shadow:0 0 0 4px rgba(255,165,0,0.22);transform:scale(1.01);
}
.field select{appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="%23C9B8F5" viewBox="0 0 16 16"><path d="M8 11L3 6h10z"/></svg>');background-repeat:no-repeat;background-position:right 14px center}
.field-hint{font-size:11px;color:var(--color-text-lo);margin-top:5px}
.field-error{font-size:11px;color:var(--p-rose-400);margin-top:5px;display:none}
.field.has-error input{border-color:var(--p-rose-500)}
.field.has-error .field-error{display:block}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-md)}
@media(max-width:480px){.field-row{grid-template-columns:1fr}}

/* Buttons */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--btn-h);border-radius:var(--pill-radius);border:none;cursor:pointer;
  font-family:var(--font);font-size:16px;font-weight:900;letter-spacing:0.2px;
  touch-action:manipulation;padding:0 28px;
  transition:transform var(--anim-fast) var(--ease-bounce),box-shadow var(--anim-fast) var(--ease-out),opacity var(--anim-fast) var(--ease-out);
}
.btn::after{
  content:'';position:absolute;top:0;left:0;width:40%;height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
  transform:translateX(-120%) skewX(-15deg);
}
.btn:hover::after{animation:shimmer-sweep 0.9s ease-out}
.btn:hover{transform:translateY(-3px) scale(1.03)}
.btn:active{transform:scale(0.94)}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.btn-block{width:100%}
.btn-primary{background:linear-gradient(135deg,var(--p-indigo-600),var(--p-pink-500));color:white;box-shadow:0 6px 22px rgba(139,92,246,0.45)}
.btn-accent{background:linear-gradient(135deg,var(--p-amber-600),var(--p-amber-400));color:#3a1d00;box-shadow:0 6px 22px rgba(249,115,22,0.4)}
.btn-success{background:linear-gradient(135deg,#16A34A,var(--p-lime-400));color:#0a2e12;box-shadow:0 6px 22px rgba(74,222,128,0.4)}
.btn-danger{background:linear-gradient(135deg,#BE123C,var(--p-rose-400));color:white;box-shadow:0 6px 22px rgba(245,56,124,0.35)}
.btn-ghost{background:var(--color-surface-md);border:2px solid var(--color-border);color:var(--color-text)}
.btn-sm{height:40px;padding:0 16px;font-size:13px;border-radius:100px}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:5px 13px;border-radius:var(--pill-radius);text-transform:uppercase;letter-spacing:0.5px}
.badge-pending{background:rgba(255,169,60,0.22);color:var(--p-amber-400);border:1.5px solid rgba(255,169,60,0.4)}
.badge-approved{background:rgba(74,222,128,0.22);color:var(--p-emerald-400);border:1.5px solid rgba(74,222,128,0.4);animation:tada 0.6s var(--ease-bounce)}
.badge-rejected{background:rgba(245,56,124,0.22);color:var(--p-rose-400);border:1.5px solid rgba(245,56,124,0.4)}

/* Alert / toast */
.alert{border-radius:16px;padding:14px 18px;font-size:13px;font-weight:700;margin-bottom:var(--gap-md);border:1.5px solid;animation:pop-in 0.35s var(--ease-bounce)}
.alert-success{background:rgba(74,222,128,0.14);border-color:rgba(74,222,128,0.35);color:var(--p-emerald-400)}
.alert-error{background:rgba(245,56,124,0.14);border-color:rgba(245,56,124,0.35);color:var(--p-rose-400)}
.alert-info{background:rgba(56,223,245,0.14);border-color:rgba(56,223,245,0.35);color:var(--p-sky-400)}

/* Table */
.table-wrap{width:100%;overflow-x:auto;border-radius:var(--card-radius);border:1.5px solid var(--color-border-hi)}
table{width:100%;border-collapse:collapse;min-width:640px}
th{background:rgba(255,255,255,0.08);font-size:11px;text-transform:uppercase;letter-spacing:0.8px;color:var(--color-text-md);font-weight:800;text-align:left;padding:12px 14px;border-bottom:1.5px solid var(--color-border)}
td{padding:12px 14px;font-size:13px;font-weight:600;border-bottom:1px solid rgba(255,255,255,0.08)}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,255,255,0.05)}

/* Tabs */
.tabs{display:flex;gap:6px;background:var(--color-surface);border:1.5px solid var(--color-border-hi);border-radius:var(--pill-radius);padding:5px;margin-bottom:var(--gap-md);overflow-x:auto}
.tab-btn{flex:1;white-space:nowrap;min-height:42px;padding:0 18px;border:none;background:transparent;color:var(--color-text-md);font-family:var(--font);font-weight:800;font-size:13px;border-radius:var(--pill-radius);cursor:pointer;transition:all var(--anim-fast) var(--ease-bounce)}
.tab-btn.active{background:linear-gradient(135deg,var(--p-indigo-600),var(--p-pink-500));color:white;transform:scale(1.04)}

/* Stat pills */
.stat-row{display:flex;gap:var(--gap-sm);flex-wrap:wrap}
.stat-pill{flex:1;min-width:100px;display:flex;flex-direction:column;align-items:center;background:var(--color-surface-md);border:1.5px solid var(--color-border-hi);border-radius:18px;padding:14px 8px;transition:transform var(--anim-fast) var(--ease-bounce)}
.stat-pill:hover{transform:translateY(-3px) scale(1.03)}
.stat-pill .sv{font-size:26px;font-weight:900;color:var(--color-accent);font-variant-numeric:tabular-nums;line-height:1;animation:pop-in 0.5s var(--ease-bounce)}
.stat-pill .sl{font-size:10px;font-weight:800;color:var(--color-text-md);text-transform:uppercase;letter-spacing:1px;margin-top:4px}

/* Loading spinner */
.spinner{width:20px;height:20px;border:2.5px solid rgba(255,255,255,0.3);border-top-color:white;border-radius:50%;animation:spin 0.7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Empty state */
.empty-state{text-align:center;padding:40px 20px;color:var(--color-text-md)}
.empty-state .icon{font-size:40px;margin-bottom:10px;opacity:0.7;display:inline-block;animation:bounce-float 2.6s ease-in-out infinite}

footer.app-footer{margin-top:auto;padding:20px;text-align:center;font-size:11px;color:var(--color-text-lo)}