body { font-family: 'Inter', system-ui, sans-serif; color: #0B0B0F; -webkit-font-smoothing: antialiased; }
.logo-dark { filter: invert(1); }

/* ---------- Auth ---------- */
.auth { min-height: 100vh; display: grid; background: #fff; }
@media (min-width: 1024px) { .auth { grid-template-columns: 1.1fr 1fr; } }
.auth-left { display: none; position: relative; overflow: hidden; color: #fff; padding: 2.25rem 3.5rem; flex-direction: column;
  background: radial-gradient(520px 380px at 75% 85%, rgba(251,191,36,.22), transparent 62%), radial-gradient(400px 300px at 0% 0%, rgba(255,255,255,.06), transparent 60%), #0B0B0F; }
@media (min-width: 1024px) { .auth-left { display: flex; } }
.auth-right { width: 100%; max-width: 520px; margin: 0 auto; padding: 2rem 1.5rem; display: flex; flex-direction: column; justify-content: center; }
.auth-title { font-size: 2.6rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; margin-top: 3.5rem; }
.auth-title em { font-style: normal; color: #FBBF24; display: block; }
.feat { display: flex; align-items: center; gap: .9rem; margin-top: 1.25rem; }
.feat .ico { width: 42px; height: 42px; border-radius: .7rem; display: grid; place-items: center; color: #FBBF24; background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.25); }
.feat b { display: block; font-size: .85rem; } .feat span { font-size: .75rem; color: #a1a1aa; }

.ic-input { position: relative; }
.ic-input > svg.ic { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: #a1a1aa; width: 1rem; height: 1rem; pointer-events: none; }
.ic-input .field { padding-left: 2.6rem; }
.ic-input .eye { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); color: #71717a; }
.btn-yellow { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; background: #FBBF24; color: #0B0B0F; font-weight: 700; font-size: .9rem; border-radius: .75rem; padding: .85rem; transition: all .2s; box-shadow: 0 8px 20px -8px rgba(245,158,11,.6); }
.btn-yellow:hover { background: #F59E0B; transform: translateY(-1px); }
.social-btn { display: flex; align-items: center; justify-content: center; gap: .55rem; border: 1.5px solid #e4e4e7; border-radius: .75rem; padding: .7rem; font-size: .85rem; font-weight: 500; transition: all .2s; background: #fff; }
.social-btn:hover { border-color: #0B0B0F; }
.code-box { width: 100%; aspect-ratio: 1/1.1; max-width: 56px; text-align: center; font-size: 1.4rem; font-weight: 600; border: 1.5px solid #e4e4e7; border-radius: .75rem; outline: none; transition: all .2s; }
.code-box:focus { border-color: #FBBF24; box-shadow: 0 0 0 4px rgba(251,191,36,.25); }
.code-box.filled { border-color: #0B0B0F; }
.dot { width: 8px; height: 8px; border-radius: 99px; background: #d4d4d8; display: inline-block; }
.dot.on { background: #FBBF24; }

/* ---------- App shell ---------- */
.side-link { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border-radius: .7rem; font-size: .88rem; font-weight: 500; color: #27272a; transition: background .15s; }
.side-link:hover { background: #f4f4f5; }
.side-link.active { background: #0B0B0F; color: #fff; font-weight: 600; }
.panel { background: #fff; border: 1px solid #ececf0; border-radius: 1rem; }
.panel-pad { padding: 1.25rem; }
.badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 600; padding: .25rem .65rem; border-radius: 99px; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.badge.signed { background: #dcfce7; color: #15803d; } .badge.pending { background: #fef3c7; color: #b45309; } .badge.draft { background: #f4f4f5; color: #52525b; }
.pill-tab { padding: .4rem .9rem; border-radius: .6rem; font-size: .78rem; font-weight: 500; color: #3f3f46; }
.pill-tab.on { background: #0B0B0F; color: #fff; }
.tile { width: 34px; height: 34px; border-radius: .55rem; display: grid; place-items: center; flex-shrink: 0; }
.tile.pdf { background: #fee2e2; color: #ef4444; } .tile.doc { background: #dcfce7; color: #16a34a; } .tile.xls { background: #dbeafe; color: #2563eb; }
.dtable { width: 100%; font-size: .82rem; min-width: 640px; }
.dtable th { text-align: left; font-weight: 500; font-size: .72rem; color: #71717a; padding: .6rem 1rem; }
.dtable td { padding: .75rem 1rem; border-top: 1px solid #f4f4f5; color: #52525b; }
.dtable td:first-child { color: #0B0B0F; }
.qa { display: flex; align-items: center; gap: .9rem; padding: .85rem; border: 1px solid #ececf0; border-radius: .8rem; background: #fff; width: 100%; text-align: left; transition: all .2s; }
.qa:hover { border-color: #0B0B0F; transform: translateX(2px); }
.qa .ib { width: 40px; height: 40px; border-radius: .6rem; background: #f4f4f5; display: grid; place-items: center; }
.pop { position: absolute; z-index: 60; background: #fff; border: 1px solid #e4e4e7; border-radius: .75rem; box-shadow: 0 16px 40px -12px rgba(0,0,0,.25); padding: .35rem; min-width: 180px; }
.pop button, .pop a { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .7rem; font-size: .82rem; border-radius: .5rem; text-align: left; }
.pop button:hover, .pop a:hover { background: #f4f4f5; }
.modal-bg { position: fixed; inset: 0; background: rgba(11,11,15,.55); backdrop-filter: blur(3px); z-index: 90; display: grid; place-items: center; padding: 1rem; animation: fade .2s; }
.modal-box { background: #fff; border-radius: 1.1rem; width: 100%; max-width: 480px; padding: 1.5rem; max-height: 90vh; overflow: auto; }
@keyframes fade { from { opacity: 0; } }
.switch { position: relative; width: 42px; height: 24px; background: #d4d4d8; border-radius: 99px; transition: .2s; flex-shrink: 0; cursor: pointer; }
.switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: #fff; border-radius: 99px; transition: .2s; }
.switch.on { background: #0B0B0F; } .switch.on::after { left: 21px; background: #FBBF24; }
.dropzone { border: 2px dashed #d4d4d8; border-radius: 1rem; padding: 2.5rem 1rem; text-align: center; transition: all .2s; cursor: pointer; background: #fafafa; }
.dropzone.over, .dropzone:hover { border-color: #FBBF24; background: #fffbeb; }
.step { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; color: #a1a1aa; }
.step b { width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; background: #f4f4f5; font-size: .75rem; }
.step.on { color: #0B0B0F; } .step.on b { background: #FBBF24; } .step.done b { background: #0B0B0F; color: #fff; }