/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-ease: initial;
      --tw-outline-style: solid;
      --tw-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0;
    }
  }
}

@layer theme {
  :root, :host {
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --spacing: .25rem;
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-display);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .\!static {
    position: static !important;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .z-\[260\] {
    z-index: 260;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .m-0 {
    margin: calc(var(--spacing) * 0);
  }

  .mx-\[var\(--space-2\)\] {
    margin-inline: var(--space-2);
  }

  .my-\[var\(--space-1\)\] {
    margin-block: var(--space-1);
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-\[1px\] {
    margin-top: 1px;
  }

  .mt-\[2px\] {
    margin-top: 2px;
  }

  .mt-\[var\(--space-2\)\] {
    margin-top: var(--space-2);
  }

  .mb-\[var\(--space-1\)\] {
    margin-bottom: var(--space-1);
  }

  .ml-\[var\(--space-2\)\] {
    margin-left: var(--space-2);
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .size-2 {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .size-\[14px\] {
    width: 14px;
    height: 14px;
  }

  .size-\[18px\] {
    width: 18px;
    height: 18px;
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-px {
    height: 1px;
  }

  .max-h-\[252px\] {
    max-height: 252px;
  }

  .max-h-\[260px\] {
    max-height: 260px;
  }

  .min-h-\[44px\] {
    min-height: 44px;
  }

  .min-h-\[var\(--control-h\)\] {
    min-height: var(--control-h);
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-9 {
    width: calc(var(--spacing) * 9);
  }

  .w-11 {
    width: calc(var(--spacing) * 11);
  }

  .w-\[240px\] {
    width: 240px;
  }

  .w-\[340px\] {
    width: 340px;
  }

  .w-\[var\(--radix-popover-trigger-width\)\] {
    width: var(--radix-popover-trigger-width);
  }

  .w-auto {
    width: auto;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .w-max {
    width: max-content;
  }

  .max-w-\[calc\(100vw-24px\)\] {
    max-width: calc(100vw - 24px);
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-\[240px\] {
    min-width: 240px;
  }

  .min-w-\[var\(--radix-select-trigger-width\)\] {
    min-width: var(--radix-select-trigger-width);
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .translate-x-0\.5 {
    --tw-translate-x: calc(var(--spacing) * .5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .resize {
    resize: both;
  }

  .grid-cols-\[36px_minmax\(0\,1fr\)\] {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .flex-col {
    flex-direction: column;
  }

  .place-items-center {
    place-items: center;
  }

  .items-center {
    align-items: center;
  }

  .items-start {
    align-items: flex-start;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-\[2px\] {
    gap: 2px;
  }

  .gap-\[var\(--space-2\)\] {
    gap: var(--space-2);
  }

  .gap-\[var\(--space-3\)\] {
    gap: var(--space-3);
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .rounded-\[var\(--radius-lg\)\] {
    border-radius: var(--radius-lg);
  }

  .rounded-\[var\(--radius-md\)\] {
    border-radius: var(--radius-md);
  }

  .rounded-\[var\(--radius-sm\)\] {
    border-radius: var(--radius-sm);
  }

  .rounded-\[var\(--radius-xl\)\] {
    border-radius: var(--radius-xl);
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .border-\[1\.5px\] {
    border-style: var(--tw-border-style);
    border-width: 1.5px;
  }

  .border-\[var\(--line-strong\)\] {
    border-color: var(--line-strong);
  }

  .bg-\[var\(--line\)\] {
    background-color: var(--line);
  }

  .bg-\[var\(--line-strong\)\] {
    background-color: var(--line-strong);
  }

  .bg-\[var\(--pink\)\] {
    background-color: var(--pink);
  }

  .bg-\[var\(--surface\)\] {
    background-color: var(--surface);
  }

  .bg-\[var\(--white\)\] {
    background-color: var(--white);
  }

  .bg-transparent {
    background-color: #0000;
  }

  .p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .p-\[var\(--space-1\)\] {
    padding: var(--space-1);
  }

  .p-\[var\(--space-2\)\] {
    padding: var(--space-2);
  }

  .p-\[var\(--space-3\)\] {
    padding: var(--space-3);
  }

  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }

  .px-\[var\(--space-3\)\] {
    padding-inline: var(--space-3);
  }

  .py-\[var\(--space-1\)\] {
    padding-block: var(--space-1);
  }

  .pr-\[var\(--space-2\)\] {
    padding-right: var(--space-2);
  }

  .pl-\[var\(--space-3\)\] {
    padding-left: var(--space-3);
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-\[0\.75rem\] {
    font-size: .75rem;
  }

  .text-\[12px\] {
    font-size: 12px;
  }

  .text-\[14px\] {
    font-size: 14px;
  }

  .text-\[length\:inherit\] {
    font-size: inherit;
  }

  .leading-\[1\.3\] {
    --tw-leading: 1.3;
    line-height: 1.3;
  }

  .leading-\[1\.35\] {
    --tw-leading: 1.35;
    line-height: 1.35;
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .text-\[var\(--ink\)\] {
    color: var(--ink);
  }

  .text-\[var\(--ink-mute\)\] {
    color: var(--ink-mute);
  }

  .text-\[var\(--ink-soft\)\] {
    color: var(--ink-soft);
  }

  .text-\[var\(--primary\)\] {
    color: var(--primary);
  }

  .text-muted-foreground, .text-muted-foreground\/50 {
    color: var(--ink-mute);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/50 {
      color: color-mix(in oklab, var(--ink-mute) 50%, transparent);
    }
  }

  .capitalize {
    text-transform: capitalize;
  }

  .italic {
    font-style: italic;
  }

  .no-underline {
    text-decoration-line: none;
  }

  .opacity-40 {
    opacity: .4;
  }

  .shadow-\[var\(--shadow-pop\)\,inset_0_0_0_1px_var\(--line\)\] {
    --tw-shadow: var(--shadow-pop), inset 0 0 0 1px var(--tw-shadow-color, var(--line));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[var\(--shadow-pop\)\] {
    --tw-shadow: var(--shadow-pop);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[var\(--shadow-sm\)\] {
    --tw-shadow: var(--shadow-sm);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .\[font\:var\(--text-body\)\] {
    font: var(--text-body);
  }

  @media (hover: hover) {
    .hover\:bg-\[var\(--surface-soft\)\]:hover, .hover\:bg-accent:hover {
      background-color: var(--surface-soft);
    }

    .hover\:text-accent-foreground:hover {
      color: var(--ink);
    }
  }

  .focus\:shadow-none:focus {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:shadow-\[var\(--shadow-focus\)\]:focus-visible {
    --tw-shadow: var(--shadow-focus);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:outline-2:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }

  .focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px;
  }

  .focus-visible\:outline-\[var\(--primary\)\]:focus-visible {
    outline-color: var(--primary);
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:opacity-40:disabled {
    opacity: .4;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .aria-selected\:font-bold[aria-selected="true"] {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .data-\[active\]\:bg-\[var\(--surface-soft\)\][data-active] {
    background-color: var(--surface-soft);
  }

  .data-\[disabled\]\:cursor-not-allowed[data-disabled] {
    cursor: not-allowed;
  }

  .data-\[disabled\]\:opacity-45[data-disabled] {
    opacity: .45;
  }

  .data-\[disabled\]\:opacity-50[data-disabled] {
    opacity: .5;
  }

  .data-\[highlighted\]\:bg-\[var\(--surface-soft\)\][data-highlighted] {
    background-color: var(--surface-soft);
  }

  .data-\[placeholder\]\:text-\[var\(--ink-mute\)\][data-placeholder] {
    color: var(--ink-mute);
  }

  :is(.\*\:data-\[slot\=select-value\]\:truncate > *)[data-slot="select-value"] {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .data-\[state\=checked\]\:translate-x-\[22px\][data-state="checked"] {
    --tw-translate-x: 22px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[state\=checked\]\:border-\[var\(--primary\)\][data-state="checked"] {
    border-color: var(--primary);
  }

  .data-\[state\=checked\]\:bg-\[var\(--primary\)\][data-state="checked"] {
    background-color: var(--primary);
  }

  .data-\[state\=checked\]\:font-bold[data-state="checked"] {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .data-\[state\=checked\]\:text-\[var\(--on-primary\)\][data-state="checked"] {
    color: var(--on-primary);
  }

  .data-\[state\=closed\]\:animate-out[data-state="closed"] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s)) var(--tw-ease, ease) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
  }

  .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
    --tw-exit-opacity: 0;
  }

  .data-\[state\=open\]\:animate-in[data-state="open"] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s)) var(--tw-ease, ease) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
  }

  .data-\[state\=open\]\:fade-in-0[data-state="open"] {
    --tw-enter-opacity: 0;
  }

  .\[\&_svg\]\:text-\[var\(--ink-mute\)\] svg {
    color: var(--ink-mute);
  }

  .\[\&\>button\]\:border > button {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .\[\&\>button\]\:border-primary > button {
    border-color: var(--primary);
  }

  .\[\&\>button\]\:bg-primary > button {
    background-color: var(--primary);
  }

  .\[\&\>button\]\:text-primary-foreground > button {
    color: var(--on-primary);
  }

  @media (hover: hover) {
    .\[\&\>button\]\:hover\:bg-primary > button:hover {
      background-color: var(--primary);
    }

    .\[\&\>button\]\:hover\:text-primary-foreground > button:hover {
      color: var(--on-primary);
    }
  }
}

@property --tw-animation-delay {
  syntax: "*";
  inherits: false;
  initial-value: 0s;
}

@property --tw-animation-direction {
  syntax: "*";
  inherits: false;
  initial-value: normal;
}

@property --tw-animation-duration {
  syntax: "*";
  inherits: false
}

@property --tw-animation-fill-mode {
  syntax: "*";
  inherits: false;
  initial-value: none;
}

@property --tw-animation-iteration-count {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
    filter: blur(var(--tw-enter-blur, 0));
  }
}

@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
    filter: blur(var(--tw-exit-blur, 0));
  }
}
/* K3Mart Mitra Portal — generated from tokens.json */
:root, [data-theme="light"] {
  --primary: #1e7c78; /* Teal tua K3Mart, warna aksi: tombol primary, menu aktif, baris tabel terpilih (teks `on-primary`), tautan, garis fokus isian, batang "hari ini" di grafik. Di tema gelap teal lebih terang, jadi teks di atasnya memakai `on-primary`, bukan putih. */
  --primary-strong: #155b58; /* Hover tombol primary; teks di atas `primary-soft` (7,6:1). */
  --primary-soft: #e4f2f1; /* Latar menu aktif, baris pilihan terpilih, Callout info, ubin ikon teal. */
  --on-primary: #ffffff; /* Teks dan ikon di atas isian `primary` (tombol, baris terpilih, halaman aktif, penghitung). Putih di tema terang (5,0:1), teal tua di tema gelap (7,9:1). */
  --tosca: #2ec4b6; /* Tosca K3Mart. Seri grafik kedua, isian progres di tema gelap, titik dekorasi. Bukan untuk teks di atas putih. */
  --tosca-soft: #ddf6f2; /* Batang grafik muda, ubin ikon tosca. */
  --pink: #e91e63; /* Pink K3Mart. Satu aksi konversi per alur (tombol `accent`), jumlah notifikasi. Teks putih di atasnya hanya 15px tebal ke atas (4,3:1). */
  --pink-soft: #ffe3ee; /* Latar badge MITRA dan ubin ikon pink. */
  --pink-ink: #a3124a; /* Teks di atas `pink-soft` (6,4:1). */
  --yellow: #ffd629; /* Kuning K3Mart. Latar avatar, sorotan, aksen grafik. Teks di atasnya selalu `ink-fixed` (13:1), tidak pernah putih. */
  --yellow-soft: #fff4d6; /* Latar pill `wait`, Alert dan Callout `warn`, ubin ikon kuning. */
  --yellow-ink: #8a6500; /* Teks dan ikon status `wait` di atas `surface` dan `yellow-soft` (4,9:1). */
  --ink: #16191f; /* Tinta K3Mart. Judul, teks isi, dan angka di atas `surface`, `canvas`, dan semua latar lembut. */
  --ink-soft: #454b53; /* Teks sekunder, label isian, label tab yang tidak aktif (8,6:1 di atas `surface`). */
  --ink-mute: #6b7076; /* Keterangan, kepala tabel, baris meta (4,9:1 di atas `surface` dan `canvas`). */
  --canvas: #ffffff; /* Latar aplikasi, putih seperti halaman pendaftaran; bentuk gelombang datar teal dan pink ada di belakang rangka desktop. Kartu dipisahkan dengan garis `line` dan `shadow-card`. */
  --surface: #ffffff; /* Kartu, sheet, menu samping, baris tabel. */
  --surface-soft: #f5f7f8; /* Isi kolom isian, ubin ikon, hover baris, chip terpilih, penghitung. */
  --line: #e8ecef; /* Garis rambut antarbaris, tepi isian dan tombol sekunder, serta garis 1px setiap kartu di atas `canvas`. */
  --line-strong: #d5dbe0; /* Tepi tombol sekunder, baris pilihan yang tidak terpilih, tombol pager. */
  --success: #1b7a55; /* Teks dan ikon status `ok` ("Tersedia", "Cair") di atas `surface` (5,3:1); isian valid. */
  --success-soft: #e3f6ee; /* Latar pill `ok`, badge kenaikan, langkah selesai, Alert `ok`. */
  --danger: #c62828; /* Teks dan ikon status `need` ("Habis", "Ditolak"), galat, tombol kurang pada stepper (5,6:1 di atas `surface`). */
  --danger-soft: #fdecec; /* Latar baris yang perlu tindakan, Alert `err`, tombol kurang. */
  --scrim: rgba(22,25,31,0.42); /* Lapisan gelap di belakang sheet dan dialog. */
  --white: #ffffff; /* Selalu putih di kedua tema: teks di atas isian brand tetap (pink, danger, tooltip), kenop sakelar, ubin logo. */
  --ink-fixed: #16191f; /* Selalu gelap di kedua tema: teks di atas isian kuning, latar tooltip gelap. */
  --shadow-card: 0 1px 1px rgba(16,32,40,0.03), 0 10px 28px -16px rgba(16,32,40,0.16); /* Setiap kartu dan kartu statistik di atas `canvas`, selalu bersama garis `line` 1px. Lembut dan rendah; jangan ditumpuk pada kartu di dalam kartu. */
  --shadow-pop: 0 2px 4px rgba(16,32,40,0.05), 0 24px 48px -18px rgba(16,32,40,0.26); /* Sheet, menu, popover, kartu detail mengambang, tooltip grafik. */
  --shadow-primary: 0 6px 16px -6px rgba(30,124,120,0.55); /* Angkatan tombol primary. */
  --shadow-focus: 0 0 0 3px rgba(30,124,120,0.22); /* Cincin fokus di sekeliling isian yang difokus. */
  --shadow-sm: 0 1px 3px rgba(22,25,31,0.12); /* Item terpilih yang terangkat di dalam kontrol (tombol segmen, tab, sakelar tema, kenop sakelar). */
  --shadow-side: -8px 0 24px rgba(20,30,40,0.08); /* Laci kanan (panel detail). */
}
[data-theme="dark"] {
  --primary: #35bdb0;
  --primary-strong: #8ee3da;
  --primary-soft: #17332f;
  --on-primary: #06201d;
  --tosca: #2ec4b6;
  --tosca-soft: #153834;
  --pink: #e91e63;
  --pink-soft: #3b1827;
  --pink-ink: #ff9dbf;
  --yellow: #ffd629;
  --yellow-soft: #342b0c;
  --yellow-ink: #ffd966;
  --ink: #eaf2f1;
  --ink-soft: #bac8c6;
  --ink-mute: #8fa19f;
  --canvas: #0c1312;
  --surface: #141d1c;
  --surface-soft: #1b2827;
  --line: #263634;
  --line-strong: #374945;
  --success: #4fcb93;
  --success-soft: #123327;
  --danger: #ff8080;
  --danger-soft: #3c1a1a;
  --scrim: rgba(0,0,0,0.6);
  --white: #ffffff;
  --ink-fixed: #16191f;
  --shadow-card: 0 1px 1px rgba(0,0,0,0.3), 0 10px 28px -16px rgba(0,0,0,0.6);
  --shadow-pop: 0 2px 4px rgba(0,0,0,0.3), 0 24px 48px -18px rgba(0,0,0,0.7);
  --shadow-primary: 0 6px 16px -6px rgba(53,189,176,0.45);
  --shadow-focus: 0 0 0 3px rgba(53,189,176,0.35);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-side: -8px 0 24px rgba(0,0,0,0.5);
}
:root {
  --space-1: 4px; /* Jarak ikon ke label di kontrol kecil. */
  --space-2: 8px; /* Jarak antarchip, antartombol dalam satu baris, antarbaris dalam sel; label ke kotak isian. */
  --space-3: 12px; /* Jarak kolom FormGrid, jarak di dalam kartu dan baris. */
  --space-4: 16px; /* Padding kartu dan blok di HP, jarak antarkartu di HP, gutter HP. */
  --space-5: 24px; /* Padding kartu dan blok di desktop, jarak antarkartu di desktop. */
  --space-6: 32px; /* Padding kolom utama di desktop. */
  --field-gap: 20px; /* Jarak antarfield dalam form, HP dan desktop: dari bawah field (kotak, keterangan, atau pesan galat) ke label field berikutnya. Juga jarak baris FormGrid. */
  --control-h: 48px; /* Tombol, isian, dan kolom form standar di desktop. */
  --control-h-xs: 34px; /* Kontrol ringkas: tombol segmen, pager, chip, pilih periode, tombol ikon kecil. */
  --control-h-sm: 40px; /* Kontrol toolbar dan filter, tombol kecil (`sm`), tombol ikon header, baris menu, CopyButton. */
  --control-h-lg: 52px; /* Kolom form dan kartu pilihan di HP. */
  --sidebar-w: 240px; /* Lebar menu samping desktop. */
  --radius-sm: 8px; /* Tag, penghitung kecil, tombol pager. */
  --radius-md: 12px; /* Tombol, isian, ubin ikon, Alert dan Callout. */
  --radius-lg: 16px; /* Baris tabel (terpilih dan peringatan), baris pilihan, item menu, thumbnail, area unggah. */
  --radius-xl: 22px; /* Kartu, BlockCard, sheet, dialog, kartu statistik. */
  --radius-pill: 999px; /* Pill status, chip, badge, avatar, CopyButton. */
  --font-display: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
.h1 {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.h2 {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.h3 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.page-title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.h4 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.h5 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.card-title {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.h6 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0;
}
.figure-xl {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.figure {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.input {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0;
}
.button {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0;
}
.body-strong {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0;
}
.button-sm {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}
.field-label {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0;
}
.badge {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}
.help {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0;
}
.code {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0;
}
.tag {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.06em;
}

@font-face {
  font-family: "Montserrat";
  src: url("/assets/Montserrat-latin-wght-l_AIctKy.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/IBMPlexMono-latin-500-DSY6xOcd.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/IBMPlexMono-latin-600-BgSNZQsw.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Gaya teks: pintasan dari tokens.json (type). Ubah nilainya di tokens.json, lalu samakan di sini. */
:root{
  --text-h1: 800 48px/1.15 var(--font-display);
  --text-h2: 800 40px/1.2 var(--font-display);
  --text-h3: 800 32px/1.2 var(--font-display);
  --text-page-title: 800 28px/1.15 var(--font-display);
  --text-h4: 800 24px/1.2 var(--font-display);
  --text-h5: 800 20px/1.25 var(--font-display);
  --text-card-title: 800 18px/1.25 var(--font-display);
  --text-h6: 700 16px/1.3 var(--font-display);
  --text-figure-xl: 800 52px/1 var(--font-display);
  --text-figure: 800 30px/1.05 var(--font-display);
  --text-input: 500 16px/1.4 var(--font-display);
  --text-button: 700 15px/1 var(--font-display);
  --text-body: 500 14px/1.5 var(--font-display);
  --text-body-strong: 700 14px/1.35 var(--font-display);
  --text-button-sm: 700 13px/1 var(--font-display);
  --text-field-label: 600 14px/1.3 var(--font-display);
  --text-label: 600 13px/1.3 var(--font-display);
  --text-help: 500 13px/1.4 var(--font-display);
  --text-caption: 500 12px/1.35 var(--font-display);
  --text-code: 500 12px/1.3 var(--font-mono);
  --text-tag: 600 11px/1 var(--font-mono);
}
/* K3Mart Mitra Portal v2 · CSS components. Wrap every screen in .k3a. Values come from tokens.css. */
.k3a{--a-bg:var(--canvas);--a-card:var(--surface);--a-ff:var(--surface-soft);--a-fl:var(--line-strong);--a-line:var(--line);--a-ink:var(--ink);--a-soft:var(--ink-soft);--a-mute:var(--ink-mute);--a-primary:var(--primary);--a-primary-d:var(--primary-strong);--a-primary-t:var(--primary-soft);--a-pink:var(--pink);--a-pink-t:var(--pink-soft);--a-yellow:var(--yellow);--a-yellow-t:var(--yellow-soft);--a-danger:var(--danger);--a-danger-t:var(--danger-soft);--a-ok:var(--success);--a-ok-t:var(--success-soft);--a-r:var(--radius-xl);--a-rs:var(--radius-md);--a-sh:var(--shadow-card);--a-sh-s:var(--shadow-card)}
.k3a{font-family:var(--font-display);color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;font-size:14px;font-weight:500}
.k3a b,.k3a strong{font-weight:700}
.k3a code,.k3a kbd,.k3a samp{font-family:var(--font-mono)}
.k3a *{box-sizing:border-box}
.k3a :focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.k3a svg{flex:none}
/* brand */
.k3a-logo{width:38px;height:38px;border-radius:var(--radius-md);background:var(--primary);display:grid;place-items:center;flex:none}
.k3a-logo i{display:block;width:15px;height:3px;border-radius:2px;background:var(--white);box-shadow:0 5px 0 var(--yellow),0 -5px 0 var(--tosca)}
.k3a-brand{font:800 20px/1 var(--font-display);letter-spacing:-.01em;color:var(--ink)}
.k3a-brand b{color:var(--primary);font-weight:800}
.k3a-badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);font:var(--text-tag);letter-spacing:.06em;text-transform:uppercase;background:var(--pink-soft);color:var(--pink-ink)}
.k3a-tag{display:inline-block;font:var(--text-tag);letter-spacing:.06em;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);color:var(--ink-mute);background:var(--surface-soft)}
.k3a-top{display:flex;align-items:center;gap:var(--space-2);padding:10px var(--space-4);background:var(--surface);box-shadow:0 1px 0 var(--line)}
.k3a-top.sticky{position:sticky;top:0;z-index:20}
.k3a-top .me{margin-left:auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--ink);font:800 13px/1 var(--font-display);text-decoration:none}
/* type */
.k3a-h1{margin:0;font:var(--text-page-title);letter-spacing:-.02em}
.k3a-h2{margin:0;font:var(--text-card-title)}
.k3a-lead{margin:0;font:500 15px/1.5 var(--font-display);color:var(--ink-soft)}
.k3a-help{font:500 13px/1.5 var(--font-display);color:var(--ink-mute)}
.k3a-link{color:var(--primary);font-weight:700;text-decoration:none}
.k3a-link:hover{text-decoration:underline}
.k3a-num{font-variant-numeric:tabular-nums}
/* card */
.k3a-card{background:var(--surface);border-radius:var(--radius-xl);padding:var(--space-5);box-shadow:var(--shadow-card)}
.k3a-card.flat{box-shadow:none;border:1px solid var(--line)}
.k3a-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-4)}
.k3a-card-head h2{margin:0;font:var(--text-card-title)}
.k3a-card-head small{display:block;margin-top:3px;font:var(--text-caption);color:var(--ink-mute)}
.k3a-more{width:var(--control-h-xs);height:var(--control-h-xs);border:0;border-radius:var(--radius-md);background:transparent;color:var(--ink-mute);font:800 18px/1 var(--font-display);letter-spacing:1px;cursor:pointer}
.k3a-more:hover{background:var(--surface-soft)}
/* field */
.k3a-field{display:grid;gap:var(--space-2);margin-bottom:var(--space-4)}
.k3a-field>label{font:var(--text-field-label);color:var(--ink-soft)}
.k3a-field .req{color:var(--pink);margin-left:2px}
.k3a-ctl{display:flex;gap:var(--space-2)}
.k3a-affix{flex:none;min-width:var(--control-h);display:grid;place-items:center;padding:0 var(--space-3);border-radius:var(--radius-md);background:var(--surface-soft);font:var(--text-button);color:var(--ink-soft)}
.k3a-in{flex:1;min-width:0;width:100%;height:var(--control-h);padding:0 var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-soft);font:600 15px/1 var(--font-display);color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.k3a-in::placeholder{color:var(--ink-mute);font-weight:500}
.k3a-in:hover{border-color:var(--line-strong)}
.k3a-in:focus{border-color:var(--primary);background:var(--surface);box-shadow:var(--shadow-focus)}
.k3a-field.err .k3a-in{border-color:var(--danger);background:var(--danger-soft)}
.k3a-field .msg{display:flex;gap:var(--space-2);align-items:center;font:600 13px/1.4 var(--font-display);color:var(--danger)}
.k3a-field.ok .k3a-in{border-color:var(--success)}
.k3a-select{appearance:none;padding-right:40px;background:var(--surface-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23454B53' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m1.5 1.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") no-repeat right 14px center}
.k3a-search{position:relative;display:block;min-width:0}
.k3a-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-mute);pointer-events:none}
.k3a-search .k3a-in{padding-left:40px;background:var(--surface)}
.k3a-otp{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-2);margin:0 0 var(--space-4)}
.k3a-otp input{width:100%;min-width:0;height:var(--control-h-lg);text-align:center;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-soft);font:800 24px/1 var(--font-display);color:var(--ink);outline:none;padding:0}
.k3a-otp input:focus{border-color:var(--primary);background:var(--surface);box-shadow:var(--shadow-focus)}
.k3a-check{display:flex;gap:var(--space-3);align-items:flex-start;font:var(--text-body);color:var(--ink-soft)}
.k3a-check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--primary);flex:none}
/* buttons */
.k3a-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-h);padding:0 20px;border-radius:var(--radius-md);border:1px solid transparent;font:var(--text-button);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,transform .1s,box-shadow .15s}
.k3a-btn:active{transform:translateY(1px)}
.k3a-btn.primary{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-primary)}
.k3a-btn.primary:hover{background:var(--primary-strong)}
.k3a-btn.accent{background:var(--pink);color:var(--white)}
.k3a-btn.line{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.k3a-btn.line:hover{background:var(--surface-soft)}
.k3a-btn.ghost{background:transparent;color:var(--primary)}
.k3a-btn.ghost:hover{background:var(--primary-soft)}
.k3a-btn.sm{min-height:var(--control-h-sm);padding:0 var(--space-3);font-size:13px;box-shadow:none}
.k3a-btn.block{width:100%}
.k3a-btn:disabled,.k3a-btn.off{background:var(--surface-soft);color:var(--ink-mute);border-color:var(--line);box-shadow:none;cursor:not-allowed}
/* status: icon + word (default plain, as in the reference); .pill adds a soft ground */
.k3a-st{display:inline-flex;align-items:center;gap:var(--space-2);font:700 13px/1.2 var(--font-display);white-space:nowrap}
.k3a-st::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--st-ic) center/contain no-repeat;mask:var(--st-ic) center/contain no-repeat;flex:none}
.k3a-st.ok{color:var(--success);--st-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.7 2.7L16 9.6'/%3E%3C/svg%3E")}
.k3a-st.wait{color:var(--yellow-ink);--st-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E")}
.k3a-st.need{color:var(--danger);--st-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.3v.2'/%3E%3C/svg%3E")}
.k3a-st.off{color:var(--ink-mute);--st-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E")}
.k3a-st.pill{padding:var(--space-1) var(--space-2) var(--space-1) var(--space-2);border-radius:var(--radius-pill);font-size:12px}
.k3a-st.pill::before{width:14px;height:14px}
.k3a-st.pill.ok{background:var(--success-soft)}
.k3a-st.pill.wait{background:var(--yellow-soft)}
.k3a-st.pill.need{background:var(--danger-soft)}
.k3a-st.pill.off{background:var(--surface-soft)}
.k3a-st.plain{}
.k3a-delta{display:inline-flex;align-items:center;gap:3px;margin-left:var(--space-2);vertical-align:1px;padding:3px var(--space-2);border-radius:var(--radius-pill);font:700 12px/1 var(--font-display);background:var(--success-soft);color:var(--success)}
.k3a-delta::after{content:"";width:11px;height:11px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat}
.k3a-delta.down{background:var(--danger-soft);color:var(--danger)}
.k3a-delta.down::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10M17 9v8H9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10M17 9v8H9'/%3E%3C/svg%3E")}
/* alert */
.k3a-alert{display:flex;background:var(--primary-soft);color:var(--primary-strong)}
.k3a-alert.warn{background:var(--yellow-soft);color:var(--yellow-ink)}
.k3a-alert.err{background:var(--danger-soft);color:var(--danger)}
/* stat tiles */
.k3a-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.k3a-stats.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.k3a-stat{padding:var(--space-4) 20px;border-radius:var(--radius-xl);background:var(--surface);display:grid;gap:var(--space-2);box-shadow:var(--shadow-card);min-width:0;align-content:start}
.k3a-stat small{display:block;font:600 12px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a-stat b{font:800 28px/1.05 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.k3a-stat .note{font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a-stat.hl{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-primary)}
.k3a-stat.hl small,.k3a-stat.hl .note{color:color-mix(in srgb,var(--on-primary) 78%,transparent)}
/* chips (filter) and tabs */
.k3a-chips{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}
.k3a-chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.k3a-chips.scroll::-webkit-scrollbar{display:none}
.k3a-chip{display:inline-flex;align-items:center;gap:var(--space-2);border:0;background:transparent;border-radius:var(--radius-pill);padding:var(--space-2) var(--space-3);font:600 13px/1 var(--font-display);color:var(--ink-soft);cursor:pointer;white-space:nowrap}
.k3a-chip:hover{background:var(--surface-soft)}
.k3a-chip i{font-style:normal;display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 var(--space-2);border-radius:var(--radius-pill);background:var(--surface-soft);color:var(--ink-mute);font:700 11px/1 var(--font-display)}
.k3a-chip.on{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:var(--shadow-sm)}
.k3a-chip.on i{background:var(--primary);color:var(--on-primary)}
.k3a-tabs{display:flex;gap:var(--space-1);border-bottom:1px solid var(--line)}
.k3a-tabs button{border:0;background:transparent;padding:var(--space-3) var(--space-3);margin-bottom:-1px;border-bottom:2px solid transparent;font:600 14px/1 var(--font-display);color:var(--ink-mute);cursor:pointer}
.k3a-tabs button.on{color:var(--primary);border-bottom-color:var(--primary);font-weight:700}
/* data table (reference: plain header, airy rows, solid selected row) */
.k3a-table-wrap{overflow-x:auto;min-width:0}
.k3a-table{width:100%;border-collapse:separate;border-spacing:0 4px;font:500 14px/1.35 var(--font-display);color:var(--ink)}
.k3a-table th{padding:var(--space-2) var(--space-3);text-align:left;font:600 12px/1.2 var(--font-display);color:var(--ink-mute);white-space:nowrap;border-bottom:1px solid var(--line)}
.k3a-table td{padding:var(--space-3) var(--space-3);vertical-align:middle;background:var(--surface)}
.k3a-table td:first-child{border-radius:var(--radius-lg) 0 0 var(--radius-lg)}
.k3a-table td:last-child{border-radius:0 var(--radius-lg) var(--radius-lg) 0}
.k3a-table th:first-child,.k3a-table td:first-child{padding-left:var(--space-4)}
.k3a-table th:last-child,.k3a-table td:last-child{padding-right:var(--space-4)}
.k3a-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.k3a-table tbody tr.go{cursor:pointer}
.k3a-table tbody tr.go:hover td{background:var(--surface-soft)}
.k3a-table tbody tr.sel td,.k3a-table tbody tr.sel:hover td{background:var(--primary);color:var(--on-primary)}
.k3a-table tbody tr.sel small,.k3a-table tbody tr.sel .sub,.k3a-table tbody tr.sel .k3a-st,.k3a-table tbody tr.sel .low{color:var(--on-primary)}
.k3a-table tbody tr.warn td{background:var(--danger-soft)}
.k3a-table .sub{display:block;margin-top:2px;font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a-table .low{color:var(--danger);font-weight:700}
.k3a-sort{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;gap:var(--space-1);align-items:center}
.k3a-sort.on{color:var(--ink)}
.k3a-item{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.k3a-table .k3a-item{min-width:240px}
.k3a-item b{display:block;font:700 14px/1.3 var(--font-display)}
.k3a-item small{font:var(--text-code);color:var(--ink-mute)}
.k3a-thumb{flex:none;width:44px;height:44px;border-radius:var(--radius-md);overflow:hidden;background:var(--surface-soft)}
.k3a-thumb img{width:100%;height:100%;display:block;object-fit:cover}
.k3a-pager{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-1) 0;font:600 13px/1.2 var(--font-display);color:var(--ink-mute)}
.k3a-pager .bt{display:flex;gap:var(--space-2);align-items:center}
.k3a-pager button{min-width:34px;height:var(--control-h-xs);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);font:var(--text-button);color:var(--ink);cursor:pointer}
.k3a-pager button:disabled{opacity:.4;cursor:default}
/* list rows */
.k3a-list{display:grid;border-radius:var(--radius-xl);background:var(--surface);overflow:hidden;box-shadow:var(--shadow-card);padding:var(--space-2) 0}
.k3a-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 20px}
.k3a-row+.k3a-row{border-top:1px solid var(--line)}
.k3a-row .ic{flex:none;width:40px;height:40px;border-radius:var(--radius-md);background:var(--primary-soft);display:grid;place-items:center;color:var(--primary)}
.k3a-row .tx{flex:1;min-width:0;display:grid;gap:2px}
.k3a-row .tx b{font:700 14px/1.3 var(--font-display)}
.k3a-row .tx>span{font:var(--text-caption);color:var(--ink-mute)}
.k3a-row .end{text-align:right;font:800 14px/1.2 var(--font-display);font-variant-numeric:tabular-nums}
/* steps + progress */
.k3a-steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--space-2)}
.k3a-step{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-3);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-card);font:var(--text-label);color:var(--ink-soft)}
.k3a-step b{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--success-soft);color:var(--success);font-size:13px}
.k3a-step.todo b{background:var(--surface-soft);color:var(--ink-mute)}
.k3a-step.now{color:var(--ink);box-shadow:inset 0 0 0 2px var(--primary)}
.k3a-step.now b{background:var(--primary);color:var(--on-primary)}
.k3a-bar{height:8px;border-radius:var(--radius-pill);background:var(--surface-soft);overflow:hidden}
.k3a-bar i{display:block;height:100%;background:var(--success);border-radius:var(--radius-pill)}
/* checklist */
.k3a-cl{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.k3a-cl li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--space-3);align-items:start;padding:var(--space-4);border-radius:var(--radius-lg);background:var(--surface-soft)}
.k3a-cl li.now{background:var(--surface);box-shadow:inset 0 0 0 2px var(--primary)}
.k3a-cl .dot{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--surface);color:var(--ink-mute);font:800 13px/1 var(--font-display);box-shadow:inset 0 0 0 1px var(--line-strong)}
.k3a-cl li.now .dot{background:var(--primary);color:var(--on-primary);box-shadow:none}
.k3a-cl li.done .dot{background:var(--success);color:var(--white);box-shadow:none}
.k3a-cl b{display:block;font:700 15px/1.3 var(--font-display)}
.k3a-cl small{display:block;margin-top:3px;font:500 13px/1.45 var(--font-display);color:var(--ink-mute)}
.k3a-cl .k3a-btn{margin-top:var(--space-3)}
/* empty state */
.k3a-empty{display:grid;justify-items:center;gap:var(--space-2);text-align:center;padding:var(--space-6) 20px;border-radius:var(--radius-xl);background:var(--surface);font:var(--text-body);color:var(--ink-mute)}
.k3a-empty b{font:var(--text-h6);color:var(--ink)}
.k3a-empty .big{width:64px;height:64px;border-radius:50%;background:var(--primary-soft);display:grid;place-items:center;color:var(--primary)}
/* sheet */
.k3a-scrim{position:fixed;inset:0;z-index:200;background:var(--scrim);display:flex;justify-content:flex-end;padding:var(--space-3);box-sizing:border-box}
.k3a-scrim .shut{position:absolute;inset:0;border:0;background:transparent;cursor:default}
.k3a-sheet{position:relative;z-index:1;width:440px;max-width:100%;height:100%;background:var(--surface);display:flex;flex-direction:column;border-radius:var(--radius-xl);box-shadow:var(--shadow-pop);font-family:var(--font-display);color:var(--ink);overflow:hidden}
.k3a-scrim.bottom{align-items:flex-end;justify-content:center;padding:var(--sb,env(safe-area-inset-top,0px)) 0 var(--hi,0px)}
.k3a-scrim.bottom .k3a-sheet{width:100%;max-width:560px;height:auto;max-height:calc(100% - 8px);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
.k3a-sheet-h{display:flex;gap:var(--space-3);align-items:flex-start;padding:20px 20px var(--space-3)}
.k3a-sheet-h .tx{flex:1;min-width:0}
.k3a-sheet-h b{display:block;font:var(--text-card-title)}
.k3a-sheet-h small{display:block;margin-top:var(--space-1);font:var(--text-caption);color:var(--ink-mute)}
.k3a-sheet-h small.code{font:var(--text-code)}
.k3a-sheet-x{flex:none;width:var(--control-h-xs);height:var(--control-h-xs);border:0;border-radius:50%;background:var(--surface-soft);font:500 20px/1 var(--font-display);color:var(--ink-soft);cursor:pointer}
.k3a-sheet-b{flex:1;min-height:0;overflow-y:auto;padding:var(--space-1) 20px 20px;display:grid;gap:var(--space-4);align-content:start}
.k3a-sheet-f{display:flex;gap:var(--space-2);padding:var(--space-3) 20px var(--space-4);border-top:1px solid var(--line)}
.k3a-sheet-f .k3a-btn{flex:1}
.k3a-scrim.bottom .k3a-sheet-f .k3a-btn{font-size:14px;padding:0 var(--space-2)}
/* toast */
.k3a-toast{position:fixed;left:50%;bottom:calc(var(--hi,0px) + 92px);transform:translateX(-50%);z-index:300;background:var(--ink);color:var(--white);padding:var(--space-3) var(--space-4);border-radius:var(--radius-pill);font:600 13px/1.4 var(--font-display);max-width:min(92vw,520px);text-align:center;box-shadow:var(--shadow-pop)}
/* portal shell */
.k3a-portal{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh;background:var(--canvas)}
.k3a-side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:28px;padding:20px var(--space-4);background:var(--surface);box-shadow:1px 0 0 var(--line)}
.k3a-home{display:flex;align-items:center;gap:var(--space-2);text-decoration:none;color:inherit;padding:2px var(--space-2)}
.k3a-menu{display:grid;gap:2px}
.k3a-menu a{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-3);border-radius:var(--radius-lg);font:600 14px/1 var(--font-display);color:var(--ink-soft);text-decoration:none}
.k3a-menu a:hover{background:var(--surface-soft)}
.k3a-menu a svg,.k3a-menu a .d{width:20px;height:20px;color:var(--ink-mute)}
.k3a-menu a .d{border-radius:var(--radius-sm);background:var(--surface-soft)}
.k3a-menu a.on{background:var(--primary-soft);color:var(--primary-strong);font-weight:700}
.k3a-menu a.on svg{color:var(--primary)}
.k3a-menu a.on .d{background:var(--primary)}
.k3a-menu a.off{pointer-events:auto;position:relative;cursor:not-allowed}
.k3a-me{margin-top:auto;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-lg);background:var(--surface-soft)}
.k3a-me .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--ink-fixed);font:800 14px/1 var(--font-display);flex:none}
.k3a-me b{display:block;font:700 14px/1.2 var(--font-display)}
.k3a-me small{font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a-main{padding:28px var(--space-6) 56px;display:grid;gap:var(--space-5);max-width:1180px;width:100%;align-content:start;min-width:0}
.k3a-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.k3a-page-head h1{margin:0;font:var(--text-page-title);letter-spacing:-.02em}
.k3a-page-head p{margin:var(--space-2) 0 0;font:500 14px/1.45 var(--font-display);color:var(--ink-mute)}
.k3a-page-head .acts{display:flex;gap:var(--space-2);flex-wrap:wrap}
.k3a-toolbar{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.k3a-toolbar .k3a-search{flex:1 1 260px}
.k3a-toolbar .k3a-select{flex:0 0 auto;width:auto;min-width:170px;background-color:var(--surface)}
.k3a-nav{display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);box-shadow:0 -1px 0 var(--line);padding:8px 6px calc(10px + env(safe-area-inset-bottom,0px))}
.k3a-nav a{display:grid;justify-items:center;gap:var(--space-1);padding:var(--space-1) 0;font:600 12px/1 var(--font-display);color:var(--ink-mute);text-decoration:none}
.k3a-nav a svg,.k3a-nav a .d{width:22px;height:22px}
.k3a-nav a .d{border-radius:var(--radius-sm);background:var(--surface-soft)}
.k3a-nav a.on{color:var(--primary);font-weight:700}
.k3a-nav a.on .d{background:var(--primary)}
.k3a-nav a.off{pointer-events:auto;position:relative;cursor:not-allowed}
.k3a-nav a.off::after{content:'';position:absolute;top:4px;right:calc(50% - 18px);width:12px;height:12px;background:var(--ink-mute);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat}
.k3a-nav.fixed{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:560px;z-index:30}
@media (max-width:900px){
  .k3a-portal{grid-template-columns:minmax(0,1fr)}
  .k3a-side{display:none}
  .k3a-main{padding:var(--space-4) var(--space-4) 104px;gap:var(--space-4)}
  .k3a-page-head h1{font-size:24px}
  .k3a-stats,.k3a-stats.four{grid-template-columns:1fr 1fr;gap:var(--space-3)}
  .k3a-stat{padding:var(--space-3) var(--space-4)}
  .k3a-stat b{font-size:20px}
  .k3a-card{padding:var(--space-4)}
  .k3a-toolbar .k3a-select{flex:1 1 0;min-width:0}
  .k3a-steps{grid-auto-flow:row;grid-auto-columns:auto}
}
@media (prefers-reduced-motion:reduce){.k3a *{transition:none!important}}
/* file upload */
.k3a-upload{display:grid;justify-items:center;gap:var(--space-2);padding:var(--space-5) 20px;border-radius:var(--radius-xl);background:var(--surface);border:1.5px dashed var(--line-strong);text-align:center;font:500 13px/1.5 var(--font-display);color:var(--ink-mute);cursor:pointer}
.k3a-upload b{font:var(--text-h6);color:var(--ink)}
.k3a-upload input[type=file]{display:none}
.k3a-upload .art,.k3a-progress .art{width:84px;height:64px}
.k3a-files{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.k3a-file{position:relative;width:76px;height:76px;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-soft)}
.k3a-file img{width:100%;height:100%;object-fit:cover;display:block}
.k3a-file .x{position:absolute;top:5px;right:5px;width:22px;height:22px;border:0;border-radius:50%;background:rgba(22,25,31,.7);color:var(--white);font:700 13px/22px var(--font-display);padding:0;cursor:pointer}
.k3a-file .main{position:absolute;left:5px;bottom:5px;padding:3px var(--space-2);border-radius:var(--radius-pill);background:var(--yellow);color:var(--ink);font:700 11px/1.2 var(--font-display)}
.k3a-file-add{display:grid;place-items:center;width:76px;height:76px;border:1.5px dashed var(--line-strong);border-radius:var(--radius-lg);background:var(--surface);color:var(--primary);font:600 28px/1 var(--font-display);cursor:pointer}
.k3a-progress{display:grid;gap:var(--space-2);text-align:center;justify-items:center;width:100%}
.k3a-progress .k3a-bar{width:100%}
.k3a-progress b{font:700 15px/1.3 var(--font-display);color:var(--ink)}
.k3a-progress>span{font:500 12px/1.4 var(--font-display);color:var(--ink-mute)}
/* date range */
.k3a-range{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.k3a-range .k3a-in{flex:1 1 140px;width:auto}
.k3a-range span{font:600 13px/1 var(--font-display);color:var(--ink-mute)}
/* timeline (reference: time left, hollow dots, place + detail) */
.k3a-tl{display:grid;gap:0;margin:0;padding:0;list-style:none}
.k3a-tl li{position:relative;display:grid;grid-template-columns:58px 18px minmax(0,1fr);gap:var(--space-3);padding-bottom:20px}
.k3a-tl li:last-child{padding-bottom:0}
.k3a-tl .t{font:600 12px/1.4 var(--font-display);color:var(--ink-soft);text-align:right;font-variant-numeric:tabular-nums}
.k3a-tl .p{position:relative;display:flex;justify-content:center}
.k3a-tl .p::before{content:"";width:10px;height:10px;margin-top:var(--space-1);border-radius:50%;border:2px solid var(--success);background:var(--surface);position:relative;z-index:1}
.k3a-tl li:not(:last-child) .p::after{content:"";position:absolute;top:18px;bottom:-2px;left:50%;width:2px;margin-left:-1px;background:var(--success-soft)}
.k3a-tl li.now .p::before{background:var(--primary);border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
.k3a-tl li.soon .p::before{border-color:var(--line-strong)}
.k3a-tl b{display:block;font:var(--text-body-strong)}
.k3a-tl small{display:block;margin-top:2px;font:500 12px/1.45 var(--font-display);color:var(--ink-mute)}
.k3a-tl li.soon b{color:var(--ink-mute)}
/* quantity stepper (reference: soft red minus, soft grey plus, big number) */
.k3a-qty{display:inline-flex;align-items:center;gap:var(--space-4)}
.k3a-qty button{width:44px;height:var(--control-h-sm);border-radius:50%;border:0;background:var(--surface-soft);font:600 24px/1 var(--font-display);color:var(--ink-soft);cursor:pointer;display:grid;place-items:center}
.k3a-qty button:first-child{background:var(--danger-soft);color:var(--danger)}
.k3a-qty button:disabled{opacity:.4;cursor:not-allowed}
.k3a-qty output{min-width:48px;text-align:center;font:800 28px/1 var(--font-display);font-variant-numeric:tabular-nums}
/* choice rows (reference: icon tile + label, selected row framed) */
.k3a-choices{display:grid;gap:var(--space-2)}
.k3a-choice{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-3);border-radius:var(--radius-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;font:500 12px/1.4 var(--font-display);color:var(--ink-mute)}
.k3a-choice .ico{flex:none;width:40px;height:40px;border-radius:var(--radius-md);background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}
.k3a-choice input{order:9;margin-left:auto;width:20px;height:20px;accent-color:var(--primary);flex:none}
.k3a-choice b{display:block;font:700 14px/1.3 var(--font-display);color:var(--ink)}
.k3a-choice:has(input:checked){box-shadow:inset 0 0 0 2px var(--primary);background:var(--primary-soft)}
/* rank list (reference: top customers) */
.k3a-rank{display:grid;gap:0;margin:0;padding:0;list-style:none}
.k3a-rank li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:var(--space-2) 0}
.k3a-rank li+li{border-top:1px solid var(--line)}
.k3a-rank .n{display:none}
.k3a-rank .k3a-thumb{width:40px;height:40px;border-radius:50%}
.k3a-rank b{display:block;font:700 14px/1.3 var(--font-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k3a-rank small{display:block;font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a-rank .v{text-align:right;font:800 14px/1.2 var(--font-display);font-variant-numeric:tabular-nums}
.k3a-rank .bar{display:none}
/* bar chart */
.k3a-chart{width:100%;height:auto;display:block}
.k3a-chart .grid line{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.k3a-chart text{font:500 11px var(--font-display);fill:var(--ink-mute)}
.k3a-chart .bars rect{fill:var(--tosca-soft)}
.k3a-chart .bars rect:nth-child(even){fill:var(--tosca-soft)}
.k3a-chart .bars rect.today{fill:var(--primary)}
.k3a-chart-box{display:grid;gap:var(--space-2)}
.k3a-chart-box .k3a-chart{height:190px}
.k3a-chart-x{display:flex;justify-content:space-between;font:500 12px/1 var(--font-display);color:var(--ink-mute);font-variant-numeric:tabular-nums}
.k3a-chart-peak{display:block;font:600 12px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a-chart-peak b{color:var(--ink)}
.k3a-legend{display:flex;gap:var(--space-3);font:600 12px/1 var(--font-display);color:var(--ink-mute)}
.k3a-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:var(--space-2);vertical-align:-1px}
/* detail list (reference: label left, value right) */
.k3a-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2) var(--space-4);margin:0;font:500 14px/1.4 var(--font-display)}
.k3a-dl dt{color:var(--ink-mute)}
.k3a-dl dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.k3a-dl dd.num{text-align:right;font-variant-numeric:tabular-nums}
.k3a-dl.split dd{text-align:right}
.k3a-dl.boxed{padding:var(--space-1) var(--space-4);border-radius:var(--radius-lg);background:var(--surface-soft);gap:0 var(--space-4)}
.k3a-dl.boxed dt,.k3a-dl.boxed dd{padding:var(--space-3) 0}
.k3a-dl.boxed dt:not(:first-of-type),.k3a-dl.boxed dd:not(:first-of-type){border-top:1px solid var(--line)}
/* request card (reference: task card with tag) */
.k3a-req{display:grid;gap:var(--space-2);padding:var(--space-4) var(--space-4);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-card)}
.k3a-req .hd{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-2)}
.k3a-req .hd b{display:block;font:700 15px/1.3 var(--font-display)}
.k3a-req .hd small{display:block;margin-top:3px;font:var(--text-code);color:var(--ink-mute)}
.k3a-req .meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);font:500 12px/1.4 var(--font-display);color:var(--ink-mute)}
.k3a-req .meta span{display:inline-flex;align-items:center;gap:var(--space-2)}
/* ===== Additions (8 Oct 2026): header, side menu v2, cards, charts, dialogs, tables ===== */
/* K3Mart Mitra Portal: komponen tambahan dari referensi dashboard. CSS saja, dipakai di dalam .k3a */
/* Tipografi: skala heading Montserrat (ukuran / tinggi baris) */
.k3a .k3a-heading-1,.k3a .k3a-h-1{font:var(--text-h1);letter-spacing:-.02em}
.k3a .k3a-heading-2,.k3a .k3a-h-2{font:var(--text-h2);letter-spacing:-.02em}
.k3a .k3a-heading-3,.k3a .k3a-h-3{font:var(--text-h3);letter-spacing:-.01em}
.k3a .k3a-heading-4,.k3a .k3a-h-4{font:var(--text-h4);letter-spacing:-.01em}
.k3a .k3a-heading-5,.k3a .k3a-h-5{font:var(--text-h5)}
.k3a .k3a-heading-6,.k3a .k3a-h-6{font:var(--text-h6)}
@media (max-width:700px){.k3a .k3a-heading-1,.k3a .k3a-h-1{font-size:32px;line-height:40px}.k3a .k3a-heading-2,.k3a .k3a-h-2{font-size:28px;line-height:36px}.k3a .k3a-heading-3,.k3a .k3a-h-3{font-size:24px;line-height:32px}}
.k3a .k3a-type-ag{font:700 96px/1 var(--font-display);letter-spacing:-.03em;color:var(--ink)}
.k3a .k3a-type-spec{display:block;margin-top:var(--space-1);font:500 12px/1.4 var(--font-display);color:var(--ink-mute)}
.k3a .k3a-type-spec b{color:var(--ink);font-weight:600}
/* PeriodSelect: pilihan periode kecil di kepala kartu */
.k3a .k3a-period{appearance:none;height:var(--control-h-xs);padding:0 var(--space-6) 0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23454B53' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m1.5 1.5 4.5 4.5 4.5-4.5'/%3E%3C/svg%3E") no-repeat right 11px center;font:var(--text-label);color:var(--ink-soft);cursor:pointer}
.k3a .k3a-period:hover{background-color:var(--surface-soft)}
.k3a .k3a-period:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* StatCard dengan kepala: ikon, label, periode */
.k3a .k3a-stat.has-head{}
.k3a .k3a-stat-h{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.k3a .k3a-stat-h .l{display:flex;align-items:center;gap:var(--space-2);font:600 13px/1.2 var(--font-display);color:var(--ink-soft)}
.k3a .k3a-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-md);background:var(--primary-soft);color:var(--primary);flex:none}
.k3a .k3a-ic.tosca{background:var(--tosca-soft);color:var(--primary-strong)}
.k3a .k3a-ic.yellow{background:var(--yellow-soft);color:var(--yellow-ink)}
.k3a .k3a-ic.pink{background:var(--pink-soft);color:var(--pink-ink)}
.k3a .k3a-stat.has-head .fig{}
.k3a .k3a-stat.has-head .fig b{font:var(--text-figure);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.k3a .k3a-stat.has-head .fig .k3a-delta{}
/* GroupedBars: batang berkelompok, legenda, tooltip */
.k3a .k3a-gb-legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);font:500 12px/1.2 var(--font-display);color:var(--ink-soft)}
.k3a .k3a-gb-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:var(--space-2);vertical-align:-1px}
.k3a .k3a-gb{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 var(--space-2);margin-top:64px}
.k3a .k3a-gb-y{display:flex;flex-direction:column;justify-content:space-between;height:200px;font:500 12px/1 var(--font-display);color:var(--ink-mute);text-align:right;font-variant-numeric:tabular-nums}
.k3a .k3a-gb-plot{position:relative;height:200px;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-1);background:repeating-linear-gradient(to top,var(--line) 0,var(--line) 1px,transparent 1px,transparent 50px);border-bottom:1px solid var(--line-strong)}
.k3a .k3a-gb-g{position:relative;flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px}
.k3a .k3a-gb-g .b{width:min(9px,24%);min-width:4px;border-radius:4px 4px 0 0;background:var(--primary)}
.k3a .k3a-gb-g .b.s2{background:var(--tosca)}
.k3a .k3a-gb-g .b.s3{background:var(--yellow)}
.k3a .k3a-gb-g:hover .b{filter:saturate(1.2)}
.k3a .k3a-gb-x{grid-column:2;display:flex;justify-content:space-between;gap:var(--space-1);margin-top:var(--space-2);font:500 12px/1 var(--font-display);color:var(--ink-mute)}
.k3a .k3a-gb-x span{flex:1 1 0;text-align:center;min-width:0}
.k3a .k3a-tip{position:absolute;left:50%;bottom:calc(var(--tip,60%) + 8px);transform:translateX(-50%);display:none;z-index:3;min-width:96px;padding:var(--space-2) var(--space-2);border-radius:var(--radius-md);background:var(--ink);color:var(--white);font:600 12px/1.4 var(--font-display);box-shadow:var(--shadow-pop);white-space:nowrap;pointer-events:none}
.k3a .k3a-tip i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:var(--space-2)}
.k3a .k3a-gb-g:hover .k3a-tip,.k3a .k3a-gb-g.show .k3a-tip{display:block}
/* Donut: cincin dengan angka di tengah dan legenda */
.k3a .k3a-donut-w{display:grid;justify-items:center;gap:var(--space-4)}
.k3a .k3a-donut{position:relative;width:200px;height:200px;border-radius:50%;background:conic-gradient(var(--primary) 0 var(--a,40%),var(--tosca) var(--a,40%) var(--b,70%),var(--yellow) var(--b,70%) var(--c,88%),var(--tosca-soft) var(--c,88%) 100%)}
.k3a .k3a-donut::after{content:"";position:absolute;inset:30px;border-radius:50%;background:var(--surface)}
.k3a .k3a-donut .mid{position:absolute;inset:0;z-index:1;display:grid;place-content:center;text-align:center;gap:3px}
.k3a .k3a-donut .mid b{font:800 18px/1.1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.k3a .k3a-donut .mid small{font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a .k3a-donut-l{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2) var(--space-4);font:500 12px/1.2 var(--font-display);color:var(--ink-soft)}
.k3a .k3a-donut-l i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:var(--space-2);vertical-align:-1px}
/* Topbar halaman: judul, lonceng, pengguna */
.k3a .k3a-topbar{display:flex;align-items:center;gap:var(--space-4);min-height:64px;padding:0 var(--space-6);background:var(--surface);box-shadow:0 1px 0 var(--line)}
.k3a .k3a-topbar h1{margin:0;font:var(--text-h5);letter-spacing:-.01em}
.k3a .k3a-topbar .sp{margin-left:auto}
.k3a .k3a-bell{position:relative;display:grid;place-items:center;width:var(--control-h-sm);height:var(--control-h-sm);border:0;border-radius:50%;background:transparent;color:var(--ink-soft);cursor:pointer}
.k3a .k3a-bell:hover{background:var(--surface-soft)}
.k3a .k3a-bell .n{position:absolute;top:3px;right:3px;min-width:16px;height:16px;padding:0 var(--space-1);border-radius:var(--radius-pill);background:var(--pink);color:var(--white);font:700 11px/16px var(--font-display);text-align:center}
.k3a .k3a-user{display:flex;align-items:center;gap:var(--space-2)}
.k3a .k3a-user .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--ink-fixed);font:800 13px/1 var(--font-display);flex:none}
.k3a .k3a-user b{display:block;font:700 14px/1.2 var(--font-display)}
.k3a .k3a-user small{display:block;margin-top:2px;font:500 12px/1.2 var(--font-display);color:var(--ink-mute)}
/* Menu samping: pencarian, label grup, keluar */
.k3a .k3a-side-search{position:relative;display:block}
.k3a .k3a-side-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-mute);pointer-events:none}
.k3a .k3a-side-search input{width:100%;box-sizing:border-box;height:var(--control-h-sm);padding:0 var(--space-3) 0 36px;border:0;border-radius:var(--radius-md);background:var(--surface-soft);font:500 15px/1 var(--font-display);color:var(--ink)}
.k3a .k3a-side-search input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--primary)}
.k3a .k3a-menu-label{margin:var(--space-2) var(--space-3) 2px;font:700 12px/1 var(--font-display);color:var(--ink-mute)}
.k3a .k3a-logout{display:flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--control-h-sm);border:0;border-radius:var(--radius-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong);font:600 14px/1 var(--font-display);color:var(--ink-soft);cursor:pointer;text-decoration:none}
.k3a .k3a-logout:hover{background:var(--surface-soft)}
/* Tabel: kolom centang, sel orang, kolom persen peringkat */
.k3a .k3a-table .cb{width:36px;padding-right:0}
.k3a .k3a-table .cb input{width:18px;height:18px;accent-color:var(--primary);vertical-align:middle}
.k3a .k3a-who{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.k3a .k3a-who .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--tosca-soft);color:var(--primary-strong);font:800 13px/1 var(--font-display);flex:none}
.k3a .k3a-who b{display:block;font:700 14px/1.2 var(--font-display)}
.k3a .k3a-who small{display:block;margin-top:2px;font:500 12px/1.2 var(--font-display);color:var(--ink-mute)}
.k3a .k3a-rank .pct{color:var(--ink)}
.k3a .k3a-card-head .k3a-period{flex:none}
/* Header: bilah atas desktop (judul, lonceng, pengguna) dan bilah atas HP (logo, lonceng, avatar), dengan popover */
.k3a .k3a-header{position:relative;display:flex;align-items:center;gap:var(--space-4);min-height:68px;padding:0 var(--space-6);background:var(--surface)}
.k3a .k3a-header .ttl{min-width:0}
.k3a .k3a-header .ttl h1{margin:0;font:var(--text-h4);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k3a .k3a-header .ttl small{display:block;margin-top:1px;font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a .k3a-header .sp{margin-left:auto}
.k3a .k3a-header .acts{display:flex;align-items:center;gap:var(--space-2)}
.k3a .k3a-hbtn{position:relative;display:grid;place-items:center;width:var(--control-h-sm);height:var(--control-h-sm);border:0;border-radius:50%;background:transparent;color:var(--ink-soft);cursor:pointer}
.k3a .k3a-hbtn:hover,.k3a .k3a-hbtn[aria-expanded="true"]{background:var(--surface-soft)}
.k3a .k3a-hbtn:focus-visible,.k3a .k3a-huser:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.k3a .k3a-hbtn .n{position:absolute;top:3px;right:3px;min-width:16px;height:16px;padding:0 var(--space-1);border-radius:var(--radius-pill);background:var(--pink);color:var(--white);font:700 11px/16px var(--font-display);text-align:center;box-shadow:0 0 0 2px var(--surface)}
.k3a .k3a-huser{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2) var(--space-1) var(--space-1);border:0;border-radius:var(--radius-pill);background:transparent;cursor:pointer;text-align:left}
.k3a .k3a-huser:hover,.k3a .k3a-huser[aria-expanded="true"]{background:var(--surface-soft)}
.k3a .k3a-huser .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--ink-fixed);font:800 13px/1 var(--font-display);flex:none}
.k3a .k3a-huser b{display:block;font:700 14px/1.2 var(--font-display);color:var(--ink)}
.k3a .k3a-huser small{display:block;margin-top:2px;font:500 12px/1.2 var(--font-display);color:var(--ink-mute)}
.k3a .k3a-huser svg{color:var(--ink-mute);flex:none}
.k3a .k3a-pop{position:absolute;top:calc(100% - 6px);right:var(--space-6);z-index:30;width:340px;max-width:calc(100vw - 24px);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-pop);padding:var(--space-2);display:grid;gap:2px}
.k3a .k3a-pop.u{width:240px}
.k3a .k3a-pop h3{margin:var(--space-2) var(--space-2) var(--space-1);font:700 14px/1.3 var(--font-display)}
.k3a .k3a-pop .it{display:grid;grid-template-columns:36px minmax(0,1fr);gap:var(--space-3);align-items:start;padding:var(--space-2);border-radius:var(--radius-lg);color:var(--ink);text-decoration:none}
.k3a .k3a-pop .it:hover{background:var(--surface-soft)}
.k3a .k3a-pop .it b{display:block;font:600 14px/1.35 var(--font-display)}
.k3a .k3a-pop .it small{display:block;margin-top:2px;font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a .k3a-pop .it.new b::after{content:"";display:inline-block;width:8px;height:8px;margin-left:var(--space-2);border-radius:50%;background:var(--pink)}
.k3a .k3a-pop .mi{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-3);border-radius:var(--radius-lg);font:600 14px/1 var(--font-display);color:var(--ink-soft);text-decoration:none;border:0;background:none;width:100%;cursor:pointer;text-align:left}
.k3a .k3a-pop .mi:hover{background:var(--surface-soft)}
.k3a .k3a-pop .mi svg{color:var(--ink-mute)}
.k3a .k3a-pop hr{border:0;height:1px;background:var(--line);margin:var(--space-1) var(--space-2)}
.k3a .k3a-pop .ft{display:block;padding:var(--space-2);text-align:center;font:var(--text-button-sm);color:var(--primary);text-decoration:none}
/* Header HP */
.k3a .k3a-header.m{min-height:56px;padding:0 var(--space-4);gap:var(--space-2);position:sticky;top:0;z-index:20}
.k3a .k3a-header.m .k3a-pop{right:var(--space-3);top:calc(100% - 4px)}
.k3a .k3a-header.m .k3a-huser{padding:0}
.k3a .k3a-header .k3a-brand{text-decoration:none}
.k3a-col{min-width:0;display:flex;flex-direction:column}
.k3a .k3a-pop[hidden]{display:none}
.k3a .k3a-header{z-index:25}
.k3a-side .k3a-logout{margin-top:auto}
/* SideMenu v2: menu samping dengan grup, penanda aktif, mode ciut (rail), kartu pengguna di dasar, varian gelap */
.k3a-portal.rail{--sidebar-w:80px}
.k3a-side.v2{gap:var(--space-2);padding:var(--space-4) var(--space-3) var(--space-4)}
.k3a-side.v2 .k3a-side-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:46px;margin-bottom:var(--space-2)}
.k3a-side.v2 .k3a-side-top .k3a-home{min-width:0}
.k3a-side-tg{flex:none;display:grid;place-items:center;width:var(--control-h-xs);height:var(--control-h-xs);border:0;border-radius:50%;background:transparent;color:var(--ink-mute);cursor:pointer}
.k3a-side-tg:hover{background:var(--surface-soft);color:var(--ink)}
.k3a-side-tg:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.k3a-side.v2 .k3a-menu-label{margin:var(--space-3) var(--space-3) var(--space-1);font:700 11px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.k3a-side.v2 .k3a-side-sec + .k3a-side-sec{margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--line)}
.k3a-side.v2 .k3a-menu a{position:relative;padding:var(--space-3)}
.k3a-side.v2 .k3a-menu a .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k3a-side.v2 .k3a-menu a.on{background:var(--primary-soft)}
.k3a-side.v2 .k3a-menu a.on::before{content:"";position:absolute;left:-14px;top:7px;bottom:7px;width:4px;border-radius:0 4px 4px 0;background:var(--primary)}
.k3a-side.v2 .k3a-menu a.has-sub::after{content:"";margin-left:auto;width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.6}
.k3a-side.v2 .k3a-sub{display:grid;gap:2px;margin:2px 0 var(--space-1) 44px}
.k3a-side.v2 .k3a-sub a{padding:var(--space-2) var(--space-3);font-weight:500}
.k3a-me2{margin-top:auto;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-1) 0;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.k3a-me2 .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--ink-fixed);font:800 14px/1 var(--font-display);flex:none}
.k3a-me2 .t{min-width:0}
.k3a-me2 b{display:block;font:700 14px/1.25 var(--font-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k3a-me2 small{display:block;margin-top:2px;font:500 12px/1.25 var(--font-display);color:var(--ink-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* mode ciut */
.rail .k3a-side.v2{padding:var(--space-4) var(--space-2) var(--space-4)}
.rail .k3a-side.v2 .k3a-side-top{flex-direction:column;gap:var(--space-2)}
.rail .k3a-side.v2 .k3a-home .k3a-brand,.rail .k3a-side.v2 .k3a-home .k3a-badge{display:none}
.rail .k3a-side.v2 .k3a-menu-label{margin:var(--space-3) 0 var(--space-1);text-align:center;font-size:11px;letter-spacing:.06em}
.rail .k3a-side.v2 .k3a-menu a{justify-content:center;padding:var(--space-3) 0}
.rail .k3a-side.v2 .k3a-menu a .t{display:none}
.rail .k3a-side.v2 .k3a-menu a.has-sub::after,.rail .k3a-side.v2 .k3a-sub{display:none}
.rail .k3a-side.v2 .k3a-menu a.on::before{left:-10px}
.rail .k3a-me2{justify-content:center;padding-inline:0}
.rail .k3a-me2 .t{display:none}
/* header: pengguna cukup avatar karena nama ada di kartu menu samping */
.k3a-portal .k3a-header .k3a-huser > span:not(.av){display:none}
.k3a-portal .k3a-header .k3a-huser{padding:var(--space-1) var(--space-2) var(--space-1) var(--space-1);gap:var(--space-2)}
/* varian gelap */
.k3a-side.v2.dark{background:#101E1D;box-shadow:none;color:#DCE7E6}
.k3a-side.v2.dark .k3a-brand,.k3a-side.v2.dark .k3a-me2 b{color:var(--white)}
.k3a-side.v2.dark .k3a-menu-label,.k3a-side.v2.dark .k3a-me2 small,.k3a-side.v2.dark .k3a-side-tg{color:#8FA6A4}
.k3a-side.v2.dark .k3a-menu a{color:#C9D8D6}
.k3a-side.v2.dark .k3a-menu a svg{color:#8FA6A4}
.k3a-side.v2.dark .k3a-menu a:hover,.k3a-side.v2.dark .k3a-side-tg:hover{background:rgba(255,255,255,.07);color:var(--white)}
.k3a-side.v2.dark .k3a-menu a.on{background:rgba(46,196,182,.16);color:var(--white)}
.k3a-side.v2.dark .k3a-menu a.on svg{color:var(--tosca)}
.k3a-side.v2.dark .k3a-menu a.on::before{background:var(--tosca)}
.k3a-side.v2.dark .k3a-side-sec + .k3a-side-sec,.k3a-side.v2.dark .k3a-me2{border-top-color:rgba(255,255,255,.12)}
.k3a-side.v2.dark .k3a-badge{background:rgba(233,30,99,.2);color:#FFC2D6}
.k3a-side.v2 .k3a-side-top .k3a-home .k3a-badge{display:none}
.k3a .k3a-per{font:600 12px/1 var(--font-display);color:var(--ink-mute);white-space:nowrap}
.k3a-stat.hl .k3a-ic{background:rgba(255,255,255,.2);color:var(--on-primary)}
.k3a-stat.hl .l,.k3a-stat.hl .k3a-per,.k3a-stat.hl .fig b,.k3a-stat.hl small{color:var(--on-primary)}
.k3a-stats.four .k3a-stat.has-head .fig b{font-size:24px}
.k3a-stats.four .k3a-stat-h{flex-wrap:wrap}
/* DetailView: detail record sebagai tampilan penuh di area konten (daftar disembunyikan) */
.k3a-portal .k3a-main{max-width:none}
.k3a-portal:has(.k3a-scrim.full) .k3a-col > .k3a-main{display:none}
.k3a-scrim.full{position:static;display:block;inset:auto;z-index:auto;background:transparent;grid-column:2;grid-row:1;margin-top:68px;padding:28px var(--space-6) 40px}
.k3a-scrim.full .shut{display:none}
.k3a-scrim.full .k3a-sheet{width:100%;max-width:none;height:auto;min-height:calc(100vh - 68px - 68px);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:visible}
.k3a-scrim.full .k3a-sheet-h{padding:20px 28px var(--space-3);align-items:center;border-bottom:1px solid var(--line)}
.k3a-scrim.full .k3a-sheet-h .k3a-sheet-x{order:-1;width:auto;height:var(--control-h-xs);padding:0 var(--space-4) 0 var(--space-3);border-radius:var(--radius-pill);font-size:0}
.k3a-scrim.full .k3a-sheet-h .k3a-sheet-x::after{content:"\2039  Kembali ke daftar";font:var(--text-button-sm);color:var(--ink-soft)}
.k3a-scrim.full .k3a-sheet-h b{font-size:24px}
.k3a-scrim.full .k3a-sheet-b{overflow:visible;padding:var(--space-5) 28px 28px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--space-5) var(--space-6)}
.k3a-scrim.full .k3a-sheet-f{padding:var(--space-4) 28px 20px;justify-content:flex-end}
.k3a-scrim.full .k3a-sheet-f .k3a-btn{flex:0 0 auto;min-width:160px}
.k3a-portal > .k3a-side{grid-column:1;grid-row:1}
.k3a-portal > .k3a-col{grid-column:2;grid-row:1}
.k3a-scrim.full .k3a-sheet-b{align-items:start}
/* DataTable v2: kolom pilih, urut, status, kartu rekaman untuk HP, toolbar, pager */
.k3a .k3a-cb{width:20px;height:20px;border:1.8px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);display:inline-grid;place-items:center;cursor:pointer;padding:0;color:var(--on-primary);flex:none}
.k3a .k3a-cb svg{display:none}
.k3a .k3a-cb[aria-checked="true"],.k3a .k3a-cb[aria-checked="mixed"]{background:var(--primary);border-color:var(--primary)}
.k3a .k3a-cb[aria-checked="true"] .ck,.k3a .k3a-cb[aria-checked="mixed"] .mx{display:block}
.k3a .k3a-cb:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.k3a .k3a-table tbody tr.sel .k3a-cb{background:var(--on-primary);border-color:var(--on-primary);color:var(--primary)}
.k3a .k3a-table td.cbc,.k3a .k3a-table th.cbc{width:44px;padding-right:0}
.k3a .k3a-thb{display:inline-flex;align-items:center;gap:var(--space-2);border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;white-space:nowrap}
.k3a .k3a-thb:hover{color:var(--ink)}
.k3a .k3a-thb .ar{font-size:12px;opacity:.35}
.k3a .k3a-thb.on{color:var(--ink)}
.k3a .k3a-thb.on .ar{opacity:1;color:var(--primary)}
.k3a .k3a-tool{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3)}
.k3a .k3a-tool .k3a-search{flex:1 1 260px}
.k3a .k3a-seg{display:inline-flex;padding:3px;border-radius:var(--radius-md);background:var(--surface-soft)}
.k3a .k3a-seg button{display:inline-flex;align-items:center;gap:var(--space-2);height:var(--control-h-xs);padding:0 var(--space-3);border:0;border-radius:var(--radius-sm);background:transparent;font:600 13px/1 var(--font-display);color:var(--ink-soft);cursor:pointer}
.k3a .k3a-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.k3a .k3a-bulk{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);background:var(--primary-soft);color:var(--primary-strong);font:700 13px/1.2 var(--font-display)}
.k3a .k3a-bulk .sp{margin-left:auto;display:flex;gap:var(--space-2);flex-wrap:wrap}
.k3a .k3a-pg{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-3);font:500 13px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a .k3a-pg .nav{display:flex;gap:var(--space-2);align-items:center}
.k3a .k3a-pg .nav button{display:grid;place-items:center;min-width:36px;height:var(--control-h-xs);padding:0 var(--space-2);border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);font:var(--text-button-sm);color:var(--ink-soft);cursor:pointer}
.k3a .k3a-pg .nav button[aria-current="page"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.k3a .k3a-pg .nav button:disabled{opacity:.4;cursor:default}
.k3a .k3a-pg .per{display:flex;align-items:center;gap:var(--space-2)}
.k3a .k3a-pg .per .k3a-period{height:var(--control-h-xs)}
.k3a .k3a-gridv{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--space-4)}
.k3a .k3a-tile{position:relative;display:grid;gap:var(--space-2);padding:var(--space-4);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-card)}
.k3a .k3a-tile.sel{box-shadow:0 0 0 2px var(--primary),var(--shadow-card)}
.k3a .k3a-tile.warn{background:var(--danger-soft)}
.k3a .k3a-tile .cbp{position:absolute;top:14px;right:14px}
.k3a .k3a-tile b{font:700 14px/1.3 var(--font-display)}
.k3a .k3a-tile small{display:block;margin-top:2px;font:var(--text-code);color:var(--ink-mute)}
.k3a .k3a-tile .big{font:800 18px/1.1 var(--font-display);font-variant-numeric:tabular-nums}
.k3a .k3a-rcs{display:grid;gap:var(--space-3)}
.k3a .k3a-rc{display:grid;border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-card)}
.k3a .k3a-rc.sel{}
.k3a .k3a-rc.warn{background:var(--danger-soft)}
.k3a .k3a-rc .top{display:flex;align-items:center;gap:var(--space-2)}
.k3a .k3a-rc .top .sp{margin-left:auto}
.k3a .k3a-rc .nm{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.k3a .k3a-rc .nm b{display:block}
.k3a .k3a-rc .nm small{display:block;margin-top:2px;color:var(--ink-mute)}
.k3a .k3a-rc .kv{display:grid;gap:0;border-radius:var(--radius-md);background:var(--surface-soft);padding:2px var(--space-3)}
.k3a .k3a-rc.warn .kv{background:rgba(255,255,255,.6)}
.k3a .k3a-rc .kv div{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-top:1px solid var(--line);font:500 13px/1.3 var(--font-display);color:var(--ink-soft)}
.k3a .k3a-rc .kv div:first-child{border-top:0}
.k3a .k3a-rc .kv b{font:700 14px/1.2 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums}
.k3a .k3a-rc .more{justify-self:end;border:0;background:none;padding:2px 0;font:var(--text-button-sm);color:var(--primary);cursor:pointer}
.k3a .k3a-mtabs{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.k3a .k3a-mtabs::-webkit-scrollbar{display:none}
.k3a .k3a-mtabs button{flex:none;display:inline-flex;align-items:center;gap:var(--space-2);height:var(--control-h-sm);padding:0 var(--space-3);border:0;border-radius:var(--radius-pill);background:transparent;font:var(--text-button-sm);color:var(--ink-soft);cursor:pointer}
.k3a .k3a-mtabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.k3a .k3a-mtabs i{font-style:normal;font:600 11px/1 var(--font-display);padding:3px var(--space-2);border-radius:var(--radius-pill);background:var(--surface-soft);color:var(--ink-mute)}
.k3a .k3a-fbtn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--control-h-sm);padding:0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface);font:var(--text-button-sm);color:var(--ink-soft);cursor:pointer}
.k3a .k3a-fbtn .n{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:var(--radius-pill);background:var(--primary);color:var(--on-primary);font:700 11px/18px var(--font-display)}
.k3a .k3a-table tbody tr.sel .k3a-st.pill{background:rgba(255,255,255,.2);color:var(--on-primary)}
/* ChartCard: kartu grafik (garis, area, batang, bertumpuk, donut, gauge, pie, gelembung) */
.k3a .k3a-ccg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-5);align-items:start}
.k3a .k3a-ccg > .w2{grid-column:span 2}
@media (max-width:700px){.k3a .k3a-ccg > .w2{grid-column:auto}}
.k3a .k3a-cc{background:var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:var(--space-4) 20px var(--space-4);display:grid;gap:var(--space-3);min-width:0}
.k3a .k3a-cc .hd{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.k3a .k3a-cc .hd small{display:block;font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a .k3a-cc .hd h3{margin:2px 0 0;font:var(--text-card-title);letter-spacing:-.01em}
.k3a .k3a-cc .hd .sub{display:block;margin-top:2px;font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a .k3a-cc .rt{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.k3a .k3a-cc .rt b{font:800 20px/1 var(--font-display);font-variant-numeric:tabular-nums}
.k3a .k3a-cc .rt .k3a-delta{margin-left:0}
.k3a .k3a-cc .big2{font-size:20px}
.k3a .k3a-cc .lg{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);font:500 12px/1.3 var(--font-display);color:var(--ink-soft)}
.k3a .k3a-cc .lg i,.k3a .k3a-cc .li i,.k3a .k3a-cc .pt2 i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:var(--space-2)}
.k3a .k3a-cc svg{display:block;width:100%;height:auto;overflow:visible}
.k3a .k3a-cc svg text{font:500 11px/1 var(--font-display);fill:var(--ink-mute)}
.k3a .k3a-cc svg .gl{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.k3a .k3a-cc svg .ln{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.k3a .k3a-cc svg .vl{stroke:var(--ink-mute);stroke-width:1.2;stroke-dasharray:3 3}
.k3a .k3a-cc svg .pt{fill:var(--surface);stroke:var(--primary);stroke-width:2.4}
.k3a .k3a-cc svg .pt.k{stroke:var(--pink)}
.k3a .k3a-cc svg .gb{fill:none;stroke-width:26;stroke-linecap:round}
.k3a .k3a-cc svg .big{font:800 24px/1 var(--font-display);fill:var(--ink)}
.k3a .k3a-cc svg .ml{font:500 11px/1 var(--font-display);fill:var(--ink-mute)}
.k3a .k3a-cc svg .dl{font:700 11px/1 var(--font-display);fill:var(--ink)}
.k3a .k3a-cc svg .tp{opacity:0;pointer-events:none;transition:opacity .12s}
.k3a .k3a-cc svg .tp .tt,.k3a .k3a-cc svg text.tt{fill:var(--white);font:600 11px/1 var(--font-display)}
.k3a .k3a-cc svg .hv:hover .tp,.k3a .k3a-cc svg > g > .tp{opacity:1}
.k3a .k3a-cc svg .hv .tp{opacity:0}
.k3a .k3a-cc svg .hv:hover .tp{opacity:1}
.k3a .k3a-cc .dn{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,1fr);gap:var(--space-3);align-items:center}
.k3a .k3a-cc .li{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2);font:500 13px/1.3 var(--font-display);color:var(--ink-soft)}
.k3a .k3a-cc .li li{display:flex;justify-content:space-between;gap:var(--space-2);align-items:center}
.k3a .k3a-cc .li b{color:var(--ink);font-variant-numeric:tabular-nums}
.k3a .k3a-cc.sm .li{margin-top:2px}
.k3a .k3a-cc .hbs{display:grid;gap:var(--space-3)}
.k3a .k3a-cc .hr{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--space-2);align-items:center;font:600 12px/1.2 var(--font-display);color:var(--ink-soft)}
.k3a .k3a-cc .hr .tr{height:10px;border-radius:var(--radius-pill);background:var(--surface-soft)}
.k3a .k3a-cc .hr .tr i{display:block;height:100%;border-radius:var(--radius-pill)}
.k3a .k3a-cc .ax{display:flex;justify-content:space-between;margin-left:104px;font:500 11px/1 var(--font-display);color:var(--ink-mute)}
.k3a .k3a-cc .pc{display:grid;align-items:center}
.k3a .k3a-cc .pie{border-radius:50%}
.k3a .k3a-cc .pt2{border-collapse:collapse;width:100%;font:500 12px/1.3 var(--font-display);color:var(--ink-soft)}
.k3a .k3a-cc .pt2 td{border-bottom:1px solid var(--line)}
.k3a .k3a-cc .pt2 td.d{color:var(--success);font-weight:700;text-align:right}
.k3a .k3a-cc .pt2 td.dn{color:var(--danger)}
.k3a .k3a-cc .bub{position:relative;height:170px}
.k3a .k3a-cc .bub span{position:absolute;display:grid;place-items:center;border-radius:50%;font:800 20px/1 var(--font-display)}
.k3a .k3a-cc .bub .b1{left:8%;top:14px;width:140px;height:140px;background:var(--primary);color:var(--on-primary)}
.k3a .k3a-cc .bub .b2{left:50%;top:0;width:96px;height:96px;background:var(--tosca);color:var(--ink)}
.k3a .k3a-cc .bub .b3{left:52%;top:84px;width:58px;height:58px;background:var(--ink);color:var(--white);font-size:14px;box-shadow:0 0 0 4px var(--surface)}
.k3a .k3a-cc .chipsx{justify-self:center}
.k3a .k3a-cc .chipsx button{min-width:52px;justify-content:center}
.k3a .k3a-cc [data-panel][hidden]{display:none}
@media (max-width:520px){.k3a .k3a-cc .pc{grid-template-columns:minmax(0,1fr);justify-items:center}.k3a .k3a-cc .pt2{width:100%}.k3a .k3a-cc .dn{grid-template-columns:minmax(0,1fr)}.k3a .k3a-cc .dn svg{max-width:220px;margin:0 auto}}
/* Dialog: kartu dialog berilustrasi (onboarding, info, konfirmasi) dan varian media, kode, profil */
.k3a .k3a-dlg,.k3a-dlg{position:relative;width:min(440px,100%);background:var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-pop);overflow:hidden auto;display:grid;align-content:start;font-family:var(--font-display);color:var(--ink)}
.k3a-dlg .art{position:relative;display:grid;place-items:center;height:190px;background:var(--tosca-soft);overflow:hidden}
.k3a-dlg .art::before,.k3a-dlg .art::after{content:"";position:absolute;width:92px;height:92px;opacity:.5;background-image:radial-gradient(currentColor 1.6px,transparent 1.7px);background-size:12px 12px;color:var(--primary)}
.k3a-dlg .art::before{left:14px;top:14px}
.k3a-dlg .art::after{right:14px;bottom:14px}
.k3a-dlg .art svg{position:relative;z-index:1;width:auto;height:150px;max-width:90%}
.k3a-dlg .art.t-primary{background:var(--primary-soft)}
.k3a-dlg .art.t-tosca{background:var(--tosca-soft)}
.k3a-dlg .art.t-yellow{background:var(--yellow-soft)}
.k3a-dlg .art.t-yellow::before,.k3a-dlg .art.t-yellow::after{color:var(--yellow-ink)}
.k3a-dlg .art.t-pink{background:var(--pink-soft)}
.k3a-dlg .art.t-pink::before,.k3a-dlg .art.t-pink::after{color:var(--pink-ink)}
.k3a-dlg .x{position:absolute;top:12px;right:12px;z-index:3;width:var(--control-h-xs);height:var(--control-h-xs);border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink-soft);font:700 18px/1 var(--font-display);cursor:pointer;box-shadow:var(--shadow-sm)}
.k3a-dlg .x:hover{background:var(--surface)}
.k3a-dlg .bd{display:grid;gap:var(--space-3);padding:20px var(--space-5) var(--space-5)}
.k3a-dlg .bd h3{margin:0;font:var(--text-h5);letter-spacing:-.01em}
.k3a-dlg .bd p{margin:0;font:500 14px/1.55 var(--font-display);color:var(--ink-mute)}
.k3a-dlg .acts{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-1)}
.k3a-dlg .acts .k3a-btn.primary{flex:1 1 auto}
.k3a-dlg .acts .later{border:0;background:none;padding:var(--space-2) var(--space-2);font:700 14px/1 var(--font-display);color:var(--ink-soft);cursor:pointer}
.k3a-dlg .acts .later:hover{color:var(--ink)}
.k3a-dlg .dots{display:flex;gap:var(--space-2)}
.k3a-dlg .dots i{width:8px;height:8px;border-radius:var(--radius-pill);background:var(--line-strong)}
.k3a-dlg .dots i.on{width:22px;background:var(--primary)}
.k3a-dlg.center .bd{justify-items:center;text-align:center}
.k3a-dlg .qr{display:grid;place-items:center;padding:20px 20px 0}
.k3a-dlg .qr .box{position:relative;width:200px;height:200px;border-radius:var(--radius-xl);background:var(--surface);box-shadow:0 0 0 1.5px var(--line-strong);overflow:hidden;display:grid;place-items:center}
.k3a-dlg .qr .box::after{content:"";position:absolute;left:0;right:0;top:42%;height:4px;background:var(--tosca);box-shadow:0 0 14px var(--tosca)}
.k3a-dlg .media{height:170px;display:block;background:var(--yellow-soft);position:relative;overflow:hidden}
.k3a-dlg .media svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:140px;width:auto}
.k3a-dlg .info{display:grid;grid-template-columns:1fr auto;gap:var(--space-3);align-items:center;padding:var(--space-3) var(--space-3);border-radius:var(--radius-lg);background:var(--primary-soft)}
.k3a-dlg .info small{display:block;font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a-dlg .info b{display:block;margin-top:2px;font:800 16px/1.2 var(--font-display);font-variant-numeric:tabular-nums}
.k3a-dlg .info .cd{display:flex;gap:var(--space-2)}
.k3a-dlg .info .cd span{text-align:center}
.k3a-dlg .stack{display:flex;justify-content:center;padding:20px var(--space-5) 0}
.k3a-dlg .stack i{display:grid;place-items:center;width:72px;height:72px;margin-left:-14px;border-radius:var(--radius-xl);border:3px solid var(--surface);font:800 20px/1 var(--font-display);font-style:normal;color:var(--ink)}
.k3a-dlg .stack i:first-child{margin-left:0}
.k3a-dlg .iconbtn{display:grid;place-items:center;width:var(--control-h-sm);height:var(--control-h-sm);border-radius:50%;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);cursor:pointer}
/* dialog onboarding memakai kartu yang sama */
.k3a-dlg.ob-dlg{padding:0;gap:0;width:min(520px,100%);border-radius:var(--radius-xl);max-height:calc(100% - 8px)}
.k3a-dlg.ob-dlg .bd{padding:var(--space-4) var(--space-5) 20px}
.k3a-dlg.ob-dlg .ob-x{display:none}
.k3a-dlg.ob-dlg .dots{padding-right:0}
/* Card v2: kartu portal memakai gaya kartu grafik (padding, garis bawah kepala, judul 800, keterangan 12px) */
.k3a .k3a-card{padding:var(--space-4) 20px var(--space-4);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}
.k3a .k3a-card-head{margin-bottom:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--line);align-items:center}
.k3a .k3a-card-head h2{font:var(--text-card-title);letter-spacing:-.01em}
.k3a .k3a-card-head small{margin-top:2px;font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a .k3a-card-head:only-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
/* Samakan kartu lain dengan gaya LineAreaCard (.k3a-cc): padding 18/20, radius-xl, shadow-card, kepala dengan garis bawah, judul 800 17px, keterangan 12px */
.k3a .k3a-stat{padding:var(--space-4) 20px var(--space-4);gap:var(--space-2);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}
.k3a .k3a-stat small{font:500 12px/1.3 var(--font-display)}
.k3a .k3a-stat b{font:800 24px/1.1 var(--font-display)}
.k3a .k3a-stat .note{font:500 12px/1.3 var(--font-display)}
.k3a .k3a-req{padding:var(--space-4) 20px var(--space-4);gap:var(--space-3);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}
.k3a .k3a-req .hd{padding-bottom:var(--space-2);border-bottom:1px solid var(--line)}
.k3a .k3a-req .hd b{font:var(--text-card-title);letter-spacing:-.01em}
.k3a .k3a-req .hd small{font:var(--text-code)}
.k3a .k3a-req .meta{font:500 12px/1.3 var(--font-display)}
.k3a .k3a-rc{padding:var(--space-4) 20px var(--space-4);gap:var(--space-3)}
.k3a .k3a-rc .top{padding-bottom:var(--space-2);border-bottom:1px solid var(--line)}
.k3a .k3a-rc .nm b{font:var(--text-card-title);letter-spacing:-.01em}
.k3a .k3a-rc .nm small{font:var(--text-code)}
.k3a .k3a-choice{padding:var(--space-3) var(--space-4);border-radius:var(--radius-xl)}
.k3a .k3a-choice b{font:800 15px/1.25 var(--font-display);letter-spacing:-.01em}
.k3a .k3a-dlg{border-radius:var(--radius-xl)}
.k3a .k3a-dlg .bd{padding:var(--space-4) 20px 20px}
.k3a .k3a-dlg .bd h3{font:var(--text-card-title)}
.k3a .k3a-dlg .bd p{font:500 13px/1.5 var(--font-display)}
.k3a .k3a-dlg .info{border-radius:var(--radius-lg)}
@media (max-width:520px){.k3a .k3a-stat,.k3a .k3a-req,.k3a .k3a-rc{padding:var(--space-3) var(--space-4)}}
/* RankList: teks mengikuti skala kartu grafik (judul 700 14, keterangan 500 12 ink-mute, nilai 800 14 tabular) */
.k3a .k3a-rank b{color:var(--ink)}
.k3a .k3a-rank small{margin-top:2px}
.k3a .k3a-rank .v{color:var(--ink)}
/* RankList: pemakaian gaya teks (nama = body-strong 14/700, meta = caption 12/500, nilai = angka tabular 14/800); nama boleh dua baris, tidak dipotong */
.k3a .k3a-rank b{font:700 14px/1.3 var(--font-display);white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.k3a .k3a-rank small{font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a .k3a-rank .v{font:800 14px/1.2 var(--font-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.k3a .k3a-rank .pct{font:800 14px/1.2 var(--font-display);font-variant-numeric:tabular-nums}
/* Audit teks: ukuran setengah (11.5/12.5/13.5/14.5) dirapatkan ke skala token (11 tag, 12 caption, 13 label, 14 body, 15 tombol) */
/* Tabel lengkap: kolom aksi, baris total, nama sel, kerangka memuat */
.k3a .k3a-table .nm{display:block;font:700 14px/1.3 var(--font-display);color:var(--ink)}
.k3a .k3a-table td.act,.k3a .k3a-table th.act{width:44px;text-align:right}
.k3a .k3a-table tbody tr.sel .k3a-more{color:var(--on-primary)}
.k3a .k3a-table tbody tr.sel .k3a-more:hover{background:rgba(255,255,255,.18)}
.k3a .k3a-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.k3a .k3a-table tfoot td{padding:var(--space-3) var(--space-3);border-top:1px solid var(--line);font:700 14px/1.3 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums}
.k3a .k3a-sk{display:block;height:12px;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--surface-soft) 25%,var(--line) 50%,var(--surface-soft) 75%);background-size:200% 100%;animation:k3a-sk 1.4s linear infinite}
.k3a .k3a-table .num .k3a-sk{margin-left:auto}
@keyframes k3a-sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.k3a .k3a-sk{animation:none}}
/* Latar disamakan dengan halaman pendaftaran: putih + bentuk gelombang datar (desktop), kartu diberi garis tipis */
.k3a .k3a-card,.k3a .k3a-stat,.k3a .k3a-req,.k3a .k3a-rc,.k3a .k3a-cc{border:1px solid var(--line)}
.k3a .k3a-stat.hl{}
.k3a .k3a-rc.sel{border-color:transparent}
@media (min-width:900px){
 .k3a-portal{background:var(--canvas) var(--bg-waves) center bottom/cover no-repeat fixed}
}
/* Sheet: judul dan garis mengikuti kartu lain (judul 800 17px, garis tipis, caption 12px) */
.k3a .k3a-sheet{border:1px solid var(--line)}
.k3a .k3a-sheet-h{padding:var(--space-4) 20px var(--space-3);border-bottom:1px solid var(--line);margin-bottom:var(--space-2)}
.k3a .k3a-sheet-h b{font:var(--text-card-title);letter-spacing:-.01em}
.k3a .k3a-sheet-b{padding:var(--space-2) 20px var(--space-4)}
/* Bayangan dan garis kartu di atas latar putih: lembut, berlapis, tanpa bayangan ganda pada kartu bersarang */
.k3a .k3a-card,.k3a .k3a-stat,.k3a .k3a-req,.k3a .k3a-rc,.k3a .k3a-cc{border-color:var(--line);box-shadow:var(--shadow-card)}
.k3a .k3a-stat.hl{}
.k3a .k3a-rc.sel{box-shadow:0 0 0 2px var(--primary),var(--shadow-card)}
.k3a .k3a-card .k3a-card,.k3a .k3a-card .k3a-stat,.k3a .k3a-card .k3a-req,.k3a .k3a-card .k3a-rc,.k3a .k3a-cc .k3a-card,.k3a .k3a-sheet .k3a-card{box-shadow:none;border-color:var(--line)}
.k3a .k3a-sheet{border-color:var(--line);box-shadow:var(--shadow-pop)}
.k3a .k3a-req,.k3a .k3a-rc{transition:box-shadow .2s,border-color .2s}
.k3a .k3a-req:hover,.k3a .k3a-rc:hover{border-color:var(--line-strong);box-shadow:var(--shadow-pop)}
@media (prefers-reduced-motion:reduce){.k3a .k3a-req,.k3a .k3a-rc{transition:none}}
/* StatCount: angka besar + satuan kecil */
.k3a .k3a-stat.has-head .fig{}
.k3a .k3a-stat.has-head .fig .u{}
.k3a .k3a-stats.four .k3a-stat.has-head .fig b{font-size:28px;line-height:1}
.k3a .k3a-stats + .k3a-chips{margin-top:var(--space-1)}
/* Ukuran angka kartu statistik mengikuti lebar kartu (nominal besar tetap muat); satu baris, satuan turun bila perlu */
.k3a .k3a-stat.has-head{container-type:inline-size}
.k3a .k3a-stat.has-head .fig{min-width:0}
.k3a .k3a-stat.has-head .fig b,.k3a .k3a-stats.four .k3a-stat.has-head .fig b{font-size:clamp(18px,12.5cqi,28px);white-space:nowrap;overflow-wrap:normal;max-width:100%}
.k3a .k3a-stat.has-head.long .fig b,.k3a .k3a-stats.four .k3a-stat.has-head.long .fig b{font-size:clamp(16px,9.5cqi,24px)}
.k3a .k3a-stat-h .k3a-per{margin-left:auto}
/* Breadcrumb: jejak halaman ada di isi halaman (di atas judul halaman), tidak pernah di Header atau Topbar */
.k3a .k3a-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-2);font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a .k3a-crumb a{color:var(--ink-mute);text-decoration:none}
.k3a .k3a-crumb a:hover{color:var(--primary);text-decoration:underline}
.k3a .k3a-crumb a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
.k3a .k3a-crumb .sep{opacity:.55}
.k3a .k3a-crumb [aria-current="page"]{color:var(--ink);font-weight:700}
/* StatCount v2: kepala (ikon + label), baris angka (angka kiri, satuan kanan), kaki keterangan */
.k3a .k3a-stat.has-head{gap:var(--space-3)}
.k3a .k3a-stat.has-head .k3a-stat-h .l{font:700 14px/1.25 var(--font-display);color:var(--ink)}
.k3a .k3a-stat.has-head .fig{display:flex}
.k3a .k3a-stat.has-head .fig b{flex:0 1 auto;min-width:0}
.k3a .k3a-stat.has-head .fig .u{flex:none;font:600 12px/1.2 var(--font-display);color:var(--ink-mute);white-space:nowrap}
.k3a .k3a-stat.has-head .k3a-stat-f{margin:0;font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
/* Tab status dengan jumlah */
.k3a .k3a-tabs button i{font:700 12px/1 var(--font-display);font-style:normal;margin-left:var(--space-2);padding:3px var(--space-2);border-radius:var(--radius-pill);background:var(--surface-soft);color:var(--ink-mute)}
.k3a .k3a-tabs button.on i{background:var(--primary-soft,#E6F5F3);color:var(--primary)}
/* Logo K3MART asli (wordmark) di menu samping */
.k3a .k3a-home .k3a-wordmark{display:block;width:auto;max-width:100%}
.k3a .rail .k3a-home .k3a-wordmark{display:none}
/* StatCountTint: kartu angka berlatar gradasi lembut dengan gelombang */
.k3a .k3a-stat.tint{--t1:#FFE3F0;--t2:#FFC9E2;border-color:transparent}
.k3a .k3a-stat.tint.pink{--t1:#FFE6F1;--t2:#FFC6E0}
.k3a .k3a-stat.tint.yellow{--t1:#FFF3D1;--t2:#FFE2A3}
.k3a .k3a-stat.tint.tosca{--t1:#DDF4F2;--t2:#B6E7E3}
.k3a .k3a-stat.tint.primary{--t1:#D5EEEC;--t2:#9ED7D3}
.k3a .k3a-stat.tint .k3a-ic{}
.k3a .k3a-stat.tint .k3a-delta{margin-left:0}
.k3a .k3a-stat.tint .k3a-stat-f{color:var(--ink-soft)}
/* StatCountTint v2: warna brand K3Mart penuh (token primary, tosca, pink, yellow) */
.k3a .k3a-stat.tint.primary{--t1:var(--primary);--t2:var(--primary-strong);--tx:#fff}
.k3a .k3a-stat.tint.pink{--t1:var(--pink);--t2:#C2185B;--tx:#fff}
.k3a .k3a-stat.tint.tosca{--t1:#13A294;--t2:#0B7F76;--tx:#fff}
.k3a .k3a-stat.tint.yellow{--t1:#F2A100;--t2:#D97800;--tx:#fff}
.k3a .k3a-stat.tint{color:var(--tx,var(--ink))}
.k3a .k3a-stat.tint .k3a-stat-h .l,.k3a .k3a-stat.tint .fig b,.k3a .k3a-stat.tint .k3a-stat-f{color:var(--tx,var(--ink))}
.k3a .k3a-stat.tint .k3a-stat-f{opacity:.88}
.k3a .k3a-stat.tint .k3a-ic{background:rgba(255,255,255,.88);color:var(--ink)}
.k3a .k3a-stat.tint .k3a-delta{background:#fff}
/* StatCountTint v3: corak halaman utama mitra (garis tiga warna + titik halftone), tanpa gelombang */
.k3a .k3a-stat.tint{position:relative;overflow:hidden;background:radial-gradient(rgba(255,255,255,.34) 1.5px,transparent 2px) 0 0/14px 14px,linear-gradient(135deg,var(--t1),var(--t2))}
.k3a .k3a-stat.tint::before{position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--tosca) 0 33%,var(--yellow) 33% 66%,var(--pink) 66%);pointer-events:none}
.k3a .k3a-stat.tint::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--t1) 0,var(--t1) 38%,transparent 78%);opacity:.92}
.k3a .k3a-stat.tint>*{position:relative;z-index:1}
/* StatCountTint: tanpa garis tiga warna di tepi atas, hanya titik halftone */
.k3a .k3a-stat.tint::before{content:none;display:none}
/* StatCount: satuan menempel di samping angka (kiri); sisi kanan hanya untuk chip perubahan */
.k3a .k3a-stat.has-head .fig{justify-content:flex-start;align-items:baseline;flex-wrap:wrap;gap:var(--space-1) var(--space-2)}
.k3a .k3a-stat.has-head .fig .u{margin-left:0;text-align:left}
.k3a .k3a-stat.has-head .fig .k3a-delta{margin-left:auto;align-self:center}
/* StatCard: tidak ada tile sorot; bayangan seragam lembut */
.k3a .k3a-stat.hl{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-card)}
.k3a .k3a-stat.hl small,.k3a .k3a-stat.hl .note{color:var(--ink-mute)}
/* Logo K3MART asli: wordmark di menu samping (ikon kecil hanya saat menu diciutkan) dan di header halaman masuk */
.k3a .k3a-wordmark{display:block;height:30px;width:auto;max-width:100%}
.k3a .k3a-home .k3a-wordmark{height:30px}
.k3a .k3a-side .k3a-home .k3a-logo{display:none}
.k3a .rail .k3a-side .k3a-home .k3a-logo,.k3a .k3a-portal.rail .k3a-side .k3a-home .k3a-logo{display:grid}
.k3a .k3a-portal.rail .k3a-home .k3a-wordmark{display:none}
.k3a .k3a-home .k3a-badge{display:none}
/* StatCountWall: kartu angka berlatar "tembok" K3Mart (garis kotak keramik seperti halaman utama mitra) */
.k3a .k3a-stat.wall{--w1:var(--primary);--wl:rgba(255,255,255,.18);--tx:#fff;position:relative;overflow:hidden;color:var(--tx);border-color:transparent;background-color:var(--w1);background-image:linear-gradient(var(--wl) 1px,transparent 1px),linear-gradient(90deg,var(--wl) 1px,transparent 1px);background-size:28px 28px;background-position:-1px -1px}
.k3a .k3a-stat.wall.primary{--w1:var(--primary);--wl:rgba(255,255,255,.18);--tx:#fff}
.k3a .k3a-stat.wall.pink{--w1:var(--pink);--wl:rgba(255,255,255,.2);--tx:#fff}
.k3a .k3a-stat.wall.tosca{--w1:var(--tosca);--wl:rgba(255,255,255,.28);--tx:var(--ink)}
.k3a .k3a-stat.wall.yellow{--w1:var(--yellow);--wl:rgba(255,255,255,.4);--tx:var(--ink)}
.k3a .k3a-stat.wall .k3a-stat-h .l,.k3a .k3a-stat.wall .fig b,.k3a .k3a-stat.wall .k3a-stat-f,.k3a .k3a-stat.wall .k3a-per{color:var(--tx)}
.k3a .k3a-stat.wall .k3a-stat-f,.k3a .k3a-stat.wall .k3a-per{opacity:.9}
.k3a .k3a-stat.wall .k3a-ic{background:#fff;color:var(--ink)}
.k3a .k3a-stat.wall .k3a-delta{background:#fff;margin-left:0}
.k3a .k3a-stat.wall .k3a-st{background:#fff;padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill)}
.k3a .k3a-stat.wall .fig{flex-wrap:wrap}
/* RankShare: peringkat toko dengan ikon dan persen */
.k3a-rank.share li{grid-template-columns:40px minmax(0,1fr) auto}
.k3a-rank.share .tx{min-width:0}
.k3a-rank.share .tx b{display:block;font:700 14px/1.3 var(--font-display);white-space:normal}
.k3a-rank.share .tx small{display:block;margin-top:2px;font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
/* header tetap di atas saat halaman digulir (desktop dan HP) */
.k3a .k3a-header,.k3a .k3a-header.m,.k3a .k3a-topbar{position:sticky;top:0;z-index:25}
/* perbaikan: legenda pie tidak keluar kartu, breadcrumb tanpa nomor */
.k3a .k3a-cc .pc{grid-template-columns:104px minmax(0,1fr);gap:var(--space-3)}
.k3a .k3a-cc .pie{width:104px;height:104px}
.k3a .k3a-cc .pt2 td+td{white-space:nowrap;text-align:right}
.k3a .k3a-cc .pt2 td:first-child{white-space:nowrap}
.k3a .k3a-cc .pt2 td{padding:var(--space-1) 3px}
.k3a .k3a-cc .pt2 td+td{padding-left:var(--space-2)}
.k3a .k3a-cc .pt2 i{margin-right:var(--space-1)}
.k3a .k3a-cc .pt2{table-layout:fixed}
.k3a .k3a-cc .pt2 td:nth-child(2){width:38px}
.k3a .k3a-cc .pt2 td:nth-child(3){width:54px}
.k3a .k3a-cc .pt2 td:first-child{overflow:hidden;text-overflow:ellipsis}
.k3a .k3a-crumb{list-style:none;padding:0}
.k3a .k3a-crumb li{display:inline-flex;align-items:center;list-style:none}
.k3a .k3a-crumb li+li::before{content:"/";margin-right:var(--space-2);opacity:.55}
.k3a .k3a-cc .pt2 td.neg{color:var(--danger)}
/* baris terpilih: semua teks putih di atas primary */
.k3a .k3a-table tbody tr.sel td,.k3a .k3a-table tbody tr.sel td b,.k3a .k3a-table tbody tr.sel td span,.k3a .k3a-table tbody tr.sel td small,.k3a .k3a-table tbody tr.sel td .sub,.k3a .k3a-table tbody tr.sel td .nm{color:var(--on-primary)}
.k3a .k3a-table tbody tr.sel td .k3a-cb{color:var(--primary)}
.k3a .k3a-tabs.scroll{overflow-x:auto;scrollbar-width:none}
.k3a .k3a-tabs.scroll::-webkit-scrollbar{display:none}
.k3a .k3a-tabs button{white-space:nowrap}
.k3a-side.v2 .k3a-menu a .t{line-height:1.35;padding:2px 0}
/* Detail drawer (laci): panel kanan tanpa scrim, daftar tetap terlihat */
.k3a-scrim.drawer{position:fixed;top:68px;right:0;bottom:0;left:auto;z-index:60;background:none;padding:0;display:block;width:clamp(380px,34vw,520px);pointer-events:none}
.k3a-scrim.drawer .shut{display:none}
.k3a-scrim.drawer .k3a-sheet{pointer-events:auto;width:100%;max-width:none;height:100%;border-radius:0;border-left:1px solid var(--line);box-shadow:var(--shadow-side);overflow:hidden;display:flex;flex-direction:column}
.k3a-scrim.drawer .k3a-sheet-b{overflow-y:auto;flex:1;min-height:0}
.k3a-portal:has(.k3a-scrim.drawer) .k3a-main{padding-right:calc(clamp(380px,34vw,520px) + 24px);grid-template-columns:minmax(0,1fr)}
@media (max-width:1100px){.k3a-portal:has(.k3a-scrim.drawer) .k3a-main{padding-right:var(--space-5)}}
/* Kartu bisa dilipat */
.k3a .k3a-card-head .k3a-fold{flex:none;width:var(--control-h-xs);height:var(--control-h-xs);margin-left:var(--space-1);display:inline-grid;place-items:center;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--ink-mute);cursor:pointer;transition:background .15s,transform .2s}
.k3a .k3a-card-head .k3a-fold:hover{background:var(--primary-soft);color:var(--primary)}
.k3a .k3a-card-head .k3a-fold:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.k3a .k3a-card.is-folded > .k3a-fold ~ *,.k3a .k3a-card.is-folded > :not(.k3a-card-head){display:none}
.k3a .k3a-card.is-folded > .k3a-card-head{margin-bottom:0;padding-bottom:0;border-bottom:0}
.k3a .k3a-fold .lc,.k3a .k3a-card.is-folded .k3a-fold .lo{display:none}
.k3a .k3a-card.is-folded .k3a-fold .lc{display:block}
/* Tab sebagai tautan (menu Stok) */
.k3a-tabs a{padding:var(--space-3) var(--space-3);margin-bottom:-1px;border-bottom:2px solid transparent;font:600 14px/1 var(--font-display);color:var(--ink-mute);text-decoration:none}
.k3a-tabs a.on{color:var(--primary);border-bottom-color:var(--primary);font-weight:700}
.k3a-tabs a:hover{color:var(--ink)}
/* Stok */
.so-rs{max-width:260px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink-soft)}
.sc-filters{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--space-3)}
@media (max-width:700px){.sc-filters{grid-template-columns:1fr}}
/* Kartu stok: daftar transaksi di HP */
.sc-list{display:grid}
.sc-it{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.sc-it:last-child{border:0}
.sc-it .l{display:grid;gap:var(--space-1);min-width:0}
.sc-it .l small,.sc-it .r small{font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
.sc-it .r{display:grid;gap:2px;text-align:right}
.sc-it .r b{font:800 16px/1.1 var(--font-display)}
.sc-it .r b.in{color:var(--primary)}
.sc-it .r b.out{color:var(--danger)}
/* Bagikan penjualan */
.k3a-scrim.center{align-items:center;justify-content:center}
.k3a-scrim.center .k3a-sheet.sh-sheet{width:min(780px,100%);height:auto;max-height:calc(100vh - 32px)}
.sh-body{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--space-5);align-items:start}
.sh-stage{display:grid;place-items:center;padding:var(--space-4);border-radius:var(--radius-xl);background:var(--surface-soft)}
.sh-card{position:relative;width:100%;display:grid;align-content:start;gap:var(--space-2);padding:20px var(--space-4);border-radius:var(--radius-xl);color:var(--white);background:linear-gradient(160deg,var(--primary) 0%,#17837a 55%,var(--tosca) 100%);overflow:hidden;box-shadow:var(--shadow-card);box-sizing:border-box}
.sh-card.story{aspect-ratio:9/16}
.sh-card.feed{aspect-ratio:1/1;max-width:300px}
.sh-card::after{content:"";position:absolute;right:-40px;bottom:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,214,41,.28)}
.sh-logo{height:22px;width:auto;justify-self:start;background:#fff;border-radius:var(--radius-sm);padding:3px var(--space-2)}
.sh-biz{font:800 18px/1.2 var(--font-display);margin-top:var(--space-2)}
.sh-per{font:600 12px/1.3 var(--font-display);opacity:.85}
.sh-big{display:flex;align-items:baseline;gap:var(--space-2);margin-top:var(--space-2)}
.sh-big b{font:var(--text-figure-xl);letter-spacing:-.02em}
.sh-big .u{font:var(--text-button)}
.sh-where{font:var(--text-label);opacity:.9}
.sh-rev{margin-top:var(--space-1);padding:var(--space-2) var(--space-2);border-radius:var(--radius-md);background:rgba(255,255,255,.16);font:var(--text-label)}
.sh-rev b{font-weight:800}
.sh-top{margin-top:var(--space-2);display:grid;gap:var(--space-2);position:relative;z-index:1}
.sh-th{font:700 11px/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.sh-tr{display:flex;justify-content:space-between;gap:var(--space-2);font:var(--text-label)}
.sh-tr .n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-ft{position:relative;z-index:1;margin-top:var(--space-2);font:700 12px/1 var(--font-display);color:var(--yellow,#FFD629)}
.sh-opts{display:grid;gap:var(--space-4)}
.sh-sw{display:flex;gap:var(--space-2);align-items:flex-start}
.sh-sw b{display:block;font:700 14px/1.3 var(--font-display)}
.sh-sw small{display:block;margin-top:2px;font:500 12px/1.4 var(--font-display);color:var(--ink-mute)}
.sh-never{margin:0;padding:var(--space-3) var(--space-3) var(--space-3) 28px;border-radius:var(--radius-md);background:var(--surface-soft);font:500 12px/1.6 var(--font-display);color:var(--ink-soft)}
.pj-paid{text-decoration:none}
@media (max-width:700px){.sh-body{grid-template-columns:1fr}}
.k3a .sh-big{display:flex;align-items:baseline;gap:var(--space-2)}
.k3a .sh-big b{font:var(--text-figure-xl);letter-spacing:-.02em;color:var(--white)}
.k3a .sh-big .u{font:var(--text-button);color:var(--white)}
.k3a .sh-big b .sc-interp,.k3a .sh-tr .sc-interp{font:inherit}
.sh-card > *,.sh-top,.sh-tr{min-width:0}
.k3a .sh-tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2)}
.k3a .sh-tr b{white-space:nowrap;font:800 13px/1.3 var(--font-display);color:var(--white)}
.k3a .sh-biz{color:var(--white)}
.pt-hp .sh-card.story{max-width:230px;margin:0 auto}
.pt-hp .sh-card.feed{max-width:280px;margin:0 auto}
.pt-hp .pj-paid{justify-self:start}
/* Penjualan per toko */
.pj-share{display:flex;align-items:center;gap:var(--space-2);min-width:140px}
.pj-share .bar,.pj-tk .bar{flex:1;height:8px;border-radius:var(--radius-pill);background:var(--surface-soft);overflow:hidden}
.pj-share .bar i,.pj-tk .bar i{display:block;height:100%;border-radius:var(--radius-pill);background:var(--tosca)}
.pj-share span{font:700 12px/1 var(--font-display);color:var(--ink-soft);min-width:34px;text-align:right}
.pj-tok{display:grid;gap:var(--space-3);padding:var(--space-1) var(--space-4) var(--space-4)}
.pj-tk{display:grid;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);background:var(--surface-soft)}
.pj-tk .h{display:flex;justify-content:space-between;font:800 14px/1.2 var(--font-display)}
.pj-tk .m{display:flex;justify-content:space-between;gap:var(--space-2)}
.pj-tk .m span{display:grid;gap:2px;font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
.pj-tk .m b{font:800 13px/1.2 var(--font-display);color:var(--ink)}
/* Penjualan: pil perubahan di baris keterangan kartu */
.k3a .k3a-stat .k3a-stat-f .k3a-delta{margin:0 var(--space-2) 0 0;vertical-align:middle}
/* Produk penyumbang penjualan per toko */
.pj-contrib{display:grid}
.pj-contrib .ct{display:grid;grid-template-columns:20px 40px minmax(0,1fr);gap:var(--space-2);align-items:center;padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.pj-contrib .ct:last-child{border:0}
.pj-contrib .rk{font:800 12px/1 var(--font-display);color:var(--ink-mute);text-align:center}
.pj-contrib .k3a-thumb{width:40px;height:40px}
.pj-contrib .r1,.pj-contrib .r2{display:flex;justify-content:space-between;gap:var(--space-2);min-width:0}
.pj-contrib .r1 b{font:700 14px/1.3 var(--font-display);min-width:0}
.pj-contrib .r1 span{font:800 13px/1.3 var(--font-display);white-space:nowrap}
.pj-contrib small{font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
.pj-contrib small.sh{font-weight:800;color:var(--ink-soft)}
.pj-contrib .bar{height:6px;margin-top:var(--space-2);border-radius:var(--radius-pill);background:var(--surface-soft);overflow:hidden}
.pj-contrib .bar i{display:block;height:100%;border-radius:var(--radius-pill);background:var(--tosca)}
.pj-contrib .ct.stp{grid-template-columns:minmax(0,1fr)}
.sh-cap{margin:0;font:500 12px/1.5 var(--font-display);color:var(--ink-mute)}
.sh-opts .sh-cap + .sh-cap{margin-top:-6px}
.sh-lnk{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--primary);text-decoration:underline;cursor:pointer}
/* Bagikan: tiga warna kartu */
.sh-card.t-tosca{background:linear-gradient(160deg,var(--primary) 0%,#17837a 55%,var(--tosca) 100%)}
.sh-card.t-pink{background:linear-gradient(160deg,#C2185B 0%,var(--pink) 55%,#F7699A 100%)}
.sh-card.t-pink::after{background:rgba(255,214,41,.35)}
.sh-card.t-kuning{background:linear-gradient(160deg,#FFD629 0%,#FFE35C 60%,#FFF1A8 100%);color:#16191F}
.sh-card.t-kuning::after{background:rgba(46,196,182,.35)}
.k3a .sh-card.t-kuning .sh-biz,.k3a .sh-card.t-kuning .sh-big b,.k3a .sh-card.t-kuning .sh-big .u,.k3a .sh-card.t-kuning .sh-tr b{color:#16191F}
.sh-card.t-kuning .sh-rev{background:rgba(22,25,31,.08)}
.sh-card.t-kuning .sh-ft{color:var(--pink)}
.sh-card.t-pink .sh-ft{color:#FFE35C}
.sh-sws{display:flex;gap:var(--space-2);flex-wrap:wrap}
.sh-sw-b{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3) var(--space-2) var(--space-2);border:1.5px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);font:var(--text-button-sm);color:var(--ink-soft);cursor:pointer}
.sh-sw-b i{width:22px;height:22px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.sh-sw-b.tosca i{background:linear-gradient(135deg,var(--primary),var(--tosca))}
.sh-sw-b.pink i{background:linear-gradient(135deg,#C2185B,var(--pink))}
.sh-sw-b.kuning i{background:linear-gradient(135deg,#FFD629,#FFE35C)}
.sh-sw-b[aria-pressed="true"]{border-color:var(--primary);color:var(--ink);box-shadow:0 0 0 3px var(--primary-soft)}
/* Kartu Feed 1:1: tanpa daftar produk terlaris (tidak muat) */
.sh-card.feed .sh-top{display:none}
.sh-card.feed{align-content:center;gap:var(--space-2)}
.sh-card > *{position:relative;z-index:1}
/* Surat peringatan */
.sp-status .sp-big{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.sp-status .sp-big b{font:800 32px/1.05 var(--font-display);letter-spacing:-.02em}
.sp-dots{display:flex;gap:var(--space-2)}
.sp-dot{width:22px;height:22px;border-radius:50%;background:var(--surface-soft);box-shadow:inset 0 0 0 2px var(--line-strong);display:block}
.sp-dot.on{background:var(--danger);box-shadow:none}
.sp-msg{margin:var(--space-3) 0 0;font:var(--text-body);color:var(--ink-soft)}
.sp-ev .h{font:800 14px/1.2 var(--font-display);margin-bottom:var(--space-2)}
.sp-ev .g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
.sp-ev figure{margin:0;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line)}
.sp-ev img{display:block;width:100%;height:auto}
.sp-ev figcaption{padding:var(--space-2) var(--space-2);font:600 12px/1.3 var(--font-display);color:var(--ink-mute)}
.sp-list{display:grid;gap:var(--space-2);padding:var(--space-1) var(--space-4) var(--space-4)}
.sp-banner{margin-bottom:0}
/* Tabel SP: saat laci terbuka, sembunyikan kolom sekunder agar nomor panjang tetap muat */
.k3a-portal:has(.k3a-scrim.drawer) .sp-t :is(th,td):is(:nth-child(2),:nth-child(4),:nth-child(7)){display:none}
:root[data-theme="dark"] .k3a-toast,[data-theme="dark"] .k3a .k3a-toast{color:var(--canvas)}
[data-theme="dark"] .k3a-cl li.done .dot{color:var(--on-primary)}
[data-theme="dark"] .k3a .k3a-cc .bub .b3{color:var(--canvas)}
[data-theme="dark"] .k3a .k3a-table tbody tr.sel .k3a-st.pill{background:rgba(0,0,0,.18)}
[data-theme="dark"] .k3a .k3a-table tbody tr.sel .k3a-more:hover{background:rgba(0,0,0,.18)}
/* ===== Dark theme ([data-theme="dark"]; tokens.json colour themes) ===== */
[data-theme="dark"] .k3a-alert.warn{color:var(--yellow-ink)}
[data-theme="dark"] .k3a-alert.err{color:var(--danger)}
[data-theme="dark"] .k3a .k3a-ic.tosca,[data-theme="dark"] .k3a .k3a-who .av{color:var(--primary-strong)}
[data-theme="dark"] .k3a .k3a-tip,[data-theme="dark"] .k3a-toast{color:var(--canvas)}
[data-theme="dark"] .k3a .k3a-cc svg .tp .tt,[data-theme="dark"] .k3a .k3a-cc svg text.tt{fill:var(--canvas)}
[data-theme="dark"] .k3a-dlg .x:hover{background:var(--surface-soft)}
[data-theme="dark"] .k3a .k3a-card,[data-theme="dark"] .k3a .k3a-stat,[data-theme="dark"] .k3a .k3a-req,[data-theme="dark"] .k3a .k3a-rc,[data-theme="dark"] .k3a .k3a-cc,[data-theme="dark"] .k3a .k3a-sheet,[data-theme="dark"] .k3a .k3a-stat.hl{border-color:var(--line);box-shadow:var(--shadow-card)}
[data-theme="dark"] .k3a .k3a-sheet{box-shadow:var(--shadow-pop)}
[data-theme="dark"] .k3a .k3a-req:hover,[data-theme="dark"] .k3a .k3a-rc:hover{border-color:var(--line-strong)}
[data-theme="dark"]{color-scheme:dark}
html[data-theme="dark"],html[data-theme="dark"] body{background:var(--canvas)}
[data-theme="dark"] .k3a .k3a-stat.tint.pink{--t1:#3A1627;--t2:#5E1C3B;--tx:#FFD9E7}
[data-theme="dark"] .k3a .k3a-stat.tint.yellow{--t1:#33290B;--t2:#5A4710;--tx:#FFE9A6}
[data-theme="dark"] .k3a .k3a-stat.tint.tosca{--t1:#123533;--t2:#1B5A55;--tx:#CFF5F0}
[data-theme="dark"] .k3a .k3a-stat.tint.primary{--t1:#153B38;--t2:#1F6B65;--tx:#D9F7F3}
[data-theme="dark"] .k3a .k3a-stat.tint .k3a-ic,[data-theme="dark"] .k3a .k3a-stat.wall .k3a-ic{background:rgba(8,18,17,.62);color:var(--tx)}
[data-theme="dark"] .k3a .k3a-stat.tint .k3a-delta,[data-theme="dark"] .k3a .k3a-stat.wall .k3a-delta,[data-theme="dark"] .k3a .k3a-stat.wall .k3a-st{background:rgba(8,18,17,.5);color:var(--tx)}
[data-theme="dark"] .k3a .k3a-stat.tint{background:radial-gradient(rgba(255,255,255,.07) 1.5px,transparent 2px) 0 0/14px 14px,linear-gradient(135deg,var(--t1),var(--t2))}
[data-theme="dark"] .k3a .k3a-stat.wall{--wl:rgba(255,255,255,.07)}
[data-theme="dark"] .k3a .k3a-stat.wall.primary{--w1:#1B5F5A;--wl:rgba(255,255,255,.07);--tx:#D9F7F3}
[data-theme="dark"] .k3a .k3a-stat.wall.pink{--w1:#7A1840;--wl:rgba(255,255,255,.07);--tx:#FFD9E7}
[data-theme="dark"] .k3a .k3a-stat.wall.tosca{--w1:#1B5A55;--wl:rgba(255,255,255,.07);--tx:#CFF5F0}
[data-theme="dark"] .k3a .k3a-stat.wall.yellow{--w1:#5E4A0C;--wl:rgba(255,255,255,.07);--tx:#FFE9A6}
/* Tema gelap: latar bergambar halaman portal (desktop) */
@media (min-width:900px){
 [data-theme="dark"] .k3a-portal{background:#0C1312 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMax slice'%3E%3Cpath fill='%23122321' d='M0 900V560C120 520 230 470 300 380C380 280 470 250 560 330C640 400 700 520 800 560C900 600 960 560 1010 640C1050 705 1080 800 1130 900Z'/%3E%3Cpath fill='%23172C2A' d='M0 900V700C90 690 170 650 230 600C290 550 350 560 400 620C450 680 500 760 540 900Z'/%3E%3Cpath fill='%2328151F' d='M1440 0V330C1360 330 1300 280 1270 210C1240 140 1190 60 1110 0Z'/%3E%3C/svg%3E") center bottom/cover no-repeat fixed}
}
/* Pilihan tema (Terang / Gelap / Sistem) di menu samping */
.k3a-theme{box-sizing:border-box;width:100%;margin-top:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:3px;border-radius:var(--radius-pill);background:var(--surface-soft);border:1px solid var(--line)}
.k3a-theme + .k3a-me2{margin-top:var(--space-3)}
.k3a-theme button{min-width:0;display:flex;align-items:center;justify-content:center;gap:var(--space-1);height:var(--control-h-xs);padding:0 2px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--ink-mute);font:700 12px/1 var(--font-display);cursor:pointer;white-space:nowrap}
.k3a-theme button svg{width:14px;height:14px;flex:none}
.k3a-theme button:hover{color:var(--ink)}
.k3a-theme button[aria-checked="true"]{background:var(--surface);color:var(--primary);box-shadow:var(--shadow-sm)}
.k3a-theme button:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.rail .k3a-theme{grid-template-columns:1fr;border-radius:var(--radius-lg)}
.rail .k3a-theme button span{display:none}
.rail .k3a-theme button{height:var(--control-h-xs)}
/* Tema gelap: blok khusus halaman portal (banner status, panduan awal, kartu akun, formulir pengajuan) */
[data-theme="dark"] .gd.wait{background:var(--yellow-soft);box-shadow:inset 0 0 0 2px var(--yellow)}
[data-theme="dark"] .gd-docs i{background:var(--surface-soft);border-color:var(--line-strong)}
[data-theme="dark"] .dots i{background:var(--line-strong)}
[data-theme="dark"] .dots i.on{background:var(--primary)}
[data-theme="dark"] .ob-list li{background:var(--surface-soft);border-color:var(--line)}
[data-theme="dark"] .ob-big div{background:var(--surface-soft);border-color:var(--line)}
[data-theme="dark"] .tg.w{color:var(--pink-ink)}
[data-theme="dark"] .tg.o{background:var(--surface-soft);color:var(--ink-soft)}
[data-theme="dark"] .ob-dlg{background:var(--surface);box-shadow:0 24px 60px rgba(0,0,0,.6)}
[data-theme="dark"] .ob-scrim{background:rgba(0,0,0,.65)}
[data-theme="dark"] .ob-x{background:var(--surface-soft)}
[data-theme="dark"] .ob-x:hover{background:var(--line)}
[data-theme="dark"] .ak-hero-card{background:linear-gradient(120deg,var(--tosca-soft) 0%,var(--surface) 62%,var(--yellow-soft) 135%)!important;border-color:var(--line)!important}
[data-theme="dark"] .ak-hero .av{color:#16191F;box-shadow:0 0 0 4px var(--surface),0 6px 14px -6px rgba(0,0,0,.6)}
[data-theme="dark"] .ak-tile.big b,[data-theme="dark"] .pg-calc .net b,[data-theme="dark"] .pf-d.up{color:var(--primary-strong)}
[data-theme="dark"] .pg-new{background:linear-gradient(120deg,var(--tosca-soft) 0%,var(--surface) 62%,var(--yellow-soft) 135%);border-color:var(--line)}
[data-theme="dark"] .pf-sh .n,[data-theme="dark"] .pf-ico.n,[data-theme="dark"] .pf-ph em{color:var(--canvas)}
[data-theme="dark"] .pf-ph .i{color:rgba(255,255,255,.35)}
[data-theme="dark"] .pf-ph button{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.5)}
[data-theme="dark"] .pf-types button.on{box-shadow:0 1px 4px rgba(0,0,0,.5);background:var(--line)}
[data-theme="dark"] .pg-card.v2{box-shadow:var(--shadow-card)}
/* Alert v2: ikon kategori, aksen, tombol tutup, dan tumpukan pemberitahuan */
.k3a-alert{position:relative;--al:var(--primary);--al-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");align-items:flex-start;box-shadow:inset 3px 0 0 var(--al);overflow:hidden}
.k3a-alert::before{content:"";flex:none;background:var(--al);-webkit-mask:var(--al-ic) center/contain no-repeat;mask:var(--al-ic) center/contain no-repeat}
.k3a-alert.ok{background:var(--success-soft);color:var(--success);--al:var(--success);--al-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.8 2.8L16 9.5'/%3E%3C/svg%3E")}
.k3a-alert.warn{--al:var(--yellow-ink);--al-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 2.4 17.5A2 2 0 0 0 4.1 20.5h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 17h.01'/%3E%3C/svg%3E")}
.k3a-alert.err{--al:var(--danger);--al-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E")}
.k3a-alert .tx{flex:1;min-width:0}
.k3a-alert .tx b{display:block;margin-bottom:1px;font-weight:800}
.k3a-alert .x{flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:inherit;opacity:.65;cursor:pointer;transition:background .15s,opacity .15s}
.k3a-alert .x:hover{opacity:1;background:color-mix(in srgb,currentColor 12%,transparent)}
.k3a-alert .x:focus-visible{opacity:1;outline:2px solid var(--al);outline-offset:1px}
.k3a-alert.out{opacity:0;transform:translateX(14px);transition:opacity .22s,transform .22s}
.k3a-alerts{position:fixed;z-index:250;display:grid;pointer-events:none}
.k3a-alerts .k3a-alert{pointer-events:auto}
.k3a-alert.pop{border:1px solid color-mix(in srgb,var(--al) 28%,transparent);box-shadow:var(--shadow-pop),inset 3px 0 0 var(--al);animation:k3aAlIn .28s cubic-bezier(.2,.8,.2,1)}
.k3a-alert.pop:hover .ring .pr,.k3a-alert.pop:focus-within .ring .pr{animation-play-state:paused}
@keyframes k3aAlIn{from{opacity:0;transform:translateY(-10px) scale(.98)}}
@keyframes k3aAlRing{to{stroke-dashoffset:1}}
@media (max-width:899px){.k3a-alerts{left:12px;right:12px;width:auto;top:calc(var(--sb,0px) + 68px)}}
@media (prefers-reduced-motion:reduce){.k3a-alert.pop,.k3a-alert .ring .pr{animation:none}.k3a-alert.out{transition:none}}
[data-theme="dark"] .k3a-alert.ok{color:var(--success)}
[data-theme="dark"] .k3a-alert.warn{--al:var(--yellow)}
/* Alert: ukuran lebih ringkas */
.k3a-alert{padding:var(--space-2) var(--space-3) var(--space-2) var(--space-3);gap:var(--space-2);border-radius:var(--radius-md);font:500 13px/1.45 var(--font-display)}
.k3a-alert::before{width:18px;height:18px;margin-top:1px}
.k3a-alert .x{width:24px;height:24px;margin:-2px -3px -2px auto}
.k3a-alert .x svg{width:14px;height:14px}
.k3a-alerts{top:calc(var(--sb,0px) + 76px);right:20px;width:min(340px,calc(100vw - 24px));gap:var(--space-2)}
@media (max-width:899px){.k3a-alerts{left:12px;right:12px;width:auto;top:calc(var(--sb,0px) + 66px)}}
/* Alert: hitung mundur berupa lingkaran di sekeliling tombol tutup */
.k3a-alert .x{position:relative}
.k3a-alert .x .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.k3a-alert .x .ring circle{fill:none;stroke:var(--al);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.k3a-alert .x .ring .tr{opacity:.22}
.k3a-alert .x .ring .pr{animation:k3aAlRing var(--dur,6s) linear forwards}
/* Keadaan data: memuat, belum ada data, tidak ditemukan, gagal memuat (kartu, grafik, daftar, tabel) */
.k3a-empty.in{background:transparent;border-radius:0;padding:28px var(--space-4)}
.k3a-empty .big.mute{background:var(--surface-soft);color:var(--ink-mute)}
.k3a-empty .big.warn{background:var(--yellow-soft);color:var(--yellow-ink)}
.k3a-empty .acts{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);margin-top:var(--space-2)}
.k3a-empty b+span{max-width:34ch}
.k3a .k3a-sk.circle{width:40px;height:40px;border-radius:50%;flex:none}
.k3a .k3a-sk.lg{height:28px;border-radius:var(--radius-sm)}
.k3a .k3a-sk.chart{height:150px;border-radius:var(--radius-md)}
.k3a .k3a-stat.skel{gap:var(--space-3);pointer-events:none}
.k3a .k3a-stat.none .fig b{color:var(--ink-mute)}
.k3a .k3a-stat .k3a-retry{justify-self:start;border:0;background:none;padding:0;font:700 12px/1.3 var(--font-display);color:var(--primary);cursor:pointer;text-decoration:underline}
.k3a .k3a-skel-list{display:grid;gap:0}
.k3a .k3a-skel-list .it{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:var(--space-2) 0;border-bottom:1px solid var(--line)}
.k3a .k3a-skel-list .it:last-child{border:0}
.k3a .k3a-skel-list .tx{display:grid;gap:var(--space-2)}
/* Administrasi: tombol bahaya & baris data */
.k3a .k3a-btn.danger{background:var(--danger);border-color:var(--danger);color:var(--white)}
.k3a .k3a-btn.danger:hover{filter:brightness(.94)}
.k3a .ad-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3);margin-top:var(--space-1)}
.k3a .ad-kv{display:grid;gap:var(--space-2);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.k3a .ad-kv small{color:var(--ink-mute)}
.k3a .ad-row{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-top:var(--space-3)}
.k3a .ad-warn{margin:0 0 var(--space-3);color:var(--ink-soft)}
/* Teks panjang: dipotong dengan "..." sesuai ruang yang ada, teks lengkap tampil di tooltip (hover, fokus, atau ketuk). Aturan berlaku untuk tabel dan daftar. */
.k3a .k3a-trunc,.k3a .k3a-table .nm,.k3a .k3a-table .sub:not([style*="normal"]),.k3a .pj-contrib .r1 b,.k3a .pj-contrib .r2 small:not(.sh),.k3a .k3a-row .tx b,.k3a .k3a-row .tx>span{display:block;min-width:0;max-width:min(100%,var(--trunc-w,34ch));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k3a .pj-contrib .r1 b{flex:1 1 0;max-width:none}
.k3a .k3a-trunc.w-fill,.k3a .k3a-row .tx b,.k3a .k3a-row .tx>span{max-width:100%}
.k3a .k3a-trunc-2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal;min-width:0;overflow-wrap:anywhere}
.k3a .is-trunc{cursor:pointer}
.k3a .is-trunc:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
.k3a-tipfull{position:fixed;z-index:10000;box-sizing:border-box;max-width:min(320px,calc(100vw - 24px));padding:var(--space-2) var(--space-2);border-radius:var(--radius-md);background:var(--ink-fixed);color:var(--white);border:1px solid rgba(255,255,255,.14);font:600 12px/1.45 var(--font-display);box-shadow:var(--shadow-pop);pointer-events:none;overflow-wrap:anywhere;white-space:normal}
.k3a-tipfull.static{position:static;display:inline-block}
.k3a .is-open.is-open.is-open.is-open{display:block;max-width:100%;overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere;-webkit-line-clamp:unset}
/* Status baris tabel yang bisa dibuka (tr.go): hover, ditekan, fokus keyboard. Baris terpilih (.sel) tetap solid. */
.k3a-table tbody tr.go td{transition:background .12s ease}
.k3a-table tbody tr.go:not(.sel):hover td,.k3a-table tbody tr.go.is-hov:not(.sel) td{background:var(--surface-soft)}
.k3a-table tbody tr.go:not(.sel):active td,.k3a-table tbody tr.go.is-act:not(.sel) td{background:color-mix(in srgb,var(--ink) 9%,var(--surface))}
.k3a-table tbody tr.go:focus{outline:none}
.k3a-table tbody tr.go:not(.sel):focus-visible td,.k3a-table tbody tr.go.is-foc:not(.sel) td{background:var(--surface-soft);box-shadow:inset 0 2px 0 var(--primary),inset 0 -2px 0 var(--primary)}
.k3a-table tbody tr.go:not(.sel):focus-visible td:first-child,.k3a-table tbody tr.go.is-foc:not(.sel) td:first-child{box-shadow:inset 2px 0 0 var(--primary),inset 0 2px 0 var(--primary),inset 0 -2px 0 var(--primary)}
.k3a-table tbody tr.go:not(.sel):focus-visible td:last-child,.k3a-table tbody tr.go.is-foc:not(.sel) td:last-child{box-shadow:inset -2px 0 0 var(--primary),inset 0 2px 0 var(--primary),inset 0 -2px 0 var(--primary)}
/* Select: chevron di tema gelap, disabled, daftar pilihan, status peraga untuk dokumentasi */
[data-theme="dark"] .k3a .k3a-select{color-scheme:dark;background-repeat:no-repeat;background-position:right 14px center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23C9CED6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m1.5 1.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E")}
.k3a .k3a-select:disabled{opacity:.55;cursor:not-allowed;background-color:var(--surface-soft)}
.k3a .k3a-select option{color:var(--ink);background:var(--surface)}
.k3a .k3a-in.is-hov{border-color:var(--line-strong)}
.k3a .k3a-in.is-foc{border-color:var(--primary);background-color:var(--surface);box-shadow:var(--shadow-focus)}
.k3a .k3a-field.err .k3a-select{background-color:var(--danger-soft);background-repeat:no-repeat;background-position:right 14px center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23454B53' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m1.5 1.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E")}
[data-theme="dark"] .k3a .k3a-field.err .k3a-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23C9CED6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m1.5 1.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E")}
/* FilterBar */
.k3a-filterbar{display:grid;gap:var(--space-2);min-width:0}
.k3a-filterbar .k3a-in{background-color:var(--surface)}
.k3a-filterbar .k3a-in:focus{background-color:var(--surface)}
.k3a-filterbar .k3a-range{flex-wrap:nowrap}
.k3a-filterbar .k3a-range .k3a-in{flex:1 1 0;min-width:0}
[data-theme="dark"] .k3a .k3a-filterbar input[type="date"]{color-scheme:dark}
@media (max-width:520px){.k3a-filterbar .k3a-range{flex-wrap:wrap}.k3a-filterbar .k3a-range .k3a-in{flex:1 1 130px}}
/* Logo bulat K3Mart (assets/Logo/k3mart-mark.png) saat menu samping diciutkan */
.k3a-portal.rail .k3a-side .k3a-home .k3a-wordmark{display:none}
.k3a-portal.rail .k3a-side .k3a-home .k3a-logo{display:grid}
.k3a-logo:has(img){width:40px;height:40px;border-radius:50%;background:none;overflow:hidden}
.k3a-logo:has(img) i{display:none}
.k3a-logo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.k3a-portal.rail .k3a-side .k3a-side-top{gap:var(--space-2);flex:none;min-height:0;margin-bottom:var(--space-3)}
/* Detail panel (atomik): StatTiles, SectionTitle, NoteBox, MiniTable, k3a-low */
.k3a-kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.k3a-kv>div{padding:var(--space-3);border-radius:var(--radius-lg);background:var(--surface-soft);min-width:0}
.k3a-kv small{display:block;font:600 12px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a-kv b{display:block;margin-top:var(--space-2);font:800 16px/1.1 var(--font-display);font-variant-numeric:tabular-nums}
.k3a-sec-h{margin:0 0 var(--space-2);font:700 14px/1.2 var(--font-display);display:flex;justify-content:space-between;align-items:center;gap:var(--space-2)}
.k3a-note{margin:0;padding:var(--space-3) var(--space-3);border-radius:var(--radius-lg);background:var(--surface-soft);font:500 12px/1.5 var(--font-display);color:var(--ink-mute)}
.k3a-table.mini{font-size:13px}
.k3a-table.mini td{background:var(--surface-soft)}
.k3a-low,.pd-low{color:var(--danger);font-weight:700}
/* DataControls: periode statistik + interval perbarui data, sebaris di sisi tombol aksi */
.k3a-datactl{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);min-width:0}
.k3a-datactl .dc-r{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-2)}
.k3a-datactl .dc-r .k3a-in{min-width:0}
.k3a-datactl .dc-r span{font:600 12px/1 var(--font-display);color:var(--ink-mute)}
.k3a-datactl .dc-go{flex:none}
.k3a-datactl .dc-go:disabled{opacity:.45;cursor:not-allowed}
.k3a-datactl+.k3a-btn,.k3a-datactl~.k3a-btn{flex:none}
.dc-upd{display:block;margin-top:2px;font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
[data-theme="dark"] .k3a .k3a-datactl input[type="date"]{color-scheme:dark}
@media (max-width:640px){.k3a-datactl{width:100%}.k3a-datactl .k3a-period{flex:1 1 140px}}
.k3a-datactl .dc-ref{display:flex;align-items:center}
.k3a-datactl .k3a-period{max-width:176px}
.k3a-page-head>div:first-child{min-width:0}
@media (min-width:900px){.k3a-page-head:has(.k3a-datactl){flex-wrap:nowrap}.k3a-page-head:has(.k3a-datactl)>div:first-child{flex:1 1 200px}.k3a-page-head:has(.k3a-datactl) .acts{flex-wrap:nowrap;flex:0 0 auto}.k3a-page-head:has(.k3a-datactl) .k3a-datactl{flex-wrap:nowrap}}
@media (min-width:900px){.k3a-page-head:has(.dc-r){flex-wrap:wrap}.k3a-page-head:has(.dc-r) .acts,.k3a-page-head:has(.dc-r) .k3a-datactl{flex-wrap:wrap}}
@media (min-width:900px){.k3a-page-head:has(.k3a-datactl){align-items:flex-start}.k3a-page-head:has(.k3a-datactl) .acts{align-items:center;min-height:var(--control-h-sm)}}
.k3a-datactl.hp{flex-wrap:wrap}
.k3a-datactl.hp .dc-pick{flex:0 1 auto;text-align:left}
.k3a-datactl.hp .dc-upd{flex:1 1 100%;margin-top:0}
.k3a-sheet .k3a-range{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--space-2)}
.k3a-sheet .k3a-range .k3a-in{min-width:0;width:100%}
/* Gaya pil gabungan untuk kontrol data (rekomendasi): periode | interval ⟳ dalam satu kapsul */
.k3a-datactl:not(.hp),.k3a-datactl .dc-pill{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:0;padding:3px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface)}
.k3a-datactl .dc-pill{flex:0 1 auto}
.k3a-datactl .k3a-period{height:var(--control-h-xs);border:0;background-color:transparent;box-shadow:none;border-radius:var(--radius-pill)}
.k3a-datactl .k3a-period:hover{background-color:var(--surface-soft)}
.k3a-datactl .dc-ref{gap:0;margin-left:2px;padding-left:2px;border-left:1px solid var(--line)}
.k3a-datactl .dc-go{position:relative;width:34px;height:var(--control-h-xs)}
.k3a-datactl .dc-go::after{content:"";position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 2px var(--surface)}
.k3a-datactl .dc-go:disabled::after{background:var(--ink-mute)}
.k3a-datactl .dc-r{padding:0 var(--space-2);border-left:1px solid var(--line);margin-left:2px}
.k3a-datactl .dc-r .k3a-in{height:var(--control-h-xs);border:0;background-color:transparent;width:132px}
.k3a-datactl.hp .dc-pick{min-width:0}
/* menu perbarui otomatis (ikon jam) */
.k3a-datactl .dc-ref{position:relative}
.k3a-datactl .dc-clock{width:auto;min-width:34px;height:var(--control-h-xs);gap:var(--space-1);padding:0 var(--space-2) 0 var(--space-2);display:inline-flex;align-items:center;border-radius:var(--radius-pill)}
.k3a-datactl .dc-iv{font:600 12px/1 var(--font-display);color:var(--ink-soft);white-space:nowrap}
.k3a-datactl .dc-shut{position:fixed;inset:0;z-index:69;border:0;background:transparent;cursor:default}
.k3a-datactl .dc-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:70;min-width:208px;padding:var(--space-2);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-pop,0 12px 32px rgba(20,30,40,.18)),0 0 0 1px var(--line);display:grid;gap:2px}
.k3a-datactl .dc-menu-h{padding:var(--space-2) var(--space-2) var(--space-2);font:700 11px/1 var(--font-display);letter-spacing:.06em;color:var(--ink-mute)}
.k3a-datactl .dc-menu button{display:flex;align-items:center;gap:var(--space-2);height:var(--control-h-sm);padding:0 var(--space-2);border:0;border-radius:var(--radius-md);background:transparent;color:var(--ink);font:600 14px/1 var(--font-display);text-align:left;cursor:pointer}
.k3a-datactl .dc-menu button:hover{background:var(--surface-soft)}
.k3a-datactl .dc-menu .ck{width:16px;color:var(--primary);visibility:hidden}
.k3a-datactl .dc-menu .on .ck{visibility:visible}
.k3a-datactl.hp .dc-ref{position:static}
.k3a-datactl.hp .dc-pill{position:relative}
.k3a-datactl.hp .dc-menu{right:auto;left:0}
/* Badge periode pada kartu angka: warna mengikuti teks kartu (kontras terjaga di semua tint, terang & gelap) */
.k3a .k3a-stat.tint .k3a-per,.k3a .k3a-stat.has-head.tint .k3a-stat-h .k3a-per{color:var(--white);opacity:1;font-weight:700}
.k3a .k3a-stat.tint.tosca .k3a-stat-h .l,.k3a .k3a-stat.tint.tosca .fig b,.k3a .k3a-stat.tint.tosca .k3a-stat-f,.k3a .k3a-stat.tint.tosca .k3a-per,.k3a .k3a-stat.tint.yellow .k3a-stat-h .l,.k3a .k3a-stat.tint.yellow .fig b,.k3a .k3a-stat.tint.yellow .k3a-stat-f,.k3a .k3a-stat.tint.yellow .k3a-per{text-shadow:0 1px 2px rgba(0,0,0,.22)}
[data-theme="dark"] .k3a .k3a-stat.tint .k3a-stat-h .l,[data-theme="dark"] .k3a .k3a-stat.tint .fig b,[data-theme="dark"] .k3a .k3a-stat.tint .k3a-stat-f,[data-theme="dark"] .k3a .k3a-stat.tint .k3a-per{text-shadow:none}
/* MenuSelect: pilihan dalam menu popover dengan tanda centang (pilih satu) */
.k3a-msel{position:relative;display:inline-block}
.k3a-msel-btn{display:inline-flex;align-items:center;gap:var(--space-2);height:var(--control-h-sm);padding:0 var(--space-3) 0 var(--space-3);border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface-soft);color:var(--ink);font:600 14px/1 var(--font-display);cursor:pointer}
.k3a-msel-btn:hover{border-color:var(--line-strong)}
.k3a-msel-btn:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.k3a-msel-btn svg{width:16px;height:16px;flex:none;color:var(--ink-soft)}
.k3a-msel-btn .chev{transition:transform .15s}
.k3a-msel.open .k3a-msel-btn{border-color:var(--primary)}
.k3a-msel.open .k3a-msel-btn .chev{transform:rotate(180deg)}
.k3a-msel-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:70;min-width:208px;padding:var(--space-2);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-pop,0 12px 32px rgba(20,30,40,.18)),0 0 0 1px var(--line);display:grid;gap:2px}
.k3a-msel-menu[hidden]{display:none}
.k3a-msel.right .k3a-msel-menu{left:auto;right:0}
.k3a-msel-h{padding:var(--space-2) var(--space-2) var(--space-2);font:700 11px/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.k3a-msel-menu button{display:flex;align-items:center;gap:var(--space-2);height:var(--control-h-sm);padding:0 var(--space-3) 0 var(--space-2);border:0;border-radius:var(--radius-md);background:transparent;color:var(--ink);font:600 14px/1 var(--font-display);text-align:left;cursor:pointer;white-space:nowrap}
.k3a-msel-menu button:hover,.k3a-msel-menu button:focus-visible{background:var(--surface-soft);outline:0}
.k3a-msel-menu button .ck{width:16px;flex:none;color:var(--primary);visibility:hidden}
.k3a-msel-menu button[aria-selected="true"] .ck{visibility:visible}
.k3a-msel-menu button[aria-selected="true"]{color:var(--ink)}
/* MaskField: input bermasker (dikelompokkan per 4, pola tetap) dengan penghitung terisi, mis. 8/16 */
.k3a-field-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2)}
.k3a-field-top>label{font:var(--text-field-label);color:var(--ink-soft)}
.k3a-count{font:600 12px/1 var(--font-display);color:var(--ink-mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.k3a-count.full{color:var(--success)}
.k3a-in[data-group],.k3a-in[data-mask]{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.k3a-field.err .k3a-count{color:var(--danger)}
.k3a-field .k3a-count.full::before{content:"\2713\00a0"}
/* Input lain: TextArea, PasswordField, CurrencyField, Switch, Radio */
textarea.k3a-in,.k3a-textarea{height:auto;min-height:104px;padding:var(--space-3) var(--space-3);font:500 15px/1.5 var(--font-display);resize:vertical;display:block}
textarea.k3a-in[data-autogrow]{resize:none;overflow:hidden}
.k3a-pw{position:relative;flex:1;min-width:0}
.k3a-pw .k3a-in{padding-right:48px}
.k3a-pw-btn{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:var(--control-h-xs);height:var(--control-h-xs);display:grid;place-items:center;border:0;border-radius:var(--radius-md);background:transparent;color:var(--ink-mute);cursor:pointer}
.k3a-pw-btn:hover{color:var(--ink);background:var(--surface-soft)}
.k3a-pw-btn:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.k3a-pw-btn svg{width:20px;height:20px}
.k3a-pw-btn .off{display:none}
.k3a-pw-btn[aria-pressed="true"] .on{display:none}
.k3a-pw-btn[aria-pressed="true"] .off{display:block}
.k3a-rules{display:grid;gap:var(--space-1);margin:0;padding:0;list-style:none;font:var(--text-help);color:var(--ink-mute)}
.k3a-rules li::before{content:"\25CB\00a0";color:var(--ink-mute)}
.k3a-rules li.ok{color:var(--success)}
.k3a-rules li.ok::before{content:"\2713\00a0"}
.k3a-in[data-money]{font-variant-numeric:tabular-nums;font-weight:700}
.k3a-switch{display:flex;align-items:flex-start;gap:var(--space-3);cursor:pointer;font:600 14px/1.4 var(--font-display);color:var(--ink)}
.k3a-switch input{position:absolute;opacity:0;width:44px;height:24px;margin:0;cursor:pointer}
.k3a-switch .trk{position:relative;flex:none;width:44px;height:24px;border-radius:var(--radius-pill);background:var(--line-strong);transition:background .15s}
.k3a-switch .trk::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--white);box-shadow:var(--shadow-sm);transition:transform .15s}
.k3a-switch input:checked+.trk{background:var(--primary)}
.k3a-switch input:checked+.trk::after{transform:translateX(20px)}
.k3a-switch input:focus-visible+.trk{outline:2px solid var(--primary);outline-offset:2px}
.k3a-switch input:disabled+.trk{opacity:.5}
.k3a-switch:has(input:disabled){cursor:not-allowed;color:var(--ink-mute)}
.k3a-switch small{display:block;margin-top:2px;font:var(--text-help);color:var(--ink-mute)}
.k3a-switch{position:relative}
.k3a-radios{border:0;margin:0;padding:0;display:grid;gap:var(--space-2)}
.k3a-radios legend{padding:0;margin-bottom:var(--space-2);font:var(--text-field-label);color:var(--ink-soft)}
.k3a-radio{display:flex;gap:var(--space-3);align-items:flex-start;font:var(--text-body);color:var(--ink);cursor:pointer}
.k3a-radio input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--primary);flex:none}
.k3a-radio small{display:block;color:var(--ink-mute);font:var(--text-help)}
.k3a-radio:has(input:disabled){color:var(--ink-mute);cursor:not-allowed}
/* sidebar: toggle di tepi, garis bawah header */
.k3a-side.v2{position:sticky;z-index:60;overflow:visible}
.k3a .k3a-side.v2 .k3a-side-top{margin:-22px -16px var(--space-2);height:73px;min-height:73px;box-sizing:border-box;border-bottom:0}
.k3a .k3a-side.v2 .k3a-side-tg{position:absolute;top:22px;right:-14px;width:28px;height:28px;background:var(--surface);color:var(--ink-mute);box-shadow:0 0 0 1px var(--line),var(--shadow-sm);z-index:61}
.k3a .k3a-side.v2 .k3a-side-tg:hover{background:var(--surface-soft);color:var(--ink)}
.k3a .k3a-side.v2 .k3a-side-tg svg{width:16px;height:16px}
.k3a.k3a-portal.rail .k3a-side.v2 .k3a-side-top,.k3a .rail .k3a-side.v2 .k3a-side-top{flex-direction:row;justify-content:center;padding:0;gap:0;height:73px;min-height:73px}
.k3a-side.v2.dark .k3a-side-tg{background:#10201f;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
/* ikon mode collapse */
.k3a .k3a-logo:has(img.k3a-ic){width:40px;height:40px;border-radius:0;background:none;overflow:visible}
.k3a .k3a-logo img.k3a-ic{display:block;width:42px;height:42px;margin:-1px;background:none;border-radius:0;box-shadow:none}
.k3a .k3a-logo:has(img.k3a-ic) i{display:none}
.k3a .k3a-logo img:not(.k3a-ic){display:none}
.k3a.k3a-portal.rail .k3a-side.v2 .k3a-side-top,.k3a .rail .k3a-side.v2 .k3a-side-top{align-items:center;margin:-18px -10px var(--space-2)}
.k3a .k3a-side.v2 .k3a-side-top{margin-bottom:-14px}
.k3a.k3a-portal.rail .k3a-side.v2 .k3a-side-top,.k3a .rail .k3a-side.v2 .k3a-side-top{margin-bottom:-6px}
/* teks "Diperbarui" di kanan, di bawah kontrol data */
.k3a-page-head .acts-col{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);flex:none}
.k3a-page-head .acts-col>.dc-upd{margin:0;text-align:right;white-space:nowrap}
.k3a-datactl .k3a-msel-btn{background:transparent;border-color:transparent;height:var(--control-h-sm)}
.k3a-datactl .k3a-msel-btn:hover{background:var(--surface-soft)}
.k3a-datactl .k3a-msel.open .k3a-msel-btn{background:var(--surface-soft);border-color:transparent}
/* logo sidebar: lebih besar dan di tengah */
.k3a .k3a-side.v2 .k3a-side-top{justify-content:center;padding:0 var(--space-4)}
.k3a .k3a-side.v2 .k3a-side-top .k3a-home{justify-content:center;padding:0}
.k3a .k3a-side.v2 .k3a-side-top .k3a-home .k3a-wordmark{height:38px}
/* Sticky (opt-in), komponen Sticky*: .k3a-tabs.stick = tab menempel di bawah header; .stick-in = tab/toolbar pencarian di dalam kartu ikut menempel di bawah judul kartu; .k3a-card.stick-head = judul kartu menempel; .k3a-card.stick-th = header kolom tabel menempel. Tinggi diukur header.js (--k3a-hh, --k3a-st, --k3a-sh). */
.k3a .k3a-header{box-shadow:0 -80px 0 var(--surface),0 1px 0 var(--line)}
.k3a .k3a-main .k3a-tabs.stick{position:sticky;top:var(--k3a-hh,68px);z-index:12;max-width:none;margin-inline:calc(var(--space-6)*-1);padding-inline:var(--space-6);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMax slice'%3E%3Cpath fill='%23E6F5F3' d='M0 900V560C120 520 230 470 300 380C380 280 470 250 560 330C640 400 700 520 800 560C900 600 960 560 1010 640C1050 705 1080 800 1130 900Z'/%3E%3Cpath fill='%23CFEDEA' d='M0 900V700C90 690 170 650 230 600C290 550 350 560 400 620C450 680 500 760 540 900Z'/%3E%3Cpath fill='%23FDE3EE' d='M1440 0V330C1360 330 1300 280 1270 210C1240 140 1190 60 1110 0Z'/%3E%3C/svg%3E") center bottom/cover no-repeat fixed}
[data-theme="dark"] .k3a .k3a-main .k3a-tabs.stick{background:#0C1312 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMax slice'%3E%3Cpath fill='%23122321' d='M0 900V560C120 520 230 470 300 380C380 280 470 250 560 330C640 400 700 520 800 560C900 600 960 560 1010 640C1050 705 1080 800 1130 900Z'/%3E%3Cpath fill='%23172C2A' d='M0 900V700C90 690 170 650 230 600C290 550 350 560 400 620C450 680 500 760 540 900Z'/%3E%3Cpath fill='%2328151F' d='M1440 0V330C1360 330 1300 280 1270 210C1240 140 1190 60 1110 0Z'/%3E%3C/svg%3E") center bottom/cover no-repeat fixed}
.k3a .k3a-card.stick-head,.k3a .k3a-card.stick-th{overflow:clip}
.k3a .k3a-card.stick-head>.k3a-card-head{position:sticky;top:calc(var(--k3a-hh,68px) + var(--k3a-st,0px) - 4px);z-index:11;margin-bottom:0;background:var(--surface)}
.k3a .k3a-card.stick-th .k3a-table-wrap{overflow:visible}
.k3a .k3a-card.stick-th thead th{position:sticky;top:calc(var(--k3a-hh,68px) + var(--k3a-st,0px) + var(--k3a-sh,0px) + var(--k3a-sx,0px) - 6px);z-index:10;background:var(--surface)}
.k3a .k3a-card.stick-head .stick-in{position:sticky;top:calc(var(--k3a-hh,68px) + var(--k3a-st,0px) + var(--k3a-sh,0px) - 5px);z-index:11;margin-bottom:0!important;background:var(--surface)}
.k3a .k3a-card.stick-head .k3a-tool.stick-in{padding:var(--space-3) 0 var(--space-3);gap:var(--space-2)}
@media (max-width:900px){.k3a .k3a-main .k3a-tabs.stick{top:var(--k3a-hh,56px);margin-inline:calc(var(--space-4)*-1);padding-inline:var(--space-4)}}
/* Kisi gaya marketplace: kartu kecil, foto di atas, harga tebal */
.k3a .k3a-gridv.mp{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:var(--space-3)}
.k3a .mp .k3a-tile{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;border-radius:var(--radius-lg);box-shadow:0 0 0 1px var(--line);cursor:pointer;transition:box-shadow .15s}
.k3a .mp .k3a-tile:hover{box-shadow:0 0 0 1px var(--line-strong),var(--shadow-card)}
.k3a .mp .k3a-tile:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.k3a .mp .k3a-tile.sel{box-shadow:0 0 0 2px var(--primary)}
.k3a .mp .k3a-tile .k3a-thumb{width:100%;height:auto;aspect-ratio:4/3;border-radius:0}
.k3a .mp .k3a-tile .k3a-thumb img{width:100%;height:100%;object-fit:cover}
.k3a .mp .k3a-tile .nm{display:block;margin:var(--space-2) var(--space-2) 0;font:var(--text-label);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.k3a .mp .k3a-tile .big{display:block;white-space:nowrap;margin:var(--space-1) var(--space-2) 0;font:800 15px/1.2 var(--font-display)}
.k3a .mp .k3a-tile .mt{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-1) var(--space-2);margin:var(--space-2) var(--space-2) var(--space-2)}
.k3a .mp .k3a-tile .mt small{margin:0;font:500 12px/1.2 var(--font-display);color:var(--ink-mute)}
.k3a .mp .k3a-tile .k3a-st.pill{font-size:11px;padding:3px var(--space-2)}
.k3a .mp button.k3a-tile{border:0;font:inherit;color:inherit;text-align:left;width:100%;align-items:stretch}
.k3a .mp button.k3a-tile:not(.warn){background:var(--surface)}
.k3a .mp button.k3a-tile .mt{display:flex}
@media (max-width:900px){.k3a .k3a-gridv.mp{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}}
.k3a .k3a-gridv.mp{padding:var(--space-2) 3px 3px}
/* Field versi HP: label bertumpuk di dalam kotak lembut, fokus cincin primary, pesan dengan ikon */
.k3a .k3a-fm{display:grid;gap:var(--space-2);margin:0}
.k3a .k3a-fm .box{position:relative;display:flex;align-items:center;gap:var(--space-3);min-height:var(--control-h-lg);padding:0 var(--space-3);border-radius:var(--radius-md);background:var(--surface-soft);box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .15s,background .15s}
.k3a .k3a-fm .box:hover{box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.k3a .k3a-fm .box:focus-within{background:var(--surface);box-shadow:inset 0 0 0 2px var(--primary)}
.k3a .k3a-fm .af{flex:none;padding-right:var(--space-3);border-right:1.5px solid var(--line-strong);font:700 16px/1 var(--font-display);color:var(--ink-soft)}
.k3a .k3a-fm .in{flex:1;min-width:0;display:flex;align-items:center}
.k3a .k3a-fm>label{font:var(--text-field-label);color:var(--ink);padding:0 2px}
.k3a .k3a-fm .req{color:var(--danger);margin-left:2px}
.k3a .k3a-fm input,.k3a .k3a-fm select{width:100%;min-width:0;padding:0;border:0;outline:0;background:transparent;font:var(--text-input);color:var(--ink);appearance:none;-webkit-appearance:none;border-radius:0}
.k3a .k3a-fm input::placeholder{color:var(--ink-mute);font-weight:500;opacity:.8}
.k3a .k3a-fm .st{flex:none;display:grid;place-items:center;width:24px;height:24px;color:var(--ink-mute)}
.k3a .k3a-fm .help,.k3a .k3a-fm .msg{display:flex;gap:var(--space-2);align-items:flex-start;padding:0 var(--space-2);font:var(--text-help);color:var(--ink-mute)}
.k3a .k3a-fm .msg{color:var(--danger);font-weight:600}
.k3a .k3a-fm.err .box{background:var(--danger-soft);box-shadow:inset 0 0 0 1.5px var(--danger)}
.k3a .k3a-fm.err .box:focus-within{box-shadow:inset 0 0 0 2px var(--danger)}
.k3a .k3a-fm.err>label,.k3a .k3a-fm.err .st{color:var(--danger)}
.k3a .k3a-fm.ok .st{color:var(--success)}
.k3a .k3a-fm.ok .box{box-shadow:inset 0 0 0 1.5px var(--success)}
.k3a .k3a-fm.off .box{opacity:.55;pointer-events:none}
/* FieldMobile — varian putih (.wh); .web = ukuran sama dengan mobile */
.k3a .k3a-fm.wh .box{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line)}
.k3a .k3a-fm.wh .box:hover{box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.k3a .k3a-fm.wh .box:focus-within{box-shadow:inset 0 0 0 2px var(--primary)}
.k3a .k3a-fm.wh.err .box{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--danger)}
.k3a .k3a-fm.wh.err .box:focus-within{box-shadow:inset 0 0 0 2px var(--danger)}
.k3a .k3a-fm.wh.ok .box{box-shadow:inset 0 0 0 1.5px var(--success)}
/* Field — tipe lengkap: ikon awal, aksi, sufiks, stepper, opsional, penghitung */
.k3a .k3a-fm .lead{flex:none;width:20px;height:20px;color:var(--ink-mute);transition:color .15s}
.k3a .k3a-fm .box:focus-within .lead{color:var(--primary)}
.k3a .k3a-fm.err .lead{color:var(--danger)}
.k3a .k3a-fm .opt{margin-left:var(--space-1);color:var(--ink-mute)}
.k3a .k3a-fm .act{flex:none;display:grid;place-items:center;width:32px;height:32px;margin-right:-6px;padding:0;border:0;border-radius:var(--radius-md);background:transparent;color:var(--ink-mute);cursor:pointer;transition:background .15s,color .15s}
.k3a .k3a-fm .act:hover{background:var(--surface-soft);color:var(--ink)}
.k3a .k3a-fm.wh .act:hover{background:var(--surface-soft)}
.k3a .k3a-fm .sfx{padding:var(--space-2) var(--space-2);border-radius:var(--radius-sm);background:var(--surface-soft);font:var(--text-label);color:var(--ink-soft)}
.k3a .k3a-fm:not(.wh) .sfx{background:var(--surface)}
.k3a .k3a-fm .stp{flex:none;display:grid;grid-template-rows:1fr 1fr;width:26px;height:36px}
.k3a .k3a-fm .stp button{display:grid;place-items:center;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink-mute);cursor:pointer}
.k3a .k3a-fm .stp button:hover{background:var(--surface-soft);color:var(--ink)}
.k3a .k3a-fm .help .cnt{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}
.k3a .k3a-fm .help .cnt.full{color:var(--success)}
.k3a .k3a-fm .msg[hidden]{display:none}
.k3a .k3a-fm.web input[readonly]{cursor:pointer}
/* Field — textarea dan satuan di kanan */
.k3a .k3a-fm textarea{width:100%;min-width:0;min-height:72px;padding:0;border:0;outline:0;background:transparent;font:600 16px/1.5 var(--font-display);color:var(--ink);resize:vertical;border-radius:0}
.k3a .k3a-fm textarea::placeholder{color:var(--ink-mute);font-weight:500;opacity:.8}
.k3a .k3a-fm .box.top{align-items:flex-start}
.k3a .k3a-fm .sfx{flex:none}
.k3a .k3a-fm .unitw{position:relative;flex:none;display:flex;align-items:center;align-self:stretch;padding-left:var(--space-3);border-left:1.5px solid var(--line-strong)}
.k3a .k3a-fm .unitw select{width:52px;padding-right:var(--space-4);cursor:pointer}
.k3a .k3a-fm .unitw .st{position:absolute;right:-4px;top:50%;width:18px;height:18px;margin-top:-9px;pointer-events:none}
.k3a .k3a-fm .box.top{padding-top:var(--space-3);padding-bottom:var(--space-3)}
.k3a .k3a-fm textarea{font-weight:500}
.k3a .k3a-fm .opt{font-weight:500}
/* Detail panel: laci kanan atau sheet. Judul besar, daftar properti (ikon + label | nilai), deskripsi, lampiran, tab Rincian/Riwayat */
.k3a-dp .dp-h{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 20px;border-bottom:1px solid var(--line)}
.k3a-dp .dp-crumb{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-2);font:500 13px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a-dp .dp-crumb i{font-style:normal;color:var(--line-strong)}
.k3a-dp .dp-crumb b{font-weight:600;color:var(--ink)}
.k3a-dp .dp-b{padding:20px;gap:20px}
.k3a-dp .dp-title{margin:0;font:var(--text-h4);letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.k3a-dp .dp-props{display:grid;gap:2px;margin:0}
.k3a-dp .dp-r{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:center;gap:var(--space-3);min-height:40px}
.k3a-dp .dp-r dt{display:flex;align-items:center;gap:var(--space-2);font:500 13px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a-dp .dp-r dt svg,.k3a-dp .dp-lab svg{flex:none;width:16px;height:16px}
.k3a-dp .dp-r dd{margin:0;min-width:0;font:600 14px/1.4 var(--font-display);color:var(--ink);overflow-wrap:anywhere}
.k3a-dp .dp-r dd.mono{font:500 13px/1.4 var(--font-mono)}
.k3a-dp .dp-sec{display:grid;gap:var(--space-2)}
.k3a-dp .dp-lab{display:flex;align-items:center;gap:var(--space-2);font:500 13px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a-dp .dp-desc{padding:var(--space-3);border:1.5px solid var(--line);border-radius:var(--radius-md);background:var(--surface);font:500 14px/1.55 var(--font-display);color:var(--ink);overflow-wrap:anywhere}
.k3a-dp .dp-att{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.k3a-dp .dp-file{display:flex;align-items:center;gap:var(--space-3);min-width:0;padding:var(--space-2) var(--space-4) var(--space-2) var(--space-2);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.k3a-dp .dp-file .ic{flex:none;width:40px;height:40px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font:800 11px/1 var(--font-display)}
.k3a-dp .dp-file b{display:block;font:var(--text-label);color:var(--ink);overflow-wrap:anywhere}
.k3a-dp .dp-file small{display:block;margin-top:2px;font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a-dp .dp-tabs{display:flex;gap:var(--space-1);margin:0 -20px;padding:0 20px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.k3a-dp .dp-tabs button{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3);margin-bottom:-1px;border:0;border-bottom:2px solid transparent;background:none;font:600 14px/1 var(--font-display);color:var(--ink-mute);white-space:nowrap;cursor:pointer}
.k3a-dp .dp-tabs button:hover{color:var(--ink)}
.k3a-dp .dp-tabs button.on{color:var(--primary);border-bottom-color:var(--primary);font-weight:700}
.k3a-dp .dp-tabs button:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;border-radius:var(--radius-sm)}
.k3a-dp .dp-tabs .n,.k3a-dp .dp-tabs i{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 var(--space-2);border-radius:var(--radius-pill);background:var(--surface-soft);color:var(--ink-mute);font:700 12px/1 var(--font-display);font-style:normal}
.k3a-dp .dp-tabs button.on .n,.k3a-dp .dp-tabs button.on i{background:var(--primary-soft);color:var(--primary)}
.k3a-dp .dp-card{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
.k3a-dp .dp-card-h{padding:var(--space-3) var(--space-4);background:var(--surface-soft);border-bottom:1px solid var(--line);font:700 13px/1.3 var(--font-display);color:var(--ink)}
.k3a-dp .dp-kv{display:grid;margin:0}
.k3a-dp .dp-kv>div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:var(--space-3);padding:var(--space-3) var(--space-4);border-top:1px solid var(--line)}
.k3a-dp .dp-kv>div:first-child{border-top:0}
.k3a-dp .dp-kv dt{font:500 13px/1.45 var(--font-display);color:var(--ink-mute)}
.k3a-dp .dp-kv dd{margin:0;min-width:0;font:600 14px/1.45 var(--font-display);color:var(--ink);overflow-wrap:anywhere}
/* FileUpload baru: area seret-lepas + daftar file dengan status Menunggu, Mengunggah (progres), Selesai, Gagal */
.k3a-up{display:grid;gap:var(--space-3)}
.k3a-up .dz{position:relative;display:grid;justify-items:center;gap:var(--space-2);padding:28px 20px var(--space-5);border:1.5px dashed var(--line-strong);border-radius:var(--radius-lg);background:var(--surface-soft);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.k3a-up .dz:hover{border-color:var(--primary)}
.k3a-up .dz input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.k3a-up .dz .ic{display:grid;place-items:center;width:64px;height:64px;margin-bottom:var(--space-2);border-radius:50%;background:var(--primary-soft);color:var(--primary);transition:transform .2s}
.k3a-up .dz .ic svg{width:30px;height:30px}
.k3a-up .dz b{font:600 14px/1.4 var(--font-display);color:var(--ink)}
.k3a-up .dz b u{color:var(--primary);text-decoration:none;font-weight:700}
.k3a-up .dz small{font:500 12px/1.4 var(--font-display);color:var(--ink-mute)}
.k3a-up .dz:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.k3a-up .dz.drag{border-style:solid;border-color:var(--primary);background:var(--primary-soft)}
.k3a-up .dz.drag .ic{transform:scale(1.12);background:var(--surface)}
.k3a-up .dz.err{border-color:var(--danger);background:var(--danger-soft)}
.k3a-up .dz.err small{color:var(--danger);font-weight:600}
.k3a-up .dz.off{opacity:.5;pointer-events:none}
.k3a-up .up-list{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.k3a-up .up-item{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-3) var(--space-3) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.k3a-up .up-ty{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-md);font:800 11px/1 var(--font-display);color:var(--white);background:var(--ink-mute)}
.k3a-up .up-ty.pdf{background:#D9423B}
.k3a-up .up-ty.img{background:var(--primary)}
.k3a-up .up-ty.xls{background:#1E8E5A}
.k3a-up .up-ty.doc{background:#3B6FD9}
.k3a-up .up-bd{min-width:0;display:grid;gap:var(--space-1)}
.k3a-up .up-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--text-label);color:var(--ink)}
.k3a-up .up-meta{font:500 12px/1.3 var(--font-display);color:var(--ink-mute);font-variant-numeric:tabular-nums}
.k3a-up .up-bar{height:4px;border-radius:var(--radius-pill);background:var(--line);overflow:hidden}
.k3a-up .up-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--primary);transition:width .25s}
.k3a-up .up-end{display:flex;align-items:center;gap:var(--space-2);font:700 12px/1 var(--font-display);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.k3a-up .up-x{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:none;color:var(--ink-mute);font:500 18px/1 var(--font-display);cursor:pointer}
.k3a-up .up-x:hover{background:var(--surface-soft);color:var(--ink)}
.k3a-up .up-ring{width:22px;height:22px;border-radius:50%;background:conic-gradient(var(--primary) calc(var(--p,0)*1%),var(--line) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0)}
.k3a-up .up-ico{width:22px;height:22px;flex:none}
/* Menunggu: bar bergaris diagonal, tanpa persen, cincin putus-putus berputar pelan */
.k3a-up .up-item.wait .up-bar i{width:100%;background:repeating-linear-gradient(135deg,var(--line-strong) 0 6px,transparent 6px 12px);opacity:.55}
.k3a-up .up-item.wait .up-ty{opacity:.7}
.k3a-up .up-item.wait .up-wait{width:22px;height:22px;border-radius:50%;border:2.5px dotted var(--line-strong)}
/* Mengunggah */
.k3a-up .up-item.go{border-color:var(--primary)}
/* Selesai */
.k3a-up .up-item.done .up-bar{display:none}
.k3a-up .up-item.done .up-meta{color:var(--success);font-weight:600}
.k3a-up .up-item.done .up-ico{color:var(--success)}
/* Gagal */
.k3a-up .up-item.fail{border-color:var(--danger);background:var(--danger-soft)}
.k3a-up .up-item.fail .up-bar{display:none}
.k3a-up .up-item.fail .up-meta{color:var(--danger);font-weight:600}
.k3a-up .up-item.fail .up-ico{color:var(--danger)}
.k3a-up .up-retry{border:0;background:none;padding:var(--space-1) 2px;font:700 12px/1 var(--font-display);color:var(--danger);cursor:pointer;text-decoration:underline}
.k3a-up .up-sum{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);font:500 12px/1.4 var(--font-display);color:var(--ink-mute)}
.k3a-up .up-sum b{color:var(--ink);font-weight:700}
.k3a-up .up-sum button{border:0;background:none;padding:0;font:700 12px/1 var(--font-display);color:var(--primary);cursor:pointer}
.k3a-up .up-ty.th{padding:0;overflow:hidden;background:var(--surface-soft);position:relative}
.k3a-up .up-ty.th img{width:100%;height:100%;object-fit:cover;display:block}
.k3a-up .up-main{display:inline-block;margin-left:var(--space-2);padding:2px var(--space-2);border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary);font:700 11px/1.3 var(--font-display);vertical-align:1px}
.k3a-up .dz.compact{padding:var(--space-4) var(--space-4) var(--space-4)}
.k3a-up .dz.compact .ic{width:48px;height:48px}
.k3a-up .dz.compact .ic svg{width:24px;height:24px}
.k3a-dp .dp-desc.empty{color:var(--ink-mute);font-style:italic}
/* DetailPanel: tab Rincian terkelompok per jenis data (grid, chips, perbandingan sebelum-sesudah, teks) */
.k3a-dp .dp-groups{display:grid;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}
.k3a-dp .dp-g+.dp-g{border-top:1px solid var(--line)}
.k3a-dp .dp-g>h4{margin:0;padding:var(--space-3) var(--space-4) 0;font:var(--text-label);color:var(--ink-soft)}
.k3a-dp .dp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3) var(--space-4);margin:0;padding:var(--space-2) var(--space-4) var(--space-3)}
.k3a-dp .dp-grid>div{min-width:0}
.k3a-dp .dp-grid dt{margin-bottom:3px;font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a-dp .dp-grid dd{margin:0;font:600 14px/1.4 var(--font-display);color:var(--ink);overflow-wrap:anywhere}
.k3a-dp .dp-grid .full{grid-column:1/-1}
.k3a-dp .dp-grid .hi dd{font:800 20px/1.2 var(--font-display);color:var(--primary)}
.k3a-dp .dp-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-2) var(--space-4) var(--space-3)}
.k3a-dp .dp-chips span{padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary);font:700 12px/1.3 var(--font-display)}
.k3a-dp .dp-cmp{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4) var(--space-3)}
.k3a-dp .dp-cmp>div{min-width:0;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--surface-soft)}
.k3a-dp .dp-cmp>div.b{background:var(--primary-soft)}
.k3a-dp .dp-cmp small{display:block;margin-bottom:3px;font:500 11px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a-dp .dp-cmp b{display:block;font:700 15px/1.35 var(--font-display);color:var(--ink);overflow-wrap:anywhere}
.k3a-dp .dp-cmp .arr{display:grid;place-items:center;color:var(--ink-mute)}
.k3a-dp .dp-cmp .arr svg{width:18px;height:18px}
.k3a-dp .dp-cmp.stack{grid-template-columns:minmax(0,1fr)}
.k3a-dp .dp-cmp.stack .arr svg{transform:rotate(90deg)}
.k3a-dp .dp-delta{display:inline-flex;margin:0 var(--space-4) var(--space-3);padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);font:700 12px/1.3 var(--font-display)}
.k3a-dp .dp-delta.up{background:var(--yellow-soft,#FFF4D6);color:var(--yellow-ink,#7A5B00)}
.k3a-dp .dp-delta.down{background:var(--success-soft,#E3F6EE);color:var(--success)}
.k3a-dp .dp-quote{margin:0;padding:var(--space-2) var(--space-4) var(--space-3);font:500 14px/1.55 var(--font-display);color:var(--ink);overflow-wrap:anywhere}
/* ChoiceCards — pilihan satu/banyak berbentuk kartu (radio/checkbox) */
.k3a .k3a-og{display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.k3a .k3a-og.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.k3a .k3a-og.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.k3a .k3a-og.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.k3a .k3a-og.stack{grid-template-columns:1fr}
.k3a .k3a-og .oc{position:relative;display:flex;align-items:center;gap:var(--space-3);min-height:var(--control-h-lg);padding:var(--space-2) var(--space-3);box-sizing:border-box;border-radius:var(--radius-md);background:var(--surface-soft);box-shadow:inset 0 0 0 1.5px transparent;font-family:var(--font-display);color:var(--ink);cursor:pointer;transition:box-shadow .15s,background .15s}
.k3a .k3a-og.wh .oc{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line)}
.k3a .k3a-og .oc:hover{box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.k3a .k3a-og .oc input{position:absolute;opacity:0;inset:0;margin:0;width:100%;height:100%;cursor:pointer}
.k3a .k3a-og .oc .ic{flex:none;display:grid;place-items:center;width:36px;height:var(--control-h-lg);border-radius:var(--radius-md);background:var(--surface);color:var(--ink-soft);box-shadow:inset 0 0 0 1px var(--line)}
.k3a .k3a-og .oc .ic svg{width:20px;height:20px}
.k3a .k3a-og .oc .tx{flex:1;min-width:0;display:grid;gap:2px}
.k3a .k3a-og .oc b{font:700 14px/1.3 var(--font-display)}
.k3a .k3a-og .oc small{font:var(--text-caption);color:var(--ink-mute)}
.k3a .k3a-og .oc .ck{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-strong);background:var(--surface);color:transparent;transition:background .15s,box-shadow .15s}
.k3a .k3a-og .oc .ck svg{width:12px;height:12px}
.k3a .k3a-og.multi .oc .ck{border-radius:var(--radius-sm)}
.k3a .k3a-og .oc:has(input:checked){background:var(--primary-soft);box-shadow:inset 0 0 0 2px var(--primary)}
.k3a .k3a-og .oc:has(input:checked) b{color:var(--primary-strong)}
.k3a .k3a-og .oc:has(input:checked) .ic{background:var(--primary);color:var(--on-primary);box-shadow:none}
.k3a .k3a-og .oc:has(input:checked) .ck{background:var(--primary);box-shadow:none;color:var(--on-primary)}
.k3a .k3a-og .oc:has(input:focus-visible){box-shadow:inset 0 0 0 2px var(--primary),0 0 0 3px var(--primary-soft)}
.k3a .k3a-og .oc:has(input:disabled){opacity:.5;cursor:not-allowed}
.k3a .k3a-og .oc:has(input:disabled) input{cursor:not-allowed}
.k3a .k3a-og.err .oc{box-shadow:inset 0 0 0 1.5px var(--danger)}
.k3a .k3a-og.sm .oc{min-height:var(--control-h-sm);padding:var(--space-2) var(--space-3)}
@media (max-width:560px){.k3a .k3a-og.c3,.k3a .k3a-og.c4{grid-template-columns:1fr}}
/* Web (desktop): isian lebih kecil dari HP (HP tetap 16px agar iOS tidak zoom) */
.k3a .k3a-fm.web .box{min-height:var(--control-h)}
.k3a .k3a-fm.web input,.k3a .k3a-fm.web select{font-size:15px}
.k3a .k3a-fm.web input::placeholder{font-weight:500}
.k3a .k3a-fm.web .af{font-size:15px}
.k3a .k3a-fm.web ~ .k3a-og .oc,.k3a .k3a-fm.web .k3a-og .oc{min-height:var(--control-h-lg)}
/* ChoiceCards: varian tombol (tanpa input) dan penahan 3 kolom di HP */
.k3a .k3a-og button.oc{appearance:none;border:0;width:100%;text-align:left}
.k3a .k3a-og .oc.on{background:var(--primary-soft);box-shadow:inset 0 0 0 2px var(--primary)}
.k3a .k3a-og .oc.on b{color:var(--primary-strong)}
.k3a .k3a-og .oc.on .ic{background:var(--primary);color:var(--on-primary);box-shadow:none}
.k3a .k3a-og .oc.on .ck{background:var(--primary);box-shadow:none;color:var(--on-primary)}
.k3a .k3a-og.keep.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.k3a .k3a-fm.err .k3a-og .oc{box-shadow:inset 0 0 0 1.5px var(--danger)}
.k3a .k3a-fm.err .k3a-og .oc.on{box-shadow:inset 0 0 0 2px var(--danger)}
/* OTP: bentuk sama dengan .k3a-fm (isi lembut; .wh = putih outline) */
.k3a .k3a-otp{gap:var(--space-2)}
.k3a .k3a-fm .k3a-otp{margin:0}
.k3a .k3a-otp input{height:var(--control-h-lg);border:0;border-radius:var(--radius-md);background:var(--surface-soft);box-shadow:inset 0 0 0 1.5px transparent;font:700 20px/1 var(--font-display);color:var(--ink);outline:0;transition:box-shadow .15s,background .15s}
.k3a .k3a-otp.wh input{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line)}
.k3a .k3a-otp input:hover{box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.k3a .k3a-otp input:focus{background:var(--surface);box-shadow:inset 0 0 0 2px var(--primary)}
.k3a .k3a-fm.web .k3a-otp input{height:var(--control-h);font-size:18px}
/* Typography: spesimen berat huruf Montserrat */
.k3a .k3a-wt{display:grid;border-top:1px solid var(--line)}
.k3a .k3a-wt>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);padding:var(--space-2) 0 var(--space-1);border-bottom:1px solid var(--line);overflow:hidden}
.k3a .k3a-wt b{font-family:var(--font-display);font-size:clamp(40px,8vw,72px);line-height:1.1;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.k3a .k3a-wt .hv b{color:var(--primary)}
.k3a .k3a-wt small{flex:none;text-align:right;font:500 12px/1.4 var(--font-display);color:var(--ink-mute)}
.k3a .k3a-wt small i{display:block;font-style:normal;font-weight:700;color:var(--ink)}
.k3a .k3a-glyphs{font:500 14px/1.9 var(--font-display);color:var(--ink-soft);letter-spacing:.04em}
/* Form lama (.k3a-field + .k3a-in) mengikuti FieldTypes: cincin dalam, sudut md, teks 500 16px (15px di desktop) */
.k3a .k3a-field>label{color:var(--ink)}
.k3a .k3a-in{border:0;box-shadow:inset 0 0 0 1.5px var(--line);border-radius:var(--radius-md);font:500 16px/1.2 var(--font-display)}
@media (min-width:901px){.k3a .k3a-in{font-size:15px}}
.k3a .k3a-in:hover{box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.k3a .k3a-in:focus{box-shadow:inset 0 0 0 2px var(--primary)}
.k3a .k3a-field.err .k3a-in{box-shadow:inset 0 0 0 1.5px var(--danger)}
.k3a .k3a-field.ok .k3a-in{box-shadow:inset 0 0 0 1.5px var(--success)}
.k3a .k3a-in:disabled{opacity:.55;cursor:not-allowed}
/* Kartu pilihan: tinggi sama 52px untuk semua varian */
.k3a .k3a-og .oc{padding:var(--space-2) var(--space-4)}
/* Background: latar halaman mengikuti tema (canvas + bentuk gelombang datar di desktop) */
:root,[data-theme="light"]{--bg-waves:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMax slice'%3E%3Cpath fill='%23E6F5F3' d='M0 900V560C120 520 230 470 300 380C380 280 470 250 560 330C640 400 700 520 800 560C900 600 960 560 1010 640C1050 705 1080 800 1130 900Z'/%3E%3Cpath fill='%23CFEDEA' d='M0 900V700C90 690 170 650 230 600C290 550 350 560 400 620C450 680 500 760 540 900Z'/%3E%3Cpath fill='%23FDE3EE' d='M1440 0V330C1360 330 1300 280 1270 210C1240 140 1190 60 1110 0Z'/%3E%3C/svg%3E")}
[data-theme="dark"]{--bg-waves:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMax slice'%3E%3Cpath fill='%2315302D' d='M0 900V560C120 520 230 470 300 380C380 280 470 250 560 330C640 400 700 520 800 560C900 600 960 560 1010 640C1050 705 1080 800 1130 900Z'/%3E%3Cpath fill='%231C403C' d='M0 900V700C90 690 170 650 230 600C290 550 350 560 400 620C450 680 500 760 540 900Z'/%3E%3Cpath fill='%23361A27' d='M1440 0V330C1360 330 1300 280 1270 210C1240 140 1190 60 1110 0Z'/%3E%3C/svg%3E")}
html:has(.k3a),body:has(.k3a){background:var(--canvas);color:var(--ink)}
.k3a{color:var(--ink)}
.k3a-bg{background:var(--canvas) var(--bg-waves) center bottom/cover no-repeat}
.k3a-bg.fixed{background-attachment:fixed}
/* Alert: isi memakai bentuk gelombang Background (warna mengikuti jenis alert dan tema) */
.k3a-alert{overflow:hidden;isolation:isolate}
.k3a-alert::after{content:"";position:absolute;inset:0 0 0 auto;width:min(60%,320px);z-index:-1;background:var(--al);opacity:.12;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M400 0V100H250C285 92 300 70 315 52C332 32 350 26 372 30C385 32 394 22 400 0Z'/%3E%3Cpath d='M400 100H330C342 90 352 80 362 74C376 66 390 68 400 60Z' opacity='.55'/%3E%3C/svg%3E") right bottom/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M400 0V100H250C285 92 300 70 315 52C332 32 350 26 372 30C385 32 394 22 400 0Z'/%3E%3Cpath d='M400 100H330C342 90 352 80 362 74C376 66 390 68 400 60Z' opacity='.55'/%3E%3C/svg%3E") right bottom/100% 100% no-repeat;pointer-events:none}
[data-theme="dark"] .k3a-alert::after{opacity:.18}
/* ===== FieldTypes · CategoryPicker (k3a-catpick) — Kategori produk sampai Sub Category. Satu komponen responsif: dropdown >= 640px, lembar bawah 90% layar di bawahnya. Perilaku: lib/catpick.js ===== */
.k3a-catpick{position:relative;display:grid;gap:6px;min-width:0}
.k3a-catpick .cp-ui{display:grid;gap:6px;min-width:0}
.k3a-catpick .cp-box{width:100%;border:0;margin:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.k3a-catpick .cp-box:disabled{cursor:not-allowed;opacity:.55}
.k3a-catpick .cp-val{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 16px/1.3 var(--font-display);color:var(--ink)}
.k3a-catpick .cp-val.ph{color:var(--ink-mute);font-weight:500}
.k3a-catpick .cp-val b{font-weight:700}
.k3a-catpick .k3a-fm.web .cp-val{font-size:15px}
.k3a .k3a-catpick .cp-ui.open .k3a-fm .box{background:var(--surface);box-shadow:inset 0 0 0 2px var(--primary)}
.k3a-catpick .cp-tag{display:inline-block;vertical-align:middle;padding:3px 7px;border-radius:var(--radius-sm);background:var(--yellow-soft);color:var(--yellow-ink);font:var(--text-tag);letter-spacing:.06em;margin-left:6px}
.k3a-catpick .cp-empty{display:grid;justify-items:center;gap:6px;padding:20px 12px;text-align:center;font:var(--text-caption);color:var(--ink-mute)}
.k3a-catpick .cp-empty b{font:var(--text-body-strong);color:var(--ink)}
.k3a-catpick .cp-empty-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-md);background:var(--surface-soft);color:var(--ink-mute)}
.k3a-catpick .cp-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.k3a-catpick .cp-foot{border-top:1px solid var(--line);padding:6px;background:var(--surface-soft)}
.k3a-catpick .cp-sug{width:100%;display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:11px 10px;border-radius:var(--radius-md);font:700 13px/1.2 var(--font-display);color:var(--primary);cursor:pointer;text-align:left;min-height:44px}
.k3a-catpick .cp-sug:hover{background:var(--primary-soft)}
.k3a-catpick .cp-sug small{margin-left:auto;font:var(--text-caption);color:var(--ink-mute)}
.k3a-catpick .cp-pending{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--radius-lg);background:var(--yellow-soft);color:var(--yellow-ink);font:600 13px/1.4 var(--font-display)}
.k3a-catpick .cp-pending svg{flex:none}
.k3a-catpick .cp-pending button{margin-left:auto;flex:none;border:0;background:none;padding:0;font:700 12px/1 var(--font-display);color:var(--yellow-ink);text-decoration:underline;cursor:pointer}
.k3a-catpick .cp-sugbox{display:grid;gap:12px;padding:16px}
.k3a-catpick .cp-sug-h{font:var(--text-card-title)}
.k3a-catpick .cp-note{margin:0;padding:10px 12px;border-radius:var(--radius-md);background:var(--primary-soft);color:var(--primary-strong);font:500 12px/1.45 var(--font-display)}
.k3a-catpick .cp-f{display:grid;gap:6px;font:var(--text-field-label);color:var(--ink-soft)}
.k3a-catpick .cp-f i{font-style:normal;color:var(--pink)}
.k3a-catpick .cp-f input,.k3a-catpick .cp-f textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-soft);padding:0 14px;min-height:var(--control-h);font:var(--text-body);color:var(--ink)}
.k3a-catpick .cp-f textarea{min-height:72px;padding:12px 14px;resize:vertical}
.k3a-catpick .cp-f input:focus,.k3a-catpick .cp-f textarea:focus{outline:0;border-color:var(--primary);background:var(--surface);box-shadow:var(--shadow-focus)}
.k3a-catpick .cp-row{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.k3a-catpick .k3a-btn.sm{min-height:var(--control-h-sm)}
.k3a-catpick .cp-pop{display:flex;flex-direction:column;border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-pop);overflow:hidden;max-height:min(440px,64vh)}
.k3a-catpick .cp-scrim,.k3a-catpick .cp-pop .grab,.k3a-catpick .cp-sheet-h{display:none}
.k3a-catpick .cp-top{flex:none;padding:12px 12px 10px;border-bottom:1px solid var(--line)}
.k3a-catpick .cp-search{display:flex;align-items:center;gap:8px;height:var(--control-h-sm);padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-soft);color:var(--ink-mute)}
.k3a-catpick .cp-search:focus-within{border-color:var(--primary);background:var(--surface);box-shadow:var(--shadow-focus)}
.k3a-catpick .cp-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:var(--text-body);color:var(--ink);text-overflow:ellipsis}
.k3a-catpick .cp-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 6px 10px}
.k3a-catpick .cp-grp{padding:6px 6px 4px}
.k3a-catpick .cp-gh{display:block;padding:6px 2px 8px;font:var(--text-body-strong);color:var(--ink)}
.k3a-catpick .cp-gh mark,.k3a-catpick .cp-sub mark{background:var(--yellow-soft);color:inherit;border-radius:3px;padding:0 1px}
.k3a-catpick .cp-opts{display:flex;flex-wrap:wrap;gap:8px}
.k3a-catpick .cp-sub{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface);font:600 14px/1.2 var(--font-display);color:var(--ink-soft);cursor:pointer;text-align:left;box-sizing:border-box}
.k3a-catpick .cp-sub:hover,.k3a-catpick .cp-sub.act{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-strong)}
.k3a-catpick .cp-sub.act{box-shadow:var(--shadow-focus)}
.k3a-catpick .cp-sub.sel{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-strong);font-weight:800}
.k3a-catpick .ck{display:inline-flex;color:var(--primary)}
@media (max-width:639.98px){
.k3a-catpick .cp-scrim{display:block;position:fixed;inset:0;z-index:60;background:var(--scrim)}
.k3a-catpick .cp-pop{position:fixed;left:0;right:0;bottom:var(--hi,0px);z-index:61;height:calc(90vh - var(--hi,0px));height:calc(90dvh - var(--hi,0px));max-height:calc(100% - var(--sb,0px) - var(--hi,0px) - 8px);border:0;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.k3a-catpick .cp-pop .grab{display:block;flex:none;width:40px;height:4px;border-radius:4px;background:var(--line-strong);margin:8px auto 0}
.k3a-catpick .cp-sheet-h{display:flex;align-items:center;gap:10px;flex:none;padding:12px 16px 4px}
.k3a-catpick .cp-sheet-h b{flex:1;font:var(--text-card-title)}
.k3a-catpick .cp-x{width:36px;height:36px;border:0;border-radius:50%;background:var(--surface-soft);color:var(--ink);font:500 20px/1 var(--font-display);cursor:pointer}
.k3a-catpick .cp-top{border:0;padding:6px 16px 10px}
.k3a-catpick .cp-body{padding:0 10px 14px}
.k3a-catpick .cp-foot{padding:6px 10px 14px}
.k3a-catpick .cp-pop .cp-sugbox{overflow-y:auto}
}
.k3a .k3a-catpick .k3a-fm .cp-val{display:block}
/* ===== LabelBarcode (pd-lbl, k3lbl, pd-izin) — barcode produk, label harga & cetak (BR-CON-114/117), izin edar sebelum siap jual (BR-CON-115). Perilaku: lib/label.js (11 Okt 2026) ===== */
/* detail produk: barcode besar + ukuran + toko harga + pratinjau label harga */
.k3a .pd-lbl{display:grid;gap:0;padding:0;border:0;border-radius:0;background:none}
/* seperti Rincian (dp-groups.plain): tanpa kotak, antarbagian dipisah garis bawah */
.k3a .pd-lbl>*{padding:var(--space-4) 0}
.k3a .pd-lbl>:first-child{padding-top:var(--space-2)}
.k3a .pd-lbl>:not(:last-child){border-bottom:1px solid var(--line)}
.k3a .pd-bcbig{display:grid;justify-items:center;gap:6px;border:0;border-radius:0;background:none}
.k3a .pd-bcbig img{background:#fff;border-radius:var(--radius-sm);padding:6px 10px;box-sizing:border-box}
.k3a .pd-bcbig img{display:block;width:100%;max-width:300px;height:auto}
.k3a .pd-bcbig small{font:var(--text-caption);color:var(--ink-mute);text-align:center}
.k3a .pd-lbl-ctl{display:grid;grid-template-columns:1fr;gap:var(--space-3);align-items:start}
.k3a .pd-tag{display:grid;justify-items:center;gap:8px;border-radius:0;background:none}
.k3a .pd-tag .cap{font:var(--text-caption);color:var(--ink-mute)}
.k3a .pd-tag img{display:block;height:auto;filter:drop-shadow(0 1px 2px rgba(22,25,31,.12))}
.k3a .pd-tag img.s33{width:min(100%,198px)}
.k3a .pd-tag img.s50{width:min(100%,300px)}
.k3a .pd-lbl-act{display:flex;justify-content:flex-end;gap:var(--space-2);flex-wrap:wrap}
.k3a .pd-izin{display:grid;gap:var(--space-3)}
.k3a .pd-izin-f{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) auto;align-items:start;gap:var(--space-3)}
.k3a .pd-izin-f .k3a-btn{margin-top:22px}
@media (max-width:640px){.k3a .pd-lbl-ctl{grid-template-columns:1fr}.k3a .pd-izin-f{grid-template-columns:1fr}.k3a .pd-izin-f .k3a-btn{margin-top:0}.k3a .pd-lbl-act .k3a-btn{flex:1}}
/* dialog cetak */
.k3lbl .lb-sheet{max-width:600px}
/* ukuran label per produk (stock-in bisa campur produk mungil & biasa) */
.k3lbl .lb-hint{margin:0;font:var(--text-caption);color:var(--ink-mute)}
.k3lbl .lb-sz{display:flex;flex-wrap:wrap;gap:6px}
.k3lbl .lb-sz button{height:32px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);font:600 12px/1 var(--font-display);color:var(--ink-soft);cursor:pointer}
.k3lbl .lb-sz button:hover{border-color:var(--line-strong)}
.k3lbl .lb-sz button.on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-strong)}
.k3lbl .lb-sz button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* desktop: cukup lebar untuk 3 tombol (Batal, Cetak 1 label uji, Cetak N label) tanpa menabrak tepi */
.k3lbl .lb-opts{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
@media (max-width:640px){.k3lbl .lb-opts{grid-template-columns:1fr}}
.k3lbl .lb-pc{display:flex;align-items:center;gap:8px;font:var(--text-body)}
.k3lbl .lb-pc input{accent-color:var(--primary);width:18px;height:18px}
.k3lbl .lb-tip{display:grid;gap:6px;margin:0;padding:10px 12px;border-radius:var(--radius-md);background:var(--primary-soft);color:var(--primary-strong);font:500 12px/1.45 var(--font-display)}
.k3lbl .lb-h{display:flex;align-items:center;gap:8px;margin:var(--space-2) 0 0;font:800 14px/1.3 var(--font-display);color:var(--ink)}
.k3lbl .lb-h:first-child{margin-top:0}
.k3lbl .lb-h i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--primary);color:var(--on-primary,#fff);font:800 12px/1 var(--font-display);font-style:normal}
.k3lbl .lb-pick.c3{grid-template-columns:1fr}
.k3lbl .lb-guide{margin:0;padding-left:18px;display:grid;gap:4px}
.k3lbl .lb-dev{border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);padding-top:6px}
.k3lbl .lb-dev summary{cursor:pointer;font-weight:700}
.k3lbl .lb-dev p{margin:6px 0 0}
.k3lbl .lb-dev .lb-dev-note{font-weight:700}
.k3lbl .lb-warn{margin:0;padding:8px 10px;border-radius:var(--radius-sm);background:var(--yellow-soft);color:var(--yellow-ink);font:600 12px/1.4 var(--font-display)}
@media (max-width:640px){
 .k3lbl .k3a-scrim{padding-top:var(--sb,env(safe-area-inset-top,0px));padding-bottom:var(--hi,env(safe-area-inset-bottom,0px))}
 .k3lbl .k3a-sheet-f{flex-wrap:wrap}
 .k3lbl .k3a-sheet-f .k3a-btn{flex:1 1 40%}
 .k3lbl .k3a-sheet-f .k3a-btn.primary{flex:1 1 100%;order:-1}
}
.k3lbl .lb-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.k3lbl .lb-prev{display:flex;justify-content:center;padding:8px;border-radius:var(--radius-sm);background:var(--surface-soft)}
.k3lbl .lb-prev{align-self:start;max-width:236px}
.k3lbl .lb-prev>span{display:block;max-width:100%}
.k3lbl .lb-prev svg{display:block;width:100%;height:auto}
/* ukuran per jenis printer (12 Okt 2026): utama di depan, "Ukuranku tidak ada" membuka sisanya + isian ukuran sendiri */
.k3lbl .lb-sz button.lb-more{border-style:dashed;color:var(--primary-strong);background:none}
.k3lbl .lb-sz button:disabled{opacity:.45;cursor:not-allowed}
.k3lbl .lb-cols{display:grid;gap:6px}
.k3lbl .lb-cols .lab{font:var(--text-label);color:var(--ink)}
.k3lbl .lb-cust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2) var(--space-3);align-items:start}
.k3lbl .lb-cust.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.k3lbl .lb-cust .k3a-fm .box{min-height:var(--control-h-sm,40px)}
.k3lbl .lb-cust .k3a-fm input{font-size:15px}
/* tanda keterbacaan: lebar >= 45 mm lebih mudah terbaca; di bawahnya wajib label uji (tanpa kata "aman") */
.k3lbl .lb-fit{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font:500 12px/1.45 var(--font-display);color:var(--ink-soft)}
.k3lbl .lb-rd{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--radius-pill);font:700 12px/1 var(--font-display);white-space:nowrap}
.k3lbl .lb-rd.ok{background:var(--primary-soft);color:var(--primary-strong)}
.k3lbl .lb-rd.test{background:var(--yellow-soft);color:var(--yellow-ink)}
.k3lbl .lb-paper{margin:0;font:500 12px/1.45 var(--font-display);color:var(--ink-soft)}
.k3lbl .lb-paper b{color:var(--ink)}
.k3lbl .lb-exp input:disabled{opacity:.5;cursor:not-allowed}
@media (max-width:640px){.k3lbl .lb-cust.c3{grid-template-columns:repeat(2,minmax(0,1fr))}.k3lbl .lb-prev{max-width:none}}
.k3lbl .lb-meta{display:grid;gap:6px;min-width:0}
.k3lbl .lb-meta b{font:var(--text-body-strong)}
.k3lbl .lb-meta small{font:var(--text-code);color:var(--ink-mute)}
.k3lbl .lb-exp{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font:var(--text-label);color:var(--ink-soft)}
.k3lbl .lb-exp .opt{color:var(--ink-mute);font-weight:500}
.k3lbl .lb-exp input{width:100%;max-width:170px;box-sizing:border-box;height:var(--control-h-xs);padding:0 8px;border:1px solid var(--line);border-radius:var(--radius-sm);font:var(--text-body);color:var(--ink);background:var(--surface)}
@media (max-width:640px){.k3lbl .lb-row{grid-template-columns:1fr}}
/* cetak: label SVG berukuran mm asli */
.k3lbl-print{display:none}
@media print{
 body *{visibility:hidden!important}
 .k3lbl-print,.k3lbl-print *{visibility:visible!important}
 .k3lbl-print{display:grid!important;position:absolute;left:0;top:0;gap:2mm}
 .k3lbl-print .lbp{display:block;line-height:0;break-inside:avoid}
 .k3lbl-print .lb-cut{stroke:#000;stroke-dasharray:none}
}
/* desktop: dialog di TENGAH layar (bukan panel kanan), tinggi pas layar, badan menggulir */
@media (min-width:641px){.k3lbl .k3a-scrim{justify-content:center;align-items:center;padding:24px}.k3lbl .k3a-sheet.lb-sheet{width:min(760px,100%);max-width:none;height:auto;max-height:calc(100vh - 48px)}.k3lbl .lb-pick.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.k3lbl .k3a-sheet-f{justify-content:flex-end;flex-wrap:wrap}.k3lbl .k3a-sheet-f .k3a-btn{flex:0 0 auto;min-width:0;padding:0 18px}.k3lbl .k3a-sheet-f .k3a-btn[data-x]{min-width:96px}}
/* ===== Sheet · full-dlg — detail diperluas jadi dialog (12 Okt 2026) =====
   Ukuran = tampilan detail .k3a-scrim.full (di samping sidebar, di bawah topbar, badan 3 kolom),
   tetapi tetap DIALOG modal di atas daftar: latar redup, × menutup, tombol kecilkan kembali ke panel samping.
   Pemicu: tombol perluas di kepala Sheet (.k3a-sheet-x berikon panah diagonal). Desktop saja; HP tetap bottom sheet.
   Tinggi dikunci pas layar: kepala & footer selalu terlihat, hanya badan yang menggulir (isi panjang seperti tab Label). */
.k3a-scrim.full-dlg{position:fixed;inset:0;z-index:200;display:block;background:var(--scrim);box-sizing:border-box;overflow:hidden;
  padding:calc(68px + 28px) var(--space-6) 28px calc(var(--sidebar-w) + var(--space-6))}
.k3a-scrim.full-dlg .shut{position:fixed;inset:0;display:block;border:0;background:transparent;cursor:default}
.k3a-scrim.full-dlg .k3a-sheet{position:relative;width:100%;max-width:none;height:100%;max-height:100%;min-height:0;
  border-radius:var(--radius-xl);box-shadow:var(--shadow-pop);display:flex;flex-direction:column;overflow:hidden}
.k3a-scrim.full-dlg :is(.k3a-sheet-h,.dp-h){flex:none;padding:20px 28px var(--space-3);border-bottom:1px solid var(--line)}
.k3a-scrim.full-dlg .k3a-sheet-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;align-content:start;align-items:start;padding:var(--space-5) 28px 28px;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--space-5) var(--space-6)}
.k3a-scrim.full-dlg .k3a-sheet-f{flex:none;padding:var(--space-4) 28px 20px;justify-content:flex-end;border-top:1px solid var(--line)}
.k3a-scrim.full-dlg .k3a-sheet-f .k3a-btn{flex:0 0 auto;min-width:160px}
@media (max-width:900px){.k3a-scrim.full-dlg{padding:var(--space-4)}}
/* DetailPanel · susunan semua detail (12 Okt 2026): kiri dp-side (judul + properti), kanan dp-main (isi).
   Panel kanan: bertumpuk. Diperluas (full-dlg): dua kolom. Tombol perluas .dp-xp hanya desktop. */
.k3a-dp .dp-side,.k3a-dp .dp-main{display:grid;gap:var(--space-4);align-content:start;min-width:0}
.k3a-dp .dp-ttl{display:flex;align-items:center;gap:12px}
.k3a-dp .dp-ttl .k3a-thumb{flex:none;width:52px;height:52px}
.k3a-dp .dp-ttl .dp-title{font-size:24px}
.k3a-dp .dp-r .pill{white-space:nowrap}
@media (min-width:901px){
 .k3a-scrim.full-dlg .k3a-dp .k3a-sheet-b:has(>.dp-side){grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:var(--space-6) 40px}
 .k3a-scrim.full-dlg .k3a-dp .dp-side{position:sticky;top:0;padding-right:32px;border-right:1px solid var(--line)}
 .k3a-scrim.full-dlg .k3a-dp .dp-ttl .dp-title{font-size:28px}}
@media (max-width:900px){.k3a-dp .dp-xp{display:none}}
/* DetailPanel · Aksi lainnya (12 Okt 2026): ikon ... di kepala -> menu DS k3a-pop berisi SEMUA aksi yang bisa dilakukan untuk
   catatan ini sesuai status; aksi utama juga di footer; aksi membatalkan (merah) hanya di menu. */
.k3a-dp .dp-h{position:relative}
/* gaya sama dengan k3a-pop, tapi kelas sendiri: header.js menyembunyikan semua .k3a-pop saat ada klik */
.k3a-dp .dp-menu{position:absolute;top:calc(100% - 6px);right:var(--space-4);z-index:40;width:240px;max-width:calc(100vw - 24px);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-pop);padding:var(--space-2);display:grid;gap:2px}
.k3a-dp .dp-menu .mi{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3);border:0;border-radius:var(--radius-lg);background:none;font:600 14px/1 var(--font-display);color:var(--ink-soft);text-align:left;cursor:pointer}
.k3a-dp .dp-menu .mi:hover{background:var(--surface-soft)}
.k3a-dp .dp-menu .mi:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.k3a-dp .dp-menu .mi.danger{color:var(--danger)}
/* Dialog · konfirmasi tutup form (k3a-dlg.confirm, 12 Okt 2026): form yang sudah diisi lalu ditutup ->
   'Isian yang belum disimpan akan hilang' + Lanjutkan mengisi (utama) / Simpan draf / Tutup tanpa simpan (merah). */
.k3a-confirm-scrim{z-index:260}
.k3a-dlg.confirm{width:min(600px,100%)}
.k3a-dlg.confirm .ttl{margin:0;font:var(--text-h5);color:var(--ink)}
.k3a-dlg.confirm .msg{margin:0;font:500 14px/1.55 var(--font-display);color:var(--ink-soft)}
.k3a-dlg.confirm .acts{flex-wrap:wrap;justify-content:flex-end;margin-top:var(--space-3)}
.k3a-dlg.confirm .fc-discard{color:var(--danger)}
.k3a-dlg.confirm .acts .k3a-btn{flex:0 0 auto;padding:0 18px}
@media (max-width:640px){.k3a-dlg.confirm .acts{flex-direction:column-reverse;align-items:stretch}.k3a-dlg.confirm .acts .k3a-btn{width:100%}}
.k3a-dp .dp-menu .mi.danger:hover{background:var(--danger-soft)}
/* DetailPanel · dp-groups.plain — tanpa kotak bergaris; antargrup spesifikasi cukup dipisah garis bawah (12 Okt 2026) */
.k3a-dp .dp-groups.plain{border:0;border-radius:0;background:none;overflow:visible}
.k3a-dp .dp-groups.plain .dp-g{padding-bottom:var(--space-3)}
.k3a-dp .dp-groups.plain .dp-g{border-top:0}
.k3a-dp .dp-groups.plain .dp-g:not(:last-child){border-bottom:1px solid var(--line)}
.k3a-dp .dp-groups.plain .dp-g+.dp-g>h4{padding-top:var(--space-4)}
.k3a-dp .dp-groups.plain :is(.dp-g>h4,.dp-grid,.dp-quote){padding-left:0;padding-right:0}
/* ===== Revisi 13 Okt 2026 — komponen baru DS K3Mart Mitra Portal (meeting Senin 13 Okt) =====
   Dialog · celebrate (lib/celebrate.js), Gerbang akun (k3a-lock), RequestForm (lib/request.js). */
/* Dialog · celebrate — ucapan selamat setelah aksi besar (pendaftaran terkirim). Gaya welcome board onboarding:
   konfeti berulang + ilustrasi. TIDAK bisa ditutup (tanpa ×, latar & Esc diabaikan); satu tombol utama. Desktop = dialog
   tengah 640px; HP = layar penuh. Gerak konfeti mati bila prefers-reduced-motion. */
.k3cb .cb-scrim{z-index:320;padding:var(--space-4)}
.k3cb .k3a-dlg.celebrate{position:relative;width:min(640px,100%);max-height:calc(100vh - 32px);overflow:hidden auto;display:grid;justify-items:center;gap:var(--space-3);
  padding:64px 56px var(--space-6);text-align:center;background:linear-gradient(180deg,var(--surface-soft) 0%,var(--surface) 70%)}
.k3cb .celebrate>*:not(.cb-conf){position:relative}
.k3cb .cb-pop{display:block;width:176px;height:143px;margin-bottom:var(--space-1);color:var(--ink)}
.k3cb .cb-h{margin:0;font:var(--text-page-title);color:var(--ink)}
.k3cb .cb-h em{font-style:normal;color:var(--primary)}
.k3cb .cb-meta{margin:0;font:var(--text-code);color:var(--ink-soft)}
.k3cb .cb-meta b{font-weight:600;color:var(--ink)}
.k3cb .cb-p{margin:0;max-width:44ch;font:500 16px/1.55 var(--font-display);color:var(--ink-soft)}
.k3cb .cb-go{margin-top:var(--space-3);min-width:220px;justify-content:center}
.k3cb .cb-conf{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 42% 30% at 50% 66%,transparent 55%,#000 100%);mask-image:radial-gradient(ellipse 42% 30% at 50% 66%,transparent 55%,#000 100%)}
.k3cb .cb-conf i{position:absolute;left:var(--x);top:var(--y);width:7px;height:13px;border-radius:2px;background:var(--c);transform:rotate(var(--r))}
.k3cb .cb-conf i.c{width:8px;height:8px;border-radius:50%}
.k3cb .cb-conf i.s{width:4px;height:15px}
@media (prefers-reduced-motion:no-preference){.k3cb .cb-conf i{top:-20px;animation:k3cbLoop var(--t) linear var(--d) infinite}}
@keyframes k3cbLoop{0%{transform:translate(0,0) rotate(var(--r))}50%{transform:translate(var(--w),calc(var(--fall,600px) / 2)) rotate(calc(var(--r) + 200deg))}100%{transform:translate(0,var(--fall,600px)) rotate(calc(var(--r) + 400deg))}}
@media (max-width:640px){
 .k3cb .cb-scrim{padding:0}
 .k3cb .k3a-dlg.celebrate{width:100%;height:100%;max-height:none;border-radius:0;align-content:center;padding:var(--space-6) var(--space-5)}
 .k3cb .cb-conf i{--fall:920px}
 .k3cb .cb-h{font-size:24px}
 .k3cb .cb-go{width:100%}
}
/* Gerbang akun (k3a-lock) — fitur yang belum bisa dipakai akun baru (mis. Pengajuan sebelum data lengkap).
   Satu kartu menggantikan isi halaman: ikon gembok, alasan, sisa hari batas lengkapi data, aksi utama. */
.k3a .k3a-lock{display:grid;justify-items:center;gap:var(--space-3);max-width:560px;margin:var(--space-6) auto;padding:var(--space-6);text-align:center;border-radius:var(--radius-xl);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.k3a .k3a-lock .ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--yellow-soft);color:var(--yellow-ink)}
.k3a .k3a-lock h2{margin:0;font:var(--text-card-title);color:var(--ink)}
.k3a .k3a-lock p{margin:0;font:var(--text-body);color:var(--ink-soft)}
.k3a .k3a-lock .due{display:inline-flex;align-items:center;gap:var(--space-2);height:32px;padding:0 var(--space-3);border-radius:var(--radius-pill);background:var(--yellow-soft);color:var(--yellow-ink);font:var(--text-button-sm)}
.k3a .k3a-lock .due.late{background:var(--danger-soft);color:var(--danger)}
.k3a .k3a-lock .acts{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);margin-top:var(--space-2)}
/* RequestForm (lib/request.js) — form Pengajuan dari halaman mana pun: lapisan iframe transparan memuat halaman Pengajuan
   mode embed; di mode embed kerangka portal disembunyikan sehingga yang tampil hanya Sheet form di atas halaman asal. */
.k3req-frame{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:300;background:transparent;color-scheme:normal}
html.k3req-open,html.k3req-open body{overflow:hidden}
html.k3req-embed,html.k3req-embed body{background:transparent!important}
html.k3req-embed .k3a-portal>.k3a-side,html.k3req-embed .k3a-portal>.k3a-col,html.k3req-embed .k3a-portal>.k3a-nav,html.k3req-embed .k3a-portal>.k3a-header,html.k3req-embed .k3a-portal>.k3a-main,html.k3req-embed .pt-status,html.k3req-embed .pt-bottom{display:none!important}
html.k3req-embed .k3a-portal{background:transparent!important;min-height:0}
.k3req-toast .k3a-toast{z-index:330}
/* Ubah harga & komisi — satu baris per toko: harga sekarang, harga baru (opsional), usulan komisi (opsional), hitungan net */
.k3a .pf-neg{display:grid;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.k3a .pf-neg-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-1) var(--space-3)}
.k3a .pf-neg-h b{font:var(--text-body-strong);color:var(--ink)}
.k3a .pf-neg-h small{font:var(--text-caption);color:var(--ink-mute)}
@media (max-width:640px){.k3a .pf-neg .pf-two{grid-template-columns:1fr}}
.k3a .k3a-header .k3a-hreq.k3a-btn{margin-right:var(--space-2)}
.k3a .pf-neg .pf-two{align-items:start}
/* Konfirmasi data akun (ak-kyc) — vendor lama: periksa data, satu klik "Data sudah benar" (tercatat) atau ajukan Ubah data (BR-CON-102) */
.k3a .ak-kyc{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-4);padding:var(--space-4) var(--space-5);background:var(--yellow-soft);box-shadow:inset 0 0 0 1px var(--yellow)}
.k3a .ak-kyc-tx{display:grid;gap:var(--space-1);min-width:0;flex:1 1 280px}
.k3a .ak-kyc-tx b{font:var(--text-body-strong);color:var(--ink)}
.k3a .ak-kyc-tx span{font:var(--text-body);color:var(--ink-soft)}
.k3a .ak-kyc-acts{display:flex;flex-wrap:wrap;gap:var(--space-2)}
@media (max-width:640px){.k3a .ak-kyc-acts{width:100%}.k3a .ak-kyc-acts .k3a-btn{flex:1}}
/* ===== AuthLayout (k3a-auth) — kerangka halaman masuk, daftar, lacak, aktivasi, buat sandi, detail pendaftaran, sampel (13 Okt 2026, dari salinan per halaman) ===== */
/* AuthLayout (kandidat DS): kerangka halaman masuk/daftar/status. Desktop: header + hero kiri + kartu kanan di atas k3a-bg.
   HP: header ringkas (k3a-header.m) + isi rata tanpa kartu. */
.k3a.k3a-auth{min-height:100vh;display:flex;flex-direction:column;font-family:var(--font-display);color:var(--ink);background-color:var(--canvas)}
.k3a-auth *{box-sizing:border-box}
.k3a-auth .k3a-header{position:sticky;top:0;z-index:10;box-shadow:0 1px 0 var(--line),var(--shadow-sm)}
.k3a-auth-brand{display:flex;align-items:center;gap:var(--space-2);text-decoration:none;color:inherit}
.k3a-auth-brand .wm{display:block;height:36px;width:auto}
.k3a-auth-brand .ic{display:block;width:40px;height:40px}
.k3a-auth-brand .k3a-badge{display:inline-flex}
.k3a-auth-brand .lg-dark{display:none}
[data-theme="dark"] .k3a-auth-brand .lg-light{display:none}
[data-theme="dark"] .k3a-auth-brand .lg-dark{display:block}
.k3a-auth .k3a-header .acts{margin-left:auto;gap:var(--space-4)}
.k3a-auth .k3a-header>.k3a-link{margin-left:auto;font:700 14px/1 var(--font-display)}
.k3a-auth .k3a-header .acts .k3a-link{font:700 14px/1 var(--font-display);white-space:nowrap}
.k3a-auth-main{flex:1;display:grid;grid-template-columns:minmax(0,1fr);align-items:start;justify-items:stretch;gap:var(--space-6);width:100%;padding:var(--space-5) var(--space-4) var(--space-6)}
.k3a-auth-main>*{min-width:0}
.k3a-auth-hero,.k3a-auth-side{display:none}
.k3a-auth-card{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3);align-content:start;width:100%;min-width:0}
.k3a-auth-card>*{min-width:0}
.k3a-auth-head{display:grid;gap:var(--space-2)}
.k3a-auth-head>.k3a-tag{justify-self:start}
.k3a-auth-h1{margin:0;font:var(--text-page-title);letter-spacing:-.02em;color:var(--ink)}
.k3a-auth-h1 em{font-style:normal;color:var(--primary)}
.k3a-auth-h1.c{text-align:center}
.k3a-auth-sub{margin:0;font:500 15px/1.5 var(--font-display);color:var(--ink-soft)}
.k3a-auth-sub.c{text-align:center;font-size:13px;color:var(--ink-mute)}
.k3a-auth-sub b{color:var(--ink)}
.k3a-auth-acts{display:grid;gap:var(--space-2)}
.k3a-auth-acts .k3a-btn{justify-content:center}
.k3a-auth-alt{justify-self:center;padding:var(--space-2);font:700 15px/1.2 var(--font-display);color:var(--primary);text-align:center;text-decoration:none}
.k3a-auth-alt:hover{text-decoration:underline}
button.k3a-auth-alt{border:0;background:none;cursor:pointer;font-family:inherit}
.k3a-auth-card .end{justify-self:end}
/* Bagian form bernomor (fieldset + legend) */
.k3a-auth-sec{display:grid;gap:var(--space-3);min-width:0;margin:0;padding:var(--space-4) 0 0;border:0;border-top:1px solid var(--line)}
.k3a-auth-sec>legend{float:left;width:100%;padding:0;margin:0 0 var(--space-1);font:var(--text-h6);color:var(--ink)}
.k3a-auth-sec>legend+*{clear:both}
.k3a-auth-hint{margin:0;font:var(--text-caption);color:var(--ink-mute)}
.k3a-auth-hint .k3a-tag{margin-right:var(--space-2)}
.k3a-auth-or{display:flex;align-items:center;gap:var(--space-3);font:var(--text-label);color:var(--ink-mute)}
.k3a-auth-or::before,.k3a-auth-or::after{content:"";flex:1;height:1px;background:var(--line-strong)}
.k3a-auth .k3a-btn.line.google{gap:var(--space-3)}
/* OTP 6 kotak (DS k3a-otp) di dalam k3a-fm: galat = cincin merah tiap kotak */
.k3a-auth .k3a-fm .k3a-otp{margin:0}
.k3a-auth .k3a-fm.err .k3a-otp input{box-shadow:inset 0 0 0 1.5px var(--danger)}
.k3a-auth .k3a-otp input{font-family:var(--font-mono)}
.k3a-auth .k3a-callout .tx>.k3a-btn.sm,.k3a-auth .k3a-alert .tx>.k3a-btn.sm{display:inline-flex;margin-top:var(--space-2)}
.k3a-auth-terms{margin:0;text-align:center;font:500 13px/1.6 var(--font-display);color:var(--ink-mute)}
.k3a-auth-terms .sep{color:var(--ink-mute)}
.k3a-auth-help{justify-self:center;display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2);font:var(--text-button);color:var(--primary);text-decoration:none}
.k3a-auth-help:hover{text-decoration:underline}
.k3a-auth-foot{display:flex;justify-content:center;align-items:center;gap:var(--space-3);padding:20px var(--space-6) 28px;font:500 13px/1 var(--font-display);color:var(--ink-mute)}
.k3a-auth-foot .sep{width:1px;height:16px;background:var(--line-strong)}
.k3a-auth-pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.k3a-auth-pills li{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font:600 13px/1 var(--font-display);color:var(--ink-soft)}
.k3a-auth-pills i{width:8px;height:8px;border-radius:50%;background:var(--primary)}
.k3a-auth-pills li:nth-child(2) i{background:var(--pink)}
.k3a-auth-pills li:nth-child(3) i{background:var(--yellow)}
/* Ringkasan langkah ("Habis ini") */
.k3a-auth-flow{border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.k3a-auth-flow .lh{display:flex;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--primary-soft);font:var(--text-tag);text-transform:uppercase;color:var(--primary-strong)}
.k3a-auth-flow ol{list-style:none;margin:0;padding:var(--space-3) var(--space-4);display:grid;gap:var(--space-3)}
.k3a-auth-flow li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--space-3);align-items:center;font:var(--text-body);color:var(--ink)}
.k3a-auth-flow li b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--primary);color:var(--on-primary);font:var(--text-badge)}
/* Langkah vertikal di sisi kiri (desktop) */
.k3a-auth-eyebrow{justify-self:start;padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);background:var(--primary-soft);font:var(--text-tag);text-transform:uppercase;color:var(--primary-strong)}
.k3a-auth-vflow{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-1);width:100%}
.k3a-auth-vflow li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--space-3);align-items:center;padding:var(--space-3);border-radius:var(--radius-md);font:700 15px/1.3 var(--font-display);color:var(--ink-mute)}
.k3a-auth-vflow li b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface-soft);color:var(--ink-soft);font:var(--text-button-sm)}
.k3a-auth-vflow li.done{color:var(--ink)}
.k3a-auth-vflow li.done b{background:var(--success);color:var(--white)}
.k3a-auth-vflow li.now{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 2px var(--primary)}
.k3a-auth-vflow li.now b{background:var(--primary);color:var(--on-primary)}
/* Kotak konfirmasi di bawah tombol (Cek lagi nomor, nomor sudah terdaftar) = Alert dengan aksi */
.k3a-auth .k3a-alert .tx>span{display:block;color:var(--ink-soft)}
.k3a-auth .k3a-alert .tx .acts{display:flex;gap:var(--space-2);margin-top:var(--space-2)}
.k3a-auth .k3a-alert .tx .acts>*{flex:1;justify-content:center}
.k3a-auth .k3a-alert .tx .k3a-btn.block{margin-top:var(--space-2)}
.k3a-auth input[type=checkbox],.k3a-auth input[type=radio]{accent-color:var(--primary)}
@media (min-width:900px){
 .k3a-auth .k3a-header{padding-inline:clamp(32px,8vw,220px)}
 .k3a-auth-main{align-items:center;padding:40px clamp(32px,8vw,220px)}
 .k3a-auth-main.split{grid-template-columns:minmax(0,1fr) clamp(440px,27vw,560px);gap:clamp(48px,5vw,120px)}
 .k3a-auth-main.form{grid-template-columns:minmax(300px,1fr) minmax(0,clamp(640px,38vw,780px));align-items:start;gap:clamp(48px,5vw,120px);padding-top:48px}
 .k3a-auth-hero{display:grid;gap:var(--space-4);align-content:center;justify-items:start}
 .k3a-auth-hero h2{margin:0;font:var(--text-h2);letter-spacing:-.02em;color:var(--ink)}
 .k3a-auth-hero h2 em{font-style:normal;color:var(--primary)}
 .k3a-auth-art{width:min(100%,360px);height:auto}
 .k3a-auth-side{display:grid;gap:var(--space-3);align-content:start;justify-items:start;max-width:400px;position:sticky;top:96px}
 .k3a-auth-side h2{margin:0;font:var(--text-h3);letter-spacing:-.02em;color:var(--ink)}
 .k3a-auth-side h2 em{font-style:normal;color:var(--primary)}
 .k3a-auth-card.k3a-card{padding:clamp(32px,2.2vw,44px);gap:var(--space-4)}
 .k3a-auth-h1{font-size:30px}
}
@media (max-width:899px){
 .k3a-auth-card.k3a-card{padding:0;border:0;box-shadow:none;background:transparent;border-radius:0}
}
/* ===== RegistrationShell (rg-*) — kerangka form pendaftaran 4 langkah: Profil, Toko, Produk, Cek ulang (13 Okt 2026) ===== */
/* RegistrationShell (kandidat DS K3Mart Mitra Portal, 13 Okt 2026): kerangka form pendaftaran Langkah 1-4.
   Desktop: header + kolom kiri (alur langkah) + kartu form kanan, latar k3a-bg. HP: header + kartu tanpa bingkai. Token saja. */
.k3a.rg{min-height:100vh;display:flex;flex-direction:column;font-family:var(--font-display);color:var(--ink);background-color:var(--canvas)}
.k3a.rg *{box-sizing:border-box}
.k3a.rg input[type=checkbox],.k3a.rg input[type=radio]{accent-color:var(--primary)}
.k3a.rg.rg-hp{width:100%;max-width:393px;margin:0 auto;background:var(--surface)}
.rg-top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-card)}
.rg-brand{display:flex;align-items:center;gap:var(--space-2);text-decoration:none;color:inherit}
.rg-brand .k3a-wordmark{height:38px}
.rg-brand .rg-logo-ic{display:block;width:40px;height:40px}
.rg-brand .lg-dark{display:none}
[data-theme="dark"] .rg-brand .lg-light{display:none}
[data-theme="dark"] .rg-brand .lg-dark{display:block}
.rg-back{margin-left:auto;font:700 14px/1 var(--font-display);color:var(--primary);text-decoration:none;padding:var(--space-2) var(--space-1)}
.rg-back:hover{text-decoration:underline}
.rg-main{flex:1;display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:var(--space-6);width:100%;padding:var(--space-5) var(--space-4) var(--space-6)}
.rg-main>*{min-width:0}
.rg-side{display:none}
.rg-body{display:grid;gap:var(--space-3);padding:var(--space-2) var(--space-3) 40px}
.rg-eyebrow{justify-self:start;font:var(--text-label);letter-spacing:.08em;text-transform:uppercase;padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary-strong);box-shadow:inset 0 0 0 1px var(--line)}
.rg-side h2{margin:0;font:var(--text-h3);letter-spacing:-.02em}
.rg-side h2 em{font-style:normal;color:var(--primary)}
.rg-flow{display:grid;grid-auto-flow:row;grid-auto-columns:auto;gap:var(--space-1);width:100%;margin:0;padding:0;list-style:none}
.rg-flow .k3a-step{box-shadow:none;background:transparent;font:700 15px/1.3 var(--font-display);color:var(--ink-mute)}
.rg-flow .k3a-step b{width:28px;height:28px}
.rg-flow .k3a-step.done{color:var(--ink)}
.rg-flow .k3a-step.done b{background:var(--success);color:var(--on-primary)}
.rg-flow .k3a-step.now{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--primary)}
.rg-saved{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);background:var(--success-soft);color:var(--success);font:var(--text-label);box-shadow:inset 0 0 0 1px var(--line)}
.rg-saved.saving{background:var(--yellow-soft);color:var(--yellow-ink)}
.rg-help{justify-self:center;display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2)}
.rg-foot{padding:20px var(--space-5) 28px;text-align:center;font:500 13px/1 var(--font-display);color:var(--ink-mute)}
.rg-foot .sep{display:inline-block;width:1px;height:12px;margin:0 var(--space-2);vertical-align:-2px;background:var(--line-strong)}
.rg-form{display:grid;gap:var(--space-3);width:100%;padding:var(--space-3);border-radius:var(--radius-xl)}
.rg-form *{min-width:0}
.rg-head{display:grid;gap:var(--space-2)}
.rg-head h2{margin:0;font:var(--text-page-title);letter-spacing:-.02em;text-wrap:balance}
.rg-head h2 em{font-style:normal;color:var(--primary)}
.rg-stepof{font:var(--text-label);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.rg-prog{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:var(--space-2)}
.rg-prog i{height:6px;border-radius:var(--radius-pill);background:var(--line)}
.rg-prog i.on{background:var(--primary)}
.rg-prog i.now{background:linear-gradient(90deg,var(--primary) 50%,var(--line) 50%)}
.rg-field{display:grid;gap:var(--space-2);min-width:0}
.rg-lbl{font:var(--text-field-label);color:var(--ink)}
.k3a .k3a-radios>legend.rg-lbl{margin-bottom:var(--space-2);color:var(--ink)}
.rg-lbl .opt,.rg-opt{margin-left:var(--space-1);font:var(--text-help);letter-spacing:0;color:var(--ink-mute)}
.rg-hint{font:500 13px/1.45 var(--font-display);color:var(--ink-mute)}
.rg-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--space-2)}
.rg-2btn{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.rg-next{display:grid;gap:var(--space-2)}
.rg-next .k3a-btn{justify-content:center}
.rg-next>.k3a-alert{text-align:left}
.rg-map{position:relative;height:150px;overflow:hidden;border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--line);background-color:var(--primary-soft);background-image:linear-gradient(color-mix(in srgb,var(--primary) 10%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--primary) 10%,transparent) 1px,transparent 1px);background-size:28px 28px}
.rg-map .road{position:absolute;background:var(--surface);box-shadow:0 0 0 1px var(--line-strong)}
.rg-map .r1{left:-10%;right:-10%;top:46%;height:8px;transform:rotate(-8deg)}
.rg-map .r2{top:-10%;bottom:-10%;left:54%;width:8px;transform:rotate(12deg)}
.rg-map .pin{position:absolute;left:50%;top:48%;width:24px;height:24px;margin:-24px 0 0 -12px;border:2px solid var(--white);border-radius:50% 50% 50% 0;background:var(--pink);transform:rotate(-45deg);box-shadow:var(--shadow-sm)}
.rg-map .tag{position:absolute;left:var(--space-2);bottom:var(--space-2);padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);background:var(--surface);box-shadow:var(--shadow-sm);font:600 11px/1.2 var(--font-mono)}
.rg-loc{display:flex;gap:var(--space-2);align-items:flex-start;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.rg-loc b{display:block;font:700 14px/1.3 var(--font-display)}
.rg-loc small{font:600 11px/1.3 var(--font-mono);color:var(--ink-mute)}
.k3a .k3a-og .oc .tx b{display:block;font:var(--text-body-strong);color:var(--ink)}
.k3a .k3a-og .oc .tx small{display:block;font:var(--text-help);color:var(--ink-mute)}
.rg-chip{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);background:var(--yellow-soft);color:var(--yellow-ink);font:var(--text-badge)}
.rg-chip.ok{background:var(--success-soft);color:var(--success)}
.rg-chip.warn{background:var(--pink-soft);color:var(--pink-ink)}
.rg-chip.mute{background:var(--surface-soft);color:var(--ink-mute)}
.rg-file{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--success-soft);font:var(--text-body)}
.rg-file .th{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-sm);background:var(--surface);color:var(--primary);font:var(--text-badge)}
.rg-file small{display:block;font:500 12px/1.2 var(--font-mono);color:var(--ink-mute)}
.rg-sumbox{display:grid;gap:var(--space-2)}
@media (max-width:899px){
 .k3a.rg .rg-form{padding:0;background:transparent;box-shadow:none;border-radius:0}
 .k3a.rg .rg-form .k3a-og.c2{grid-template-columns:1fr}
}
@media (min-width:900px){
 .rg-top{padding-inline:clamp(32px,8vw,220px)}
 .rg-main{grid-template-columns:minmax(300px,1fr) minmax(0,clamp(640px,38vw,780px));gap:clamp(48px,5vw,120px);padding:48px clamp(32px,8vw,220px) 40px}
 .rg-side{display:grid;gap:var(--space-3);align-content:start;justify-items:start;position:sticky;top:96px;max-width:400px}
 .k3a.rg .rg-form{padding:clamp(32px,2.2vw,44px);gap:var(--space-4)}
 .rg-form .k3a-og.c2{grid-template-columns:1fr 1fr}
 .rg-next{display:flex;flex-direction:row-reverse;flex-wrap:wrap;justify-content:space-between;align-items:center}
 .rg-next>.k3a-btn.block{width:auto;min-width:220px}
 .rg-next>.k3a-alert{flex:1 1 100%;order:-1}
}
/* rg: ikon bantuan, tombol ikon kecil */
.rg-help svg path{stroke:var(--surface)}
.k3a-btn.rg-ico{width:var(--control-h-sm);min-width:var(--control-h-sm);padding:0;justify-content:center}
.k3a .k3a-og.multi .oc .ck{font:800 12px/1 var(--font-display)}
/* Logo mitra: kata MITRA menyatu dengan logo (lockup), bukan label terpisah */
.k3a-auth-brand,.rg-brand,.k3a-header.m .k3a-home{gap:6px}
.k3a-auth-brand .k3a-badge,.rg-brand .k3a-badge,.k3a-header.m .k3a-badge,.k3a-brand-mitra{display:inline-flex;align-items:center;align-self:flex-end;margin:0 0 2px -16px;padding:4px 12px 4px 11px;border-radius:0;background:#0E4F4B;color:#fff;font:italic 900 11px/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%)}
.k3a-auth-brand:has(.ic) .k3a-badge,.k3a-header.m .k3a-badge{font-size:11px;padding:3px 11px 3px 10px;margin:0 0 3px -10px}
[data-theme="dark"] .k3a-auth-brand .k3a-badge,[data-theme="dark"] .rg-brand .k3a-badge,[data-theme="dark"] .k3a-header.m .k3a-badge{background:#fff;color:#0E4F4B}
.k3a-header.m > .k3a-badge{margin-left:-18px}
/* Portal: logo tanpa tag MITRA (menu samping desktop dan header HP) */
.k3a-header.m > .k3a-badge{display:none}
/* Logo portal: versi terang/gelap lewat dua gambar (tidak bergantung pada skrip) */
.k3a .k3a-home .lg-dark,.k3a .k3a-header.m .k3a-logo .lg-dark,.k3a .k3a-home .k3a-logo img.k3a-ic.lg-dark,.k3a .k3a-header.m .k3a-logo img.k3a-ic.lg-dark{display:none}
[data-theme="dark"] .k3a .k3a-home .lg-light,[data-theme="dark"] .k3a .k3a-header.m .k3a-logo .lg-light,.k3a .k3a-side.v2.dark .k3a-home .lg-light,[data-theme="dark"] .k3a .k3a-home .k3a-logo img.k3a-ic.lg-light,[data-theme="dark"] .k3a .k3a-header.m .k3a-logo img.k3a-ic.lg-light,.k3a .k3a-side.v2.dark .k3a-home .k3a-logo img.k3a-ic.lg-light{display:none}
[data-theme="dark"] .k3a .k3a-home .k3a-wordmark.lg-dark,.k3a .k3a-side.v2.dark .k3a-home .k3a-wordmark.lg-dark,[data-theme="dark"] .k3a .k3a-home .k3a-logo img.k3a-ic.lg-dark,[data-theme="dark"] .k3a .k3a-header.m .k3a-logo img.k3a-ic.lg-dark,.k3a .k3a-side.v2.dark .k3a-home .k3a-logo img.k3a-ic.lg-dark{display:block}
.k3a .rail .k3a-home .k3a-wordmark.lg-dark,.k3a .rail .k3a-home .k3a-wordmark.lg-light,.k3a .k3a-portal.rail .k3a-home .k3a-wordmark.lg-dark,.k3a .k3a-portal.rail .k3a-home .k3a-wordmark.lg-light{display:none}
.k3a .rail .k3a-side.v2 .k3a-home .k3a-wordmark.lg-dark,.k3a .rail .k3a-side.v2 .k3a-home .k3a-wordmark.lg-light,.k3a .k3a-portal.rail .k3a-side.v2 .k3a-home .k3a-wordmark.lg-dark,.k3a .k3a-portal.rail .k3a-side.v2 .k3a-home .k3a-wordmark.lg-light,.k3a .rail .k3a-side.v2.dark .k3a-home .k3a-wordmark.lg-dark,.k3a .k3a-portal.rail .k3a-side.v2.dark .k3a-home .k3a-wordmark.lg-dark{display:none}
.k3a-portal.rail .k3a-side.v2 .k3a-home .k3a-wordmark.lg-dark,.k3a-portal.rail .k3a-side.v2 .k3a-home .k3a-wordmark.lg-light{display:none}
/* Masuk desktop: muat 1 layar — "Lupa kata sandi?" di baris label, jarak lebih rapat */
.k3a-auth-card .k3a-fm{position:relative}
.k3a-auth-card .k3a-fm>.k3a-forgot{position:absolute;right:0;top:0;padding:0;border:0;background:none;font:700 .8125rem/1.3 var(--font-display);color:var(--primary-strong,var(--primary,#1E7C78));cursor:pointer}
.k3a-auth-card .k3a-fm>.k3a-forgot:hover{text-decoration:underline}
@media (min-width:901px){
 .k3a-auth-card.fit.k3a-card{padding:28px 32px;gap:12px}
 .k3a-auth-card.fit .k3a-auth-terms{margin:0}
 .k3a-auth-card.fit .k3a-auth-help{min-height:0}
}
/* Alat prototype (isi otomatis/contoh) — di luar kartu form, di bawahnya */
.k3a-auth-col{display:grid;gap:var(--space-3);align-content:start;min-width:0}
.k3a-proto-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:0 4px}
.k3a-proto-bar>span{font:700 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute,#6B7674)}
.k3a-proto-btn{max-width:100%;padding:6px 12px;border:1.5px dashed var(--line-strong,#B5BFBD);border-radius:999px;background:transparent;font:600 12px/1.3 var(--font-display);color:var(--ink-mute,#5C6866);cursor:pointer;text-align:center}
.k3a-proto-btn:hover{color:var(--ink,#16191F);border-color:currentColor}
.k3a-proto-bar:not(:has(button)){display:none}
/* Pintasan auth (Lacak / Masuk) — daftar ringkas, bukan link bertumpuk */
.k3a-auth-links{display:grid;border:1px solid var(--line,#E3E8E7);border-radius:var(--radius-md,12px);background:var(--surface,#fff);overflow:hidden}
.k3a-auth-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 14px;text-decoration:none;font:500 14px/1.3 var(--font-display);color:var(--ink-mute,#5C6866)}
.k3a-auth-links a+a{border-top:1px solid var(--line,#E3E8E7)}
.k3a-auth-links b{display:inline-flex;align-items:center;gap:4px;font:700 14px/1.3 var(--font-display);color:var(--primary)}
.k3a-auth-links b::after{content:"›";font-size:18px;line-height:1}
.k3a-auth-links a:hover{background:var(--tosca-soft,#E6F4F2)}
.k3a-alert.rg-save{width:100%;box-sizing:border-box}
.rg-hp .rg-body>.k3a-alert.rg-save{margin-bottom:var(--space-3)}
/* Responsif saat panel detail terbuka / layar sempit: stat card 2 kolom, tombol footer panel boleh turun baris */
.k3a-portal .k3a-main{container-type:inline-size;container-name:k3main}
@container k3main (max-width:820px){.k3a-stats.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
.k3a-sheet-f{flex-wrap:wrap}
.k3a-sheet-f>.k3a-btn{flex:1 1 auto;min-width:0;white-space:normal;text-align:center}
/* Tab di dalam kartu tidak boleh keluar dari kartu: geser horizontal kalau tidak muat */
.k3a-card .k3a-tabs:not(.stick){max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.k3a-card .k3a-tabs:not(.stick)::-webkit-scrollbar{display:none}
.k3a-card .k3a-tabs:not(.stick)>*{flex:none}
/* Tab: tidak pernah meluber keluar kartu — bisa digeser (slide) ke samping saat sempit */
.k3a-tabs{flex-wrap:nowrap;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.k3a-tabs::-webkit-scrollbar{display:none}
.k3a-tabs>*{flex:none}
.k3a-main>*,.k3a-main .k3a-card{min-width:0;max-width:100%}
/* ===== RegistrationFlow (pendaftaran) — komponen halaman pendaftaran, dipindah dari CSS per halaman (audit DS 12 Okt 2026) ===== */
/* ----- StorePicker · pilih toko tujuan (Langkah 2) ----- */
.pk-sel{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;border:0;border-bottom:1px solid var(--line);background:var(--surface)}
.pk-sel:last-child{border-bottom:0}
.pk-sel b{display:block;font:700 14px/1.25 var(--font-display)}
.pk-sel small{font:500 13px/1.35 var(--font-display);color:var(--ink-mute)}
.pk-sel .no{flex:0 0 24px;height:24px;border-radius:50%;background:var(--primary-soft);color:var(--primary-strong);font:var(--text-badge);text-align:center}
.pk-sel .tx{flex:1;min-width:0}
.pk-sel .km{font:var(--text-badge);color:var(--ink-mute);white-space:nowrap}
.pk-empty{padding:16px;border:1px dashed var(--line-strong);border-radius:var(--radius-md);font:var(--text-body);color:var(--ink-mute);text-align:center}
.pk-sum{padding:12px 12px;border-radius:var(--radius-md);background:var(--primary-soft);color:var(--primary-strong);font:var(--text-body)}
.pk-ovl{position:fixed;left:0;top:0;right:0;bottom:0;z-index:200;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center}
.pk-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 16px 8px}
.pk-t{margin:0 0 3px;font:800 18px/1.2 var(--font-display)}
.pk-s{margin:0;font:var(--text-help);color:var(--ink-mute)}
.pk-x{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font:700 18px/1 var(--font-display);cursor:pointer;color:var(--ink-soft)}
.pk-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 16px 8px}
.pk-cnt{font:var(--text-button-sm)}
.pk-lnk{border:0;background:none;padding:8px 0;color:var(--primary);font:var(--text-button-sm);cursor:pointer}
.pk-mapwrap{flex:none;padding:0 16px 8px}
.pk-body{flex:1 1 auto;min-height:0;overflow:auto;padding:0 16px 12px}
.pk-lnks{display:flex;gap:16px;align-items:center}
@media (max-height:640px){.pk-map{height:130px}}
.pk-map{position:relative;height:210px;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background-color:var(--primary-soft);background-image:linear-gradient(rgba(22,25,31,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(22,25,31,.06) 1px,transparent 1px);background-size:26px 26px}
.pk-sea{position:absolute;left:10px;top:8px;font:var(--text-tag);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute)}
.pk-pin{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2px;padding:0;border:0;background:none;cursor:pointer;font-family:inherit}
.pk-pin .pt{width:16px;height:16px;border-radius:50%;background:var(--surface);border:2.5px solid var(--ink-mute);box-shadow:0 1px 2px rgba(16,32,40,.25)}
.pk-pin.on .pt{background:var(--primary);border-color:var(--primary-strong)}
.pk-pin .pl{padding:2px 4px;border-radius:var(--radius-sm);background:rgba(255,255,255,.88);font:var(--text-badge);white-space:nowrap;color:var(--ink)}
.pk-home{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2px}
.pk-home .hd{width:14px;height:14px;transform:rotate(45deg);background:var(--pink);border:2px solid var(--pink-ink);border-radius:3px}
.pk-home .pl{padding:2px 4px;border-radius:var(--radius-sm);background:var(--pink-soft);font:var(--text-badge);color:var(--pink-ink);white-space:nowrap}
.pk-leg{position:absolute;right:8px;bottom:8px;display:flex;gap:8px;padding:4px 8px;border-radius:var(--radius-sm);background:rgba(255,255,255,.9);font:var(--text-caption);color:var(--ink-soft)}
.pk-leg i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:-1px;background:var(--surface);border:2px solid var(--ink-mute)}
.pk-leg i.on{background:var(--primary);border-color:var(--primary-strong)}
.pk-leg i.hm{background:var(--pink);border-color:var(--pink-ink);border-radius:2px}
.pk-grp{margin-bottom:8px}
.pk-gh{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px 12px;margin:0 0 8px;border:0;border-radius:var(--radius-md);background:var(--surface-soft);font:var(--text-badge);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer;text-align:left}
.pk-gh .ar{display:inline-block;width:16px;color:var(--primary);font-style:normal}
.pk-gh .ct{color:var(--ink-mute)}
.pk-gh.warn{background:var(--danger-soft);color:var(--pink-ink)}
.pk-gh.warn .ar{color:var(--danger)}
.pk-gh .mn{margin-left:8px;padding:2px 8px;border-radius:var(--radius-sm);background:var(--yellow-soft);color:var(--yellow-ink);font-size:11px;font-style:normal;letter-spacing:.02em}
.pk-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;width:100%;padding:8px 12px;margin-bottom:8px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);text-align:left;font-family:inherit;cursor:pointer}
.pk-row.on{background:var(--primary-soft);border-color:var(--line-strong)}
.pk-row .ck{display:grid;place-items:center;width:22px;height:22px;border-radius:var(--radius-sm);border:1.5px solid var(--line-strong);background:var(--surface);font:var(--text-badge);color:var(--surface)}
.pk-row.on .ck{background:var(--primary);border-color:var(--primary)}
.pk-row b{display:block;font:700 14px/1.25 var(--font-display)}
.pk-row small{font:500 13px/1.3 var(--font-display);color:var(--ink-mute)}
.pk-row .km{font:var(--text-badge);color:var(--ink-soft);white-space:nowrap}
.pk-f{display:flex;gap:8px;padding:12px 16px 16px;border-top:1px solid var(--line);background:var(--surface)}
.pk-f .k3a-btn{flex:1 1 auto;justify-content:center;white-space:nowrap}
.pk-f .k3a-btn:first-child{flex:0 0 36%}
/* ----- ProductList · daftar & form produk (Langkah 3) ----- */
.pr-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.pr-head b{font:var(--text-h6)}
.pr-flash{padding:4px 8px;border-radius:var(--radius-pill);background:var(--success-soft);color:var(--success);font:var(--text-badge)}
.pr-empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:24px 16px;border:1.5px dashed var(--line-strong);border-radius:var(--radius-lg);background:var(--surface-soft)}
.pr-empty .big{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--yellow-soft);font:800 24px/1 var(--font-display);color:var(--yellow-ink)}
.pr-empty b{font:var(--text-h6)}
.pr-empty span{font:500 13px/1.45 var(--font-display);color:var(--ink-mute)}
.pr-item{position:relative;display:grid;gap:8px;padding:12px 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.pr-row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:start}
.pr-body{display:grid;gap:8px;min-width:0}
.pr-thumb{display:block;width:64px;height:64px;flex:none;border-radius:var(--radius-md);overflow:hidden;background:var(--surface-soft);border:1px solid var(--line)}
.pr-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.pr-thumb.empty{border-style:dashed;border-color:var(--line-strong)}
.pr-photo{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.pr-photo>span:nth-child(2){flex:1;min-width:0;font:700 14px/1.3 var(--font-display)}
.pr-photo small{display:block;margin-top:2px;font:var(--text-code);color:var(--ink-mute)}
.pr-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pr-top b{display:block;font:700 14px/1.25 var(--font-display)}
.pr-top small{font:500 13px/1.35 var(--font-display);color:var(--ink-mute)}
.pr-fix{display:grid;gap:8px;padding:8px 8px;border-radius:var(--radius-md);background:var(--danger-soft);font:600 13px/1.4 var(--font-display);color:var(--pink-ink)}
.pr-fixbtns{display:flex;flex-wrap:wrap;gap:8px}
.pr-del{justify-self:start;border:0;background:none;padding:0;font:var(--text-button-sm);color:var(--ink-mute);cursor:pointer;text-decoration:underline}
.pr-methods{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){.pr-methods{grid-template-columns:1fr}}
.pr-m{display:grid;gap:3px;text-align:left;padding:12px 12px;border:1.5px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface);cursor:pointer;font-family:inherit}
.pr-m b{font:700 14px/1.2 var(--font-display)}
.pr-m small{font:var(--text-caption);color:var(--ink-mute)}
.pr-m.on{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 3px rgba(30,124,120,.14)}
.pr-panel{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-soft)}
.pr-panel-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pr-panel-h b{font:var(--text-h6)}
.pr-x{border:0;background:none;font:var(--text-button-sm);color:var(--ink-mute);cursor:pointer;text-decoration:underline}
.pr-drop{display:grid;justify-items:center;gap:4px;padding:24px 16px;border:1.5px dashed var(--line-strong);border-radius:var(--radius-md);background:var(--surface);cursor:pointer;font-family:inherit;width:100%}
.pr-drop .ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--primary-soft);color:var(--primary-strong);font:800 18px/1 var(--font-display)}
.pr-drop b{font:700 14px/1.2 var(--font-display)}
.pr-drop small{font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
.pr-read{display:flex;align-items:center;gap:8px;padding:16px 16px;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--line);font:var(--text-body)}
.pr-spin{flex:none;width:18px;height:18px;border:2.5px solid var(--line-strong);border-top-color:var(--primary);border-radius:50%;animation:prs .8s linear infinite}
.pr-chips{display:flex;flex-wrap:wrap;gap:8px}
.pr-chip{padding:8px 16px;border:1.5px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface);font:700 13px/1.2 var(--font-display);color:var(--ink);cursor:pointer}
.pr-chip.on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-strong);box-shadow:0 0 0 3px rgba(30,124,120,.14)}
.pr-sublist{display:grid;gap:8px;max-height:210px;overflow-y:auto;overscroll-behavior:contain;padding:2px 8px 2px 2px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.pr-subrow{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left;padding:8px 12px;border:1.5px solid var(--line);border-radius:var(--radius-md);background:var(--surface);font:700 14px/1.2 var(--font-display);color:var(--ink);cursor:pointer}
.pr-subrow small{font:500 12px/1.2 var(--font-display);color:var(--ink-mute);text-align:right}
.pr-subrow:hover{border-color:var(--line-strong)}
.pr-sel{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:var(--radius-md);background:var(--primary-soft);border:1.5px solid var(--primary);font:700 14px/1.3 var(--font-display)}
.pr-sel small{font:500 13px/1.2 var(--font-display);color:var(--primary-strong)}
.pr-gal{display:grid;gap:8px}
.pr-ph2{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 8px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.pr-ph2 img{display:block;width:52px;height:52px;border-radius:var(--radius-sm);object-fit:cover;background:var(--surface-soft);grid-row:1/3}
.pr-ph2 .pm b{display:block;font:700 13px/1.25 var(--font-display);word-break:break-all}
.pr-ph2 .pm small{font:var(--text-code);color:var(--ink-mute)}
.pr-ph2 .pa{grid-column:2;display:flex;align-items:center;gap:12px}
.pr-ph2 select{min-width:0;flex:1;appearance:none;-webkit-appearance:none;padding:8px 32px 8px 12px;border:1.5px solid var(--line-strong);border-radius:var(--radius-md);font:600 13px/1.2 var(--font-display);color:var(--ink);cursor:pointer;background:var(--surface) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236B7076'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E") no-repeat right 12px center}
.pr-ph2 select:hover{border-color:var(--line-strong)}
.pr-ph2 select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(30,124,120,.14)}
.pr-main{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:var(--radius-sm);background:var(--primary-soft);color:var(--primary-strong);font:var(--text-badge)}
.pr-count{margin-left:8px;font:var(--text-badge);color:var(--ink-mute);text-transform:none;letter-spacing:0}
.pr-addrow{display:grid;gap:8px}
.pr-addrow input[type=file]{display:none}
.pr-ovl{position:fixed;left:0;top:0;right:0;bottom:0;z-index:200;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center}
.pr-dlg{width:100%;max-width:560px;height:auto;max-height:92vh;display:flex;flex-direction:column;background:var(--surface);border-radius:20px 20px 0 0;box-shadow:0 -10px 40px rgba(16,32,40,.25);overflow:hidden;font-family:var(--font-display);color:var(--ink)}
.pr-dlg-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 16px 12px;border-bottom:1px solid var(--line)}
.pr-dlg-h b{font:var(--text-card-title)}
.pr-dlg-h small{display:block;margin-top:2px;font:var(--text-label);color:var(--ink-mute)}
.pr-dlg-x{flex:none;border:0;background:none;font:500 28px/1 var(--font-display);color:var(--ink-mute);cursor:pointer;padding:0 2px}
.pr-dlg-b{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 16px;display:grid;gap:16px}
.pr-dlg-f{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);background:var(--surface)}
.pr-dlg-f .k3a-btn{flex:1;justify-content:center}
.pr-ph{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);font:var(--text-label)}
.pr-ph small{display:block;font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
.pr-acts{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.pr-edit{display:grid;gap:12px;padding:12px;border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface-soft)}
.pr-miss{margin-left:8px;padding:2px 8px;border-radius:var(--radius-sm);background:var(--danger-soft);color:var(--pink-ink);font:var(--text-badge);text-transform:none;letter-spacing:0}
.pr-edbtns{display:flex;gap:8px}
.pr-edbtns .k3a-btn{flex:1;justify-content:center}
/* ----- ReviewSummary · cek ulang (Langkah 4) ----- */
.rv-sec .rv-h{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.rv-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:var(--radius-sm);background:var(--primary-soft);color:var(--primary-strong)}
.rv-h b{font:var(--text-h6);flex:1}
.rv-cnt{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 8px;border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary-strong);font:var(--text-badge)}
.rv-dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font:500 14px/1.4 var(--font-display)}
.rv-dl dt{color:var(--ink-mute)}
.rv-dl dd{margin:0;font-weight:700}
.rv-dl dd.muted{font-weight:500;font-style:italic;color:var(--ink-mute)}
.rv-tko{margin:0;font:var(--text-body)}
.rv-tko.muted{font-weight:500;font-style:italic;color:var(--ink-mute)}
.rv-prods{display:grid;gap:8px}
.rv-prod{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.rv-no{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:var(--radius-pill);background:var(--ink);color:var(--surface);font:var(--text-badge)}
.rv-pb{flex:1;min-width:0}
.rv-pb b{display:block;font:700 14px/1.3 var(--font-display)}
.rv-pb small{font:var(--text-caption);color:var(--ink-mute)}
.rv-pt{flex:none;display:flex;align-items:center;gap:8px}
.rv-tag{padding:3px 8px;border-radius:var(--radius-pill);font:var(--text-badge)}
.rv-tag.dry{background:var(--yellow-soft);color:var(--yellow-ink)}
.rv-tag.fresh{background:var(--primary-soft);color:var(--primary)}
.rv-foto{padding:3px 8px;border-radius:var(--radius-pill);background:var(--line);color:var(--ink-mute);font:600 11px/1.2 var(--font-mono)}
.rv-kurs{display:grid;gap:8px;margin-bottom:8px}
.rv-kur{display:flex;align-items:flex-start;gap:8px}
.rv-pill{flex:none;padding:4px 12px;border-radius:var(--radius-pill);font:var(--text-badge);white-space:nowrap}
.rv-pill.tosca{background:var(--primary-soft);color:var(--primary-strong)}
.rv-pill.yellow{background:var(--yellow-soft);color:var(--yellow-ink)}
.rv-pill.mute{background:var(--line);color:var(--ink-mute)}
.rv-ktx{font:500 13px/1.45 var(--font-display);color:var(--ink-soft);padding-top:2px}
.rv-checks{display:grid;gap:12px}
.rv-chk{display:flex;align-items:flex-start;gap:8px}
.rv-mk{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:var(--radius-pill);font:var(--text-badge)}
.rv-mk.ok{background:var(--success-soft);color:var(--success)}
.rv-mk.no{background:var(--pink-soft);color:var(--pink-ink)}
.rv-mk.info{background:var(--yellow-soft);color:var(--yellow-ink)}
.rv-cb{flex:1}
.rv-cb b{display:block;font:700 13px/1.25 var(--font-display)}
.rv-cb small{font:500 13px/1.45 var(--font-display);color:var(--ink-mute)}
.rv-box{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0;padding:16px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:0 1px 2px rgba(16,32,40,.04)}
.rv-bh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.rv-bh b{font:var(--text-h6)}
.rv-s{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding-top:16px;border-top:1px solid var(--line)}
.rv-sh{display:flex;align-items:center;gap:8px;font:var(--text-badge)}
.rv-sh .k3a-link{margin-left:auto;font-size:13px}
.rv-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 8px;border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary-strong);font:var(--text-badge)}
.rv-box .rv-dl{grid-template-columns:auto minmax(0,1fr);gap:8px 16px;font:var(--text-help)}
.rv-box .rv-dl dd{overflow-wrap:anywhere}
.rv-box .rv-tko{font:600 13px/1.5 var(--font-display)}
.rv-ps{display:grid;gap:8px}
.rv-p{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.rv-th{flex:none;width:40px;height:40px;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-soft);border:1px solid var(--line)}
.rv-th img{width:100%;height:100%;object-fit:cover;display:block}
.rv-p .rb{flex:1;min-width:0}
.rv-p b{display:block;font:700 13px/1.25 var(--font-display)}
.rv-p small{font:var(--text-caption);color:var(--ink-mute)}
.rv-p .rv-tag{flex:none;padding:3px 8px;font-size:11px}
.rv-box .rv-kurs{margin-bottom:0}
.rv-more{border:1px dashed var(--line-strong);border-radius:var(--radius-md);background:var(--surface);padding:8px;font:700 13px/1.2 var(--font-display);color:var(--primary-strong);cursor:pointer;width:100%}
.rv-tga{border:0;background:none;padding:0;font:700 13px/1.2 var(--font-display);color:var(--primary-strong);cursor:pointer}
.rv-tg{display:flex;align-items:center;gap:8px;flex:1;min-width:0;border:0;background:none;padding:0;text-align:left;font:var(--text-badge);color:inherit;cursor:pointer}
.rv-chev{flex:none;display:inline-block;width:18px;text-align:center;font:700 16px/1 var(--font-display);color:var(--ink-mute);transition:transform .15s}
.rv-chev.on{transform:rotate(90deg);color:var(--primary-strong)}
.rv-sum{margin:0;min-width:0;font:var(--text-help);color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ----- RegistrationDetail · detail & status pendaftaran ----- */
.k3a-card.dt-no,.k3a-card.dt-card,.k3a-card.tl-card{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);padding:20px}
.k3a-card.dt-no{gap:var(--space-2);background:var(--primary-soft);box-shadow:none}
.dt-lab{font:var(--text-tag);text-transform:uppercase;color:var(--ink-mute)}
.dt-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.dt-big{font:600 28px/1.1 var(--font-mono);letter-spacing:.02em;color:var(--ink)}
.dt-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);font:var(--text-help);color:var(--ink-mute)}
.dt-help{margin:0;font:500 13px/1.5 var(--font-display);color:var(--ink-soft)}
.dt-h,.tl-hd{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}
.dt-h b,.tl-hd b{font:var(--text-h6);color:var(--ink)}
.dt-sec{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2);padding-top:var(--space-3);border-top:1px solid var(--line)}
.dt-sh-btn{display:flex;align-items:center;gap:var(--space-3);width:100%;min-width:0;min-height:40px;padding:0;border:0;background:none;text-align:left;font-family:inherit;color:inherit;cursor:pointer}
.dt-sh{flex:none;display:flex;align-items:center;gap:var(--space-2);font:var(--text-badge);color:var(--ink)}
.dt-cnt{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 var(--space-2);border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary-strong);font:var(--text-badge)}
.dt-sum{flex:1 1 0;width:0;min-width:0;font:500 13px/1.3 var(--font-display);color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.dt-chev{flex:none;display:inline-block;width:20px;text-align:center;font:700 16px/1 var(--font-display);color:var(--ink-mute);transition:transform .15s}
.dt-chev.on{transform:rotate(90deg);color:var(--primary-strong)}
.dt-body{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2);margin-top:var(--space-2)}
.dt-tko{margin:0;font:600 13px/1.5 var(--font-display);color:var(--ink)}
.dt-prods{display:grid;gap:var(--space-2)}
.dt-prod{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--surface-soft);box-shadow:inset 0 0 0 1px var(--line)}
button.dt-prod{width:100%;border:0;text-align:left;font-family:inherit;color:inherit;cursor:pointer}
button.dt-prod:hover{box-shadow:inset 0 0 0 1px var(--line-strong)}
.dt-prod .rb{flex:1;min-width:0}
.dt-prod b{display:block;font:700 13px/1.3 var(--font-display)}
.dt-prod small{font:var(--text-caption);color:var(--ink-mute)}
.dt-th{flex:none;width:40px;height:40px;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-soft);box-shadow:inset 0 0 0 1px var(--line)}
.dt-th img{display:block;width:100%;height:100%;object-fit:cover}
.dt-go{flex:none;font:700 16px/1 var(--font-display);color:var(--ink-mute)}
.tl-b{display:grid;gap:var(--space-1);min-width:0}
.tl-b .tt{font:var(--text-body-strong);color:var(--ink)}
.tl-b .ds{display:block;font:500 13px/1.45 var(--font-display);color:var(--ink-mute)}
.tl-smp,.tl-blk{display:grid;gap:var(--space-3);margin-top:var(--space-3)}
.ts-dest{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3);border:1px dashed var(--line-strong);border-radius:var(--radius-md);background:var(--surface-soft)}
.ts-dest .ic{flex:none;color:var(--primary-strong)}
.ts-dest b{font:var(--text-badge);letter-spacing:.03em;text-transform:uppercase;color:var(--ink-mute)}
.ts-dest .nm{margin:var(--space-1) 0 0;font:var(--text-badge);color:var(--ink)}
.ts-dest .ad{margin:0;font:500 12px/1.4 var(--font-display);color:var(--ink-soft)}
.ts-list,.vd-list{display:grid;gap:var(--space-2)}
.ts-row,.vd-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.vd-row{align-items:flex-start}
.ts-rb,.vd-row .rb{flex:1;min-width:0}
.ts-rb b,.vd-row b{display:block;font:700 13px/1.3 var(--font-display);color:var(--ink)}
.ts-rb small{font:500 12px/1.3 var(--font-display);color:var(--ink-mute)}
.vd-row small{display:block;margin-top:2px;font:var(--text-caption);color:var(--danger)}
.ts-note{margin:0;font:500 12px/1.4 var(--font-display);color:var(--ink-mute)}
.dm-bar{margin-top:var(--space-2);padding:var(--space-3);border:1.5px dashed var(--line-strong);border-radius:var(--radius-lg);background:var(--surface-soft)}
.dm-bar summary{cursor:pointer;font:700 13px/1.3 var(--font-display);color:var(--ink-mute)}
.dm-g{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
.dm-g .k3a-btn{margin:0}
.ts-lab{display:block;margin-bottom:var(--space-2);padding:0 2px;font:var(--text-field-label);color:var(--ink)}
.ts-lab .opt{margin-left:var(--space-1);font:var(--text-help);line-height:1;color:var(--ink-mute)}
.ts-phs{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.ts-phs .k3a-up{flex:1 1 100%;min-width:0}
.ts-ph{position:relative;width:68px;height:68px;border-radius:var(--radius-md);overflow:hidden;background:var(--surface-soft);box-shadow:inset 0 0 0 1px var(--line)}
.ts-ph img{display:block;width:100%;height:100%;object-fit:cover}
.ts-ph button{position:absolute;top:4px;right:4px;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--ink-fixed) 65%,transparent);color:var(--white);font:700 14px/24px var(--font-display);cursor:pointer}
.ts-hint{display:block;margin-top:var(--space-2);padding:0 2px;font:var(--text-help);color:var(--ink-mute)}
/* ----- SampleShipment · kirim sampel & label paket ----- */
.smp-list{display:grid;gap:var(--space-2)}
.smp-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.smp-row .th{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-md);background:var(--primary-soft);color:var(--primary-strong);font:var(--text-badge)}
.smp-row b{display:block;font:var(--text-body-strong);color:var(--ink)}
.smp-row small{font:var(--text-code);color:var(--ink-mute)}
.smp-addr{display:grid;gap:var(--space-2);justify-items:start;padding:var(--space-4);border-radius:var(--radius-lg);background:var(--primary-soft);box-shadow:inset 0 0 0 1.5px var(--primary)}
.smp-addr .who{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.smp-addr .who b{font:var(--text-h6);color:var(--ink)}
.smp-addr p{margin:0;font:500 14px/1.45 var(--font-display);color:var(--ink)}
.smp-addr .tel{font:600 13px/1.3 var(--font-mono);color:var(--ink-mute)}
.smp-addr .k3a-btn{margin-top:var(--space-1)}
.smp-btns{display:grid;gap:var(--space-2);justify-items:start}
.smp-form .smp-exp{display:none}
.smp-form:has(input[name=cara][value=exp]:checked) div.smp-exp{display:grid;gap:var(--field-gap,20px)}
.smp-form:has(input[name=cara][value=exp]:checked) p.smp-exp{display:block}
.smp-form .k3a-up .up-list{margin:0;padding:0;list-style:none}
.smp-form .k3a-st.pill{white-space:nowrap}
.smp-label{display:grid;gap:var(--space-3);padding:var(--space-4);border:2px dashed var(--ink-fixed);border-radius:var(--radius-sm);background:var(--white);color:var(--ink-fixed);font-family:var(--font-display)}
.smp-label small{display:block;margin-bottom:var(--space-1);font:var(--text-badge);letter-spacing:.08em;color:var(--ink-fixed);opacity:.75}
.smp-label .lb-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--space-2);border-bottom:2px solid var(--ink-fixed)}
.smp-label .lb-top b{font:var(--text-h6)}
.smp-label .lb-top span{font:var(--text-badge);letter-spacing:.08em}
.smp-label .lb-to b{display:block;font:800 20px/1.2 var(--font-display)}
.smp-label p{margin:2px 0 0;font:500 14px/1.4 var(--font-display)}
.smp-label .tel{font:600 13px/1.3 var(--font-mono)}
.smp-label .lb-from b{font:700 15px/1.3 var(--font-display)}
.smp-label .lb-no{padding:var(--space-2);border:2px solid var(--ink-fixed);border-radius:var(--radius-sm)}
.smp-label .lb-no b{font:800 18px/1.2 var(--font-mono);letter-spacing:.04em}
.smp-label ul{display:grid;gap:var(--space-1);margin:0;padding:0;list-style:none;font:var(--text-help)}
.smp-label li{display:flex;justify-content:space-between;gap:var(--space-3)}
.smp-label li i{font:var(--text-label);font-style:normal}
.smp-label .lb-foot{padding-top:var(--space-2);border-top:1px solid var(--ink-fixed);text-align:center;font:var(--text-badge);letter-spacing:.06em}
/* ----- AccountActivation · langkah aktivasi akun ----- */
.akv-steps{margin:0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:ak}
.akv-steps li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;font:500 14px/1.45 var(--font-display);color:var(--ink-soft)}
.akv-steps li::before{counter-increment:ak;content:counter(ak);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--primary-soft);color:var(--primary-strong);font:var(--text-badge)}
.akv-steps b{color:var(--ink)}
.akv-mail{display:grid;gap:8px;padding:16px 16px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);font:var(--text-body);color:var(--ink-soft)}
.akv-mail .hd{display:grid;gap:2px;padding-bottom:8px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-mute)}
.akv-mail .hd b{font:var(--text-h6);color:var(--ink)}
.akv-mail .cred{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;padding:12px 12px;border-radius:var(--radius-sm);background:var(--surface-soft)}
.akv-mail .cred span{color:var(--ink-mute)}
.akv-mail .cred code{font:var(--text-body);color:var(--ink);word-break:break-all}
.akv-cap{margin:0;font:var(--text-caption);color:var(--ink-mute)}
.akv-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.akv-rs{border:0;background:none;padding:0;font:700 13px/1.3 var(--font-display);color:var(--primary);cursor:pointer;text-decoration:underline}
.akv-rs.off{color:var(--ink-mute);cursor:default;text-decoration:none}
/* ----- ReviewSummary · area sentuh tombol buka/tutup >= 40px tanpa mengubah tata letak ----- */
.rv-tg,.rv-tga{position:relative}
.rv-tg::after,.rv-tga::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:40px;transform:translateY(-50%)}
/* Dialog celebrate: konfeti tidak membuat dialog bisa digulir; di web dialog tidak pernah menampilkan scrollbar */
.k3cb .cb-conf{overflow:hidden}
@media (min-width:641px){.k3cb .k3a-dlg.celebrate{overflow:hidden;scrollbar-width:none}.k3cb .k3a-dlg.celebrate::-webkit-scrollbar{display:none}}
/* Celebrate: ringkas */
.k3cb .cb-p{font:var(--text-body);max-width:36ch}
.k3cb .k3a-dlg.celebrate{gap:var(--space-2)}
.k3cb .cb-pop{width:140px;height:114px}
@media (max-width:640px){.k3cb .cb-h{font-size:24px}.k3cb .cb-pop{width:120px;height:98px}}
/* Daftar produk (Langkah 3): teks panjang tidak mendorong badge status keluar kartu di layar sempit */
.pr-top>span:first-child{min-width:0;flex:1;overflow-wrap:anywhere}
.pr-top>span:last-child{flex:none;white-space:nowrap}
.pr-top small{display:block}
.k3-info{position:relative;flex:none;margin-left:auto;width:22px;height:22px;border-radius:6px;cursor:help;font-size:0;color:transparent}
.k3-info::before{content:'';position:absolute;inset:3px;background:var(--ink-mute);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.8}
.k3-info:hover::before,.k3-info:focus-visible::before{background:var(--primary,#1e7c78);opacity:1}
.k3-info:focus-visible{outline:2px solid var(--primary,#1e7c78);outline-offset:1px}
.k3-info::after{content:attr(data-tip);position:absolute;z-index:80;right:-6px;top:30px;width:200px;padding:9px 11px;border-radius:10px;background:var(--ink,#1b1f23);color:#fff;font:500 12px/1.4 var(--font-display);text-align:left;box-shadow:var(--shadow-pop,0 8px 24px rgba(0,0,0,.2));opacity:0;visibility:hidden;transition:opacity .12s;pointer-events:none}
.k3-info:hover::after,.k3-info:focus-visible::after{opacity:1;visibility:visible}
.k3a-delta.nd{display:none}
/* ===== Lazy loading: Skeleton + Muat lebih banyak (LoadingStates) ===== */
@keyframes k3sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.k3a .k3a-skel{display:block;border-radius:var(--radius-md);background:linear-gradient(90deg,var(--surface-soft) 25%,var(--line) 50%,var(--surface-soft) 75%) 0 0/200% 100%;animation:k3sh 1.1s linear infinite}
.k3a .k3a-skel.line{height:12px;border-radius:6px}
.k3a .k3a-skel.line.sm{width:40%}
.k3a .k3a-skel.line.md{width:65%}
.k3a .k3a-skel.title{height:18px;width:50%;border-radius:6px}
.k3a .k3a-skel.circle{width:40px;height:40px;border-radius:50%}
.k3a .k3a-skel.block{height:96px}
.k3a .k3a-skel-row{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.k3a .k3a-skel-row .tx{flex:1;display:grid;gap:var(--space-2)}
@media (prefers-reduced-motion:reduce){.k3a .k3a-skel{animation:none}}
/* Footer "Muat lebih banyak": k3a-pg dengan tombol line sm di kanan; di HP tombol selebar layar */
.k3a .k3a-pg .k3a-btn.sm:disabled{opacity:.6;cursor:progress}
@media (max-width:640px){.k3a .k3a-pg:has(> .k3a-btn){flex-direction:column;align-items:stretch}.k3a .k3a-pg > .k3a-btn{width:100%}}
/* Alert inline: polos, menyatu dengan form/blok halaman (tanpa gelombang dan garis aksen; yang melayang tetap berhias) */
.k3a-alert:not(.pop){box-shadow:none;border:1px solid color-mix(in srgb,var(--al) 22%,transparent)}
.k3a-alert:not(.pop)::after{display:none}
/* Callout: panduan netral di dalam blok/form. Polos, tanpa tombol tutup; bukan status (itu Alert). */
.k3a-callout{--co:var(--primary);--co-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--surface-soft);border:1px solid var(--line);color:var(--ink-soft);font:500 13px/1.45 var(--font-display)}
.k3a-callout::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;background:var(--co);-webkit-mask:var(--co-ic) center/contain no-repeat;mask:var(--co-ic) center/contain no-repeat}
.k3a-callout .tx{flex:1;min-width:0}
.k3a-callout .tx b{display:block;margin-bottom:1px;font-weight:800;color:var(--ink)}
/* Callout: latar gradasi lembut + pola titik memudar di kanan (hiasan, tidak mengganggu teks) */
.k3a-callout{position:relative;overflow:hidden;isolation:isolate;border-color:color-mix(in srgb,var(--co) 16%,var(--line));background:linear-gradient(110deg,color-mix(in srgb,var(--co) 9%,var(--surface)) 0%,color-mix(in srgb,var(--co) 3%,var(--surface)) 55%,var(--surface) 100%)}
/* Callout: latar polos (pola titik dihapus) */
.k3a-callout.warn{--co:var(--yellow-ink);--co-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 2.4 17.5A2 2 0 0 0 4.1 20.5h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 17h.01'/%3E%3C/svg%3E")}
.k3a-callout.warn .tx b{color:var(--yellow-ink)}
[data-theme="dark"] .k3a-callout.warn{--co:var(--yellow)}
.k3a-callout>span{flex:1;min-width:0}
/* Memuat per komponen: bentuk komponen tetap, hanya isinya jadi kerangka.
   Beri aria-busy="true" pada komponen atau pembungkusnya. Teks jadi batang selebar teksnya, ikon/foto/grafik jadi blok. */
.k3a [aria-busy="true"] *:not(:has(*)):not(svg):not(svg *):not(img):not(.k3a-ic):not(.k3a-thumb):not(.k3a-chart-box){color:transparent!important;background:linear-gradient(90deg,var(--surface-soft) 25%,var(--line) 50%,var(--surface-soft) 75%) 0 0/200% 100%!important;animation:k3sh 1.1s linear infinite;border-radius:6px;border-color:transparent!important;box-shadow:none!important;text-shadow:none!important;pointer-events:none;user-select:none}
.k3a [aria-busy="true"] :is(small,b,span,i,em,strong,label,time,dt,dd,a):not(:has(*)):not(.k3a-ic):not(.k3a-thumb){width:fit-content;max-width:100%}
.k3a [aria-busy="true"] :is(td,th):not(:has(*)){background-clip:content-box!important}
.k3a [aria-busy="true"] :is(.k3a-ic,.k3a-thumb,.k3a-chart-box,.k3a-av){background:linear-gradient(90deg,var(--surface-soft) 25%,var(--line) 50%,var(--surface-soft) 75%) 0 0/200% 100%!important;animation:k3sh 1.1s linear infinite;border-color:transparent!important;box-shadow:none!important}
.k3a [aria-busy="true"] :is(.k3a-ic,.k3a-thumb,.k3a-chart-box,.k3a-av) > *{visibility:hidden}
.k3a [aria-busy="true"] svg:not(.k3a-ic svg):not(.k3a-thumb svg):not(.k3a-chart-box svg):not(button svg){background:linear-gradient(90deg,var(--surface-soft) 25%,var(--line) 50%,var(--surface-soft) 75%) 0 0/200% 100%;animation:k3sh 1.1s linear infinite;border-radius:var(--radius-md)}
.k3a [aria-busy="true"] svg:not(.k3a-ic svg):not(.k3a-thumb svg):not(.k3a-chart-box svg):not(button svg) > *{visibility:hidden}
.k3a [aria-busy="true"] img:not(.k3a-thumb img){visibility:hidden}
.k3a [aria-busy="true"] .dn .li i{background:var(--line)!important}
@media (prefers-reduced-motion:reduce){.k3a [aria-busy="true"] *{animation:none!important}}
.k3a [aria-busy="true"] .k3a-tl .p{filter:grayscale(1);opacity:.3;background:none!important;animation:none!important}
/* aria-busy: teks campuran (teks di samping elemen) ikut tersembunyi; baris/tile terpilih kembali netral */
.k3a [aria-busy="true"] *{color:transparent!important;text-shadow:none!important;caret-color:transparent}
.k3a [aria-busy="true"] :is(tr,.k3a-tile,.k3a-rc,.k3a-req):is(.sel,.go,.warn){background:transparent!important}
.k3a [aria-busy="true"] :is(select,button,input){pointer-events:none;opacity:.55}
.k3a [aria-busy="true"] .k3a-delta,.k3a [aria-busy="true"] .k3a-st{opacity:.6}
.k3a [aria-busy="true"] :is(tr.sel,tr.warn,tr.go) > :is(td,th):has(*){background:transparent!important}
/* Teks yang berdampingan dalam satu baris jadi SATU batang kerangka (.k3a-sk-one membungkus mereka); baris bertumpuk diberi jarak */
/* Kontrol segmen (.k3a-seg) dan tab dalam keadaan memuat: satu batang, bukan satu batang per tombol */
.k3a [aria-busy="true"] .k3a-seg{background:linear-gradient(90deg,var(--surface-soft) 25%,var(--line) 50%,var(--surface-soft) 75%) 0 0/200% 100%!important;animation:k3sh 1.1s linear infinite;border-color:transparent!important;box-shadow:none!important}
.k3a [aria-busy="true"] .k3a-seg > *{visibility:hidden;background:none!important;animation:none!important}
.k3a [aria-busy="true"] .k3a-cc .lg{background:linear-gradient(90deg,var(--surface-soft) 25%,var(--line) 50%,var(--surface-soft) 75%) 0 0/200% 100%!important;animation:k3sh 1.1s linear infinite;border-radius:6px;min-height:16px}
.k3a [aria-busy="true"] .k3a-cc .lg > *{visibility:hidden;background:none!important;animation:none!important}
.k3a [aria-busy="true"] .k3a-cc .lg{flex:0 0 auto!important;width:150px;margin-left:auto}
/* judul dan paragraf tetap satu baris sendiri (tidak berdampingan dengan label kecil di atasnya); legenda satu baris */
.k3a [aria-busy="true"] :is(h1,h2,h3,p):not(:has(*)){display:block;width:fit-content;min-width:6ch}
.k3a [aria-busy="true"] .k3a-cc .lg{align-self:flex-start;height:18px;min-height:0;margin-top:4px}
/* header kolom bukan data: tetap tampil biasa */
.k3a [aria-busy="true"] thead :is(th,th *):not(.q1):not(.q2):not(.q3):not(.q4):not(.q5){color:var(--ink-mute)!important;background:none!important;border-radius:0;animation:none!important;visibility:visible!important;opacity:1!important;pointer-events:none}
/* Portal: teks campuran (teks di samping elemen) jadi satu batang di induknya; teks berdampingan sebaris jadi satu batang (yang kedua dst. tanpa batang). Penanda dipasang lazy.js tanpa mengubah struktur halaman. */
.k3a [aria-busy="true"] [data-sk-leaf]{color:transparent!important;background:linear-gradient(90deg,var(--surface-soft) 25%,var(--line) 50%,var(--surface-soft) 75%) 0 0/200% 100%!important;animation:k3sh 1.1s linear infinite;border-radius:6px;border-color:transparent!important;box-shadow:none!important;width:fit-content;max-width:100%;pointer-events:none;user-select:none}
.k3a [aria-busy="true"] [data-sk-leaf] *:not(#_):not(#__),.k3a [aria-busy="true"] [data-sk-x]:not(#_):not(#__){background:none!important;animation:none!important;box-shadow:none!important}
.k3a [aria-busy="true"] [data-sk-leaf] *:not(#_):not(#__){visibility:hidden}
/* Tema di HP: ada di menu avatar di header */
.k3a-theme-lb{padding:var(--space-2) var(--space-4) var(--space-1);font:var(--text-tag);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.k3a-pop .k3a-theme{width:auto;margin:var(--space-1) var(--space-3) var(--space-3)}
/* Kartu statistik 2 kolom di HP: periode di bawah judul (rata kiri), isi tidak tersebar */
@media (max-width:640px){
  .k3a .k3a-stats.four .k3a-stat-h{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:2px}
  .k3a .k3a-stats.four .k3a-stat-h .k3a-per{margin-left:0;font:500 12px/1.3 var(--font-display)}
  .k3a .k3a-stats.four .k3a-stat{align-content:start;gap:var(--space-2)}
  .k3a .k3a-stats.four .k3a-stat small{min-height:0}
  .k3a .k3a-stats.four .k3a-stat-f{font:500 12px/1.4 var(--font-display)}
  /* warna teks kecil abu hanya untuk kartu putih; kartu berwarna (tint/wall) memakai warna teks kartunya (--tx) */
  .k3a .k3a-stats.four .k3a-stat:not(.tint):not(.wall) .k3a-stat-h .k3a-per,.k3a .k3a-stats.four .k3a-stat:not(.tint):not(.wall) .k3a-stat-f{color:var(--ink-mute)}
}
/* Tab yang bisa digeser di HP: sisi kanan memudar sebagai petunjuk masih ada tab lain; tab terakhir tetap utuh saat digeser sampai ujung */
@media (max-width:640px){.k3a-tabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:28px}}
/* FileUpload ringkas (.cp) dan FormProgress, 14 Okt 2026 */
.k3a-up.cp .dz{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:10px 14px;text-align:left}
.k3a-up.cp .dz .ic{width:36px;height:36px;margin:0;flex:none}
.k3a-up.cp .dz .ic svg{width:18px;height:18px}
.k3a-up.cp .dz b{font-size:13px}
.k3a-up.cp .dz small{display:none}
.k3a-prog{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);margin-bottom:16px}
.k3a-prog .pr-t{display:flex;justify-content:space-between;gap:8px;font:600 13px/1.4 var(--font-display);color:var(--ink)}
.k3a-prog .pr-t span{color:var(--ink-soft);font-weight:500}
.k3a-prog .pr-b{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.k3a-prog .pr-b i{display:block;height:100%;border-radius:inherit;background:var(--primary);transition:width .3s}
.k3a-prog.done .pr-b i{background:var(--success)}
.pz-later{float:right;border:0;background:none;padding:0;font:700 12px/1 var(--font-display);color:var(--primary);text-decoration:underline;cursor:pointer}
.k3a-fm.lt .k3a-up{display:none}
.k3a-fm.lt .pz-note{display:block}
.pz-note{display:none;font:500 12px/1.4 var(--font-display);color:var(--ink-soft);margin-top:4px}
.k3a .k3a-up .up-item input.up-cap{display:block;width:100%;height:auto;box-sizing:border-box;margin-top:6px;padding:7px 10px;border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface);font:500 15px/1.3 var(--font-display);color:var(--ink);box-shadow:none}
.k3a .k3a-up .up-item input.up-cap:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.iz-bar{display:grid;gap:10px;grid-template-columns:minmax(0,1fr);margin:16px 0 8px}
.iz-bar>*{min-width:0}
.iz-bar .k3a-tabs{max-width:100%;overflow-x:auto;scrollbar-width:none}
.iz-bar .k3a-tabs button{white-space:nowrap}
.iz-list{display:grid;gap:8px}
.iz-row{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:var(--space-3);row-gap:10px;align-items:start;padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.iz-row .k3a-thumb{grid-row:1/3}
.iz-row .k3a-thumb{width:44px;height:44px}
.iz-t{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 0}
.iz-t b{font:var(--text-body-strong)}
.iz-t small{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:500 12px/1.4 var(--font-display);color:var(--ink-soft)}
.iz-t small .k3a-st{font-size:12px}
.iz-na{font:var(--text-label);color:var(--ink-mute)}
.iz-r{grid-column:2;display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2) var(--space-3);min-width:0}
.iz-r .k3a-btn{margin-left:auto}
.iz-hk{}
.iz-more{justify-self:center}
.iz-empty{margin:8px 0;text-align:center;font:var(--text-help);color:var(--ink-soft)}
.iz-dh{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.iz-dh .k3a-thumb{width:52px;height:52px}
.iz-dh .iz-t small{display:block}
@media(max-width:520px){.iz-r{flex-direction:row;align-items:center}}
.k3a .pd-izin-f{grid-template-columns:minmax(0,1fr)}
.k3a .pd-izin-f .k3a-btn{margin-top:0;justify-self:start}
.k3a .pd-izin-f .ob-two2{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:var(--space-3)}
.k3a-up .up-sum[hidden]{display:none}
.k3a .ret-n{margin:6px 0 8px;padding:7px 10px;border-radius:var(--radius-md);background:var(--yellow-soft);color:var(--yellow-ink);font:600 12px/1.4 var(--font-display)}
.k3a .ret-list{display:grid;gap:8px;width:100%;max-width:440px;text-align:left}
.k3a .ret-row{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.k3a .ret-row .t{display:grid;gap:2px;min-width:0}
.k3a .ret-row small{color:var(--ink-soft);font-size:12px;line-height:1.4}
.k3a .pk-msg{display:flex;gap:6px;align-items:flex-start;margin-top:8px;color:var(--danger);font:600 13px/1.4 var(--font-display)}
/* Ukuran area unggah mengikuti mode: Single = baris kecil, Multi = kotak besar */
.k3a-up.single .dz{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:center;justify-items:start;padding:10px 14px;text-align:left}
.k3a-up.single .dz .ic{grid-row:1/3;grid-column:1;width:36px;height:36px;margin:0}
.k3a-up.single .dz .ic svg{width:18px;height:18px}
.k3a-up.single .dz b{grid-column:2;grid-row:1;font-size:13px}
.k3a-up.single .dz small{grid-column:2;grid-row:2;display:block;margin:0;white-space:normal}
.k3a-up.multi .dz{display:grid;justify-items:center;gap:var(--space-2);padding:28px 20px var(--space-5);text-align:center}
.k3a-up.multi .dz .ic{width:64px;height:64px;margin:0 0 var(--space-2)}
.k3a-up.multi .dz .ic svg{width:30px;height:30px}
.k3a-up.multi .dz b{font-size:14px}
.k3a-up.multi .dz small{display:block;margin:0;white-space:normal}
/* ===== Button v2 (redesign): varian primary/secondary/line/ghost/link/accent/danger(+soft), ukuran sm/md/lg, ikon, ikon-saja, memuat ===== */
.k3a-btn{--b-bg:var(--surface);--b-fg:var(--ink);--b-bd:transparent;--b-hv:var(--surface-soft);--b-on-danger:#fff;position:relative;gap:8px;border-radius:var(--radius-md);font:var(--text-button);letter-spacing:.005em;background:var(--b-bg);color:var(--b-fg);border:1px solid var(--b-bd);transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .1s}
[data-theme="dark"] .k3a-btn{--b-on-danger:#3c1a1a}
.k3a-btn svg{width:18px;height:18px;flex:none}
.k3a-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.k3a-btn:active{transform:translateY(1px) scale(.992)}
.k3a-btn.primary{--b-bg:var(--primary);--b-fg:var(--on-primary);--b-bd:var(--primary);box-shadow:var(--shadow-primary)}
.k3a-btn.primary:hover{background:var(--primary-strong);border-color:var(--primary-strong)}
.k3a-btn.primary:active{box-shadow:none}
.k3a-btn.secondary{--b-bg:var(--primary-soft);--b-fg:var(--primary-strong);--b-bd:transparent;box-shadow:none}
.k3a-btn.secondary:hover{background:color-mix(in srgb,var(--primary) 18%,var(--primary-soft))}
.k3a-btn.line{--b-bg:var(--surface);--b-fg:var(--ink);--b-bd:var(--line-strong);box-shadow:none}
.k3a-btn.line:hover{background:var(--surface-soft);border-color:var(--ink-mute)}
.k3a-btn.ghost{--b-bg:transparent;--b-fg:var(--primary);--b-bd:transparent;box-shadow:none}
.k3a-btn.ghost:hover{background:var(--primary-soft);color:var(--primary-strong)}
.k3a-btn.link{--b-bg:transparent;--b-fg:var(--primary);--b-bd:transparent;min-height:0;padding:2px 2px;border-radius:var(--radius-sm);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;box-shadow:none;font-weight:600}
.k3a-btn.link:hover{color:var(--primary-strong);background:transparent}
.k3a-btn.accent{--b-bg:var(--pink);--b-fg:#fff;--b-bd:var(--pink);box-shadow:0 6px 16px -6px rgba(233,30,99,.5)}
.k3a-btn.accent:hover{filter:brightness(.93)}
.k3a .k3a-btn.danger{--b-bg:var(--danger);--b-fg:var(--b-on-danger);--b-bd:var(--danger);box-shadow:none}
.k3a .k3a-btn.danger:hover{filter:brightness(.93)}
.k3a-btn.danger-soft{--b-bg:var(--danger-soft);--b-fg:var(--danger);--b-bd:transparent;box-shadow:none}
.k3a-btn.danger-soft:hover{filter:brightness(.97);border-color:var(--danger)}
.k3a-btn.sm{min-height:var(--control-h-sm);padding:0 14px;font-size:13px;gap:6px;box-shadow:none}
.k3a-btn.sm svg{width:16px;height:16px}
.k3a-btn.lg{min-height:var(--control-h-lg);padding:0 28px;font-size:16px}
.k3a-btn.ico{width:var(--control-h);min-width:var(--control-h);padding:0}
.k3a-btn.ico.sm{width:var(--control-h-sm);min-width:var(--control-h-sm)}
.k3a-btn.ico.lg{width:var(--control-h-lg);min-width:var(--control-h-lg)}
.k3a-btn.load{pointer-events:none;color:transparent!important}
.k3a-btn.load>*{opacity:0}
.k3a-btn.load::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2.5px solid var(--b-spin,rgba(255,255,255,.4));border-top-color:var(--b-spin-hd,#fff);animation:k3a-btn-spin .7s linear infinite}
.k3a-btn.load.secondary,.k3a-btn.load.line,.k3a-btn.load.ghost,.k3a-btn.load.danger-soft{--b-spin:var(--line-strong);--b-spin-hd:var(--primary)}
[data-theme="dark"] .k3a-btn.load.primary{--b-spin:rgba(6,32,29,.3);--b-spin-hd:#06201d}
@keyframes k3a-btn-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.k3a-btn.load::after{animation-duration:1.8s}}
.k3a-btn:disabled,.k3a-btn.off,.k3a-btn[aria-disabled=true]{background:var(--surface-soft);color:var(--ink-mute);border-color:var(--line);box-shadow:none;cursor:not-allowed;filter:none;transform:none}
.k3a-btn.link:disabled{background:transparent;border-color:transparent}
.k3a-btn-grp{display:inline-flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}
.k3a .k3a-btn.danger:disabled,.k3a .k3a-btn.danger.off{background:var(--surface-soft);color:var(--ink-mute);border-color:var(--line)}
[data-theme="dark"] .k3a .k3a-btn.danger:not(:disabled):not(.off){color:#3c1a1a}
/* ===== Gaya tombol standar = opsi C (Datar tegas): sudut 6px, tanpa bayangan, garis tinta ===== */
.k3a-btn{border-radius:6px;font-weight:600;letter-spacing:0;padding:0 18px}
.k3a-btn.primary,.k3a-btn.accent{box-shadow:none}
.k3a-btn.primary:hover{background:var(--primary-strong)}
.k3a-btn:active{transform:none;filter:brightness(.92)}
.k3a-btn.line{border-color:var(--ink)}
.k3a-btn.secondary{background:var(--surface-soft);color:var(--ink);border-color:var(--line)}
.k3a-btn.ico{padding:0}
.k3a-btn.link{padding:2px;border-radius:4px}
.k3a-btn.sm{border-radius:6px}
/* ===== Gaya tombol (tema): set data-btn="a|b|c|d|e" pada <html> atau wadah; tanpa atribut = gaya standar ===== */
/* A. Pil */
[data-btn="a"] .k3a-btn{border-radius:999px;padding:0 24px;box-shadow:none!important}
[data-btn="a"] .k3a-btn.sm{padding:0 18px}
[data-btn="a"] .k3a-btn.ico{padding:0}
[data-btn="a"] .k3a-btn.primary:hover{box-shadow:0 8px 18px -8px var(--primary)!important}
/* B. Chunky 3D */
[data-btn="b"] .k3a-btn{border-radius:14px;box-shadow:none!important;border-width:2px;border-bottom-width:4px;font-weight:800;letter-spacing:.02em;text-transform:none}
[data-btn="b"] .k3a-btn.primary{border-color:var(--primary-strong)}
[data-btn="b"] .k3a-btn.secondary{border-color:color-mix(in srgb,var(--primary) 35%,transparent)}
[data-btn="b"] .k3a-btn.accent{border-color:#a3124a}
[data-btn="b"] .k3a-btn.danger{border-color:color-mix(in srgb,var(--danger) 65%,#000)}
[data-btn="b"] .k3a-btn.line{border-color:var(--line-strong)}
[data-btn="b"] .k3a-btn.ghost,[data-btn="b"] .k3a-btn.link{border:2px solid transparent}
[data-btn="b"] .k3a-btn:active{transform:translateY(2px);border-bottom-width:2px}
/* C. Datar tegas */
[data-btn="c"] .k3a-btn{border-radius:6px;box-shadow:none!important;font-weight:600;padding:0 18px;letter-spacing:0}
[data-btn="c"] .k3a-btn.primary:hover{background:var(--primary-strong)}
[data-btn="c"] .k3a-btn:active{transform:none;filter:brightness(.92)}
[data-btn="c"] .k3a-btn.line{border-color:var(--ink)}
[data-btn="c"] .k3a-btn.secondary{background:var(--surface-soft);color:var(--ink);border-color:var(--line)}
/* D. Garis merek */
[data-btn="d"] .k3a-btn{border-radius:10px;box-shadow:none!important;overflow:hidden;font-weight:800}
[data-btn="d"] .k3a-btn.primary::after,[data-btn="d"] .k3a-btn.accent::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--pink) 0 33.3%,#ffc928 33.3% 66.6%,#3ccbb8 66.6%)}
[data-btn="d"] .k3a-btn.primary,[data-btn="d"] .k3a-btn.accent{padding-bottom:3px}
[data-btn="d"] .k3a-btn.accent{--b-bg:var(--ink-fixed);--b-bd:var(--ink-fixed);color:#fff}
[data-btn="d"] .k3a-btn.line{border-width:1.5px;border-color:var(--primary);color:var(--primary-strong)}
/* E. Lembut + glow */
[data-btn="e"] .k3a-btn{border-radius:18px;font-weight:700;box-shadow:none!important}
[data-btn="e"] .k3a-btn.sm{border-radius:14px}
[data-btn="e"] .k3a-btn.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 82%,#fff),var(--primary));border-color:transparent;box-shadow:0 10px 22px -10px var(--primary),inset 0 1px 0 rgba(255,255,255,.28)!important}
[data-btn="e"] .k3a-btn.accent{background:linear-gradient(180deg,#ff4f8a,var(--pink));border-color:transparent;box-shadow:0 10px 22px -10px var(--pink),inset 0 1px 0 rgba(255,255,255,.3)!important}
[data-btn="e"] .k3a-btn.line{border-color:transparent;background:var(--surface);box-shadow:0 1px 2px rgba(22,25,31,.14),0 0 0 1px var(--line)!important}
[data-btn="d"] .k3a-btn.primary:disabled::after,[data-btn="d"] .k3a-btn.accent:disabled::after{display:none}
[data-btn="d"] .k3a-btn.load::after{background:none;top:0;bottom:0;left:0;right:0;height:18px}
[data-btn="e"] .k3a-btn:disabled,[data-btn="e"] .k3a-btn.off{background:var(--surface-soft);color:var(--ink-mute);border-color:var(--line);box-shadow:none!important}
.k3a-btn.k3a-btn:disabled,.k3a-btn.k3a-btn.off,.k3a-btn.k3a-btn[aria-disabled=true]{background:var(--surface-soft);color:var(--ink-mute);border-color:var(--line);box-shadow:none;filter:none}
.k3a-btn.k3a-btn.link:disabled{background:transparent;border-color:transparent}
.k3a-auth .k3a-callout .tx>span{display:block;color:var(--ink-soft)}
.k3a-callout .tx>div,.k3a-callout>.tx{flex:1;min-width:0}
/* ===== FormGrid, FormLayout, BlockCard ===== */
.k3a-fg{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3);align-items:start;min-width:0}
.k3a-fg.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.k3a-fg.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.k3a-fg.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.k3a-fg.sm{grid-template-columns:minmax(0,150px) minmax(0,1fr)}
.k3a-fg.tight{gap:var(--space-2)}
.k3a-fg>.span{grid-column:1/-1}
@media(max-width:640px){.k3a-fg.c2,.k3a-fg.c3,.k3a-fg.c4,.k3a-fg.sm{grid-template-columns:minmax(0,1fr)}}
@media(min-width:641px) and (max-width:900px){.k3a-fg.c3,.k3a-fg.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.k3a-fl{display:grid;gap:var(--space-4);width:100%;max-width:760px;min-width:0}
.k3a-fl.wide{max-width:1040px}
.k3a-fl-head{display:grid;gap:var(--space-1)}
.k3a-fl-head h1{margin:0;font:var(--text-page-title);letter-spacing:-.02em;color:var(--ink)}
.k3a-fl-head p{margin:0;font:500 14px/1.45 var(--font-display);color:var(--ink-mute)}
.k3a-fl-acts{display:flex;justify-content:flex-end;align-items:center;gap:var(--space-2);flex-wrap:wrap;padding-top:var(--space-3);border-top:1px solid var(--line)}
.k3a-fl-acts .note{margin-right:auto;font:var(--text-help);color:var(--ink-mute)}
.k3a-fl.sticky .k3a-fl-acts{position:sticky;bottom:0;z-index:5;margin:0 calc(var(--space-4)*-1);padding:var(--space-3) var(--space-4);background:var(--surface);box-shadow:0 -6px 16px -10px rgba(22,25,31,.25)}
@media(max-width:640px){.k3a-fl-acts{flex-direction:column-reverse;align-items:stretch}.k3a-fl-acts .k3a-btn{width:100%}.k3a-fl-acts .note{margin:0;text-align:center}}
.k3a-blk{display:grid;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);min-width:0}
.k3a-blk-h{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--line)}
.k3a-blk-h h2,.k3a-blk-h h3{margin:0;font:var(--text-card-title);letter-spacing:-.01em;color:var(--ink)}
.k3a-blk-h small{display:block;margin-top:2px;font:var(--text-help);color:var(--ink-mute)}
.k3a-blk-h .st{flex:none}
.k3a-blk-b{display:grid;gap:var(--space-3);min-width:0}
.k3a-blk-f{display:flex;justify-content:flex-end;gap:var(--space-2);flex-wrap:wrap;padding-top:var(--space-3);border-top:1px solid var(--line)}
.k3a-blk.err{border-color:var(--danger)}
.k3a-blk.done{border-color:color-mix(in srgb,var(--success) 40%,var(--line))}
.k3a-blk.flat{border:0;padding:0;background:transparent}
@media(max-width:640px){.k3a-blk{padding:var(--space-4)}.k3a-blk-f .k3a-btn{flex:1}}
/* MiniTable: tabel ringkas dalam kartu, garis tipis antarbaris (sama dengan tabel lain) */
.k3a .k3a-table.mini{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.k3a .k3a-table.mini th{padding:10px 14px;background:var(--surface-soft);border-bottom:1px solid var(--line);font:700 12px/1.3 var(--font-display);color:var(--ink-mute);text-align:left;white-space:nowrap}
.k3a .k3a-table.mini td{padding:11px 14px;background:transparent;border-bottom:1px solid var(--line);border-radius:0;font:500 13px/1.35 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums}
.k3a .k3a-table.mini tbody tr:last-child td{border-bottom:0}
.k3a .k3a-table.mini tbody tr:hover td{background:var(--surface-soft)}
.k3a .k3a-table.mini th.num,.k3a .k3a-table.mini td.num{text-align:right}
.k3a .k3a-table.mini td:first-child{font-weight:700}
.k3a .k3a-table.mini .k3a-low{display:inline-block;padding:2px 8px;border-radius:var(--radius-pill);background:var(--danger-soft);color:var(--danger);font-weight:800}
/* CopyButton: tombol salin kecil (ikon + label), berubah hijau "Tersalin" sesaat */
.k3a-copy{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;min-height:var(--control-h-sm);padding:0 12px 0 10px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--ink-soft);font:var(--text-button-sm);cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,color .12s}
.k3a-copy .ic{width:16px;height:16px;flex:none}
.k3a-copy .ic.ok{display:none}
.k3a-copy:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.k3a-copy:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.k3a-copy:active{transform:translateY(1px)}
.k3a-copy.done,.k3a-copy.done:hover{border-color:var(--success);background:var(--success-soft);color:var(--success)}
.k3a-copy.done .ic.cp{display:none}
.k3a-copy.done .ic.ok{display:inline-block}
.k3a-copy.ico{width:var(--control-h-sm);padding:0}
.k3a-copy.ico .lb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Hanya-baca (.ro) dan nonaktif (.dis) dari DS */
.k3a .k3a-fm.dis>label,.k3a .k3a-fm.dis .help,.k3a .k3a-fm.dis .st,.k3a .k3a-fm.dis .lead{color:var(--ink-mute)}
.k3a .k3a-fm.dis .box,.k3a .k3a-fm.dis.wh .box,.k3a .k3a-fm.dis .box:hover{background:var(--surface-soft);box-shadow:inset 0 0 0 1.5px var(--line);cursor:not-allowed}
.k3a .k3a-fm.dis input,.k3a .k3a-fm.dis select,.k3a .k3a-fm.dis textarea{color:var(--ink-mute);-webkit-text-fill-color:var(--ink-mute);background:transparent;cursor:not-allowed}
.k3a .k3a-fm.dis input::placeholder,.k3a .k3a-fm.dis textarea::placeholder{color:var(--ink-mute);opacity:.8}
.k3a .k3a-fm.ro .box,.k3a .k3a-fm.ro.wh .box,.k3a .k3a-fm.ro .box:hover,.k3a .k3a-fm.ro .box:focus-within{background:var(--surface-soft);box-shadow:inset 0 0 0 1.5px var(--line);border-radius:var(--radius-md)}
.k3a .k3a-fm.ro .box:focus-within{box-shadow:inset 0 0 0 2px var(--ink-mute)}
.k3a .k3a-fm.ro input,.k3a .k3a-fm.ro input[readonly],.k3a .k3a-fm.web.ro input[readonly],.k3a .k3a-fm.ro textarea{color:var(--ink);cursor:default;background:transparent}
.k3a .k3a-fm.ro .st{color:var(--ink-mute)}
/* Isian dan unggah ringkas: ukuran konsisten dengan DS (token input/help/label) */
.k3a .k3a-fm.web textarea{font-size:15px}
.k3a .k3a-fm .help,.k3a .k3a-fm .msg{font-size:13px;line-height:1.4}
.k3a .k3a-fm .opt{font:var(--text-help)}
@media (max-width:640px){.k3a .k3a-up .up-item input.up-cap,.k3a .k3a-side-search input{font-size:16px}}
.k3a-up.multi.cp .dz,.k3a-up.single.cp .dz{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--space-3);min-height:0;padding:10px 14px;text-align:left}
.k3a-up.multi.cp .dz .ic,.k3a-up.single.cp .dz .ic{width:36px;height:36px;margin:0;flex:none}
.k3a-up.multi.cp .dz .ic svg{width:18px;height:18px}
.k3a-up.multi.cp .dz b{font:var(--text-label)}
.k3a-up.multi.cp .dz small{display:none}
.iz-hk{align-items:center}
/* DetailPanel: tab Rincian/Riwayat */
.k3a-dp [hidden]{display:none!important}
.k3a-dp .dp-groups,.k3a-dp .dp-tabs,.k3a-dp .k3a-tl{flex:none;min-height:max-content}
.k3a-dp .dp-grid dt{font:var(--text-caption);color:var(--ink-mute)}
/* DetailPanel Rincian: tanpa kotak, antargrup cukup garis pemisah */
.k3a-dp .dp-groups{border:0;border-radius:0;background:none;overflow:visible}
.k3a-dp .dp-groups .dp-g{padding:var(--space-4) 0;border-top:0}
.k3a-dp .dp-groups .dp-g:first-child{padding-top:var(--space-1)}
.k3a-dp .dp-groups .dp-g:last-child{padding-bottom:0}
.k3a-dp .dp-groups .dp-g+.dp-g{border-top:1px solid var(--line)}
.k3a-dp .dp-groups .dp-g>:is(h4,.dp-grid,.dp-chips,.dp-cmp,.dp-quote,p,dl){padding-left:0;padding-right:0}
.k3a-dp .dp-groups .dp-g>h4{padding-top:0}
.k3a-dp .dp-groups .dp-g>:is(.dp-grid,.dp-chips,.dp-cmp,.dp-quote,p,dl):last-child{padding-bottom:0}
.k3a-dp .dp-groups .dp-delta{display:inline-flex;margin-top:var(--space-1)}
.k3a-dp .dp-groups .dp-delta{margin-left:0}
/* RegistrationFlow: gaya yang dulu ditulis per halaman pendaftaran (audit 19 Okt 2026) */
/* Consent */
.tnc-ck{display:grid;gap:10px}
.tnc-l{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--primary);text-decoration:underline;cursor:pointer}
.tnc-b{max-height:min(56vh,420px);overflow:auto;text-align:left;padding-right:6px;display:grid;gap:6px}
/* Sesi2 */
.pk{width:100%;max-width:560px;height:90vh;max-height:760px;display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:var(--shadow-pop);overflow:hidden;font-family:var(--font-display);color:var(--ink)}
@media (min-width:700px){.pk-ovl{align-items:center}.pk{border-radius:var(--radius-xl);height:86vh}}
.rg-hp .pk-sels{display:grid;gap:0;max-height:clamp(240px,calc(100dvh - 480px),440px);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.rg-hp .pk-ovl{box-sizing:border-box;align-items:flex-end;padding-top:var(--sb,0px);padding-bottom:var(--hi,0px)}
.rg-hp .pk-ovl .pk{height:calc(100vh - var(--sb,0px) - var(--hi,0px) - 8px);max-height:none;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.k3a.rg:not(.rg-hp) .pk-sels{display:grid;gap:0;max-height:clamp(112px,calc(100dvh - 570px),320px);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
/* Sesi3 */
@keyframes prs{to{transform:rotate(360deg)}}
.rg-hp .pr-list{display:grid;gap:8px}
.rg-hp .pr-more{justify-self:stretch;margin-top:8px;min-height:44px;border:1.5px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface);font:var(--text-button-sm);color:var(--ink);cursor:pointer}
.rg-hp .pr-more:hover{background:var(--surface-soft)}
.rg-hp .pr-ovl{align-items:flex-end;padding-top:var(--sb,0px);padding-bottom:var(--hi,0px)}
.rg-hp .pr-dlg{max-height:calc(100vh - var(--sb,0px) - var(--hi,0px) - 8px)}
.k3a.rg:not(.rg-hp) .pr-list{display:grid;gap:8px;align-content:start;grid-auto-rows:max-content;max-height:572px;overflow-y:auto;overscroll-behavior:contain;padding:2px 8px 2px 2px;margin-right:-8px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.k3a.rg:not(.rg-hp) .pr-cands{align-content:start;grid-auto-rows:max-content;max-height:268px;overflow-y:auto;overscroll-behavior:contain;padding:2px 8px 2px 2px;margin-right:-8px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.k3a.rg:not(.rg-hp) .pr-cands::-webkit-scrollbar{width:6px}
.k3a.rg:not(.rg-hp) .pr-cands::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--radius-sm)}
.k3a.rg:not(.rg-hp) .pr-list::-webkit-scrollbar{width:6px}
.k3a.rg:not(.rg-hp) .pr-list::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--radius-sm)}
.k3a.rg:not(.rg-hp) .pr-ovl{align-items:center}
.k3a.rg:not(.rg-hp) .pr-dlg{border-radius:var(--radius-xl);height:auto;max-height:90vh}
/* DetailPendaftaran */
.k3a-auth-col{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);min-width:0}
.k3a-auth-col>*{min-width:0}
.k3a-tl.nt li{grid-template-columns:18px minmax(0,1fr)}
.k3a-tl.nt li.soon .p::before{border-color:var(--line-strong)}
.k3a-tl.nt li.soon .tt{color:var(--ink-mute)}
.k3a-tl.nt li.soon:not(:last-child) .p::after,.k3a-tl.nt li.now:not(:last-child) .p::after{background:var(--line)}
.dp-sheet .k3a-sheet-b{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
.k3a-scrim.center .k3a-sheet.dp-sheet{width:min(560px,100%);height:auto;max-height:calc(100vh - 48px)}
.pd-img{display:grid;place-items:center;height:220px;border-radius:var(--radius-md);overflow:hidden;background:var(--surface-soft);box-shadow:inset 0 0 0 1px var(--line)}
.pd-img img{display:block;width:100%;height:100%;object-fit:contain}
/* Sampel */
@media print{body:has(.smp-label) *{visibility:hidden!important}body:has(.smp-label) .smp-label,body:has(.smp-label) .smp-label *{visibility:visible!important}html:has(.smp-label),body:has(.smp-label){height:auto!important;max-height:100vh!important;overflow:hidden!important}body:has(.smp-label) .smp-label{position:fixed;left:0;top:0;width:100%;margin:0;box-shadow:none;break-inside:avoid}}
/* Bantuan isian berwarna peringatan */
.k3a .k3a-fm .help.warn{color:var(--yellow-ink)}
/* AccountActivation: kepala sukses */
.akv-hero{text-align:center;padding:var(--space-1) 0 var(--space-2)}
.akv-hero .ic{width:56px;height:56px;margin:0 auto 10px;border-radius:var(--radius-pill);background:var(--success-soft);color:var(--success);display:grid;place-items:center}
.akv-hero .t{margin:0;font:var(--text-card-title);color:var(--ink)}
.akv-hero .s{margin:6px 0 0;font:var(--text-body);color:var(--ink-soft)}
/* Kelas pengganti style inline di halaman pendaftaran */
.rg-col{display:grid;gap:var(--space-4);min-width:0;align-content:start}
.k3a.k3a-auth.hp{width:100%;max-width:393px;margin:0 auto}
.k3a-radios>legend+.rg-hint{margin-top:calc(var(--space-2) * -1)}
p.rg-lbl{margin:var(--space-1) 0 0}
.ts-dest .ad-to{margin-top:6px}
.ts-dest .ad-to b{display:inline;font:var(--text-badge);text-transform:none;letter-spacing:0;color:var(--ink)}
.rv-s.first{border-top:0;padding-top:0}
.pr-edbtns{margin-top:var(--space-2)}
.k3a-sheet-f.end{justify-content:flex-end}
.k3a-dlg.tnc-dlg{max-width:560px;width:calc(100vw - 32px)}
.k3a-dlg.tnc-dlg .ttl{text-align:left}
.pr-addrow>.k3a-up{flex:1;min-width:0}
.k3a-alert.pk-inset{margin:0 var(--space-4) var(--space-2)}
.k3a .k3a-dlg .tnc-b h3,.tnc-b h3{margin:10px 0 0;font:var(--text-body-strong);letter-spacing:0;color:var(--ink)}
.k3a .k3a-dlg .tnc-b p,.tnc-b p{margin:0;font:500 13px/1.55 var(--font-display);color:var(--ink-soft)}
/* Pendaftaran HP: pas di layar (gutter 16px, judul 24px, tanpa bingkai kartu) */
.rg-hp .rg-body{padding:var(--space-2) var(--space-4) 40px}
.k3a.rg.rg-hp .rg-form{border:0;box-shadow:none;padding:var(--space-2) 0 0}
.rg-hp .rg-head{gap:var(--space-2);margin-bottom:var(--space-1)}
.rg-hp .rg-head h2{font-size:24px;line-height:1.15}
.rg-hp .rg-stepof{font:var(--text-tag);letter-spacing:.06em}
.rg-hp .rg-prog i{height:4px}
.k3a-auth.hp .k3a-auth-h1{font-size:24px}
/* Daftar produk (Langkah 3) di HP: nama dan status di samping foto, keterangan dan aksi selebar kartu */
.rg-hp .pr-row{grid-template-columns:56px minmax(0,1fr);grid-template-areas:"th nm" "th st" "ds ds" "fx fx" "ac ac";column-gap:var(--space-3);row-gap:6px;align-items:start}
.rg-hp .pr-row>.pr-thumb{grid-area:th;width:56px;height:56px}
.rg-hp .pr-body,.rg-hp .pr-top,.rg-hp .pr-top>span:first-child{display:contents}
.rg-hp .pr-top b{grid-area:nm;align-self:end}
.rg-hp .pr-top>span:last-child{grid-area:st;justify-self:start;align-self:start}
.rg-hp .pr-top small{grid-area:ds;margin-top:var(--space-1)}
.rg-hp .pr-row .pr-fix{grid-area:fx}
.rg-hp .pr-row .pr-acts{grid-area:ac;margin-top:var(--space-1)}
/* OptionGroup .flow: pilihan pendek (1 baris, tanpa keterangan) di layar sempit tidak ditumpuk satu per baris;
   kartu selebar teksnya, mengalir sebaris dan membagi sisa ruang. Desktop tetap kolom (c2/c3). */
.k3a .k3a-og.flow .oc .tx b{white-space:nowrap}
@media (max-width:560px){
 .k3a .k3a-og.flow{display:flex;flex-wrap:wrap}
 .k3a .k3a-og.flow .oc{flex:1 1 auto;width:auto;gap:var(--space-2);padding:var(--space-2) var(--space-3)}
}
.rg-hp .k3a-og.flow{display:flex;flex-wrap:wrap}
.rg-hp .k3a-og.flow .oc{flex:1 1 auto;width:auto;gap:var(--space-2);padding:var(--space-2) var(--space-3)}
/* Label dengan "(opsional)" setinggi label biasa, agar kotak isian sejajar dalam satu baris */
.k3a .k3a-fm label .opt{line-height:1}
/* Field (HP dan desktop): label isian --text-field-label 14px, jarak antarfield --field-gap 20px, keterangan dan pesan sejajar label */
.k3a .k3a-fm .help,.k3a .k3a-fm .msg{padding:0 2px}
.rg-lbl .opt,.rg-opt{line-height:1}
.rg-form,.k3a.rg .rg-form{row-gap:var(--field-gap,20px)}
.k3a-fg,.k3a .k3a-fg{row-gap:var(--field-gap,20px);column-gap:var(--space-4)}
.k3a-blk-b,.k3a .k3a-blk-b{row-gap:var(--field-gap,20px)}
.pr-dlg-b,.k3a-auth-sec{gap:var(--field-gap,20px)}
.k3a .k3a-scrim:not(.full):not(.full-dlg) .k3a-sheet-b:has(>.k3a-fm,>.k3a-fg,>fieldset,>.rg-field,>.k3a-catpick,>sc-if>.k3a-fm,>sc-if>.k3a-fg),.k3a-scrim:not(.full):not(.full-dlg) .k3a-sheet-b:has(>.k3a-fm,>.k3a-fg,>fieldset,>.rg-field,>.k3a-catpick,>sc-if>.k3a-fm,>sc-if>.k3a-fg){row-gap:var(--field-gap,20px)}
.k3a .rg-hint,.k3a .k3a-help{padding-left:2px;padding-right:2px}
.k3a-fg.tight,.k3a .k3a-fg.tight{gap:var(--space-2)}
.k3a .pf-neg .pf-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--field-gap,20px) var(--space-4)}
@media (max-width:640px){.k3a .pf-neg .pf-two{grid-template-columns:1fr}}
/* Langkah 1: cari alamat (hasil di bawah kolom cari) dan pin yang bisa dipindah dengan ketuk */
.rg-map{cursor:crosshair}
.rg-map .pin{transition:left .25s ease,top .25s ease}
.rg-find{display:grid;gap:var(--space-2)}
.rg-find-list{display:grid;overflow:hidden;border-radius:var(--radius-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-sm)}
.rg-find-row{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:var(--space-3);min-height:var(--control-h-lg);padding:var(--space-2) var(--space-3);border:0;border-top:1px solid var(--line);background:transparent;text-align:left;font-family:inherit;color:var(--ink);cursor:pointer}
.rg-find-row:first-child{border-top:0}
.rg-find-row:hover,.rg-find-row:focus-visible{background:var(--surface-soft);outline:none}
.rg-find-row svg{width:20px;height:20px;color:var(--primary)}
.rg-find-row b{display:block;font:var(--text-body-strong);color:var(--ink)}
.rg-find-row small{display:block;font:var(--text-help);color:var(--ink-mute)}
.rg-find-empty{margin:0;padding:0 2px;font:var(--text-help);color:var(--ink-mute)}
/* Header otomatis (HP): menempel, sembunyi saat gulir turun, muncul saat gulir naik, sembunyi saat dialog terbuka (lib autohide.js) */
.k3a-autohide{position:sticky;top:var(--sb,0px);z-index:20;transition:transform .25s ease,box-shadow .2s ease;will-change:transform}
.k3a-autohide.ah-hide,html.k3a-dlg-open .k3a-autohide{transform:translateY(calc(-100% - var(--sb,0px) - 4px));box-shadow:none}
@media (prefers-reduced-motion:reduce){.k3a-autohide{transition:none}}
.k3a-nav.fixed.k3a-autohide-b{transition:transform .25s ease;will-change:transform}
.k3a-nav.fixed.k3a-autohide-b.ah-hide,html.k3a-dlg-open .k3a-nav.fixed.k3a-autohide-b{transform:translate(-50%,calc(100% + var(--hi,0px) + 8px));box-shadow:none}
@media (prefers-reduced-motion:reduce){.k3a-nav.fixed.k3a-autohide-b{transition:none}}
/* FilterChips .track: chip di atas jalur surface-soft, untuk latar putih (kartu, sheet, form). Chip aktif putih + bayangan, jumlah primary; tidak aktif tanpa latar, jumlah di lingkaran putih. */
.k3a-chips.track{gap:var(--space-1);padding:var(--space-1);border-radius:var(--radius-lg);background:var(--surface-soft)}
.k3a-chips.track.scroll{flex-wrap:nowrap;overflow-x:auto;border-radius:var(--radius-pill)}
.k3a-chips.track .k3a-chip{flex:none}
.k3a-chips.track .k3a-chip:hover:not(.on){background:color-mix(in srgb,var(--surface) 55%,transparent)}
.k3a-chips.track .k3a-chip:not(.on) i{background:var(--surface)}
.k3a-chips .k3a-chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--primary)}
.k3a-chips .k3a-chip.on:focus-visible{box-shadow:var(--shadow-sm),0 0 0 2px var(--primary)}
/* DataControls HP (.hp): pill selebar layar; Periode dan Perbarui otomatis berbagi ruang sama rata, tombol perbarui di ujung kanan */
.k3a-datactl.hp{width:100%}
.k3a-datactl.hp .dc-pill{display:flex;flex:1 1 100%;width:100%;min-width:0}
.k3a-datactl.hp .dc-pill>.k3a-msel{flex:1 1 0;min-width:0}
.k3a-datactl.hp .dc-pill>.k3a-msel+.k3a-msel{margin-left:2px;padding-left:2px;border-left:1px solid var(--line)}
.k3a-datactl.hp .dc-pill .k3a-msel-btn{width:100%}
.k3a-datactl.hp .dc-pill .k3a-msel-btn .v{flex:1 1 auto;min-width:0;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}
.k3a-datactl.hp .dc-ref{flex:none}
/* FileUpload: label dokumen sejajar label field */
.k3a .k3a-fm>.rg-lbl{padding:0 2px}
/* PORTAL WAVE A: lonceng + popover notifikasi disembunyikan (memlog 622, ONB-7.06 AC6). Kelas k3-notif-off dipasang header.js selama Wave A; Wave B tidak memasangnya. */
.k3-notif-off .k3a-hbtn[data-hd="n"],.k3-notif-off .k3a-pop[data-hd-for="n"]{display:none!important}
/* Mode (tema) di menu avatar HP: satu baris seperti item menu, kontrol ikon saja */
.k3a .k3a-pop .k3a-theme-row,.k3a-pop .k3a-theme-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-1) var(--space-2) var(--space-1) var(--space-3);min-height:44px}
.k3a-theme-row .lb{display:flex;align-items:center;gap:var(--space-3);font:600 14px/1 var(--font-display);color:var(--ink-soft)}
.k3a-theme-row .lb svg{color:var(--ink-mute);flex:none}
.k3a-pop .k3a-theme.ic,.k3a-theme.ic{width:auto;margin:0;flex:none;grid-template-columns:repeat(3,36px)}
.k3a-theme.ic button{height:30px;padding:0}
.k3a-theme.ic button svg{width:16px;height:16px}
/* LineAreaCard: plot dengan label HTML (teks dan garis tidak ikut membesar) */
.k3a .k3a-cc svg:not(.cc-svg){max-width:480px;margin-inline:auto}
.k3a .k3a-cc .cc-plot{--cc-h:240px;display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-rows:var(--cc-h) auto;gap:var(--space-2) var(--space-2);min-width:0}
@media (max-width:700px){.k3a .k3a-cc .cc-plot{--cc-h:200px}}
.k3a .k3a-cc .cc-y{display:flex;flex-direction:column;justify-content:space-between;text-align:right;font:var(--text-caption);color:var(--ink-mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.k3a .k3a-cc .cc-y span{display:block;height:14px;line-height:14px}
.k3a .k3a-cc .cc-area{position:relative;margin:7px 0;min-width:0}
.k3a .k3a-cc .cc-plot svg.cc-svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;overflow:visible}
.k3a .k3a-cc .cc-plot svg .gl{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.k3a .k3a-cc .cc-plot svg .ln{fill:none;stroke:var(--primary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.k3a .k3a-cc .cc-plot svg .ar{stroke:none}
.k3a .k3a-cc .cc-plot svg stop{stop-color:var(--primary)}
.k3a .k3a-cc .cc-pt,.k3a .k3a-cc .cc-hit .d{position:absolute;box-sizing:border-box;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--surface);border:2px solid var(--primary);pointer-events:none}
.k3a .k3a-cc .cc-pt.k{border-color:var(--pink)}
.k3a .k3a-cc .cc-pt.now{background:var(--primary);border-color:var(--surface);box-shadow:0 0 0 1px var(--primary)}
.k3a .k3a-cc .cc-hit{position:absolute;top:0;bottom:0;outline:none}
.k3a .k3a-cc .cc-hit .d{left:50%;opacity:0}
.k3a .k3a-cc .cc-hit::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed var(--ink-mute);opacity:0}
.k3a .k3a-cc .cc-hit .cc-tip{position:absolute;z-index:2;top:-4px;left:50%;transform:translate(-50%,-100%);display:grid;gap:2px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--ink);color:var(--surface);font:var(--text-caption);font-weight:700;white-space:nowrap;box-shadow:var(--shadow-pop);opacity:0;pointer-events:none;transition:opacity .12s}
.k3a .k3a-cc .cc-hit .cc-tip small{font:inherit;font-weight:500;opacity:.8}
.k3a .k3a-cc .cc-hit.l .cc-tip{left:0;transform:translate(0,-100%)}
.k3a .k3a-cc .cc-hit.r .cc-tip{left:auto;right:0;transform:translate(0,-100%)}
.k3a .k3a-cc .cc-hit:hover .d,.k3a .k3a-cc .cc-hit:focus-visible .d,.k3a .k3a-cc .cc-hit:hover::before,.k3a .k3a-cc .cc-hit:focus-visible::before,.k3a .k3a-cc .cc-hit:hover .cc-tip,.k3a .k3a-cc .cc-hit:focus-visible .cc-tip{opacity:1}
.k3a .k3a-cc .cc-hit:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.k3a .k3a-cc .cc-x{grid-column:2;position:relative;height:14px;font:var(--text-caption);color:var(--ink-mute);font-variant-numeric:tabular-nums}
.k3a .k3a-cc .cc-x span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;line-height:14px}
/* Field: satu cincin fokus untuk .k3a-in dan .k3a-select (tanpa outline :focus-visible global) */
.k3a-in:focus,.k3a-in:focus-visible,.k3a-select:focus,.k3a-select:focus-visible,.k3a .k3a-in:focus,.k3a .k3a-in:focus-visible,.k3a .k3a-select:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--primary)}
/* TableComplete: jarak baris alat di dalam kartu */
.k3a-card>.k3a-tool:not(.stick-in){padding:var(--space-3) 0}
/* DateField: tanggal diketik dd/mm/yyyy dan ikon kalender */
.k3a .k3a-fm input[data-datefield]{font-variant-numeric:tabular-nums}
.k3a .k3a-fm .df-pick{position:absolute;right:0;bottom:0;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none;overflow:hidden}
/* FormGrid: sc-if dan sc-for tidak membentuk sel */
.k3a-fg>sc-if,.k3a-fg>sc-for{display:contents}
/* FileUpload: status OCR satu baris di bawah slot */
.k3a .ocr-st{display:flex;align-items:center;gap:var(--space-2);font:600 12px/1.4 var(--font-display);color:var(--ink-soft)}
.k3a .ocr-st.ok{color:var(--success)}
.k3a .ocr-st svg{flex:none}
.k3a .ocr-sp{animation:ocrsp .8s linear infinite}
@keyframes ocrsp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.k3a .ocr-sp{animation:none}}
.k3a .up-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-1) var(--space-3);min-height:20px}
.k3a .up-meta .ocr-slot{flex:1 1 0;min-width:0;min-height:20px;display:flex;align-items:center;overflow:hidden}
.k3a .up-meta .ocr-slot .ocr-st{margin-top:0;min-width:0;white-space:nowrap}
.k3a .up-meta .ocr-slot .ocr-st>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.k3a .up-meta .pt-link{margin-left:auto}
@media(max-width:640px){.k3a .up-meta .ocr-slot{flex-basis:100%}.k3a .up-meta .pt-link{margin-left:0}}
/* Consent: Sebelum mulai (satu persetujuan di awal) */
.k3a .tnc-pre .tnc-pts{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.k3a .tnc-pre .tnc-pts li{display:flex;gap:var(--space-3);align-items:flex-start;font:var(--text-body);color:var(--ink-soft)}
.k3a .tnc-pre .tnc-pts svg{flex:none;margin-top:2px;color:var(--primary)}
.k3a .tnc-pre .tnc-acts{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between;margin-top:var(--space-4)}
.k3a .tnc-pre.err{outline:2px solid var(--danger);outline-offset:0}
.k3a .tnc-pre .msg{display:flex;gap:var(--space-2);align-items:flex-start;margin-top:var(--space-3);color:var(--danger);font:600 13px/1.4 var(--font-body)}
.k3a .tnc-done{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;font:var(--text-body);color:var(--ink-soft)}
.k3a .tnc-done svg{flex:none;color:var(--success)}
.k3a .tnc-stmt{margin:0;font:var(--text-body);color:var(--ink-soft)}
.k3a .k3a-up.is-locked{opacity:.55;cursor:pointer}
/* SearchableSelect: dropdown yang bisa dicari */
.k3a .k3a-ss .ss-wrap{position:relative}
.k3a .k3a-ss .box{cursor:text}
.k3a .k3a-ss .ss-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + var(--space-1));margin:0;padding:var(--space-1);list-style:none;max-height:260px;overflow:auto;background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow-pop),inset 0 0 0 1px var(--line)}
.k3a .k3a-ss .ss-list[hidden]{display:none}
.k3a .k3a-ss .ss-opt{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-h);padding:0 var(--space-3);border-radius:var(--radius-sm);font:var(--text-body);color:var(--ink);cursor:pointer}
.k3a .k3a-ss .ss-opt.act,.k3a .k3a-ss .ss-opt:hover{background:var(--surface-soft)}
.k3a .k3a-ss .ss-opt.sel{font-weight:700}
.k3a .k3a-ss .ss-ck{flex:none;color:var(--primary)}
.k3a .k3a-ss .ss-empty{padding:var(--space-3);color:var(--ink-mute);font:var(--text-body)}
/* ReviewDialog: Periksa sekali lagi */
.k3a .rv-sub{margin:0 0 var(--space-3);color:var(--ink-soft);font:var(--text-body)}
.k3a .rv-list{display:grid;gap:var(--space-2)}
.k3a .rv-row{display:flex;gap:var(--space-3);align-items:center;justify-content:space-between;padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.k3a .rv-row .t{display:grid;gap:2px;min-width:0}
.k3a .rv-row small{color:var(--ink-mute);font:var(--text-label)}
.k3a .rv-row b{font:var(--text-body);font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.k3a .k3a-fm .help.off{display:none}
/* PhotoTips: contoh foto yang jelas */
.k3a .pt-link{padding:0;border:0;background:none;color:var(--primary);font:var(--text-label);font-weight:600;cursor:pointer;text-decoration:none}
.k3a .pt-link:hover{text-decoration:underline}
.k3a .pt-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}
.k3a .pt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
@media(max-width:640px){.k3a .pt-grid{grid-template-columns:minmax(0,1fr)}}
.k3a .pt-fig{margin:0;display:grid;gap:var(--space-2);align-content:start}
.k3a .pt-img{aspect-ratio:8/5;border-radius:var(--radius-md);overflow:hidden;background:var(--surface-soft);box-shadow:inset 0 0 0 1px var(--line)}
.k3a .pt-img svg{width:100%;height:100%;display:block}
.k3a .pt-fig.ok .pt-img{box-shadow:inset 0 0 0 2px var(--success)}
.k3a .pt-fig.bad .pt-img{box-shadow:inset 0 0 0 2px var(--danger)}
.k3a .pt-fig figcaption{display:grid;gap:2px}
.k3a .pt-fig figcaption b{font:var(--text-body);font-weight:700;color:var(--ink)}
.k3a .pt-fig.ok figcaption b{color:var(--success)}
.k3a .pt-fig.bad figcaption b{color:var(--danger)}
.k3a .pt-fig figcaption span{color:var(--ink-soft);font:var(--text-label)}
.k3a .pt-tip{margin:var(--space-3) 0 0;color:var(--ink-soft);font:var(--text-body)}
.k3a .k3a-up .up-warn{display:block;margin-top:2px;color:var(--yellow-ink);font:var(--text-label)}
[data-theme="dark"] .k3a .k3a-up .up-warn{color:var(--yellow)}
/* FieldTypes: tombol salin di bawah isian dan centang kartu lengkap */
.k3a .k3a-fm .fm-tools{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.k3a .k3a-card-head h2 .cd-ok{margin-left:var(--space-2);vertical-align:-3px;color:var(--success)}
/* SideMenu: tombol lipat hanya menampilkan ikon dari header.js */
.k3a-side-tg>svg:not([data-k3ic]){display:none}
/* DetailList: nilai sebaris */
.k3a-dl.one dd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;min-width:0}
/* SampleConfirm: isian konfirmasi sampel per produk */
.ts-pk{display:grid;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-lg);background:var(--surface-soft)}
.ts-pk .ts-f{display:grid;gap:var(--space-3)}
.ts-pk .ts-f2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-3)}
@media (max-width:420px){.ts-pk .ts-f2{grid-template-columns:minmax(0,1fr)}}
/* Captcha: pemeriksaan bukan robot */
.k3a-cap{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.k3a-cap .bx{flex:none;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:var(--radius-sm);background:var(--surface);box-shadow:inset 0 0 0 2px var(--line-strong);color:transparent;font:800 14px/1 var(--font-display);cursor:pointer}
.k3a-cap .bx:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.k3a-cap.ok .bx{background:var(--primary);box-shadow:none;color:var(--on-primary);cursor:default}
.k3a-cap .tx{flex:1;min-width:0;font:var(--text-body-strong);color:var(--ink)}
.k3a-cap .tx small{display:block;font:var(--text-help);color:var(--ink-mute)}
/* Produk: pilihan tambah produk satu cara */
.pr-methods.one{grid-template-columns:minmax(0,1fr)}
/* Auth: kalimat persetujuan dan tombol prototipe aktif */
.k3a-auth-hint.c{text-align:center}
.k3a-auth-hint a{color:var(--primary);font-weight:700;text-decoration:underline}
.k3a-proto-btn.on{border-style:solid;border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
/* LocationPicker: kartu ringkas dan pemilih lokasi */
.k3a-loccard,.lp-scrim{--lp-land:color-mix(in srgb,var(--primary) 5%,var(--canvas));--lp-water:color-mix(in srgb,var(--tosca) 30%,var(--surface));--lp-park:color-mix(in srgb,var(--success) 16%,var(--surface));--lp-road:var(--surface);--lp-toll:color-mix(in srgb,var(--yellow) 55%,var(--surface))}
.lc-map,.lp-bg{--lp-x:0px;--lp-y:0px;background-color:var(--lp-land);background-image:linear-gradient(0deg,transparent calc(50% - 5px),var(--lp-toll) calc(50% - 5px),var(--lp-toll) calc(50% + 5px),transparent calc(50% + 5px)),linear-gradient(90deg,transparent calc(50% - 4px),var(--lp-toll) calc(50% - 4px),var(--lp-toll) calc(50% + 4px),transparent calc(50% + 4px)),linear-gradient(90deg,transparent calc(50% - 1.5px),var(--lp-road) calc(50% - 1.5px),var(--lp-road) calc(50% + 1.5px),transparent calc(50% + 1.5px)),linear-gradient(0deg,transparent calc(50% - 1.5px),var(--lp-road) calc(50% - 1.5px),var(--lp-road) calc(50% + 1.5px),transparent calc(50% + 1.5px)),radial-gradient(circle at 30% 40%,var(--lp-park) 0 34px,transparent 35px),radial-gradient(ellipse at 70% 70%,var(--lp-water) 0 70px,transparent 71px);background-size:100% 560px,720px 100%,96px 100%,100% 84px,390px 330px,770px 620px;background-position:0 var(--lp-y),var(--lp-x) 0,var(--lp-x) 0,0 var(--lp-y),var(--lp-x) var(--lp-y),var(--lp-x) var(--lp-y)}
.lp-pin{box-sizing:border-box;position:absolute;z-index:2;left:50%;top:50%;width:22px;height:22px;margin:-27px 0 0 -11px;border:2.5px solid var(--white);border-radius:50% 50% 50% 0;background:var(--pink);transform:rotate(-45deg);box-shadow:var(--shadow-sm);transition:margin-top .15s ease;pointer-events:none}
.lp-pin::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--white)}
.lp-pin.lift{margin-top:-37px}
.lp-map::before,.lc-map::before{content:"";position:absolute;z-index:1;left:50%;top:50%;width:12px;height:5px;margin:-2px 0 0 -6px;border-radius:50%;background:color-mix(in srgb,var(--ink) 28%,transparent);pointer-events:none}
.k3a-loccard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3);align-items:center;min-width:0;padding:var(--space-3);border-radius:var(--radius-lg);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.k3a-loccard.err{box-shadow:inset 0 0 0 1.5px var(--danger)}
.k3a-loccard .lc-map{position:relative;width:84px;height:68px;overflow:hidden;border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--line)}
.k3a-loccard .lc-map .lp-pin{width:16px;height:16px;margin:-20px 0 0 -8px;border-width:2px}
.k3a-loccard .lc-map .lp-pin::after{width:5px;height:5px;margin:-2.5px 0 0 -2.5px}
.k3a-loccard .lc-tx{display:grid;gap:2px;min-width:0}
.k3a-loccard .lc-tx b{font:var(--text-body-strong);color:var(--ink);overflow-wrap:anywhere}
.k3a-loccard .lc-tx span{font:var(--text-help);color:var(--ink-mute);overflow-wrap:anywhere}
.k3a-loccard .lc-btn{grid-column:1/-1;justify-content:center}
.k3a-loccard.web{grid-template-columns:auto minmax(0,1fr) auto}
.k3a-loccard.web .lc-btn{grid-column:auto}
.k3a-loccard.empty .lc-map{opacity:.7}
.k3a-loccard.empty .lc-map .lp-pin,.k3a-loccard.empty .lc-map::before{display:none}
.k3a-loccard.empty .lc-tx b{color:var(--ink-soft)}
.k3a-scrim.lp-scrim .k3a-sheet.lp-sheet{overflow:hidden}
.k3a-scrim.lp-web .k3a-sheet.lp-sheet{width:min(800px,100%);max-width:100%;height:auto;max-height:calc(100vh - 32px)}
.lp-sheet .lp-h{flex:none;border-bottom:1px solid var(--line)}
.lp-sheet .lp-b{display:flex;flex-direction:column;gap:var(--space-3);flex:1 1 auto;min-height:0;padding:var(--space-4) var(--space-5);overflow-y:auto}
.lp-sheet .lp-f{flex:none}
.lp-sr{position:relative;flex:none}
.lp-hits{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;max-height:280px;overflow:auto;border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-pop)}
.lp-hits[hidden],.lp-alt-f[hidden],.lp-addr .msg[hidden]{display:none}
.lp-hits .rg-find-empty{padding:var(--space-3)}
.lp-map{position:relative;flex:none;height:clamp(300px,calc(100vh - 400px),480px);overflow:hidden;border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--line);touch-action:none;cursor:grab;outline-offset:2px}
.lp-map.moving{cursor:grabbing}
.lp-map:focus-visible{outline:2px solid var(--primary)}
.lp-bg{position:absolute;inset:0}
.lp-lbls{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.lp-lbl{position:absolute;transform:translate(-50%,-50%);font:600 12px/1.2 var(--font-display);letter-spacing:.04em;color:color-mix(in srgb,var(--ink-mute) 80%,transparent);white-space:nowrap;text-shadow:0 0 3px var(--lp-land),0 0 6px var(--lp-land)}
.lp-lbl.city{font-size:13px;font-weight:800;color:var(--ink-soft)}
.lp-loc{position:absolute;z-index:3;right:var(--space-3);bottom:var(--space-3);gap:var(--space-2);box-shadow:var(--shadow-sm)}
.lp-toast{position:absolute;z-index:3;left:50%;top:var(--space-3);transform:translateX(-50%);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:var(--surface);box-shadow:var(--shadow-sm);font:var(--text-help);color:var(--ink);opacity:0;pointer-events:none;transition:opacity .15s}
.lp-toast.on{opacity:1}
.lp-addr{display:grid;gap:2px;flex:none;min-width:0}
.lp-addr b{font:var(--text-body-strong);color:var(--ink)}
.lp-addr span{font:var(--text-help);color:var(--ink-mute)}
.lp-addr span.warn{color:var(--yellow-ink)}
.lp-addr .msg{display:flex;gap:6px;color:var(--danger)}
.lp-alt{display:grid;gap:var(--space-3);flex:none}
.lp-alt-b{justify-self:start;padding:0;border:0;background:none;font:700 14px/1.3 var(--font-display);color:var(--primary);text-align:left;text-decoration:underline;cursor:pointer}
.lp-alt-f{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.lp-ok:disabled{opacity:.5;cursor:not-allowed}
.k3a-scrim.lp-hp{align-items:stretch;padding:var(--sb,env(safe-area-inset-top,0px)) 0 var(--hi,0px)}
.k3a-scrim.lp-hp .k3a-sheet.lp-sheet{width:100%;max-width:none;height:100%;max-height:none;border-radius:0;padding-bottom:0}
.lp-hp .lp-h{padding:var(--space-3) var(--space-4)}
.lp-hp .lp-b{padding:var(--space-3) var(--space-4);overflow-y:auto}
.lp-hp .lp-map{flex:1 1 auto;height:auto;min-height:240px}
.lp-hp .lp-f{padding:var(--space-3) var(--space-4) var(--space-4)}
/* MapSelect: daftar dulu di HP, peta layar penuh, panel responsif di web */
.k3a-mapsel{--ms-mapbar:150px}
.k3a-mapsel[data-snap="map"]{--ms-h:var(--ms-mapbar)}
.k3a-mapsel[data-snap="map"] :is(.ms-list,.ms-foot,.ms-head small,.ms-step,.ms-handle){display:none}
.k3a-mapsel .ms-head .ms-acts{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-1)}
.k3a-mapsel .ms-head .ms-acts .k3a-btn{margin-right:0;gap:var(--space-2)}
.k3a-mapsel .ms-viewmap{white-space:nowrap}
.k3a-mapsel button.ms-ic{padding:0;font:inherit}
@media (max-width:1100px){div.k3a-mapsel.web{--ms-panel:380px}}
@media (max-width:900px){div.k3a-mapsel.web{--ms-panel:340px}div.k3a-mapsel.web .ms-sheet{left:var(--space-3);top:var(--space-3);bottom:var(--space-3)}div.k3a-mapsel.web .ms-intro h2{font-size:22px}}
/* Stats: tiga kartu (gelombang A tanpa Pencairan berikutnya) */
.k3a-stats.four.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@container k3main (max-width:820px){.k3a-stats.four.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container k3main (max-width:560px){.k3a-stats.four.three{grid-template-columns:repeat(2,minmax(0,1fr))}.k3a-stats.four.three>:first-child{grid-column:1/-1}}
@media (max-width:700px){.k3a-stats.four.three{grid-template-columns:1fr 1fr}.k3a-stats.four.three>:first-child{grid-column:1/-1}}
/* MapSelect: toko tujuan (mode daftar dan mode peta, peta Leaflet, kartu toko) */
.stm{--ms-land:color-mix(in srgb,var(--primary) 5%,var(--canvas));--ms-water:color-mix(in srgb,var(--tosca) 30%,var(--surface));--ms-park:color-mix(in srgb,var(--success) 16%,var(--surface));--ms-road:var(--surface);--ms-road-edge:color-mix(in srgb,var(--ink) 10%,transparent);--ms-toll:color-mix(in srgb,var(--yellow) 55%,var(--surface))}
/* peta Leaflet (OpenStreetMap) */
.stm .k3a-stmap{position:absolute;inset:0;z-index:1;background:var(--ms-land);outline:0}
.stm .k3a-stmap.leaflet-container{font-family:var(--font-display);font-size:12px}
.stm .k3a-stmap.sm-off{display:none}
.stm .k3a-stmap .leaflet-control-attribution{padding:1px 6px;background:color-mix(in srgb,var(--surface) 86%,transparent);font:11px/1.5 var(--font-display);color:var(--ink-soft)}
.stm .k3a-stmap .leaflet-control-attribution a{color:var(--primary)}
.stm .k3a-stmap .leaflet-bar{border:0;border-radius:var(--radius-md);box-shadow:var(--shadow-pop);overflow:hidden}
.stm .k3a-stmap .leaflet-bar a{width:36px;height:36px;line-height:36px;background:var(--surface);color:var(--ink);border-bottom-color:var(--line)}
.stm .k3a-stmap .leaflet-tooltip{padding:3px 8px;border:0;border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);font:var(--text-badge)}
.stm .k3a-stmap .leaflet-tooltip-top::before{display:none}
[data-theme="dark"] .stm .leaflet-tile-pane{filter:brightness(.74) contrast(1.06) saturate(.85)}
.stm .sm-ic{background:none;border:0}
.stm .sm-pin{position:relative;display:block;width:44px;height:54px;color:var(--ink);cursor:pointer;transition:transform .15s;transform-origin:50% 87%}
.stm .sm-pin .sm-svg{display:block;width:44px;height:54px;overflow:visible;filter:drop-shadow(0 2px 3px color-mix(in srgb,var(--ink-fixed) 30%,transparent))}
.stm .sm-pin.on{transform:scale(1.08)}
.stm .sm-pin.foc{transform:scale(1.1)}
.stm .sm-pin .sm-lb{position:absolute;left:50%;top:50px;transform:translateX(-50%);max-width:150px;overflow:hidden;text-overflow:ellipsis;padding:2px 8px;border-radius:var(--radius-pill);background:var(--surface);box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--line);font:700 11px/1.5 var(--font-display);color:var(--ink);white-space:nowrap;pointer-events:none}
.stm .sm-pin.on .sm-lb{background:var(--primary-strong);color:var(--on-primary);box-shadow:var(--shadow-sm)}
.stm .sm-far .sm-pin:not(.on):not(.foc) .sm-lb{display:none}
.stm:not(.web) .sm-pin:not(.on):not(.foc) .sm-lb{display:none}
.stm .leaflet-marker-icon:focus-visible{outline:none}
.stm .leaflet-marker-icon:focus-visible .sm-svg{filter:drop-shadow(0 0 0 var(--primary)) drop-shadow(0 0 3px var(--primary)) drop-shadow(0 0 3px var(--primary))}
.stm .sm-cl{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--tosca);border:2px solid var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--tosca) 35%,transparent),0 3px 8px color-mix(in srgb,var(--ink-fixed) 30%,transparent);color:var(--ink-fixed);cursor:pointer}
.stm .sm-cl b{font:800 15px/1 var(--font-display)}
.stm .sm-cl.on{background:var(--primary);color:var(--on-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 28%,transparent),0 3px 8px color-mix(in srgb,var(--ink-fixed) 30%,transparent)}
.stm .sm-home{position:relative;display:block;width:22px;height:22px}
.stm .sm-home .dot{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:var(--pink);box-shadow:0 0 0 3px var(--surface),0 2px 6px color-mix(in srgb,var(--ink-fixed) 30%,transparent)}
.stm .sm-home .dot::after{content:"";position:absolute;inset:-14px;border-radius:50%;background:color-mix(in srgb,var(--pink) 22%,transparent);animation:ms-pulse 2.2s ease-out infinite;pointer-events:none}
.stm .sm-home .pl{position:absolute;left:50%;top:30px;transform:translateX(-50%);padding:3px 8px;border-radius:var(--radius-pill);background:var(--pink-soft);font:var(--text-badge);color:var(--pink-ink);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.stm .sm-home .dot::after{animation:none;opacity:.6}}
/* baris toko (daftar dan panel peta): centang, nama + format, kota, alamat satu baris (TextTruncate), jarak */
.stm .ms-row.ms-row{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:start;gap:var(--space-3);width:100%;min-height:var(--control-h-lg);padding:var(--space-3);border:0;border-radius:var(--radius-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);text-align:left;color:var(--ink);transition:box-shadow .15s,background .15s}
.stm .ms-row.ms-row:hover{box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.stm .ms-row .ck{position:static;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;padding:0;border:0;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1.5px var(--line-strong);background:var(--surface);color:transparent;font:800 13px/1 var(--font-display);cursor:pointer}
.stm .ms-row .ck::after{content:"";position:absolute;inset:0;border-radius:var(--radius-md)}
.stm .ms-row .rc{display:grid;gap:2px;min-width:0}
.stm .ms-row .rc b{display:flex;align-items:center;gap:var(--space-2);max-width:none;overflow:visible;white-space:normal;font:var(--text-body-strong);color:var(--ink)}
.stm .ms-row .rc small{display:block;font:var(--text-help);color:var(--ink-mute)}
.stm .ms-row .ad{position:relative;z-index:1;font:var(--text-help);color:var(--ink-soft)}
.stm .ms-row .km{font:var(--text-code);color:var(--ink-mute);white-space:nowrap}
.stm .fm{display:inline-block;padding:2px 8px;border-radius:var(--radius-pill);background:var(--surface-soft);box-shadow:inset 0 0 0 1px var(--line);font:var(--text-tag);font-style:normal;letter-spacing:.04em;color:var(--ink-soft)}
.stm .ms-row.on.on{background:var(--primary-soft);box-shadow:inset 0 0 0 2px var(--primary)}
.stm .ms-row.on .rc b{color:var(--primary-strong)}
.stm .ms-row.on .ck{background:var(--primary);box-shadow:none;color:var(--on-primary)}
.stm .ms-row.focus.focus{box-shadow:inset 0 0 0 2px var(--primary),0 0 0 3px var(--primary-soft)}
.stm .ms-row:has(.ck:focus-visible){box-shadow:inset 0 0 0 2px var(--primary),0 0 0 3px var(--primary-soft)}
.stm .ms-row .ck:focus-visible{outline:none}
/* kartu pin: satu kartu kecil */
.stm .ms-card{display:grid;width:100%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);text-align:left}
.stm .ms-card .mc{display:grid;gap:3px;min-width:0}
.stm .ms-card .nm{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding-right:36px}
.stm .ms-card .nm b{font:var(--text-body-strong);color:var(--ink)}
.stm .ms-card .sub{margin:0;font:var(--text-help);color:var(--ink-mute)}
.stm .ms-card .sub .km{font:var(--text-code);color:var(--ink-soft)}
.stm .ms-card .ad{margin:var(--space-1) 0 0;font:var(--text-help);color:var(--ink-soft)}
.stm .ms-card .mp{display:inline-flex;align-items:center;gap:6px;justify-self:start;margin-top:var(--space-1);font:var(--text-label);color:var(--primary);text-decoration:none}
.stm .ms-card .mp:hover{text-decoration:underline}
.stm .ms-card .mp svg{width:14px;height:14px}
.stm .ms-pick{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:var(--control-h);margin-top:var(--space-2);padding:0 var(--space-3);border:0;border-radius:var(--radius-md);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-strong);font:var(--text-body-strong);color:var(--ink);text-align:left;cursor:pointer}
.stm .ms-pick .ck{display:grid;place-items:center;width:22px;height:22px;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1.5px var(--line-strong);background:var(--surface);color:transparent;font:800 13px/1 var(--font-display)}
.stm .ms-pick.on{background:var(--primary-soft);box-shadow:inset 0 0 0 2px var(--primary);color:var(--primary-strong)}
.stm .ms-pick.on .ck{background:var(--primary);box-shadow:none;color:var(--on-primary)}
.stm .ms-pincard{position:absolute;z-index:6;padding:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-pop)}
.stm .ms-pincard .ms-card{position:relative;box-shadow:none}
.stm .ms-pincard .ms-x{position:absolute;right:6px;top:6px;z-index:1;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:var(--surface-soft);color:var(--ink-soft);font:700 18px/1 var(--font-display);cursor:pointer}
/* tombol di atas peta */
.stm .ms-cta{position:absolute;z-index:4;box-shadow:var(--shadow-pop)}
.stm .ms-back{display:inline-flex;align-items:center;gap:var(--space-2);justify-self:start;padding:0;border:0;background:none;font:var(--text-label);color:var(--primary);cursor:pointer}
.stm .ms-back svg{width:16px;height:16px}
.stm .ms-empty{padding:var(--space-5) var(--space-3);text-align:center;font:var(--text-body);color:var(--ink-mute)}
/* ---- HP ---- */
.k3a.rg.k3a-mapsel.stm.stm.stm{min-height:0}
.k3a-mapsel.stm.stm.m-list{--pv:clamp(150px,34%,226px);--lowh:260px;--stfull:112px;--st:var(--pv)}
.k3a-mapsel.stm.stm.m-list.s-full{--st:var(--stfull)}
.k3a-mapsel.stm.stm.m-list.s-low{--st:calc(100% - var(--lowh))}
.k3a-mapsel.stm.stm.m-list .ms-map{bottom:auto;height:var(--st);background:var(--ms-land);transition:height .25s ease}
.k3a-mapsel.stm.stm.m-list .ms-area{top:118px;bottom:10px;left:20px;right:20px}
.k3a-mapsel.stm.stm.m-list .ms-prevtap{position:absolute;inset:0;z-index:3;padding:0;border:0;background:transparent;cursor:pointer}
.k3a-mapsel.stm.stm.m-list .ms-sheet{top:var(--st);bottom:0;height:auto;max-height:none;transition:top .25s ease;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.k3a-mapsel.stm.stm.m-list.dragging .ms-sheet,.k3a-mapsel.stm.stm.m-list.dragging .ms-map{transition:none}
.k3a-mapsel.stm.stm.m-list .ms-grab{padding-top:6px;cursor:grab;touch-action:none}
.k3a-mapsel.stm.stm.m-list .ms-grab .ms-tabs{touch-action:auto}
.k3a-mapsel.stm.stm.m-list .ms-handle{display:block;height:22px;margin:0 0 2px}
.k3a-mapsel.stm.stm.m-list .ms-chips{margin-bottom:var(--space-2)}
.k3a-mapsel.stm.stm.m-list.s-low .ms-list{overflow:hidden;visibility:hidden}
.k3a-mapsel.stm.stm.m-list.s-low .ms-fab{top:calc(var(--ms-top) + 4px);bottom:auto;opacity:1;pointer-events:auto}
.k3a-mapsel.stm.stm.m-list.s-low .ms-cta{top:calc(var(--ms-top) + 8px);left:50%;transform:translateX(-50%)}
.k3a-mapsel.stm.stm.m-list.s-low .ms-pincard{left:var(--space-3);right:var(--space-3);bottom:calc(var(--lowh) + 10px)}
.k3a-mapsel.stm.stm.m-map:not(.web){--mbar:84px}
.k3a-mapsel.stm.stm.m-map:not(.web) .ms-map{bottom:var(--mbar);background:var(--ms-land)}
.k3a-mapsel.stm.stm.m-map:not(.web) .ms-area{top:150px;bottom:16px;left:20px;right:20px}
.k3a-mapsel.stm.stm.m-map:not(.web) .ms-fab{top:calc(var(--ms-top) + 4px);bottom:auto;opacity:1;pointer-events:auto}
.k3a-mapsel.stm.stm.m-map:not(.web) .ms-cta{top:calc(var(--ms-top) + 8px);left:50%;transform:translateX(-50%)}
.k3a-mapsel.stm.stm.m-map:not(.web) .ms-pincard{left:var(--space-3);right:var(--space-3);bottom:calc(var(--mbar) + 10px)}
.k3a-mapsel.stm.stm .ms-mbar{position:absolute;left:0;right:0;bottom:0;z-index:6;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2);padding:var(--space-3) var(--space-4) var(--space-4);background:var(--surface);box-shadow:0 -6px 24px color-mix(in srgb,var(--ink-fixed) 16%,transparent)}
.k3a-mapsel.stm.stm .ms-mbar .k3a-btn{min-height:var(--control-h);gap:var(--space-2)}
.k3a-mapsel.stm.stm .ms-mbar .k3a-btn.line svg{width:16px;height:16px}
.k3a-mapsel.stm.stm .ms-step .rg-stepof{white-space:nowrap}
@media (max-width:380px){.k3a-mapsel.stm.stm .ms-step{gap:var(--space-2)}.k3a-mapsel.stm.stm .ms-step .rg-stepof{letter-spacing:.02em}.k3a-mapsel.stm.stm .ms-step .rg-prog{width:60px}}
/* ---- Desktop: mode peta ---- */
.k3a-mapsel.stm.stm.web .ms-cta{top:var(--space-5);left:calc((100% + var(--ms-panel) + var(--space-5) * 2) / 2);transform:translateX(-50%)}
.k3a-mapsel.stm.stm.web .ms-pincard{left:calc(var(--ms-panel) + var(--space-5) * 2 + 24px);bottom:116px;width:min(440px,calc(100% - var(--ms-panel) - 200px))}
.k3a-mapsel.stm.stm.web .ms-fab{bottom:48px}
.k3a-mapsel.stm.stm.web .ms-legend{bottom:48px}
.k3a-mapsel.stm.stm.web .ms-list{gap:var(--space-2)}
.k3a-mapsel.stm.stm.web .ms-head{grid-template-columns:minmax(0,1fr) auto}
/* fallback skema bila peta tidak termuat */
.k3a-mapsel.stm.lf-fail .k3a-stmap{display:none}
/* ---- Desktop: kartu langkah (shell standar) dengan peta kecil, dan dialog peta ---- */
.ms-form{align-content:start}
.ms-form .ms-lmapw.k3a-mapsel.stm.stm{height:240px;min-height:0;border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--line)}
.ms-form .ms-lmapw .ms-area{top:24px;bottom:34px;left:24px;right:24px}
.ms-form .ms-prevtap{position:absolute;inset:0;z-index:3;padding:0;border:0;background:transparent;cursor:pointer}
.ms-form .ms-search{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-h);padding:0 var(--space-2) 0 var(--space-4);border-radius:var(--radius-md);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink-mute);cursor:text}
.ms-form .ms-search svg{flex:none;width:18px;height:18px}
.ms-form .ms-search input{flex:1;min-width:0;height:var(--control-h);border:0;outline:0;background:transparent;font:var(--text-input);color:var(--ink)}
.ms-form .ms-search input::-webkit-search-cancel-button{display:none}
.ms-form .ms-search:focus-within{box-shadow:inset 0 0 0 2px var(--primary)}
.ms-form .ms-search .clr{flex:none;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:var(--surface-soft);color:var(--ink-soft);font:700 16px/1 var(--font-display);cursor:pointer}
.ms-form .ms-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-1) var(--space-3)}
.ms-form .ms-head b{font:var(--text-card-title);color:var(--ink)}
.ms-form .ms-head small{flex:1 1 100%;font:var(--text-help);color:var(--ink-mute)}
.ms-form .ms-head .ms-acts{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-1)}
.ms-form .ms-head .ms-acts .k3a-btn{gap:var(--space-2)}
.ms-form .ms-cards{display:grid;grid-auto-rows:max-content;gap:var(--space-2);max-height:min(54vh,540px);overflow-y:auto;overscroll-behavior:contain;padding:2px 6px 2px 2px;margin-right:-6px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.ms-form .ms-cards>*{min-height:max-content}
.ms-form .ms-fa{display:grid;gap:var(--space-2)}
.k3a-scrim.center.ms-dscrim{padding:var(--space-4)}
.k3a-scrim .k3a-sheet.ms-dlg{position:relative;display:block;width:min(1040px,90vw);height:85vh;max-height:none;padding:0;overflow:hidden;border-radius:var(--radius-xl)}
.ms-dlg .k3a-mapsel.web{height:100%;min-height:0}
.ms-dlg .ms-dx{position:absolute;top:var(--space-3);right:var(--space-3);z-index:8;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-pop);color:var(--ink);font:700 22px/1 var(--font-display);cursor:pointer}
.ms-dlg .ms-saved{display:none}
.ms-dlg .leaflet-top.leaflet-right{margin-top:56px}
.ms-dlg .k3a-mapsel.stm.stm.web .ms-fab{bottom:var(--space-5)}
.ms-dlg .k3a-mapsel.stm.stm.web .ms-legend{bottom:var(--space-5);right:calc(var(--space-5) + 60px)}
.ms-dlg .k3a-mapsel.stm.stm.web .ms-pincard{bottom:84px}
.ms-dlg .k3a-mapsel.stm.stm.web .ms-cta{top:var(--space-4)}
@media (max-width:899px){
  .k3a-scrim.center.ms-dscrim{padding:0}
  .k3a-scrim .k3a-sheet.ms-dlg{width:100vw;height:100vh;height:100dvh;border-radius:0}
  .ms-dlg .k3a-mapsel.stm.stm.web{--ms-panel:min(340px,52vw)}
  .ms-dlg .k3a-mapsel.stm.stm.web .ms-legend{display:none}
}
/* batal pilih: ikon di ringkasan dan toast dengan Urungkan */
.stm .ms-clearsel{position:relative;display:inline-grid;place-items:center;width:28px;height:28px;margin-left:var(--space-1);padding:0;border:0;border-radius:50%;background:none;color:var(--ink-mute);vertical-align:middle;cursor:pointer}
.stm .ms-clearsel::after{content:"";position:absolute;inset:-8px}
.stm .ms-clearsel:hover{background:var(--surface-soft);color:var(--ink)}
.stm .ms-clearsel:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.k3a-toastact span{min-width:0}
.k3a-toastact{position:fixed;left:50%;bottom:var(--space-6);transform:translateX(-50%);z-index:400;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:min(480px,calc(100% - var(--space-8,32px)));box-sizing:border-box;padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);border-radius:var(--radius-md);background:var(--ink);color:var(--canvas);box-shadow:var(--shadow-pop);font:var(--text-label)}
.k3a-toastact .k3a-btn{min-height:32px;color:var(--tosca);background:none;box-shadow:none}
.k3a-mapsel.stm .k3a-toastact{position:absolute;left:var(--space-4);right:var(--space-4);bottom:calc(var(--foot-h,84px) + var(--space-2));transform:none;width:auto}
@media (max-width:380px){.k3a-mapsel.stm.stm .ms-step{gap:var(--space-2)}}
@media (max-width:700px){.k3a-auth .k3a-header{padding-inline:var(--space-4);gap:var(--space-2)}.k3a-auth .k3a-header .acts{gap:var(--space-2);min-width:0}.k3a-auth .k3a-header .acts .k3a-btn.sm{white-space:nowrap;padding-inline:var(--space-3)}}
/* tab wilayah satu baris yang bisa digeser (ms-tabs + chipscroll.js) */
.stm .ms-tabs{position:relative;min-width:0}
.stm .ms-tabs .ms-chips.ms-chips{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:var(--space-1);margin:0;padding:var(--space-1);border-radius:var(--radius-pill);background:var(--surface-soft);scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;cursor:grab;scroll-snap-type:none;--fl:0px;--fr:0px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent)}
.stm .ms-tabs .ms-chips.ms-chips::-webkit-scrollbar{display:none}
.stm .ms-tabs .ms-chips.ms-chips.fl{--fl:36px}
.stm .ms-tabs .ms-chips.ms-chips.fr{--fr:36px}
.stm .ms-tabs .ms-chips.ms-chips.drag{cursor:grabbing}
.stm .ms-tabs .ms-chips .k3a-chip{flex:none;min-height:36px;font-size:13px;padding-inline:var(--space-2)}
.stm .ms-clearbtn svg{flex:none}
.stm .ms-tabs .ms-chips .k3a-chip:not(.on) i{background:var(--surface)}
.stm .ms-tabs .ms-chips .k3a-chip:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.stm .ms-tabarrow{display:none;position:absolute;top:50%;z-index:2;width:30px;height:30px;margin-top:-15px;padding:0;place-items:center;border:0;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-pop);color:var(--ink);cursor:pointer}
.stm .ms-tabarrow.prev{left:2px}
.stm .ms-tabarrow.next{right:2px}
@media (hover:hover) and (pointer:fine){.stm .ms-tabs.can-l .ms-tabarrow.prev,.stm .ms-tabs.can-r .ms-tabarrow.next{display:grid}}
.ms-slot{display:contents}
/* Dialog: tinggi maksimal sebatas layar, isi bergulir di dalam */
.k3a-scrim .k3a-dlg{max-height:calc(100vh - var(--sb,0px) - var(--hi,0px) - var(--space-6));max-height:calc(100dvh - var(--sb,0px) - var(--hi,0px) - var(--space-6));overscroll-behavior:contain}
/* PR methods: dua kolom (Isi sendiri dan Salin dari produk sebelumnya) */
.pr-methods.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.pr-methods.two{grid-template-columns:minmax(0,1fr)}}
/* OptionGroup: ikon garis di pilihan (cara simpan) */
.oc .sim-ic{display:inline-block;flex:none;width:18px;height:18px;margin-right:var(--space-2);vertical-align:-3px;color:var(--ink-soft)}
.oc.on .sim-ic{color:var(--primary)}
/* LoadingOverlay: lapisan memuat di atas halaman (Kirim pendaftaran, Kirim Lengkapi Data, unggah PKS) dan pesan gagal kirim */
.k3a-busy{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:var(--space-5);background:color-mix(in srgb,var(--ink-fixed) 52%,transparent);font-family:var(--font-display);color:var(--ink);cursor:progress;outline:0}
.k3a-busy .bx{display:grid;justify-items:center;gap:var(--space-4);width:min(300px,100%);padding:var(--space-6) var(--space-5);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-pop);text-align:center}
.k3a-busy .sp{width:36px;height:36px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--primary);animation:k3a-busy-spin .8s linear infinite}
.k3a-busy p{margin:0;font:var(--text-body-strong);color:var(--ink);text-wrap:balance}
@keyframes k3a-busy-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.k3a-busy .sp{animation-duration:2.4s}}
[data-k3busy]{pointer-events:none}
[data-k3busy] input,[data-k3busy] textarea{cursor:progress}
.k3busy-msg{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2)}
.k3busy-msg .tx{flex:1;min-width:0}
.k3busy-msg .k3a-btn{flex:none}
/* Button load untuk tombol berbentuk tautan (bukan .k3a-btn): redup dan tak bisa diketuk selama proses */
button.load:not(.k3a-btn),a.load:not(.k3a-btn){opacity:.55;pointer-events:none;cursor:progress}
/* Dialog · celebrate · nomor pendaftaran (opsi reg + save): nomor besar dengan tombol Salin, teks simpan nomor (SCP 24 Okt 4.7) */
.k3cb .cb-reg{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--space-3)}
.k3cb .cb-reg-no{font:600 clamp(20px,6.2vw,28px)/1.1 var(--font-mono);letter-spacing:.02em;color:var(--ink);overflow-wrap:anywhere}
.k3cb .cb-save{margin:0;max-width:44ch;font:600 15px/1.5 var(--font-display);color:var(--ink)}
/* Blok tanda tangan PKS (.k3a-sig): sisi K3Mart (KATIGA, Diterima Oleh, Disetujui Oleh) dengan gambar tanda tangan contoh netral dan blok mitra (LOCAL HEROES) dengan kotak meterai (24 Okt 2026) */
.k3a-sig{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3);margin:0}
.k3a-sig .sg-col{display:grid;gap:var(--space-2);align-content:start;min-width:0;padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.k3a-sig .sg-col>b{font:var(--text-body-strong);color:var(--ink);overflow-wrap:anywhere}
.k3a-sig .sg-col>small{font:var(--text-caption);color:var(--ink-mute);overflow-wrap:anywhere}
.k3a-sig .sg-img,.k3a-sig .sg-blank{display:grid;place-items:center;height:64px;border:1px dashed var(--line-strong);border-radius:var(--radius-md);background:var(--surface-soft);color:var(--ink-mute);font:var(--text-caption);text-align:center;padding:0 var(--space-2)}
.k3a-sig .sg-blank{background:transparent}
.k3a-sig .sg-stamp{display:grid;place-items:center;width:84px;height:84px;border:1px dashed var(--line-strong);border-radius:var(--radius-sm);color:var(--ink-mute);font:var(--text-caption);text-align:center;padding:var(--space-2)}
.k3a-sig .sg-col.mitra{grid-column:1/-1}
/* LockedState (.k3a-lockstate): isi halaman terkunci untuk akun baru; kartu alasan + langkah tersisa + tombol, lalu contoh tampilan diredupkan (24 Okt 2026) */
.k3a-main.is-locked>*:not(.k3a-lockstate){pointer-events:none;user-select:none}
.k3a-main.is-locked .lk-ex{position:relative;z-index:101;align-self:flex-start;justify-self:start;width:fit-content;display:inline-block;margin:0 0 var(--space-3);padding:2px var(--space-3);border-radius:var(--radius-pill);background:var(--yellow-soft);color:var(--yellow-ink);font:var(--text-tag);letter-spacing:.06em}
.k3a .k3a-lockstate .lk-dlg{display:grid;gap:var(--space-3);box-sizing:border-box;border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-pop);overflow-y:auto;width:fit-content;min-width:320px;max-width:420px}
.k3a .k3a-lockstate .lk-hd{display:flex;align-items:center;gap:var(--space-3)}
.k3a .k3a-lockstate .lk-ic{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--yellow-soft);color:var(--yellow-ink)}
.k3a .k3a-lockstate h2{margin:0;font:var(--text-card-title);color:var(--ink);text-wrap:balance}
.k3a .k3a-lockstate .lk-dlg>p{margin:0;font:var(--text-body);color:var(--ink-soft)}
.k3a .k3a-lockstate .k3a-cl li{padding:var(--space-3)}
.k3a .k3a-lockstate .lk-here{display:inline-block;margin-left:var(--space-2);padding:2px var(--space-2);border-radius:var(--radius-sm);background:var(--primary-soft);color:var(--primary-strong);font:var(--text-badge);font-style:normal;vertical-align:middle}
.k3a .k3a-lockstate .lk-note{font:var(--text-caption);color:var(--ink-mute)}
.k3a .k3a-lockstate .lk-acts{position:sticky;bottom:0;display:grid;gap:var(--space-2);padding:var(--space-2) 0 var(--space-4);background:var(--surface)}
.k3a .k3a-lockstate .lk-acts .k3a-btn{margin:0}
.k3a .k3a-lockstate .lk-row{display:none;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;box-sizing:border-box;padding:var(--space-2) var(--space-3);border:0;border-radius:var(--radius-md);background:var(--surface-soft);color:var(--ink-soft);font:var(--text-body);text-align:left;cursor:pointer}
.k3a .k3a-lockstate .lk-row:hover{background:var(--primary-soft);color:var(--ink)}
.k3a .k3a-lockstate .lk-row:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.k3a .k3a-lockstate .lk-row:focus:not(:focus-visible){outline:none}
.k3a .k3a-lockstate .lk-chev{flex:none;width:16px;height:16px;transition:transform .15s}
.k3a .k3a-lockstate .lk-row[aria-expanded="true"] .lk-chev{transform:rotate(180deg)}
.k3a .k3a-main.lk-float{position:relative}
.k3a .k3a-main.lk-float::after{content:"";position:absolute;inset:0;z-index:50;pointer-events:none;background:color-mix(in srgb,var(--canvas) 15%,transparent);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}
.k3a .k3a-main.lk-float .k3a-lockstate{position:fixed;right:var(--space-5);bottom:var(--space-5);z-index:60}
.k3a .k3a-main.lk-float .lk-dlg{max-height:calc(100vh - var(--sb,0px) - 160px);padding:var(--space-4) var(--space-4) 0}
.k3a .k3a-main.lk-float .lk-ic{width:36px;height:36px}
.k3a .k3a-main.lk-float .lk-dlg>p{display:none}
.k3a .k3a-main.lk-float .lk-row{display:flex}
.k3a .k3a-main.lk-float .lk-dlg:not(.lk-open) .k3a-cl{display:none}
.k3a .k3a-main.lk-float .k3a-cl li{padding:var(--space-2) var(--space-3)}
.k3a .k3a-main.lk-float .k3a-cl li:not(.now) small{display:none}
@media (max-width:640px){
.k3a .k3a-lockstate .lk-dlg{width:auto;min-width:0;max-width:none}
.k3a .k3a-main.lk-float .k3a-lockstate{left:var(--space-4);right:var(--space-4);bottom:calc(var(--hi,0px) + 72px)}
}
/* StepNav (.rg-prog a): penanda langkah pendaftaran yang bisa diklik; mundur selalu boleh, maju hanya ke langkah yang sudah dilewati (24 Okt 2026) */
.rg-prog a,.rg-prog .rg-stay{display:block;position:relative;min-width:0}
.rg-prog a i,.rg-prog .rg-stay i{display:block}
.rg-prog a::before{content:"";position:absolute;inset:-10px 0}
.rg-prog a:hover i{filter:brightness(.88)}
.rg-prog a:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--radius-pill)}
.rg-prog a:focus:not(:focus-visible){outline:none}
.rg-prog .rg-stay.blk i{opacity:.6}
/* ==== InfoTip: ikon info di samping label, isi tooltip ==== */
.k3a-itp{display:inline-flex;vertical-align:middle;margin-left:6px;position:relative}
.k3a-itp-b{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;color:var(--ink-mute);cursor:pointer;position:relative}
.k3a-itp-b::before{content:"";position:absolute;inset:-11px}
.k3a-itp-b:hover,.k3a-itp.open .k3a-itp-b{color:var(--ink);background:var(--surface-2,rgba(128,128,128,.14))}
.k3a-itp-b:focus-visible{outline:2px solid var(--focus,var(--primary));outline-offset:1px}
.k3a-itp-b svg{width:16px;height:16px;display:block}
.k3a-itp-t{position:fixed;z-index:10000;max-width:min(300px,calc(100vw - 24px));padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--ink-fixed);color:var(--white);border:1px solid rgba(255,255,255,.14);font:500 13px/1.5 var(--font-display);box-shadow:var(--shadow-pop);text-transform:none;letter-spacing:0;white-space:normal;overflow-wrap:anywhere}
.k3a-itp-t[hidden]{display:none}
/* ==== FieldRules: galat nama usulan Sub Category (catpick) ==== */
.k3a-catpick .cp-err{display:block;margin-top:-4px;padding:0 var(--space-2);font:600 13px/1.4 var(--font-display);color:var(--danger)}
/* ==== DraftNotices: notis browser dalam aplikasi dan penyimpanan tidak tersedia ==== */
.k3a-alert.dr-note{align-items:center;flex-wrap:wrap;gap:var(--space-2)}
.k3a-alert.dr-note .tx{flex:1 1 220px}
.k3a-alert.dr-note .k3a-btn{flex:none}
[data-nostore] .js-save{display:none!important}
[data-nostore] .rg-save{display:none!important}
/* ==== WaPreview: kutipan isi pesan WhatsApp di dalam halaman/dialog ==== */
.k3a-waq{display:block;margin-top:var(--space-3);padding:var(--space-3);border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:var(--radius-md);background:var(--surface-2,var(--canvas));color:var(--ink);font:500 13px/1.55 var(--font-display);text-align:left;overflow-wrap:anywhere}
/* ==== LoadingStates: catatan jawaban lambat di bawah tombol ==== */
.k3busy-note{display:block;margin-top:var(--space-2);text-align:center;font:500 13px/1.4 var(--font-display);color:var(--ink-mute)}
/* Hasil kurasi per produk: keterangan produk diterima (toko tujuan) netral, bukan warna galat */
.vd-row small.ok{color:var(--ink-mute)}
.vd-note{margin:0;font:var(--text-caption);color:var(--danger)}
/* Navigasi gelombang: item menu khusus gelombang B disembunyikan di gelombang A */
.k3-wave-a [data-wave="b"]{display:none!important}
/* SampleLabel: label kiriman sampel (nomor REG besar dan barcode Code 128, tanpa isi paket) */
.smp-label .lb-no.big{text-align:center}
.smp-label .lb-no.big b{font:800 22px/1.2 var(--font-mono);letter-spacing:.02em;overflow-wrap:anywhere}
.smp-label .lb-bc{display:block;width:100%;height:52px;margin:0}
.smp-label .lb-from p{margin:2px 0 0}
.smp-label .lb-to{padding-top:var(--space-3);border-top:1px solid var(--line)}
.ts-dest>div:last-child{flex:1;min-width:0}
.ts-dest .ts-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-2)}
.ts-dest .ts-hd .k3a-btn.ico{margin:calc(var(--space-2) * -1) calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0}
.ts-dest .ts-pack{margin:var(--space-2) 0 0;font:500 12px/1.4 var(--font-display);color:var(--ink-soft)}
/* SampleConfirm: satu konfirmasi = satu paket (ONB-4.02) */
.ts-sec{display:grid;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-lg);background:var(--surface-soft)}
.ts-sec-h{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.ts-sec-h .ts-lab{margin:0;padding:0}
.ts-sec-h .ts-hint{margin-top:2px;padding:0}
.ts-cols{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:var(--space-3);padding:0 var(--space-3);font:var(--text-badge);letter-spacing:.03em;text-transform:uppercase;color:var(--ink-mute)}
.ts-prs{display:grid;gap:var(--space-2)}
.ts-pr{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:var(--space-1) var(--space-3);align-items:start;padding:var(--space-3);border-radius:var(--radius-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.ts-pr .k3a-check{cursor:pointer}
.ts-pr .k3a-check span{font:700 13px/1.35 var(--font-display);color:var(--ink);overflow-wrap:anywhere}
.ts-pr .ts-qty{grid-column:2;grid-row:1}
.ts-pr .ts-qty input{text-align:center}
.ts-msg{grid-column:1/-1;display:flex;gap:var(--space-2);align-items:flex-start;margin:0;font:600 13px/1.4 var(--font-display);color:var(--danger)}
.ts-msg svg{flex:none;margin-top:2px}
.ts-sec>.ts-msg{padding:0 var(--space-1)}
.ts-sec .k3a-radios{margin:0}
.ts-sec .ts-f2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-3)}
@media (max-width:420px){.ts-sec .ts-f2{grid-template-columns:minmax(0,1fr)}}
/* VerdictRows: dua kelompok (Diterima, Ditolak), tiap kelompok 5 baris + Selengkapnya */
.vd-groups{display:grid;gap:var(--space-4)}
.vd-grp{display:grid;gap:var(--space-2)}
.vd-gh{margin:0;font:700 14px/1.3 var(--font-display);color:var(--ink)}
.vd-grp>.vd-note{margin:0}
.vd-grp>.vd-note.ok{color:var(--ink-mute)}
/* SampleLabel: jarak barcode ke DARI */
.smp-label .lb-bc{margin-bottom:var(--space-2)}
/* TextTruncate: daftar di Detail Pendaftaran (induk grid min-width:0) */
.tl-b,.tl-smp,.tl-blk,.ts-list,.vd-groups,.vd-grp,.vd-list,.dt-prods{grid-template-columns:minmax(0,1fr)}
.vd-grp,.vd-list,.ts-list,.dt-prods{min-width:0}
.vd-row .k3a-st,.ts-row .k3a-st{flex:none}
/* DetailList: dl.split.fit (kolom nama menyusut, nilai di kanan) */
.k3a-dl.split.fit{grid-template-columns:minmax(0,1fr) auto}
.k3a-dl.split.fit dt{color:var(--ink)}
.k3a-dl.split.fit dd{white-space:nowrap}
/* Tautan: k3a-link pada button (aksi teks, tanpa kotak) */
button.k3a-link{padding:0;border:0;background:none;font:inherit;font-weight:700;text-align:left;cursor:pointer}
button.k3a-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
.k3a-dl dd button.k3a-link{display:block;margin-top:var(--space-1)}
/* VerdictRows: kartu hasil kurasi di atas Detail Pendaftaran */
.k3a-card.vr-card{gap:var(--space-4)}
.vr-txt{margin:0;font:var(--text-body);color:var(--ink)}
.vr-sum{margin:0;font:var(--text-body-strong);color:var(--ink)}
.vr-sec{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2);min-width:0}
.vr-tg{display:flex;align-items:center;gap:var(--space-2);width:fit-content;min-height:44px;padding:0;border:0;background:none;font:var(--text-button-sm);font-family:inherit;color:var(--primary-strong);cursor:pointer}
.vr-tg:focus-visible{outline:2px solid var(--primary-strong);outline-offset:2px;border-radius:var(--radius-sm)}
.vr-detail{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);min-width:0}
.vr-detail:empty{display:none}
.vr-closed{display:none}
.vr-doc{display:none}
/* Timeline: langkah selesai bisa dibuka (Detail Pendaftaran) */
.tl-tg{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--space-2);width:100%;min-height:44px;padding:0;border:0;background:none;text-align:left;font-family:inherit;color:inherit;cursor:pointer}
.tl-tg .tt{grid-column:1}
.tl-tg .ds{grid-column:1;grid-row:2}
.tl-tg .dt-chev{grid-column:2;grid-row:1 / span 2}
.tl-tg:focus-visible{outline:2px solid var(--primary-strong);outline-offset:2px;border-radius:var(--radius-sm)}
/* VerdictRows: simpan hasil sebagai PDF (cetak peramban) */
.vr-doc{display:none}
@media print{html.print-hasil,html.print-hasil body{height:auto!important;overflow:visible!important;clip-path:none!important;padding-bottom:0!important}html.print-hasil::before,html.print-hasil::after,html.print-hasil body::before,html.print-hasil body::after{display:none!important}html.print-hasil body *{visibility:visible!important}html.print-hasil .k3a-header,html.print-hasil .k3a-auth-head,html.print-hasil .k3a-auth-side,html.print-hasil .k3a-card:not(.vr-card),html.print-hasil .k3a-auth-acts,html.print-hasil .k3a-auth-foot,html.print-hasil .k3a-proto-bar,html.print-hasil .k3a-alert-float,html.print-hasil .dm-bar,html.print-hasil .vr-card>*:not(.vr-doc){display:none!important}html.print-hasil .k3a,html.print-hasil body{background:none!important}html.print-hasil .vr-card{display:block;box-shadow:none;border:0;padding:0}html.print-hasil .k3a-auth-main,html.print-hasil .k3a-auth-col{display:block!important;width:100%!important;max-width:none!important;padding:0!important;margin:0!important}html.print-hasil .vr-doc{display:block}}
/* WaPreview: tombol URL template WhatsApp Business (.wa-cta), dipakai mockup WaTerkirim dan WaDiterima. Warna mengikuti tampilan WhatsApp, bukan token portal. */
.wa-cta{display:flex;align-items:center;justify-content:center;gap:6px;border-top:1px solid #E9EDEF;padding:10px;color:#00A5F4;font-size:14.5px;font-weight:600;text-decoration:none;background:#fff;width:100%;border-left:0;border-right:0;border-bottom:0;cursor:pointer;font-family:inherit}
/* VerdictRows: Langkah selanjutnya, langkah selesai dan langkah aktif */
.akv-steps li.done::before{display:none}
.akv-steps .ck{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--success-soft);color:var(--success)}
.akv-steps li.now>span{color:var(--ink);font-weight:600}
.dt-sh-btn{min-height:44px}
.vr-top .k3a-copy{min-height:44px}
/* Dialog · celebrate · varian kartu (.k3cb.cb-top): kartu ucapan selamat di halaman, tanpa dialog. Konfeti dan terompet diisi K3Celebrate.mountCards */
.k3cb.cb-top{position:relative;overflow:hidden;display:grid;justify-items:center;text-align:center;gap:var(--space-2);padding:var(--space-4) var(--space-2) var(--space-5);border-bottom:1px solid var(--line)}
.k3cb.cb-top>*:not(.cb-conf){position:relative}
.k3cb.cb-top .cb-conf i{--fall:460px}
.k3cb.cb-top .cb-reg{margin-top:var(--space-1)}
/* DocumentFrame: kerangka dokumen A4 berkop. Tampilan mengikuti templat PKS prototipe admin konsinyasi (kop gambar di atas, judul huruf kapital di tengah dengan nomor, isi 9pt Montserrat margin 11%, footer pita www.k3mart.id). Hex admin dipetakan: #16191f ke --ink, #fff ke --surface, #6b7280 ke --ink-mute. Tanpa tabel paraf dan blok tanda tangan. */
.doc-frame{display:none;font-family:var(--font-display);font-size:9pt;line-height:1.5;color:var(--ink);background:var(--surface);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.doc-frame.show{display:block;max-width:595px;border:1px solid var(--line)}
.doc-frame .doc-hdr,.doc-frame .doc-ftr{display:block;width:100%;height:auto}
.doc-frame .doc-pr{width:100%;border-collapse:collapse}
.doc-frame .doc-pr>thead>tr>td,.doc-frame .doc-pr>tbody>tr>td,.doc-frame .doc-pr>tfoot>tr>td{padding:0}
.doc-frame .doc-sp-h{height:38mm}
.doc-frame .doc-sp-f{height:28mm}
.doc-frame.show .doc-sp-h,.doc-frame.show .doc-sp-f{display:none}
.doc-bd{padding:0 11%}
.doc-bd>*+*{margin-top:10px}
.doc-title{margin:0;padding-top:16px;text-align:center;font:700 1em/1.5 var(--font-display);text-transform:uppercase;color:var(--ink)}
.doc-no{margin:0;text-align:center;font-weight:700;padding-bottom:12px}
.doc-kv{display:grid;grid-template-columns:130px 1fr;gap:6px}
.doc-kv b{font-weight:600}
.doc-tb{width:100%;border-collapse:collapse;font-size:8.5pt}
.doc-tb th,.doc-tb td{border:0.75pt solid var(--ink);padding:4px 5px;vertical-align:middle;text-align:left}
.doc-tb th{font-weight:700;text-align:center}
.doc-tb thead{display:table-header-group}
.doc-tb tr{break-inside:avoid}
.doc-bd>.doc-note,.doc-note{margin:10px 0 0;font-size:8pt;color:var(--ink-mute)}
@media print{.doc-frame .doc-hdr{position:fixed;top:0;left:0;width:210mm}.doc-frame .doc-ftr{position:fixed;bottom:0;left:0;width:210mm}}
.doc-h{margin:14px 0 0;font:700 1em/1.5 var(--font-display);text-align:left;color:var(--ink);break-after:avoid}
.doc-bd>.doc-h+.doc-tb{margin-top:4px}
.doc-tb tr.doc-grp td{font-weight:700}
/* Sheet: pegangan atas (HP, sheet dari bawah) */
.k3a-sheet-grip{display:none}
.k3a-scrim.bottom .k3a-sheet-grip{display:block;flex:none;width:36px;height:4px;margin:8px auto 0;border-radius:var(--radius-pill);background:var(--line-strong)}
.k3a-sheet-h .tx b:focus{outline:none}
/* Wave: elemen khusus Gelombang B ([data-wave="B"]) tersembunyi di tampilan Gelombang A */
html[data-wave-view="A"] [data-wave="B"]{display:none!important}
/* MiniTable: varian tabel tetap (.fix), kolom nama dipotong (TextTruncate); dipakai tabel produk dan toko di Detail Pendaftaran */
.k3a-table.mini.fix{table-layout:fixed}
.k3a-table.mini.fix .c-h{width:140px}
.k3a-table.mini.fix .c-k{width:72px}
.k3a-table.mini.fix td>.k3a-trunc{display:block}
.vr-sec.vr-div{border-top:1px solid var(--line);padding-top:var(--space-4)}
.vr-card>.k3a-sec-h,.vr-sec>.k3a-sec-h{margin:0}
.k3a-table.mini.fix .c-h.sm{width:72px}
.k3a-table.mini.fix td>.k3a-trunc-2{display:-webkit-box}
.k3a-table.mini.fix td .k3a-st{white-space:nowrap}
.k3a-table.mini.fix .c-n{width:92px}
.k3a-table.mini .tk-row{cursor:pointer}
.k3a-table.mini .tk-row td{padding-top:0;padding-bottom:0}
.tk-btn{display:flex;align-items:center;width:100%;min-height:44px;padding:0;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.tk-btn:focus-visible{outline:2px solid var(--primary-strong);outline-offset:2px;border-radius:var(--radius-sm)}
.tk-row .dt-chev{margin-left:6px;vertical-align:middle}
.k3a-table.mini .tk-none td{color:var(--ink-soft)}
.k3a-table.mini .tk-none td:first-child .k3a-trunc{display:inline}
.k3a-table.mini .tk-ns{margin-left:var(--space-2);font-weight:600}
.k3a-table.mini .tk-plain td{height:44px;padding-top:0;padding-bottom:0}
.k3a-table.mini .tk-more td{padding:10px 14px}
.k3a-st.ico{font-size:0;gap:0;vertical-align:middle}
.k3a-table.mini.fix td:last-child{white-space:nowrap}
.k3a-table.mini .dt-chev{display:inline-block;line-height:1;vertical-align:middle;position:relative;top:-1px}
.k3a-table.mini td{vertical-align:middle}
.vr-card .k3a-sec-h,.tl-card .tl-hd b,.dt-card .dt-h b{font:700 15px/1.3 var(--font-display)}
.vr-card .k3a-sec-h{align-items:flex-start;flex-wrap:wrap}
.k3a-table.mini .tk-more td{background:var(--surface)}
.dm-bar.dm-end{margin:var(--space-6) var(--space-4) var(--space-4)}
@media (min-width:900px){.dm-bar.dm-end{max-width:1100px;margin-inline:auto}}
.dt-no .k3a-copy{min-height:44px}
/* MiniTable: tabel ringkas berbingkai (blok sama ada di bagian MiniTable DS; disalin supaya bundle pendaftaran ikut) */
.k3a .k3a-table.mini{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.k3a .k3a-table.mini th{padding:10px 14px;background:var(--surface-soft);border-bottom:1px solid var(--line);font:700 12px/1.3 var(--font-display);color:var(--ink-mute);text-align:left;white-space:nowrap}
.k3a .k3a-table.mini td{padding:11px 14px;background:transparent;border-bottom:1px solid var(--line);border-radius:0;font:500 13px/1.35 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums}
.k3a .k3a-table.mini tbody tr:last-child td{border-bottom:0}
.k3a .k3a-table.mini tbody tr:hover td{background:var(--surface-soft)}
.k3a .k3a-table.mini th.num,.k3a .k3a-table.mini td.num{text-align:right}
.k3a .k3a-table.mini td:first-child{font-weight:700}
.k3a .k3a-table.mini .k3a-low{display:inline-block;padding:2px 8px;border-radius:var(--radius-pill);background:var(--danger-soft);color:var(--danger);font-weight:800}
/* Sheet: isi panjang di dp-sheet tidak menyusut (tabel, tombol) dan bisa digulir */
.k3a-sheet.dp-sheet .k3a-sheet-b{display:grid;gap:var(--space-3);grid-auto-rows:max-content;align-content:start;overflow:auto}
.k3a-sheet.dp-sheet .k3a-sheet-b>*{min-height:max-content}
.k3a-sheet.dp-sheet .k3a-sheet-b>.k3a-btn{flex:none;min-height:44px}
/* EmailPreview: bingkai pratinjau email di papan Email mitra */
.k3a-emv{max-width:100%}
.k3a-emv iframe{display:block;width:100%;height:760px;border:0;background:transparent;color-scheme:normal}
.k3a-emv .dm-bar.dm-end{margin:var(--space-3);max-width:none}
/* OTP: baris masa berlaku dan kirim ulang */
.k3a-otp-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);font:var(--text-label)}
.k3a-otp-tm{color:var(--primary-strong)}
.k3a-otp-tm.exp{color:var(--pink-ink)}
/* Check: kotak centang di dalam k3a-fm */
.k3a .k3a-fm .k3a-check input{width:20px;min-width:20px;height:20px;margin:1px 0 0;flex:none;border-radius:4px;appearance:auto;-webkit-appearance:auto}
/* DetailList boxed: satu kolom di layar sempit */
@media (max-width:560px){.k3a-dl.boxed{grid-template-columns:minmax(0,1fr)}.k3a-dl.boxed dt{padding-bottom:0;color:var(--ink-mute)}.k3a-dl.boxed dd{padding-top:var(--space-1);border-top:0!important}}
/* HeaderMobile: area tekan tautan header HP */
.k3a-auth .k3a-header.m .acts .k3a-link{padding:15px 8px;margin:-15px -8px}
/* Button: link sm tanpa tinggi minimum */
.k3a-btn.link.sm{min-height:0;padding:15px 6px;margin:-15px -6px;font-size:13px;border-radius:var(--radius-sm);gap:4px}
.k3a-auth .tx>.k3a-btn.link.sm{margin-top:-15px}
/* Kartu autentikasi: jarak antarfield = --field-gap */
.k3a-auth-card{--ag:var(--space-3)}
@media (min-width:901px){.k3a-auth-card.k3a-card{--ag:var(--space-4)}.k3a-auth-card.fit.k3a-card{--ag:12px}}
.k3a-auth-card>.k3a-fm+.k3a-fm{margin-top:calc(var(--field-gap) - var(--ag))}
/* Onboarding: tata letak ob-* dan dialog PKS (PortalPatterns) */
.ob-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-5);align-items:start}
.ob-side,.ob-main{display:grid;gap:var(--space-4);min-width:0}
.ob-done{display:grid;justify-items:center;gap:var(--space-3);text-align:center;padding:var(--space-3) 0}
.ob-done b{font:var(--text-h5)}
.ob-done>span:not(.ob-big){color:var(--ink-mute);font:var(--text-body);max-width:420px}
.ob-big{width:72px;height:72px;border-radius:50%;background:var(--success-soft);color:var(--success);display:grid;place-items:center;font:var(--text-h3);line-height:1}
.ob-big.warn{background:var(--yellow-soft);color:var(--yellow-ink)}
.ob-back{display:inline-flex;align-items:center;gap:var(--space-2);font:var(--text-button-sm);font-weight:600;color:var(--ink-mute);text-decoration:none}
.ob-demo{border:1.5px dashed var(--line-strong);border-radius:var(--radius-lg);padding:var(--space-3);background:var(--surface)}
.ob-demo summary{cursor:pointer;font:var(--text-button-sm);line-height:1.3;color:var(--ink-mute)}
.ob-demo .note{display:block;margin-top:var(--space-3);color:var(--ink-mute);font:var(--text-label)}
.ob-demo .row{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
.k3a-upload.has{border-style:solid;border-color:var(--success);background:var(--success-soft)}
@media (max-width:900px){.ob-wrap{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}}
.pks-scrim{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:var(--scrim)}
.pks-scrim .k3a-dlg.pks-dlg{display:flex;flex-direction:column;width:100%;max-width:560px;max-height:86vh;overflow:hidden}
.pks-dlg-h{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4);padding-right:calc(var(--control-h-xs) + var(--space-5));border-bottom:1px solid var(--line)}
.pks-dlg-h b{font:var(--text-card-title);color:var(--ink)}
.pks-dlg-b{overflow-y:auto;padding:var(--space-4);font:var(--text-body);color:var(--ink-soft);display:grid;gap:var(--space-3)}
.pks-dlg-b p{margin:0}
.pks-dlg-b p>b{color:var(--ink)}
.pks-dlg-b .cap{font:var(--text-caption);color:var(--ink-mute)}
.pks-dlg-f{display:flex;justify-content:flex-end;padding:var(--space-3) var(--space-4);border-top:1px solid var(--line)}
.pks-actions{margin-top:var(--space-4)}
@media (min-width:901px){.pks-scrim .k3a-dlg.pks-dlg{max-width:620px}.pks-dlg-h,.pks-dlg-b,.pks-dlg-f{padding-inline:var(--space-5)}}
/* DialogIllustrated: panduan awal (sambutan, langkah, daftar, konfeti) */
.tg{display:inline-block;padding:3px var(--space-2);border-radius:var(--radius-pill);font:var(--text-button-sm)}
.tg.w{background:var(--pink-soft);color:var(--pink-ink)}
.tg.o{background:var(--surface-soft);color:var(--ink-soft)}
.tg.l{background:var(--yellow-soft);color:var(--yellow-ink)}
.ob-scrim{position:fixed;inset:0;z-index:300;background:var(--scrim);display:grid;place-items:center;padding:var(--space-4);box-sizing:border-box}
.ob-scrim .k3a-dlg.ob-dlg{width:min(640px,100%);overflow-y:auto;overscroll-behavior:contain}
.ob-scrim .ob-dlg .bd{padding-left:var(--space-6);padding-right:var(--space-6)}
.ob-dlg .dots{justify-content:flex-start}
.ob-step{font:var(--text-tag);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.ob-h{margin:0;font:var(--text-h4);color:var(--ink)}
.ob-h em,.ob-wh em{font-style:normal;color:var(--primary)}
.ob-p,.k3a-dlg .bd p.ob-p{margin:0;font:var(--text-body);color:var(--ink-soft)}
.ob-list{display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none}
.ob-list li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:var(--space-3);align-items:start;padding:var(--space-3);border:1.5px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.ob-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-sm);background:var(--tosca-soft);color:var(--primary-strong)}
.ob-list b{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font:var(--text-body-strong);color:var(--ink)}
.ob-list span.d{display:block;margin-top:3px;font:var(--text-help);color:var(--ink-mute)}
.ob-list .ob-note{display:block;grid-template-columns:none;border-style:dashed;background:transparent;font:var(--text-help);color:var(--ink-mute)}
.ob-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.ob-stats div{padding:var(--space-3);border:1.5px solid color-mix(in srgb,var(--primary) 22%,var(--surface));border-radius:var(--radius-lg);background:var(--primary-soft);font:var(--text-help);color:var(--ink-soft)}
.ob-stats b{display:block;font:var(--text-figure);font-family:var(--font-mono);color:var(--primary-strong)}
.ob-steps{display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none}
.ob-steps li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:var(--space-3);align-items:start;font:var(--text-body);color:var(--ink-soft)}
.ob-steps li>i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--primary);color:var(--on-primary);font:var(--text-button-sm);font-weight:800;font-style:normal}
.ob-steps b{display:block;color:var(--ink);font:var(--text-body-strong)}
.ob-nav{display:flex;gap:var(--space-3)}
.ob-nav>*{flex:1;justify-content:center}
.ob-skip{border:0;background:none;padding:var(--space-2);font:var(--text-body-strong);color:var(--primary-strong);cursor:pointer;text-align:center;justify-self:center;align-self:center}
.ob-skip:hover{color:var(--primary)}
.ob-wel{position:relative;overflow:hidden;display:grid;justify-items:center;gap:var(--space-3);text-align:center;margin:0;padding:calc(var(--space-6) * 2) var(--space-6) var(--space-5);border-radius:inherit;background:linear-gradient(180deg,var(--surface-soft) 0%,var(--surface) 70%)}
.ob-wel>*:not(.ob-conf):not(.x){position:relative}
.ob-wel>.x{position:absolute;top:var(--space-3);right:var(--space-3)}
.ob-pop{display:block;margin-bottom:var(--space-1);width:176px;height:143px;stroke:var(--ink)}
.ob-wh{margin:0;font:var(--text-figure);color:var(--ink)}
.ob-wp{margin:0;max-width:44ch;font:var(--text-input);color:var(--ink-soft)}
.ob-wgo{margin-top:var(--space-3);min-width:220px;justify-content:center}
.ob-conf{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 42% 30% at 50% 66%,transparent 55%,#000 100%);mask-image:radial-gradient(ellipse 42% 30% at 50% 66%,transparent 55%,#000 100%)}
.ob-conf i{position:absolute;left:var(--x);top:var(--y);width:7px;height:13px;border-radius:2px;background:var(--c);transform:rotate(var(--r))}
.ob-conf i.c{width:8px;height:8px;border-radius:50%}
.ob-conf i.s{width:4px;height:15px}
@media (prefers-reduced-motion:no-preference){.ob-conf i{top:-20px;animation:obLoop var(--t) linear var(--d) infinite}}
@keyframes obLoop{0%{transform:translate(0,0) rotate(var(--r))}50%{transform:translate(var(--w),calc(var(--fall,600px) / 2)) rotate(calc(var(--r) + 200deg))}100%{transform:translate(0,var(--fall,600px)) rotate(calc(var(--r) + 400deg))}}
.ob-scrim.full{padding:var(--sb,env(safe-area-inset-top,0px)) 0 var(--hi,env(safe-area-inset-bottom,0px));background:var(--surface)}
.ob-scrim.full .k3a-dlg.ob-dlg{width:100%;height:100%;max-height:100%;border-radius:0;box-shadow:none;display:flex;flex-direction:column}
.ob-scrim.full .ob-dlg .art{flex:none;border-radius:0}
.ob-scrim.full .ob-dlg .bd{flex:1;display:flex;flex-direction:column;gap:var(--space-3);padding-left:var(--space-5);padding-right:var(--space-5);padding-bottom:calc(var(--space-5) + env(safe-area-inset-bottom,0px))}
.ob-scrim.full .ob-dlg .ob-nav{margin-top:auto}
.ob-scrim.full .ob-wel{flex:1;align-content:center;border-radius:0;padding:calc(var(--space-6) * 2 + var(--space-4)) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom,0px))}
.ob-scrim.full .ob-wel .x{top:var(--space-4);right:var(--space-4)}
.ob-scrim.full .ob-wgo{width:100%;max-width:320px;min-width:0}
.ob-scrim.full .ob-wh{font:var(--text-h4)}
.ob-scrim.full .ob-wp{font:var(--text-body)}
.ob-scrim.full .ob-pop{width:150px;height:122px}
.ob-scrim.full .ob-conf{-webkit-mask-image:radial-gradient(ellipse 48% 20% at 50% 56%,transparent 55%,#000 100%);mask-image:radial-gradient(ellipse 48% 20% at 50% 56%,transparent 55%,#000 100%)}
.ob-scrim.full .ob-conf i{--fall:920px}
[data-theme="dark"] .k3a-dlg .x{background:var(--surface);color:var(--ink)}
/* Sheet: baris Kembali di kepala (ob-back) */
.k3a-sheet-h .tx>.ob-back{display:flex;width:fit-content;padding:16px 6px;margin:-16px -6px calc(var(--space-2) - 16px);background:none;border:0;font-family:inherit;cursor:pointer;border-radius:var(--radius-sm)}
.k3a-sheet-h .tx>.ob-back:hover{color:var(--ink)}
/* StatusText: status panjang di daftar Langkah aktivasi boleh membungkus */
.k3a-cl .k3a-st{white-space:normal;align-items:flex-start}
/* ==== MapSelect: peta penuh + daftar pilihan (HP: bottom sheet bertingkat, web: panel kiri) ==== */
.k3a-mapsel{--ms-land:color-mix(in srgb,var(--primary) 5%,var(--canvas));--ms-water:color-mix(in srgb,var(--tosca) 30%,var(--surface));--ms-park:color-mix(in srgb,var(--success) 16%,var(--surface));--ms-road:var(--surface);--ms-road-edge:color-mix(in srgb,var(--ink) 10%,transparent);--ms-toll:color-mix(in srgb,var(--yellow) 55%,var(--surface));--ms-peek:214px;--ms-top:136px;
  position:relative;display:block;height:calc(100vh - var(--sb,0px) - var(--hi,0px));height:calc(100dvh - var(--sb,0px) - var(--hi,0px));min-height:520px;overflow:hidden;background:var(--ms-land);color:var(--ink);font-family:var(--font-display);isolation:isolate}
.k3a-mapsel *{box-sizing:border-box}
/* peta */
.k3a-mapsel .ms-map{position:absolute;inset:0;z-index:0;overflow:hidden;touch-action:manipulation}
.k3a-mapsel .ms-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.k3a-mapsel .ms-bg .land{fill:var(--ms-land)}
.k3a-mapsel .ms-bg .water{fill:var(--ms-water)}
.k3a-mapsel .ms-bg .park{fill:var(--ms-park)}
.k3a-mapsel .ms-bg .river{fill:none;stroke:var(--ms-water);stroke-width:7;stroke-linecap:round}
.k3a-mapsel .ms-bg .edge{fill:none;stroke:var(--ms-road-edge);stroke-linecap:round;stroke-linejoin:round}
.k3a-mapsel .ms-bg .road{fill:none;stroke:var(--ms-road);stroke-linecap:round;stroke-linejoin:round}
.k3a-mapsel .ms-bg .toll{fill:none;stroke:var(--ms-toll);stroke-linecap:round;stroke-linejoin:round}
.k3a-mapsel .ms-bg .street{fill:none;stroke:var(--ms-road);stroke-width:2;opacity:.9}
.k3a-mapsel .ms-bg .lbl{font:600 13px/1 var(--font-display);fill:var(--ink-mute);letter-spacing:.04em}
.k3a-mapsel .ms-bg .lbl.w{fill:color-mix(in srgb,var(--tosca) 70%,var(--ink));font-style:italic}
/* area koordinat pin: di bawah bilah atas, di atas sheet versi peek */
.k3a-mapsel .ms-area{position:absolute;left:var(--space-5);right:var(--space-5);top:calc(var(--ms-top) + 20px);bottom:calc(var(--ms-h,var(--ms-peek)) + 16px);transition:bottom .25s ease}
.k3a-mapsel[data-snap="full"] .ms-area{bottom:calc(50% + 16px)}
.k3a-mapsel.dragging .ms-area{transition:none}
.k3a-mapsel .ms-region{position:absolute;left:50%;top:calc(var(--ms-top) + 2px);transform:translateX(-50%);padding:4px 10px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--surface) 82%,transparent);font:var(--text-tag);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap;pointer-events:none}
/* pin toko */
.k3a-mapsel .ms-pin{position:absolute;transform:translate(-50%,-100%);display:grid;justify-items:center;gap:3px;padding:0;border:0;background:none;cursor:pointer;font-family:inherit;color:var(--ink);z-index:1;-webkit-tap-highlight-color:transparent}
.k3a-mapsel .ms-pin .pt{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50% 50% 50% 6px;transform:rotate(-45deg);background:var(--surface);color:var(--ink-soft);box-shadow:0 0 0 2px var(--surface),0 3px 8px color-mix(in srgb,var(--ink-fixed) 28%,transparent),inset 0 0 0 2px var(--line-strong);transition:transform .15s,background .15s,color .15s}
.k3a-mapsel .ms-pin .pt svg{width:16px;height:16px;transform:rotate(45deg)}
.k3a-mapsel .ms-pin .pl{max-width:132px;overflow:hidden;text-overflow:ellipsis;padding:3px 8px;border-radius:var(--radius-pill);background:var(--surface);box-shadow:var(--shadow-sm);font:var(--text-badge);white-space:nowrap;color:var(--ink)}
.k3a-mapsel .ms-pin.on{z-index:2}
.k3a-mapsel .ms-pin.on .pt{background:var(--primary);color:var(--on-primary);box-shadow:0 0 0 2px var(--surface),0 4px 10px color-mix(in srgb,var(--primary) 45%,transparent)}
.k3a-mapsel .ms-pin.on .pl{background:var(--primary-strong);color:var(--on-primary)}
.k3a-mapsel .ms-pin.focus{z-index:3}
.k3a-mapsel .ms-pin.focus .pt{transform:rotate(-45deg) scale(1.18)}
.k3a-mapsel .ms-pin:focus-visible{outline:none}
.k3a-mapsel .ms-pin:focus-visible .pt{box-shadow:0 0 0 2px var(--surface),0 0 0 5px var(--primary)}
/* HP: label hanya untuk pin terpilih dan pin yang sedang disorot, supaya peta tidak penuh tulisan */
.k3a-mapsel:not(.web) .ms-pin:not(.on):not(.focus) .pl{display:none}
/* lokasi produksi */
.k3a-mapsel .ms-home{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:4px;z-index:1;pointer-events:none}
.k3a-mapsel .ms-home .dot{position:relative;width:18px;height:18px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 3px var(--surface),0 2px 6px color-mix(in srgb,var(--ink-fixed) 30%,transparent)}
.k3a-mapsel .ms-home .dot::after{content:"";position:absolute;inset:-14px;border-radius:50%;background:color-mix(in srgb,var(--pink) 22%,transparent);animation:ms-pulse 2.2s ease-out infinite}
.k3a-mapsel .ms-home .pl{padding:3px 8px;border-radius:var(--radius-pill);background:var(--pink-soft);font:var(--text-badge);color:var(--pink-ink);white-space:nowrap}
@keyframes ms-pulse{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.k3a-mapsel .ms-home .dot::after{animation:none;opacity:.6}}
/* bilah atas melayang: kembali + langkah, cari, chip wilayah */
.k3a-mapsel .ms-top{position:absolute;left:0;right:0;top:0;z-index:4;display:grid;gap:var(--space-2);padding:var(--space-3) var(--space-4) var(--space-2);pointer-events:none}
.k3a-mapsel .ms-top>*{pointer-events:auto}
.k3a-mapsel .ms-bar{display:flex;align-items:center;gap:var(--space-2)}
.k3a-mapsel .ms-bar .ms-search{flex:1;min-width:0}
.k3a-mapsel .ms-ic{flex:none;display:grid;place-items:center;width:var(--control-h);height:var(--control-h);border:0;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-pop);color:var(--ink);text-decoration:none;cursor:pointer}
.k3a-mapsel .ms-ic svg{width:20px;height:20px}
.k3a-mapsel .ms-step{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:var(--shadow-sm)}
.k3a-mapsel .ms-step .rg-stepof{font:var(--text-tag);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.k3a-mapsel .ms-step .rg-prog i{height:4px}
.k3a-mapsel .ms-search{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-h);padding:0 var(--space-2) 0 var(--space-4);border-radius:var(--radius-pill);background:var(--surface);box-shadow:var(--shadow-pop);color:var(--ink-mute);cursor:text}
.k3a-mapsel .ms-search svg{flex:none;width:18px;height:18px}
.k3a-mapsel .ms-search input{flex:1;min-width:0;height:var(--control-h);border:0;outline:0;background:transparent;font:var(--text-input);color:var(--ink)}
.k3a-mapsel .ms-search input::placeholder{color:var(--ink-mute)}
.k3a-mapsel .ms-search input::-webkit-search-cancel-button{display:none}
.k3a-mapsel .ms-search:focus-within{box-shadow:var(--shadow-pop),inset 0 0 0 2px var(--primary)}
.k3a-mapsel .ms-search .clr{flex:none;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:var(--surface-soft);color:var(--ink-soft);font:700 16px/1 var(--font-display);cursor:pointer}
.k3a-mapsel .ms-chips{flex-wrap:nowrap;overflow-x:auto;gap:var(--space-1);margin:0 0 var(--space-3);padding:var(--space-1);border-radius:var(--radius-pill);background:var(--surface-soft);scrollbar-width:none;touch-action:pan-x;scroll-padding-inline:var(--space-1)}
.k3a-mapsel .ms-chips::-webkit-scrollbar{display:none}
/* tombol ke lokasi produksi */
.k3a-mapsel .ms-fab{position:absolute;right:var(--space-4);bottom:calc(var(--ms-h,var(--ms-peek)) + 12px);z-index:3;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:var(--surface);color:var(--primary);box-shadow:var(--shadow-pop);cursor:pointer;transition:bottom .25s ease,opacity .2s}
.k3a-mapsel .ms-fab svg{width:22px;height:22px}
/* sheet */
.k3a-mapsel .ms-sheet{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;flex-direction:column;height:var(--ms-h,var(--ms-peek));max-height:calc(100% - 8px);border-radius:var(--radius-xl) var(--radius-xl) 0 0;background:var(--surface);box-shadow:0 -6px 24px color-mix(in srgb,var(--ink-fixed) 16%,transparent);transition:height .25s ease}
.k3a-mapsel.dragging .ms-sheet,.k3a-mapsel.dragging .ms-fab{transition:none}
.k3a-mapsel[data-snap="peek"]{--ms-h:var(--ms-peek)}
.k3a-mapsel[data-snap="half"]{--ms-h:50%}
.k3a-mapsel[data-snap="full"]{--ms-h:calc(100% - var(--ms-top) + 8px)}
.k3a-mapsel[data-snap="full"] .ms-fab{opacity:0;pointer-events:none}
.k3a-mapsel .ms-grab{flex:none;padding:6px var(--space-4) var(--space-2);cursor:grab}
.k3a-mapsel .ms-handle,.k3a-mapsel .ms-head{touch-action:none}
.k3a-mapsel .ms-handle{display:block;width:100%;height:20px;margin:0 0 2px;padding:0;border:0;background:none;cursor:pointer}
.k3a-mapsel .ms-handle::before{content:"";display:block;width:40px;height:5px;margin:0 auto;border-radius:var(--radius-pill);background:var(--line-strong)}
.k3a-mapsel .ms-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px var(--space-3)}
.k3a-mapsel .ms-head small{grid-column:1/-1}
.k3a-mapsel .ms-head b{font:var(--text-card-title);color:var(--ink)}
.k3a-mapsel .ms-head small{font:var(--text-help);color:var(--ink-mute)}
.k3a-mapsel .ms-head small .mn{color:var(--pink-ink);font-weight:700}
.k3a-mapsel .ms-head .k3a-btn{min-height:32px;padding:0 var(--space-2);margin-right:calc(var(--space-2) * -1)}
.k3a-mapsel .ms-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--space-1) var(--space-4) var(--space-3);display:grid;grid-auto-rows:max-content;gap:var(--space-2);align-content:start}
/* isi daftar tidak boleh dipadatkan grid saat sheet pendek (Alert ber-overflow:hidden menyusut ke 0) */
.k3a-mapsel .ms-list>*{min-height:max-content}
.k3a-mapsel .ms-list>.k3a-alert{margin-bottom:var(--space-1)}
.k3a-mapsel .ms-grp{margin:var(--space-2) 0 0;font:var(--text-tag);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.k3a-mapsel .ms-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:var(--space-3);width:100%;min-height:var(--control-h-lg);padding:var(--space-2) var(--space-3);border:0;border-radius:var(--radius-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);text-align:left;font-family:inherit;color:var(--ink);cursor:pointer;transition:box-shadow .15s,background .15s}
.k3a-mapsel .ms-row:hover{box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.k3a-mapsel .ms-row .ck{display:grid;place-items:center;width:22px;height:22px;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1.5px var(--line-strong);background:var(--surface);color:transparent;font:800 13px/1 var(--font-display)}
.k3a-mapsel .ms-row b{display:block;font:var(--text-body-strong);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k3a-mapsel .ms-row small{display:block;font:var(--text-help);color:var(--ink-mute)}
.k3a-mapsel .ms-row .km{font:var(--text-code);color:var(--ink-mute);white-space:nowrap}
.k3a-mapsel .ms-row.on{background:var(--primary-soft);box-shadow:inset 0 0 0 2px var(--primary)}
.k3a-mapsel .ms-row.on b{color:var(--primary-strong)}
.k3a-mapsel .ms-row.on .ck{background:var(--primary);box-shadow:none;color:var(--on-primary)}
.k3a-mapsel .ms-row.focus{box-shadow:inset 0 0 0 2px var(--primary),0 0 0 3px var(--primary-soft)}
.k3a-mapsel .ms-row:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--primary),0 0 0 3px var(--primary-soft)}
.k3a-mapsel .ms-empty{padding:var(--space-5) var(--space-3);text-align:center;font:var(--text-body);color:var(--ink-mute)}
.k3a-mapsel .ms-foot{flex:none;display:grid;grid-template-columns:auto 1fr;gap:var(--space-2);padding:var(--space-3) var(--space-4) var(--space-4);border-top:1px solid var(--line);background:var(--surface)}
.k3a-mapsel .ms-foot .ms-saved{grid-column:1/-1;margin:0 0 2px;font:var(--text-caption);color:var(--ink-mute);text-align:center}
.k3a-mapsel .ms-foot .k3a-btn{min-height:var(--control-h)}
/* peek: daftar disembunyikan, hanya judul + aksi */
.k3a-mapsel[data-snap="peek"] .ms-list{overflow:hidden}
/* web: panel kiri tetap terbuka penuh, peta di kanannya */
.k3a-mapsel.web{--ms-panel:420px;--ms-top:0px;height:calc(100vh - 65px);height:calc(100dvh - 65px);min-height:600px}
.k3a-mapsel.web .ms-sheet{left:var(--space-5);top:var(--space-5);bottom:var(--space-5);right:auto;width:var(--ms-panel);height:auto;max-height:none;border-radius:var(--radius-xl);box-shadow:var(--shadow-pop);transition:none}
.k3a-mapsel.web .ms-grab{padding:var(--space-5) var(--space-5) var(--space-3);cursor:auto;display:grid;gap:var(--space-3)}
.k3a-mapsel.web .ms-handle{display:none}
.k3a-mapsel.web .ms-intro{display:grid;gap:var(--space-2)}
.k3a-mapsel.web .ms-intro h2{margin:var(--space-1) 0 0;font:var(--text-h4);color:var(--ink)}
.k3a-mapsel.web .ms-intro h2 em{font-style:normal;color:var(--primary)}
.k3a-mapsel.web .ms-search{box-shadow:inset 0 0 0 1.5px var(--line);border-radius:var(--radius-md)}
.k3a-mapsel.web .ms-search:focus-within{box-shadow:inset 0 0 0 2px var(--primary)}
.k3a-mapsel.web .ms-chips{margin:0}
.k3a-mapsel.web .ms-list{padding:var(--space-1) var(--space-5) var(--space-3)}
.k3a-mapsel.web .ms-foot{padding:var(--space-3) var(--space-5) var(--space-5);border-radius:0 0 var(--radius-xl) var(--radius-xl)}
.k3a-mapsel.web .ms-area{left:calc(var(--ms-panel) + var(--space-5) * 2 + 24px);right:72px;top:48px;bottom:56px}
.k3a-mapsel.web .ms-region{left:calc(var(--ms-panel) + var(--space-5) * 2 + 24px);top:var(--space-5);transform:none}
.k3a-mapsel.web .ms-fab{right:var(--space-5);bottom:var(--space-5)}
.k3a-mapsel.web .ms-legend{position:absolute;right:calc(var(--space-5) + 60px);bottom:var(--space-5);z-index:3;display:flex;gap:var(--space-3);align-items:center;min-height:48px;padding:0 var(--space-4);border-radius:var(--radius-pill);background:var(--surface);box-shadow:var(--shadow-pop);font:var(--text-caption);color:var(--ink-soft)}
.k3a-mapsel .ms-legend{display:none}
.k3a-mapsel.web .ms-legend i{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:50%;vertical-align:-1px;background:var(--surface);box-shadow:inset 0 0 0 2px var(--line-strong)}
.k3a-mapsel.web .ms-legend i.on{background:var(--primary);box-shadow:none}
.k3a-mapsel.web .ms-legend i.hm{background:var(--pink);box-shadow:none}
/* dipasang di kerangka pendaftaran: HP = seluruh layar; web = sisa tinggi di bawah rg-top */
.k3a.rg.k3a-mapsel{display:block;min-height:520px}
.k3a.rg:has(>.k3a-mapsel.web){height:100vh;height:100dvh;min-height:640px}
.k3a.rg>.k3a-mapsel.web{flex:1 1 auto;height:auto;min-height:0}
.k3a.rg:has(>.k3a-mapsel.web) .rg-top{position:relative}
/* label wilayah di peta (skema) */
.k3a-mapsel .ms-lbl{position:absolute;transform:translate(-50%,-50%);font:600 12px/1.2 var(--font-display);letter-spacing:.04em;color:color-mix(in srgb,var(--ink-mute) 80%,transparent);white-space:nowrap;pointer-events:none;text-shadow:0 0 3px var(--ms-land),0 0 6px var(--ms-land)}
.k3a-mapsel .ms-lbl.w{font-style:italic;color:color-mix(in srgb,var(--tosca) 60%,var(--ink));text-shadow:none}
.k3a-mapsel .ms-lbl.lg{font:700 13px/1.2 var(--font-display);letter-spacing:.08em;text-transform:uppercase}
.k3a-mapsel .ms-top>.ms-step{justify-self:start}
.k3a-mapsel .ms-step .rg-prog{width:88px}
/* HP: pin lebih kecil, tanpa label wilayah dan status simpan (ruang peta) */
.k3a-mapsel:not(.web) .ms-pin .pt{width:30px;height:30px}
.k3a-mapsel:not(.web) .ms-pin .pt svg{width:14px;height:14px}
.k3a-mapsel:not(.web) .ms-region,.k3a-mapsel:not(.web) .ms-saved{display:none}
.k3a-mapsel.web .ms-fab{opacity:1;pointer-events:auto}
.k3a-mapsel:not(.web) .ms-pin.on:not(.focus) .pl{display:none}
/* chip wilayah: geser ke samping (sentuh, trackpad, roda tetikus, atau seret tetikus); ujung kanan memudar sebagai tanda masih ada */
.k3a-mapsel .ms-chips{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-snap-type:x proximity;cursor:grab;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.k3a-mapsel .ms-chips.end{-webkit-mask-image:none;mask-image:none}
.k3a-mapsel .ms-chips.drag{cursor:grabbing;scroll-snap-type:none}
.k3a-mapsel .ms-chips .k3a-chip{flex:none;scroll-snap-align:start}
.k3a-mapsel .ms-chips .k3a-chip:not(.on) i{background:var(--surface)}