@import url('tokens.css');
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--nc-font-body);color:var(--nc-text);background:#fff;-webkit-font-smoothing:antialiased}
.screen{width:390px;height:844px;background:var(--nc-light);position:relative;overflow:hidden;display:flex;flex-direction:column}
.status{height:44px;display:flex;justify-content:space-between;align-items:center;padding:0 24px;font:600 15px var(--nc-font-body)}
.top{padding:4px 20px 12px;display:flex;align-items:center;gap:12px}
.top h1{font:800 var(--nc-fs-xl)/1.2 var(--nc-font-head)}
.top .sub{font-size:13px;color:var(--nc-text-2)}
.content{flex:1;overflow:hidden;padding:0 16px 16px;display:flex;flex-direction:column;gap:12px}
h2{font:700 var(--nc-fs-md) var(--nc-font-head)}
.card{background:#fff;border-radius:var(--nc-r-lg);padding:16px;box-shadow:var(--nc-shadow)}
.card.navy{background:var(--nc-navy);color:#fff}
.label{font-size:13px;color:var(--nc-text-2);font-weight:500}
.navy .label{color:#B9C8D8}
.num{font:800 var(--nc-fs-num)/1.1 var(--nc-font-head);letter-spacing:-.5px}
.num.sm{font-size:var(--nc-fs-xl)}
.pos{color:var(--nc-green-700)} .neg{color:var(--nc-red-700)}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.badge{display:inline-flex;align-items:center;gap:4px;font:700 12px var(--nc-font-body);padding:4px 10px;border-radius:var(--nc-r-pill)}
.b-red{background:var(--nc-red-100);color:var(--nc-red-700)}
.b-green{background:var(--nc-green-100);color:var(--nc-green-700)}
.b-yellow{background:var(--nc-yellow-100);color:var(--nc-yellow-800)}
.b-navy{background:var(--nc-navy-100);color:var(--nc-navy)}
.btn{height:var(--nc-tap);border-radius:var(--nc-r-md);border:0;font:700 16px var(--nc-font-head);display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.btn-primary{background:var(--nc-green);color:#fff}
.btn-secondary{background:#fff;color:var(--nc-navy);border:2px solid var(--nc-navy)}
.btn-navy{background:var(--nc-navy);color:#fff}
.btn-ghost{background:transparent;color:var(--nc-navy)}
.btn-danger{background:var(--nc-red);color:#fff}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font:600 13px var(--nc-font-body);color:var(--nc-text-2)}
.input{height:var(--nc-tap);background:#fff;border:1.5px solid var(--nc-border);border-radius:var(--nc-r-md);padding:0 14px;display:flex;align-items:center;font-size:16px;justify-content:space-between}
.input.focus{border-color:var(--nc-green);box-shadow:0 0 0 3px var(--nc-green-100)}
.input.err{border-color:var(--nc-red)}
.seg{display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:var(--nc-r-md);padding:4px;border:1.5px solid var(--nc-border)}
.seg div{height:42px;display:flex;align-items:center;justify-content:center;font:700 15px var(--nc-font-head);border-radius:9px;color:var(--nc-text-2)}
.seg .on{background:var(--nc-navy);color:#fff}
.list{background:#fff;border-radius:var(--nc-r-lg);box-shadow:var(--nc-shadow);overflow:hidden}
.item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--nc-light)}
.item:last-child{border-bottom:0}
.item .t{font:600 15px var(--nc-font-body)} .item .s{font-size:12.5px;color:var(--nc-text-2)}
.item .amt{margin-left:auto;text-align:right;font:800 16px var(--nc-font-head)}
.av{width:38px;height:38px;border-radius:50%;background:var(--nc-navy-100);color:var(--nc-navy);display:flex;align-items:center;justify-content:center;font:700 14px var(--nc-font-head);flex:none}
.item.late{border-left:4px solid var(--nc-red)} .item.late .av{background:var(--nc-red-100);color:var(--nc-red-700)}
.ic{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.alert{display:flex;gap:10px;padding:12px;border-radius:var(--nc-r-md);font-size:14px;line-height:1.35}
.alert.red{background:var(--nc-red-100);color:var(--nc-red-700)}
.alert.yellow{background:var(--nc-yellow-100);color:var(--nc-yellow-800)}
.alert.green{background:var(--nc-green-100);color:var(--nc-green-700)}
.alert b{font-weight:700}
.tabbar{height:var(--nc-tabbar);background:#fff;border-top:1px solid var(--nc-border);display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:10px;flex:none}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:600 11px var(--nc-font-body);color:#6B7F93}
.tab.on{color:var(--nc-green-700)}
.tab.fab .bub{width:48px;height:48px;border-radius:50%;background:var(--nc-green);color:#fff;display:flex;align-items:center;justify-content:center;margin-top:-22px;box-shadow:0 4px 12px rgba(31,163,122,.4)}
.bar{height:8px;border-radius:4px;background:var(--nc-light);overflow:hidden}.bar i{display:block;height:100%}
.chip{padding:8px 14px;border-radius:var(--nc-r-pill);background:#fff;border:1.5px solid var(--nc-border);font:600 14px var(--nc-font-body)}
.chip.on{background:var(--nc-navy);color:#fff;border-color:var(--nc-navy)}
.toggle{width:46px;height:28px;border-radius:14px;background:var(--nc-green);position:relative;flex:none}.toggle::after{content:'';position:absolute;right:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff}
.toggle.off{background:#C5D0DB}.toggle.off::after{right:auto;left:3px}
.dots{display:flex;gap:6px;justify-content:center}.dots i{width:8px;height:8px;border-radius:4px;background:#C5D0DB}.dots i.on{width:24px;background:var(--nc-green)}