/* ═══════════════════════════════════════════════════
   DUE — Final Design System
   5 Colors: Black · Dark Gray · Light Gray · Off-White · White
   ═══════════════════════════════════════════════════ */

:root {
  --black: #000000;
  --dark: #333333;
  --gray: #e5e5e5;
  --off-white: #f5f5f5;
  --white: #ffffff;

  --text: var(--black);
  --text-secondary: var(--dark);
  --text-muted: rgba(0,0,0,0.5);
  --bg: var(--off-white);
  --surface: var(--white);
  --border: var(--gray);
  --border-light: var(--off-white);
  --fill: var(--black);
  --fill-secondary: var(--dark);
  --danger-bg: var(--dark);
  --success-bg: var(--dark);

  --r: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 9999px;
  --shadow: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 20px rgba(0,0,0,0.08);
}

/* ═══════ RESET ═══════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:17px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',sans-serif;
  font-size:17px;line-height:1.45;letter-spacing:-0.018em;
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  min-height:100dvh;
}
h2{font-size:1.2rem;font-weight:700;letter-spacing:-0.02em}
h3{font-size:1rem;font-weight:650}

/* ═══════ UTILITY ═══════ */
.flex{display:flex}.flex-between{justify-content:space-between}.flex-center{align-items:center}
.grid{display:grid}.grid-2{grid-template-columns:1fr 1fr;gap:10px}.grid-3{grid-template-columns:repeat(3,1fr);gap:8px}
.text-xs{font-size:0.72rem}.text-sm{font-size:0.82rem}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}
.text-center{text-align:center}.text-right{text-align:right}
.mt-1{margin-top:6px}.mt-2{margin-top:10px}.mt-3{margin-top:16px}.mt-4{margin-top:22px}
.mb-1{margin-bottom:6px}.mb-2{margin-bottom:10px}.mb-3{margin-bottom:16px}
.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}
.uppercase{text-transform:uppercase;letter-spacing:0.04em}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gap-1{gap:6px}.gap-2{gap:10px}.gap-3{gap:16px}

/* ═══════ APP SHELL ═══════ */
.app-shell{display:flex;flex-direction:column;min-height:100dvh}
.app-main{flex:1;max-width:640px;margin:0 auto;width:100%;padding:0 18px 96px}

/* ═══════ HEADER ═══════ */
.app-header{position:sticky;top:0;z-index:40;background:var(--white);border-bottom:0.5px solid var(--border)}
.app-header-inner{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 18px;max-width:640px;margin:0 auto}
.app-header-inner .brand{font-size:1.05rem;font-weight:750;letter-spacing:-0.02em;color:var(--text);text-decoration:none}
.app-header-inner .header-avatar{width:30px;height:30px;border-radius:50%;background:var(--fill);color:var(--white);display:inline-flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700;text-decoration:none;overflow:hidden;flex-shrink:0}
.app-header-inner .header-avatar img{width:100%;height:100%;object-fit:cover}

/* ═══════ BOTTOM NAV ═══════ */
.bottom-nav{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);z-index:50;background:var(--white);display:flex;height:60px;padding:0 6px;border-radius:16px;box-shadow:var(--shadow-lg);width:calc(100% - 28px);max-width:380px}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-muted);text-decoration:none;font-size:0.58rem;font-weight:550;gap:3px;transition:color .15s}
.bottom-nav a.active{color:var(--text)}
.bottom-nav .nav-icon{font-size:1.2rem;line-height:1;opacity:0.7;transition:opacity .15s}
.bottom-nav a.active .nav-icon{opacity:1}
.bottom-nav .nav-create .nav-icon{width:40px;height:40px;border-radius:50%;background:var(--fill);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:1.15rem;opacity:1;margin-top:-14px}

/* ═══════ CARDS ═══════ */
.card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--r-lg);padding:15px 17px;box-shadow:var(--shadow);margin-bottom:8px}
.card-title{font-size:0.88rem;font-weight:650;margin-bottom:6px}
.contract-card{padding:14px 16px;background:var(--surface);border:0.5px solid var(--border);border-radius:var(--r-lg);margin-bottom:6px;transition:box-shadow .15s}
.contract-card:hover{box-shadow:var(--shadow-md)}
.contract-card.active{border-left:3px solid var(--fill)}
.contract-card.overdue{border-left:3px solid var(--fill);background:var(--gray)}
.cc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cc-name{font-size:0.88rem;font-weight:600;flex:1;margin-right:8px}
.cc-status{font-size:0.62rem;font-weight:650;text-transform:uppercase;letter-spacing:0.04em;padding:2px 7px;border-radius:var(--r-full);background:var(--border)}
.cc-status-active,.cc-status-settled{background:var(--fill);color:var(--white)}
.cc-amount{font-size:1.3rem;font-weight:750;margin-bottom:2px}
.cc-meta{font-size:0.72rem;color:var(--text-muted);display:flex;justify-content:space-between}

/* ═══════ BALANCE CARD ═══════ */
.balance-card{background:var(--fill);color:var(--white);border-radius:var(--r-xl);padding:22px 18px;margin-bottom:16px;text-align:center}
.balance-label{font-size:0.68rem;font-weight:550;text-transform:uppercase;letter-spacing:0.08em;opacity:0.45;margin-bottom:4px}
.balance-amount{font-size:2.2rem;font-weight:750;letter-spacing:-0.035em}
.balance-sub{font-size:0.78rem;opacity:0.3;margin-top:2px}

/* ═══════ QUICK ACTIONS ═══════ */
.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.quick-action{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--r-lg);padding:16px 10px;text-align:center;cursor:pointer;font-family:inherit;transition:background .15s}
.quick-action:active{background:var(--off-white)}
.qa-icon{font-size:1.3rem;margin-bottom:4px}
.qa-label{font-size:0.72rem;font-weight:550;color:var(--text-secondary)}

/* ═══════ BUTTONS ═══════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:44px;padding:0 18px;border-radius:var(--r);font-size:0.88rem;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:opacity .15s}
.btn:active{opacity:0.7}
.btn-block{display:flex;width:100%}
.btn-lg{height:50px;font-size:0.95rem}
.btn-sm{height:34px;font-size:0.78rem;padding:0 12px}
.btn-dark,.btn-primary,.btn-accent,.btn-gold{background:var(--fill);color:var(--white)}
.btn-secondary,.btn-outline{background:var(--white);color:var(--text);border:1px solid var(--border)}
.btn-ghost{background:transparent;color:var(--text-secondary)}
.btn-danger{background:var(--dark);color:var(--white)}

/* ═══════ FORMS ═══════ */
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-secondary);margin-bottom:5px}
.form-input{width:100%;height:46px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r);font-size:0.92rem;font-family:inherit;color:var(--text);background:var(--surface);transition:border-color .15s}
.form-input:focus{outline:none;border-color:var(--fill)}
.form-input::placeholder{color:var(--text-muted)}
select.form-input{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23999' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-right:36px}
input[type=checkbox],input[type=radio]{width:auto;height:auto}
input[type=date]{-webkit-appearance:none}

/* ═══════ PHONE INPUT ═══════ */
.phone-input-wrap{display:flex;gap:5px}.country-select{width:90px;flex-shrink:0}.phone-number{flex:1}

/* ═══════ SECTIONS ═══════ */
.section-header{display:flex;align-items:center;justify-content:space-between;padding:8px 0 6px;margin-bottom:6px;border-bottom:0.5px solid var(--border)}
.section-header h2{font-size:0.95rem;font-weight:700}
.section-header a{font-size:0.82rem;color:var(--text);text-decoration:none;font-weight:600}

/* ═══════ BADGES ═══════ */
.badge{display:inline-flex;align-items:center;font-size:0.62rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;padding:2px 7px;border-radius:var(--r-full);background:var(--border);color:var(--text-secondary)}
.badge-pin,.badge-counterparty,.badge-awaiting_signatures,.badge-active,.badge-signed,.badge-settled{background:var(--fill);color:var(--white)}
.badge-rejected{background:var(--danger-bg)}

/* ═══════ STATUS STRIPS ═══════ */
.status-strip{padding:9px 12px;border-radius:var(--r);font-size:0.82rem;margin-bottom:8px;background:var(--off-white);color:var(--text-secondary)}
.status-strip.success{background:var(--fill);color:var(--white)}

/* ═══════ TOASTS ═══════ */
#toasts{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:200;width:calc(100% - 28px);max-width:360px;pointer-events:none}
#toasts>*{pointer-events:auto}
.toast{padding:12px 16px;border-radius:var(--r);font-size:0.82rem;font-weight:550;margin-bottom:6px;box-shadow:var(--shadow-md);text-align:center}
.toast-success{background:var(--fill);color:var(--white)}
.toast-error{background:var(--off-white);color:var(--text)}
.toast-warning{background:var(--off-white);color:var(--text)}

/* ═══════ EMPTY / LOADING ═══════ */
.empty-state{text-align:center;padding:40px 16px}
.empty-icon{font-size:2.5rem;margin-bottom:8px;opacity:0.25}.empty-state h3{margin-bottom:2px;font-size:1rem}.empty-state p{font-size:0.85rem;color:var(--text-secondary)}
.spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--fill);border-radius:50%;animation:spin .5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══════ PHOTO UPLOAD ═══════ */
.photo-upload{width:82px;height:82px;border-radius:50%;border:1.5px dashed var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--surface);margin:0 auto;font-size:1.8rem;color:var(--text-muted);overflow:hidden;transition:border-color .2s}
.photo-upload:hover{border-color:var(--fill)}
.photo-upload img{width:100%;height:100%;object-fit:cover}

/* ═══════ TERM / SUMMARY ROW ═══════ */
.term-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:0.5px solid var(--border)}
.term-row:last-child{border-bottom:none}
.term-label{font-size:0.85rem;color:var(--text-secondary)}.term-value{font-weight:600}

/* ═══════ PIN DISPLAY ═══════ */
.pin-display{font-size:1.8rem;font-weight:700;letter-spacing:0.2em;text-align:center;padding:14px;background:var(--off-white);border-radius:var(--r);user-select:all}

/* ═══════ PROGRESS BAR ═══════ */
.progress-track{height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.progress-fill{height:100%;background:var(--fill);border-radius:2px;transition:width .4s ease}

/* ═══════ FOOTER ═══════ */
.app-footer{text-align:center;padding:20px 16px;border-top:0.5px solid var(--border);font-size:0.78rem;color:var(--text-muted);background:var(--surface)}
.app-footer a{color:var(--text);text-decoration:none;font-weight:550;margin:0 10px}

/* ═══════ FILTER CHIPS ═══════ */
.filter-chip{transition:all .15s}
.filter-chip.active,.filter-chip[style*="var(--fill)"]{background:var(--fill)!important;color:var(--white)!important;border-color:var(--fill)!important}

/* ═══════ ANIMATIONS ═══════ */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.animate-fade{animation:fadeIn .3s ease}

/* ═══════ AUTH PAGES ═══════ */
.auth-page{display:flex;align-items:center;justify-content:center;min-height:60vh;padding:20px}
.auth-card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--r-xl);padding:28px 22px;width:100%;max-width:380px}
.auth-logo{font-size:1.4rem;font-weight:800;letter-spacing:-0.03em;text-align:center;margin-bottom:4px}
.captcha-box{display:flex;align-items:center;gap:8px;background:var(--off-white);padding:10px 14px;border-radius:var(--r);margin-bottom:14px}
.captcha-text{font-weight:700;font-size:1rem;min-width:70px}
@media(min-width:640px){
  .app-main{padding:0 24px 96px}
  .app-header-inner{padding:0 24px}
  .grid-2{gap:14px}
  .contract-card{padding:16px 20px}
}