@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --blue:#2245B3;
  --blue-600:#1B3893;
  --blue-700:#152C75;
  --blue-50:#EEF2FC;
  --blue-100:#DCE4F8;
  --yellow:#EBB32A;
  --yellow-50:#FDF6E3;
  --yellow-100:#FAEBC2;
  --red:#FF1921;
  --red-ink:#D0121A;
  --red-50:#FFF0F0;
  --green:#14834B;
  --green-50:#E4F5EC;
  --orange:#B8530F;
  --orange-50:#FDEEE2;
  --white:#FFFFFF;
  --gray-50:#F5F6F8;
  --gray-100:#ECEEF2;
  --gray-200:#DEE2EA;
  --gray-300:#C6CCD8;
  --gray-500:#7A8399;
  --gray-600:#5A6378;
  --ink:#16203F;
  --ink-2:#3A4460;
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(22,32,63,.06);
  --shadow:0 1px 2px rgba(22,32,63,.05),0 6px 24px -8px rgba(22,32,63,.12);
  --shadow-lg:0 2px 4px rgba(22,32,63,.06),0 24px 48px -16px rgba(22,32,63,.22);
  --focus:0 0 0 4px rgba(34,69,179,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Poppins',system-ui,sans-serif;color:var(--ink);background:var(--gray-50);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.5;overflow-x:hidden}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3,h4{margin:0;color:var(--blue);font-weight:600;line-height:1.2;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--blue)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:var(--radius);border:1.5px solid transparent;font-weight:600;font-size:15px;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s,transform .05s;white-space:nowrap;text-decoration:none;line-height:1}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:var(--focus)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-600)}
.btn-primary:disabled{background:var(--gray-300);cursor:not-allowed}
.btn-ghost{background:#fff;color:var(--blue);border-color:var(--gray-200)}
.btn-ghost:hover{border-color:var(--blue);background:var(--blue-50)}
.btn-ghost:disabled{color:var(--gray-500);border-color:var(--gray-200);background:var(--gray-50);cursor:not-allowed}
.btn-text{background:none;color:var(--blue);padding:0 10px;height:40px}
.btn-text:hover{background:var(--blue-50)}
.btn-sm{height:38px;padding:0 14px;font-size:13.5px;border-radius:10px}
.btn-lg{height:56px;padding:0 30px;font-size:16px}
.btn-danger{background:#fff;color:var(--red-ink);border-color:#FFC9CB}
.btn-danger:hover{background:var(--red-50)}

/* Inputs */
.input,.select,.textarea{width:100%;height:52px;padding:0 16px;border-radius:var(--radius);border:1.5px solid var(--gray-200);background:#fff;font-size:15.5px;transition:border-color .15s,box-shadow .15s;outline:none}
.textarea{height:auto;min-height:104px;padding:14px 16px;resize:vertical;line-height:1.5}
.input::placeholder,.textarea::placeholder{color:#A3AABB}
.input:hover,.select:hover,.textarea:hover{border-color:var(--gray-300)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--blue);box-shadow:var(--focus)}
.input:disabled,.select:disabled{background:var(--gray-50);color:var(--gray-500);cursor:not-allowed}
.is-invalid .input,.is-invalid .select,.is-invalid .textarea,.input.is-invalid{border-color:var(--red);background:#FFFBFB}
.is-invalid .input:focus,.is-invalid .select:focus{box-shadow:0 0 0 4px rgba(255,25,33,.14)}
.is-valid .input,.is-valid .select{border-color:#B9C6EA}
.select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%232245B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer}

/* Pills */
.pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;line-height:1}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.no-dot::before{display:none}

.card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);border:1px solid var(--gray-100)}
.mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
.tnum{font-variant-numeric:tabular-nums}
