/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/tokens.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════
   NIPEK SM — Design Tokens
   Snow White + Ice Blue · Glassmorphism Premium
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Palette ── */
  --color-snow:      #FAFCFF;
  --color-snow-dark: #EDF2FA;
  --color-ice-50:    #F0F6FF;
  --color-ice-100:   #DFECFF;
  --color-ice-200:   #BDD6FF;
  --color-ice-300:   #8BB8FF;
  --color-ice-400:   #5A94F5;
  --color-ice-500:   #3B78E0;
  --color-ice-600:   #2563C4;
  --color-ice-700:   #1D4FA0;
  --color-ice-800:   #1A3F7A;
  --color-ice-900:   #152E5C;

  /* ── Glass Tokens ── */
  --glass-bg:              rgba(255, 255, 255, 0.55);
  --glass-bg-hover:        rgba(255, 255, 255, 0.72);
  --glass-bg-active:       rgba(255, 255, 255, 0.85);
  --glass-bg-elevated:     rgba(255, 255, 255, 0.65);
  --glass-border:          rgba(255, 255, 255, 0.7);
  --glass-border-subtle:   rgba(180, 200, 230, 0.35);
  --glass-shadow-sm:       0 1px 3px rgba(21, 46, 92, 0.06), 0 1px 2px rgba(21, 46, 92, 0.04);
  --glass-shadow-md:       0 4px 16px rgba(21, 46, 92, 0.07), 0 2px 6px rgba(21, 46, 92, 0.04);
  --glass-shadow-lg:       0 8px 32px rgba(21, 46, 92, 0.09), 0 3px 10px rgba(21, 46, 92, 0.05);
  --glass-shadow-xl:       0 16px 48px rgba(21, 46, 92, 0.11), 0 4px 16px rgba(21, 46, 92, 0.06);
  --glass-blur-sm:         blur(8px);
  --glass-blur-md:         blur(16px);
  --glass-blur-lg:         blur(28px);
  --glass-blur-xl:         blur(40px);

  /* ── Typography ── */
  --font-sans:    'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --font-display: 'Inter', 'SF Pro Display', -apple-system, sans-serif;

  /* ── Spacing ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ── Radius ── */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ── Touch ── */
  --touch-min: 48px;

  /* ── Easing ── */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
}

/*!****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/app.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════
   NIPEK SM — Application Styles (Mobile-First Premium)
   ═══════════════════════════════════════════════════════════ */

/* ── Shell ── */
.app-shell { display:grid; height:100dvh; grid-template-columns:1fr; grid-template-rows:1fr auto; grid-template-areas:'main' 'nav'; width:100%; max-width:100vw; overflow:hidden; }
@media (min-width:768px) { .app-shell { grid-template-columns:240px 1fr; grid-template-rows:1fr; grid-template-areas:'sidebar main'; } }

/* ── Sidebar ── */
.app-sidebar { display:none !important; grid-area:sidebar; }
@media (min-width:768px) {
  .app-sidebar { display:flex !important; }
  .app-sidebar {
    display:flex;
    flex-direction:column;
    position:-webkit-sticky;
    position:sticky;
    top:0;
    height:100dvh;
    padding:10px 12px 10px;
    overflow:hidden;
    background:rgba(255,255,255,.48);
    backdrop-filter:blur(32px);
    -webkit-backdrop-filter:blur(32px);
    border-right:1px solid rgba(180,200,230,.28);
  }
}

/* Mobile slide-in sidebar */
@media (max-width:767px) {
  .app-sidebar--open {
    display:flex !important;
    flex-direction:column !important;
    position:fixed !important;
    top:0; left:0;
    width:260px;
    height:100dvh;
    z-index:999;
    box-shadow:10px 0 30px rgba(21,46,92,.15);
    background:rgba(255,255,255,.96) !important;
    backdrop-filter:blur(40px) !important;
    -webkit-backdrop-filter:blur(40px) !important;
    animation:sidebarSlideIn .25s cubic-bezier(.19,1,.22,1) forwards;
    padding:16px 12px;
  }
  @keyframes sidebarSlideIn { from{transform:translateX(-100%)} to{transform:translateX(0)} }
  .sidebar-close-btn {
    display:flex;
    align-self:flex-end;
    background:none;
    border:none;
    cursor:pointer;
    color:var(--color-ice-400);
    font-size:1.125rem;
    padding:4px 8px;
    border-radius:8px;
    margin-bottom:8px;
    line-height:1;
    transition:color .15s;
  }
  .sidebar-close-btn:hover { color:var(--color-ice-700); background:rgba(139,184,255,.1); }
}
@media (min-width:768px) { .sidebar-close-btn { display:none; } }

/* Logo area - flex-shrink:0 supaya tidak pernah menyusut */
.side-logo {
  display:flex;
  align-items:center;
  padding-bottom:8px;
  margin-bottom:6px;
  border-bottom:1px solid rgba(180,200,230,.15);
  flex-shrink:0;
}
.side-logo__mark { display:none; }
.side-logo__text { display:none; }

/* Scroll area - flex:1 agar mengisi sisa ruang dan bisa scroll */
.side-scroll {
  flex:1 1;
  overflow-y:auto;
  overflow-x:hidden;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.side-scroll::-webkit-scrollbar { width:2px; }
.side-scroll::-webkit-scrollbar-thumb { background:rgba(139,184,255,.25); border-radius:99px; }

/* Nav items */
.side-nav { display:flex; flex-direction:column; gap:1px; flex-shrink:0; }
.side-nav__link {
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  font-size:.8125rem;
  font-weight:500;
  color:var(--color-ice-500);
  border-radius:8px;
  transition:all .15s ease;
  min-height:36px;
  text-decoration:none;
}
.side-nav__link:hover { background:rgba(139,184,255,.1); color:var(--color-ice-700); }
.side-nav__link--active { background:rgba(90,148,245,.1); color:var(--color-ice-600); font-weight:600; }
.side-nav__icon { width:17px; height:17px; flex-shrink:0; opacity:.65; }
.side-nav__link--active .side-nav__icon { opacity:1; }

.side-divider {
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(180,200,230,.3) 20%,rgba(180,200,230,.3) 80%,transparent);
  margin:6px 0;
  flex-shrink:0;
}

/* Footer - flex-shrink:0 supaya SELALU KELIHATAN di bawah */
.side-footer {
  flex-shrink:0;
  padding-top:8px;
  border-top:1px solid rgba(180,200,230,.2);
  display:flex;
  flex-direction:column;
  gap:1px;
}
.side-user { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:8px; }
.side-user__avatar {
  width:28px; height:28px; min-width:28px;
  border-radius:50%;
  background:linear-gradient(135deg,#8BB8FF,#5A94F5);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:600; font-size:.6875rem;
}
.side-user__name { font-size:.75rem; font-weight:500; color:var(--color-ice-800); }
.side-user__role { font-size:.625rem; color:var(--color-ice-400); }

/* ── Main ── */
.app-main { grid-area:main; padding:12px 12px 20px; overflow-y:auto; overflow-x:hidden; min-height:0; }
@media (min-width:768px) { .app-main { padding:28px 32px 32px; } }

/* ── Bottom Nav ── */
.bottom-nav { grid-area:nav; display:flex; align-items:center; height:64px; padding:0 4px 6px; background:rgba(255,255,255,.72); backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px); border-top:1px solid rgba(180,200,230,.25); z-index:50; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:2px; flex-shrink:0; }
.bottom-nav__menu-btn { background:none; border:none; cursor:pointer; font-family:inherit; display:flex; flex-direction:column; align-items:center; gap:2px; }
.bottom-nav::-webkit-scrollbar { display:none; }
@media (min-width:768px) { .bottom-nav { display:none; } }
.bottom-nav__link { flex:1 1; display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; flex-shrink:0; min-height:48px; padding:4px 6px; color:var(--color-ice-300); text-decoration:none; border-radius:10px; font-size:.5625rem; font-weight:500; transition:color .15s; }
.bottom-nav__link:hover { color:var(--color-ice-500); }
.bottom-nav__link--active { color:var(--color-ice-600); }
.bottom-nav__icon { width:22px; height:22px; }

/* ── Page Header ── */
.page-hd { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:16px; }
@media (min-width:640px) { .page-hd { gap:16px; margin-bottom:24px; } }
.page-hd__title { font-size:1.25rem; font-weight:700; color:var(--color-ice-900); letter-spacing:-.02em; }
.page-hd__sub { font-size:.75rem; color:var(--color-ice-400); display:none; }
@media (min-width:640px) { .page-hd__sub { display:block; } }
.page-hd__actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; font-size:.8125rem; font-weight:500; border-radius:10px; cursor:pointer; border:1px solid transparent; transition:all .15s ease; min-height:40px; font-family:inherit; white-space:nowrap; }
.btn--primary { background:linear-gradient(135deg,#5A94F5,#2563C4); color:#fff; border-color:rgba(255,255,255,.2); }
.btn--primary:hover { box-shadow:0 4px 16px rgba(37,99,196,.3); transform:translateY(-1px); }
.btn--primary:active { transform:scale(.98); }
.btn--ghost { background:rgba(255,255,255,.5); color:var(--color-ice-600); border-color:rgba(180,200,230,.3); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.btn--ghost:hover { background:rgba(255,255,255,.7); }
.btn--danger { background:linear-gradient(135deg,#F87171,#EF4444); color:#fff; }
.btn--danger:hover { box-shadow:0 4px 16px rgba(239,68,68,.3); }
.btn--sm { padding:5px 12px; font-size:.75rem; min-height:32px; }
.btn--icon { padding:8px; min-width:40px; justify-content:center; }
.btn__icon { width:16px; height:16px; flex-shrink:0; }
.btn:disabled { opacity:.4; pointer-events:none; }

/* ── Cards ── */
.card { background:rgba(255,255,255,.45); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.6); border-radius:16px; }
.card--elevated { background:rgba(255,255,255,.6); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); box-shadow:0 8px 32px rgba(21,46,92,.08); }
.card__body { padding:16px; }
@media (min-width:640px) { .card__body { padding:20px; } }

/* ── Input ── */
.input { width:100%; padding:9px 14px; font-size:.8125rem; font-family:inherit; color:var(--color-ice-800); background:rgba(255,255,255,.45); border:1px solid rgba(180,200,230,.28); border-radius:10px; outline:none; transition:all .15s; min-height:40px; }
.input:focus { background:rgba(255,255,255,.65); border-color:#5A94F5; box-shadow:0 0 0 3px rgba(90,148,245,.1); }
.input::placeholder { color:var(--color-ice-300); }
.input--icon { padding-left:42px; }
.input-wrap { position:relative; }
.input-wrap__icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--color-ice-300); pointer-events:none; }

/* ── Badge ── */
.badge { display:inline-flex; align-items:center; padding:2px 10px; font-size:.6875rem; font-weight:500; border-radius:99px; }
.badge--success { background:rgba(209,250,229,.5); color:#059669; }
.badge--warning { background:rgba(254,243,199,.5); color:#D97706; }
.badge--danger { background:rgba(254,226,226,.5); color:#DC2626; }
.badge--neutral { background:rgba(255,255,255,.5); color:var(--color-ice-500); border:1px solid rgba(180,200,230,.25); }

/* ── Stats ── */
.stats { display:grid; grid-template-columns:1fr 1fr; grid-gap:10px; gap:10px; margin-bottom:16px; }
@media (min-width:640px) { .stats { grid-template-columns:repeat(4,1fr); gap:14px; } }
.stat { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.45); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.6); border-radius:14px; padding:12px 14px; }
.stat__icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat__icon svg { width:20px; height:20px; }
.stat__icon--blue { background:rgba(139,184,255,.12); color:#5A94F5; }
.stat__icon--green { background:rgba(34,197,94,.08); color:#16a34a; }
.stat__icon--red { background:rgba(249,115,22,.08); color:#ea580c; }
.stat__label { font-size:.625rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--color-ice-400); }
.stat__value { font-size:1.125rem; font-weight:700; color:var(--color-ice-900); line-height:1.2; }
.stat__change { font-size:.625rem; font-weight:500; margin-top:1px; }
.stat__change--up { color:#16a34a; }
.stat__change--down { color:#DC2626; }

/* ── Table ── */
.tbl { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl table { width:100%; font-size:.75rem; border-collapse:collapse; }
.tbl thead { border-bottom:1px solid rgba(180,200,230,.2); background:rgba(255,255,255,.2); }
.tbl th { text-align:left; padding:10px 14px; font-size:.625rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--color-ice-400); white-space:nowrap; }
.tbl td { padding:10px 14px; vertical-align:middle; }
.tbl tbody tr { border-bottom:1px solid rgba(180,200,230,.06); transition:background .1s; }
.tbl tbody tr:hover { background:rgba(139,184,255,.03); }
.tbl__cell--right { text-align:right; }
.tbl__cell--center { text-align:center; }
@media (max-width:639px) { .tbl__hide-mb { display:none !important; } }

/* ── Filter Chips ── */
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.chip { font-size:.6875rem; font-weight:500; padding:4px 12px; border-radius:99px; border:1px solid rgba(180,200,230,.2); background:rgba(255,255,255,.4); color:var(--color-ice-500); cursor:pointer; transition:all .12s; }
.chip:hover { background:rgba(139,184,255,.08); }
.chip--active { background:var(--color-ice-600); color:#fff; border-color:var(--color-ice-600); }

/* ── Alert ── */
.alert { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-radius:10px; font-size:.75rem; margin-bottom:16px; }
.alert--warn { background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.2); color:#92400e; }

/* ── POS ── */
.pos { display:grid; grid-template-columns:1fr; grid-gap:12px; gap:12px; }
@media (min-width:1024px) { .pos { grid-template-columns:2fr 1fr; align-items:start; } }

.pos-grid { display:grid; grid-template-columns:repeat(2,1fr); grid-gap:8px; gap:8px; }
@media (min-width:480px) { .pos-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:768px) { .pos-grid { grid-template-columns:repeat(4,1fr); } }
@media (min-width:1024px) { .pos-grid { grid-template-columns:repeat(3,1fr); } }

.pos-item { display:flex; flex-direction:column; gap:6px; background:rgba(255,255,255,.45); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.6); border-radius:12px; padding:10px; cursor:pointer; transition:all .15s; text-align:left; }
.pos-item:hover { background:rgba(255,255,255,.65); box-shadow:0 4px 16px rgba(21,46,92,.06); transform:translateY(-1px); }
.pos-item:active { transform:scale(.98); }
.pos-item:disabled { opacity:.35; pointer-events:none; }

.pos-item__img { width:100%; aspect-ratio:1/1; border-radius:8px; background:linear-gradient(135deg,#DFECFF,#BDD6FF); display:flex; align-items:center; justify-content:center; }
.pos-item__img svg { width:28px; height:28px; color:#8BB8FF; }
.pos-item__name { font-size:.6875rem; font-weight:600; color:var(--color-ice-800); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pos-item__price { font-size:.6875rem; font-weight:700; color:var(--color-ice-600); }
.pos-item__stock { font-size:.5625rem; color:var(--color-ice-400); }

/* POS Cart */
.pos-cart { display:flex; flex-direction:column; min-height:0; }
@media (max-width:1023px) { .pos-cart { max-height:40dvh; } }
@media (min-width:1024px) { .pos-cart { max-height:calc(100dvh - 80px); position:-webkit-sticky; position:sticky; top:28px; } }

.pos-cart__hd { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid rgba(180,200,230,.12); }
.pos-cart__title { font-size:.8125rem; font-weight:600; color:var(--color-ice-900); }
.pos-cart__list { flex:1 1; overflow-y:auto; min-height:0; }

.pos-cart__item { display:flex; align-items:center; gap:8px; padding:8px 14px; border-bottom:1px solid rgba(180,200,230,.06); }
.pos-cart__remove { color:var(--color-ice-300); background:none; border:none; cursor:pointer; padding:2px; flex-shrink:0; }
.pos-cart__remove:hover { color:#EF4444; }
.pos-cart__remove svg { width:14px; height:14px; }
.pos-cart__info { flex:1 1; min-width:0; }
.pos-cart__name { font-size:.6875rem; font-weight:500; color:var(--color-ice-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.pos-cart__uprice { font-size:.625rem; color:var(--color-ice-400); }
.pos-cart__qty { display:flex; align-items:center; border:1px solid rgba(180,200,230,.15); border-radius:99px; overflow:hidden; flex-shrink:0; }
.pos-cart__qty-btn { width:24px; height:24px; border:none; background:transparent; font-size:.75rem; font-weight:600; color:var(--color-ice-600); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.pos-cart__qty-btn:hover:not(:disabled) { background:rgba(139,184,255,.1); }
.pos-cart__qty-btn:disabled { opacity:.25; cursor:not-allowed; }
.pos-cart__qty-val { font-size:.6875rem; font-weight:600; color:var(--color-ice-800); min-width:18px; text-align:center; }
.pos-cart__sub { font-size:.75rem; font-weight:600; color:var(--color-ice-700); min-width:64px; text-align:right; flex-shrink:0; }

.pos-cart__ft { padding:10px 14px; border-top:1px solid rgba(180,200,230,.12); display:flex; flex-direction:column; gap:8px; }
.pos-cart__total { display:flex; justify-content:space-between; align-items:center; font-size:.75rem; color:var(--color-ice-500); }
.pos-cart__total strong { font-size:1rem; color:var(--color-ice-900); }

.pos-cart__empty { flex:1 1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; color:var(--color-ice-300); text-align:center; }
.pos-cart__empty svg { width:36px; height:36px; margin-bottom:8px; }
.pos-cart__empty p { font-size:.6875rem; }

/* ── Modal ── */
.modal { position:fixed; inset:0; z-index:100; background:rgba(21,46,92,.2); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:16px; animation:modal-in .2s ease; }
.modal__box { background:rgba(255,255,255,.65); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); border:1px solid rgba(255,255,255,.7); border-radius:20px; box-shadow:0 16px 48px rgba(21,46,92,.1); padding:28px; max-width:400px; width:100%; max-height:85dvh; overflow-y:auto; animation:modal-up .25s ease; }
@keyframes modal-in { from{opacity:0} to{opacity:1} }
@keyframes modal-up { from{opacity:0;transform:translateY(16px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }

/* ── Project Cards ── */
.pj { display:grid; grid-template-columns:1fr; grid-gap:10px; gap:10px; }
@media (min-width:480px) { .pj { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .pj { grid-template-columns:repeat(3,1fr); } }

.pj-card { background:rgba(255,255,255,.45); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.6); border-radius:14px; padding:16px; cursor:pointer; transition:all .15s; }
.pj-card:hover { background:rgba(255,255,255,.65); box-shadow:0 8px 24px rgba(21,46,92,.07); transform:translateY(-2px); }
.pj-card__top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:10px; }
.pj-card__icon { width:36px; height:36px; border-radius:10px; background:rgba(139,184,255,.1); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#5A94F5; }
.pj-card__icon svg { width:18px; height:18px; }
.pj-card__client { font-size:.6875rem; color:var(--color-ice-400); margin-bottom:10px; }
.pj-bar { width:100%; height:6px; background:rgba(139,184,255,.12); border-radius:99px; overflow:hidden; margin-bottom:6px; }
.pj-bar__fill { height:100%; border-radius:99px; background:linear-gradient(90deg,#5A94F5,#3B78E0); }
.pj-card__meta { display:flex; justify-content:space-between; font-size:.625rem; color:var(--color-ice-400); }

/* ── Form / Settings ── */
.form-group { margin-bottom:12px; }
.form-label { display:block; font-size:.6875rem; font-weight:500; color:var(--color-ice-600); margin-bottom:4px; }
.form-hint { font-size:.625rem; color:var(--color-ice-400); margin-top:3px; }
.section { margin-bottom:20px; }
.section__title { font-size:1rem; font-weight:600; color:var(--color-ice-900); margin-bottom:12px; }
.form-row { display:grid; grid-template-columns:1fr; grid-gap:10px; gap:10px; }
@media (min-width:480px) { .form-row { grid-template-columns:1fr 1fr; } }
.danger-box { border-color:rgba(239,68,68,.2) !important; }

/* ── Reports Chart ── */
.chart { display:flex; align-items:flex-end; gap:6px; height:180px; padding:0 8px; }
.chart__col { flex:1 1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; justify-content:flex-end; }
.chart__label { font-size:.5625rem; font-weight:500; color:var(--color-ice-500); }
.chart__bar { width:100%; border-radius:6px 6px 0 0; background:linear-gradient(to top,#5A94F5,#8BB8FF); min-height:3px; transition:height .5s ease; }
.chart__val { font-size:.5625rem; font-weight:600; color:var(--color-ice-400); }

/* ── Toplist ── */
.toplist__item { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid rgba(180,200,230,.06); }
.toplist__rank { font-size:.6875rem; font-weight:700; color:var(--color-ice-300); width:20px; flex-shrink:0; }
.toplist__info { flex:1 1; min-width:0; }
.toplist__name { font-size:.75rem; font-weight:500; color:var(--color-ice-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.toplist__sub { font-size:.625rem; color:var(--color-ice-400); }
.toplist__val { font-size:.75rem; font-weight:600; color:var(--color-ice-600); flex-shrink:0; }

/* ── Login ── */
.login-page {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  overflow: hidden;
}

/* Video full screen, white letterbox kiri kanan jika perlu */
.login-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Form login di atas video */
.login-box {
  position: relative;
  z-index: 10;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 24px;
  padding: 32px 28px;
  width: 100%;
  max-width: 390px;
  box-shadow: 0 8px 40px rgba(21,46,92,.12);
}
.login-box__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.login-box__mark { display: none; }
.login-box__title {
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
  color: var(--color-ice-900);
}
.login-box__error {
  background: rgba(254,226,226,.5);
  color: #DC2626;
  font-size: .75rem;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  text-align: center;
}
.login-box__footer {
  text-align: center;
  margin-top: 20px;
  font-size: .6875rem;
  color: var(--color-ice-400);
}

/* ── Misc
 ── */
.muted { color:var(--color-ice-400); }
.fw-500 { font-weight:500; }
.ml-auto { margin-left:auto; }
.mt-auto { margin-top:auto; }
.mb-1 { margin-bottom:8px; }
.mb-2 { margin-bottom:16px; }
.row-warn { background:rgba(251,191,36,.03) !important; }


/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/globals.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════
   NIPEK SM — Global Styles (Mobile-First Premium)
   ═══════════════════════════════════════════════════════════ */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-ice-800);
  background: linear-gradient(160deg, #E8F0FE 0%, #F0F6FF 30%, #FAFCFF 60%, #EDF2FA 100%);
  background-attachment: fixed;
  min-height: 100dvh;
}

/* ── Typography ── */
h1 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--color-ice-900); }
h2 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--color-ice-800); }
h3 { font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--color-ice-800); }
p { margin-bottom: 0.75em; font-size: 0.875rem; }
@media (min-width: 768px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.25rem; }
}

a { color: var(--color-ice-600); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--color-ice-700); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(139, 184, 255, 0.4); border-radius: 4px; }

/* ── Selection ── */
::selection { background: rgba(90, 148, 245, 0.15); color: var(--color-ice-800); }

/* ═══════════════════════════════════════════════════════════
   Utility Classes
   ═══════════════════════════════════════════════════════════ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.signup-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 24px;
  gap: 24px;
  align-items: start;
}

@media (min-width: 768px) {
  .signup-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
}