/* ═══════════════════════════════════════════════════════
   LENGKAPP DESIGN SYSTEM — _base.css
   Shared tokens, reset, typography, components
═══════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Lora:ital,wght@1,400;1,500;1,600&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;1,300&display=swap');

/* ── Tokens ── */
:root {
  --bg:        #080808;
  --bg-2:      #0f0f0f;
  --bg-3:      #161616;
  --surface:   #1c1c1c;
  --surface-2: #242424;
  --border:    #272727;
  --border-2:  #333;
  --text:      #ede9e3;
  --text-2:    #8a8480;
  --text-3:    #4a4744;
  --accent:    #d4f04a;
  --accent-h:  #c8e83a;
  --fire:      #ff5a1f;
  --fire-h:    #e84d12;
  --accent-a:  rgba(212,240,74,0.10);
  --fire-a:    rgba(255,90,31,0.12);
  --green:     #3ddc84;
  --red:       #ff4d4d;
  --yellow:    #f5c842;
  --blue:      #4d9fff;
  --overlay:   rgba(0,0,0,0.82);
  --sh-sm: 0 1px 4px rgba(0,0,0,0.55);
  --sh-md: 0 4px 28px rgba(0,0,0,0.65);
  --sh-lg: 0 16px 56px rgba(0,0,0,0.72);
  --f-ui:   'Plus Jakarta Sans', sans-serif;
  --f-edit: 'Lora', serif;
  --f-mono: 'JetBrains Mono', monospace;
  --t-xs:   0.64rem;
  --t-sm:   0.8rem;
  --t-base: 1rem;
  --t-md:   1.25rem;
  --t-lg:   1.563rem;
  --t-xl:   1.953rem;
  --t-2xl:  2.441rem;
  --t-3xl:  3.052rem;
  --lh-tight: 1.05; --lh-snug: 1.25; --lh-normal: 1.5; --lh-loose: 1.7;
  --ls-tight: -0.04em; --ls-snug: -0.025em; --ls-wide: 0.06em; --ls-wider: 0.12em;
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 380ms; --dur-slower: 560ms;
  --sidebar-w: 240px;
  --topbar-h:  56px;
}
[data-theme="light"] {
  --bg: #f4f1ec; --bg-2: #ebe8e2; --bg-3: #e2dfd8;
  --surface: #ffffff; --surface-2: #f4f1ec;
  --border: #d6d2ca; --border-2: #c4c0b8;
  --text: #181614; --text-2: #5e5a56; --text-3: #9a9690;
  --accent: #1a1814; --accent-h: #2c2926;
  --fire: #ff5a1f; --fire-h: #e84d12;
  --accent-a: rgba(26,24,20,0.07); --fire-a: rgba(255,90,31,0.1);
  --sh-sm: 0 1px 4px rgba(0,0,0,0.1); --sh-md: 0 4px 28px rgba(0,0,0,0.1); --sh-lg: 0 16px 56px rgba(0,0,0,0.13);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--f-ui);font-size:var(--t-base);background:var(--bg);color:var(--text);line-height:var(--lh-normal);overflow-x:hidden;transition:background var(--dur-slow) ease,color var(--dur-slow) ease}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
ul,ol{list-style:none}
input,textarea,select{font-family:inherit}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:3px}

/* ── Logo ── */
.logo{font-size:var(--t-md);font-weight:800;letter-spacing:var(--ls-tight);line-height:1}
.logo span{color:var(--fire)}
.logo--sm{font-size:var(--t-base)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-md);font-family:var(--f-ui);font-weight:700;letter-spacing:-0.01em;cursor:pointer;transition:background var(--dur-base) ease,color var(--dur-base) ease,transform var(--dur-fast) var(--ease-spring),box-shadow var(--dur-base) ease,border-color var(--dur-base) ease;border:none;text-decoration:none}
.btn:active{transform:scale(0.96)!important}
.btn--primary{padding:11px 22px;background:var(--accent);color:#080808;font-size:var(--t-sm)}
.btn--primary:hover{background:var(--accent-h);transform:translateY(-1px);box-shadow:0 6px 24px rgba(212,240,74,0.32)}
[data-theme="light"] .btn--primary{background:var(--fire);color:#fff}
[data-theme="light"] .btn--primary:hover{background:var(--fire-h);box-shadow:0 6px 24px rgba(255,90,31,0.28)}
.btn--secondary{padding:11px 22px;background:var(--surface);border:1px solid var(--border-2);color:var(--text);font-size:var(--t-sm)}
.btn--secondary:hover{background:var(--surface-2);border-color:var(--text-3)}
.btn--ghost{padding:8px 14px;color:var(--text-2);font-size:var(--t-sm);font-weight:500}
.btn--ghost:hover{color:var(--text)}
.btn--danger{padding:9px 18px;background:rgba(255,77,77,0.12);color:var(--red);border:1px solid rgba(255,77,77,0.25);font-size:var(--t-sm)}
.btn--danger:hover{background:rgba(255,77,77,0.2)}
.btn--sm{padding:7px 14px;font-size:var(--t-xs)}
.btn--full{width:100%;justify-content:center}
.btn--icon{padding:8px;border-radius:var(--r-md);color:var(--text-2);transition:color var(--dur-base) ease,background var(--dur-base) ease}
.btn--icon:hover{color:var(--text);background:var(--surface)}
.btn .arrow{display:inline-flex;transition:transform var(--dur-base) var(--ease-out)}
.btn:hover .arrow{transform:translateX(4px)}

/* ── Form elements ── */
.form-group{display:flex;flex-direction:column;gap:5px}
.form-label{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--text-2);letter-spacing:0.04em}
.form-hint{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--text-3);margin-top:3px}
.form-error{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--red);margin-top:3px;display:none}
.form-group.has-error .form-error{display:block}
.form-group.has-error .form-input{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,77,77,0.12)}
.form-input,.form-select,.form-textarea{padding:10px 13px;background:var(--bg);border:1px solid var(--border-2);border-radius:var(--r-md);color:var(--text);font-size:var(--t-sm);outline:none;width:100%;transition:border-color var(--dur-base) ease,box-shadow var(--dur-base) ease,background var(--dur-base) ease}
.form-input:hover,.form-select:hover{border-color:var(--text-3)}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(212,240,74,0.13);background:var(--bg-2)}
[data-theme="light"] .form-input:focus,[data-theme="light"] .form-select:focus,[data-theme="light"] .form-textarea:focus{border-color:var(--fire);box-shadow:0 0 0 3px rgba(255,90,31,0.11)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text-3)}
.form-textarea{resize:vertical;min-height:100px}
.form-select{appearance:none;cursor:pointer}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.form-row{grid-template-columns:1fr}}
.form-divider{display:flex;align-items:center;gap:12px;color:var(--text-3);font-family:var(--f-mono);font-size:var(--t-xs)}
.form-divider::before,.form-divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── Input with icon ── */
.input-wrap{position:relative}
.input-wrap .form-input{padding-left:38px}
.input-wrap .input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none;transition:color var(--dur-base) ease}
.input-wrap:focus-within .input-icon{color:var(--text-2)}
.input-wrap .input-action{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text-3);cursor:pointer;transition:color var(--dur-base) ease}
.input-wrap .input-action:hover{color:var(--text-2)}

/* ── Checkbox / Radio ── */
.check-wrap{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.check-wrap input{display:none}
.check-box{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border-2);flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;transition:all var(--dur-base) ease;background:var(--bg)}
.check-wrap input:checked~.check-box{background:var(--accent);border-color:var(--accent)}
[data-theme="light"] .check-wrap input:checked~.check-box{background:var(--fire);border-color:var(--fire)}
.check-mark{width:9px;height:9px;opacity:0;transform:scale(0);transition:all var(--dur-fast) var(--ease-spring)}
.check-wrap input:checked~.check-box .check-mark{opacity:1;transform:scale(1)}
.check-label{font-size:var(--t-sm);color:var(--text-2);line-height:1.5}

/* ── Tags/Badges ── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-pill);font-family:var(--f-mono);font-size:var(--t-xs);font-weight:400;letter-spacing:0.04em}
.badge--accent{background:var(--accent-a);color:var(--accent)}
[data-theme="light"] .badge--accent{background:var(--fire-a);color:var(--fire)}
.badge--green{background:rgba(61,220,132,0.12);color:var(--green)}
.badge--red{background:rgba(255,77,77,0.12);color:var(--red)}
.badge--yellow{background:rgba(245,200,66,0.12);color:var(--yellow)}
.badge--blue{background:rgba(77,159,255,0.12);color:var(--blue)}
.badge--neutral{background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}

/* ── Cards ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:24px;transition:border-color var(--dur-base) ease,box-shadow var(--dur-base) ease}
.card:hover{border-color:var(--border-2)}
.card--interactive:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}

/* ── App Shell: Topbar ── */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);background:rgba(8,8,8,0.9);backdrop-filter:blur(18px);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:12px;z-index:200;transition:background var(--dur-slow) ease}
[data-theme="light"] .topbar{background:rgba(244,241,236,0.9)}
.topbar__left{display:flex;align-items:center;gap:12px}
.topbar__right{display:flex;align-items:center;gap:8px;margin-left:auto}

/* ── App Shell: Sidebar ── */
.sidebar{position:fixed;top:var(--topbar-h);left:0;width:var(--sidebar-w);height:calc(100vh - var(--topbar-h));background:var(--bg-2);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;z-index:100;transition:transform var(--dur-slow) var(--ease-out)}
.sidebar::-webkit-scrollbar{width:3px}
.sidebar__section{padding:16px 10px 8px}
.sidebar__label{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-3);padding:0 8px;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.sidebar__item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-md);font-size:var(--t-sm);font-weight:500;color:var(--text-2);cursor:pointer;transition:color var(--dur-base) ease,background var(--dur-base) ease,padding-left var(--dur-base) var(--ease-out);user-select:none}
.sidebar__item:hover{color:var(--text);background:var(--surface);padding-left:14px}
.sidebar__item--active{color:var(--text);background:var(--surface)}
.sidebar__item--active:hover{padding-left:10px}
.sidebar__item svg{flex-shrink:0;opacity:0.6;transition:opacity var(--dur-base) ease,transform var(--dur-base) var(--ease-spring)}
.sidebar__item:hover svg,.sidebar__item--active svg{opacity:1}
.sidebar__item:hover svg{transform:scale(1.1)}
.sidebar__item-badge{margin-left:auto;padding:1px 7px;border-radius:var(--r-pill);font-family:var(--f-mono);font-size:0.6rem;background:var(--accent-a);color:var(--accent)}
[data-theme="light"] .sidebar__item-badge{background:var(--fire-a);color:var(--fire)}
.sidebar__footer{margin-top:auto;padding:12px 10px;border-top:1px solid var(--border)}

/* ── App Shell: Page content ── */
.page{margin-left:var(--sidebar-w);margin-top:var(--topbar-h);min-height:calc(100vh - var(--topbar-h));padding:32px}
@media(max-width:900px){.page{margin-left:0;padding:20px}}

/* ── Page header ── */
.page-header{margin-bottom:28px}
.page-header__eyebrow{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.page-header__title{font-size:var(--t-xl);font-weight:800;letter-spacing:var(--ls-tight);line-height:var(--lh-snug)}
.page-header__sub{font-size:var(--t-sm);color:var(--text-2);margin-top:6px;line-height:var(--lh-loose)}
.page-header__actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

/* ── Tabs ── */
.tabs{display:flex;gap:2px;padding:3px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);width:fit-content}
.tab-btn{padding:7px 16px;border-radius:var(--r-md);font-size:var(--t-sm);font-weight:600;color:var(--text-2);transition:all var(--dur-base) ease;cursor:pointer}
.tab-btn--active{background:var(--bg-2);color:var(--text);box-shadow:var(--sh-sm)}
.tab-btn:hover:not(.tab-btn--active){color:var(--text)}
.tab-panel{display:none}.tab-panel--active{display:block}

/* ── Stats ── */
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:20px 22px}
.stat-card__label{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--text-3);letter-spacing:var(--ls-wide);text-transform:uppercase;margin-bottom:8px}
.stat-card__value{font-size:var(--t-2xl);font-weight:800;letter-spacing:var(--ls-tight);line-height:1}
.stat-card__sub{font-size:var(--t-xs);color:var(--text-2);margin-top:4px;font-family:var(--f-mono)}
.stat-card__change{font-family:var(--f-mono);font-size:var(--t-xs);padding:2px 7px;border-radius:var(--r-pill);margin-top:8px;display:inline-block}
.stat-card__change--up{background:rgba(61,220,132,0.12);color:var(--green)}
.stat-card__change--down{background:rgba(255,77,77,0.12);color:var(--red)}

/* ── Progress bar ── */
.progress{height:5px;background:var(--border);border-radius:var(--r-pill);overflow:hidden}
.progress__fill{height:100%;background:var(--accent);border-radius:var(--r-pill);transition:width 0.6s var(--ease-out)}
[data-theme="light"] .progress__fill{background:var(--fire)}
.progress--sm{height:3px}

/* ── Credit meter ── */
.credit-meter{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px}
.credit-meter__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.credit-meter__label{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--text-3);letter-spacing:0.06em;text-transform:uppercase}
.credit-meter__val{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--text-2)}

/* ── Tables ── */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-xl)}
table{width:100%;border-collapse:collapse}
thead th{background:var(--surface);padding:11px 16px;text-align:left;font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:0.06em;text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--border);white-space:nowrap}
tbody td{padding:12px 16px;font-size:var(--t-sm);color:var(--text-2);border-bottom:1px solid var(--border)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--dur-fast) ease}
tbody tr:hover{background:var(--surface-2)}

/* ── Avatar ── */
.avatar{border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.avatar--sm{width:28px;height:28px;font-size:var(--t-xs)}
.avatar--md{width:36px;height:36px;font-size:var(--t-sm)}
.avatar--lg{width:52px;height:52px;font-size:var(--t-md)}
.avatar--xl{width:80px;height:80px;font-size:var(--t-xl)}
.avatar--fire{background:var(--fire-a);color:var(--fire)}
.avatar--accent{background:var(--accent-a);color:var(--accent)}
[data-theme="light"] .avatar--accent{background:var(--fire-a);color:var(--fire)}

/* ── Theme toggle ── */
.theme-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);color:var(--text-2);transition:color var(--dur-base) ease,background var(--dur-base) ease,transform var(--dur-slow) var(--ease-spring)}
.theme-btn:hover{color:var(--text);background:var(--surface)}
.theme-btn.spinning{transform:rotate(360deg)}

/* ── Divider ── */
.divider{height:1px;background:var(--border);margin:20px 0}

/* ── Tooltip ── */
.tooltip{position:relative}
.tooltip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--surface-2);border:1px solid var(--border-2);color:var(--text);font-family:var(--f-mono);font-size:var(--t-xs);padding:4px 10px;border-radius:var(--r-md);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--dur-fast) ease}
.tooltip:hover::after{opacity:1}

/* ── Notification/Toast ── */
.toast-stack{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-lg);box-shadow:var(--sh-lg);font-size:var(--t-sm);pointer-events:all;animation:toast-in 0.35s var(--ease-spring) both;max-width:340px}
@keyframes toast-in{from{opacity:0;transform:translateY(16px) scale(0.94)}to{opacity:1;transform:none}}
.toast--success{border-color:rgba(61,220,132,0.3)}
.toast--error{border-color:rgba(255,77,77,0.3)}
.toast__icon{flex-shrink:0;font-size:1rem}

/* ── Shared auth page layout ── */
.auth-shell{min-height:100vh;display:grid;grid-template-columns:1fr;background:var(--bg)}
@media(min-width:900px){.auth-shell{grid-template-columns:1fr 1fr}}
.auth-panel{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:48px 32px;min-height:100vh}
.auth-panel__inner{width:100%;max-width:400px}
.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:40px}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);padding:32px}
.auth-card__title{font-size:var(--t-xl);font-weight:800;letter-spacing:var(--ls-tight);margin-bottom:4px}
.auth-card__sub{font-size:var(--t-sm);color:var(--text-2);margin-bottom:24px;line-height:var(--lh-loose)}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-link{font-size:var(--t-sm);color:var(--text-2)}
.auth-link a{color:var(--accent);font-weight:600;transition:color var(--dur-base) ease}
[data-theme="light"] .auth-link a{color:var(--fire)}
.auth-link a:hover{opacity:0.8}
.auth-visual{background:var(--bg-2);border-left:1px solid var(--border);display:none;flex-direction:column;justify-content:center;align-items:center;padding:60px 40px;position:relative;overflow:hidden}
@media(min-width:900px){.auth-visual{display:flex}}
.auth-visual__orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}

/* ── Shared app animations ── */
@keyframes fade-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes scale-in{from{opacity:0;transform:scale(0.94)}to{opacity:1;transform:none}}
.anim-fade-up{animation:fade-up var(--dur-slower) var(--ease-out) both}
.anim-fade-in{animation:fade-in var(--dur-slow) ease both}
.anim-scale-in{animation:scale-in var(--dur-slow) var(--ease-spring) both}
.d1{animation-delay:0ms}.d2{animation-delay:80ms}.d3{animation-delay:160ms}.d4{animation-delay:240ms}.d5{animation-delay:320ms}.d6{animation-delay:400ms}

/* ── Ripple ── */
@keyframes ripple{to{transform:scale(1);opacity:0}}

/* ── Code editor chrome ── */
.editor-topbar{display:flex;align-items:center;gap:10px;padding:0 14px;height:42px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}
.editor-dot{width:10px;height:10px;border-radius:50%}
.editor-dot--red{background:#ff5f57}
.editor-dot--yellow{background:#ffbd2e}
.editor-dot--green{background:#28c840}
.editor-tab{padding:6px 14px;font-family:var(--f-mono);font-size:var(--t-xs);color:var(--text-2);border-right:1px solid var(--border);cursor:pointer;transition:color var(--dur-base) ease,background var(--dur-base) ease;white-space:nowrap}
.editor-tab--active{color:var(--text);background:var(--bg)}
.editor-tab:hover:not(.editor-tab--active){color:var(--text)}

/* ── Plan banner ── */
.plan-banner{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);font-size:var(--t-sm)}
.plan-banner__name{font-weight:700;letter-spacing:var(--ls-snug)}
.plan-banner__upgrade{margin-left:auto;padding:4px 12px;background:var(--accent);color:#080808;border-radius:var(--r-pill);font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;letter-spacing:0.04em;transition:opacity var(--dur-base) ease}
.plan-banner__upgrade:hover{opacity:0.85}
[data-theme="light"] .plan-banner__upgrade{background:var(--fire);color:#fff}

/* ── Misc ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.text-accent{color:var(--accent)}[data-theme="light"] .text-accent{color:var(--fire)}
.text-muted{color:var(--text-2)}
.text-mono{font-family:var(--f-mono)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
@media(min-width:768px) and (max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}}
.flex-row{display:flex;align-items:center;gap:10px}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}