/* ============================================================
   Minua — reconstructed app UI (faithful port of the RN app)
   Tokens lifted verbatim from src/theme.ts; component styles
   from src/ui.tsx, components.tsx, screens/*, sheets.tsx.
   Reused by both the HyperFrames video compositions and the
   static landing page's in-page phone mockups.
   ============================================================ */

@font-face { font-family: 'Hanken Grotesk'; font-weight: 400; src: url('fonts/HankenGrotesk_400Regular.ttf') format('truetype'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 500; src: url('fonts/HankenGrotesk_500Medium.ttf') format('truetype'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 600; src: url('fonts/HankenGrotesk_600SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 700; src: url('fonts/HankenGrotesk_700Bold.ttf') format('truetype'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 800; src: url('fonts/HankenGrotesk_800ExtraBold.ttf') format('truetype'); }

.minua {
  --bg:#eef6f1; --bgGradTop:#e7f3ed; --bgGradBottom:#cfe5da;
  --ink:#16241d; --ink2:#23362c;
  --green:#1f8a5b; --greenDark:#176e48; --greenSoft:#def0e6; --greenSoft2:#cfe5da;
  --mint:#dcebe3; --orange:#d97757; --orangeDark:#c2613f;
  --muted:#6a7e74; --muted2:#90a298; --muted3:#9fb4a9; --faint:#b3c4bb; --faint2:#c0d0c8;
  --line:#dbe8e1; --lineSoft:#e4ece8; --white:#fff; --card:#fff;
  --dashed:#c8dad1; --dashed2:#c2d6cc; --drag:#cdddd4;
  --red:#cf4a3f; --redSoft:#f8ddd8; --amber:#c98a1e; --amberSoft:#fbeed3; --yellow:#e0a32e;
  --shadow: 0 4px 14px rgba(20,60,40,.05);
  font-family: 'Hanken Grotesk', sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Phone device frame ---------- */
.phone {
  position: relative;
  width: 390px;
  height: 844px;
  background: linear-gradient(180deg, var(--bgGradTop), var(--bgGradBottom));
  border-radius: 46px;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.device {
  position: relative;
  width: 390px;
  height: 844px;
  background: #0d1713;
  border-radius: 58px;
  padding: 13px;
  box-sizing: content-box;
  box-shadow: 0 50px 100px -30px rgba(11,30,21,.55), 0 0 0 2px rgba(255,255,255,.04) inset;
}
.device .phone { width: 100%; height: 100%; }
/* status bar */
.statusbar {
  height: 30px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 26px 0; font-weight: 700; font-size: 13px; color: var(--ink);
}
.statusbar .dots { display: flex; gap: 5px; align-items: center; }
.statusbar .dots span { font-size: 12px; letter-spacing: 1px; }

/* ---------- Header ---------- */
.hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 18px 10px; background: var(--bg); flex: 0 0 auto;
}
.hd .brand { display: flex; align-items: center; gap: 9px; }
.hd .logo {
  width: 30px; height: 30px; border-radius: 9px; background: var(--green);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 17px;
}
.hd .name { font-weight: 800; font-size: 19px; color: var(--ink); letter-spacing: -.3px; }

/* ---------- Screen scroll area ---------- */
.screen {
  flex: 1 1 auto; overflow: hidden; position: relative;
  padding: 6px 18px 18px;
}
.screen.pad-nav { padding-bottom: 92px; }
.h1 { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -.6px; margin: 0; }
.date { font-size: 13px; color: var(--muted); font-weight: 600; }
.sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.cap { font-size: 12px; font-weight: 700; letter-spacing: .4px; color: var(--muted2); text-transform: uppercase; }

/* ---------- Cards / generic ---------- */
.card { background: #fff; border-radius: 16px; box-shadow: var(--shadow); }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap6{gap:6px}.gap8{gap:8px}.gap9{gap:9px}.gap10{gap:10px}.gap12{gap:12px}
.mt8{margin-top:8px}.mt10{margin-top:10px}.mt12{margin-top:12px}.mt14{margin-top:14px}
.mt16{margin-top:16px}.mt18{margin-top:18px}.mt20{margin-top:20px}.mt22{margin-top:22px}
.flex1{flex:1}

/* progress ring */
.ring { position: relative; width: 74px; height: 74px; flex: 0 0 auto; }
.ring .pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; color: var(--ink);
}

/* clean summary card */
.clean { margin-top: 16px; background: #fff; border-radius: 22px; padding: 18px;
  display: flex; align-items: center; gap: 16px; box-shadow: var(--shadow); }
.clean .title { font-weight: 700; font-size: 15px; color: var(--ink); }
.clean .csub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

/* review banner / link cards */
.linkcard { margin-top: 12px; display: flex; align-items: center; gap: 12px; background: #fff;
  border-radius: 16px; padding: 13px 15px; box-shadow: var(--shadow); }
.linkcard .ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.linkcard .lt { flex: 1; font-weight: 700; font-size: 13.5px; color: var(--ink); }
.linkcard .chev { color: #b8c8c0; font-size: 18px; }

.darkcard { margin-top: 14px; display:flex; align-items:center; gap:12px; background: var(--ink);
  border-radius: 18px; padding: 14px 16px; }
.darkcard .ic { width:38px;height:38px;border-radius:11px;background:var(--orange);display:flex;align-items:center;justify-content:center;font-size:18px;}
.darkcard .t1 { color:#fff; font-weight:700; font-size:14px; }
.darkcard .t2 { color:var(--muted3); font-size:12px; }

/* division row */
.divrow { display: flex; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.divrow .bar { width: 6px; }
.divrow .body { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.divrow .chip { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.divrow .dn { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.divrow .ds { font-size: 12px; font-weight: 600; margin-top: 1px; }
.divrow .chev { color: #c4d4cc; font-size: 18px; }
.divrow.locked { background: #f6f8f7; box-shadow: none; opacity: .75; }

/* tasks board (Tarefas screen) */
.tdiv-head { display: flex; align-items: center; gap: 9px; margin: 0 2px 9px; }
.tdiv-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.tdiv-edit { font-size: 11px; font-weight: 700; color: var(--orange); }
.taskrow { display: flex; align-items: center; gap: 11px; background: #fff; border-radius: 14px; padding: 11px 13px; box-shadow: var(--shadow); }
.tr-name { flex: 1; font-weight: 700; font-size: 14px; color: var(--ink); }
.freqpill { background: #f1f5f3; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--muted); }

/* stat boxes */
.stats { display: flex; gap: 8px; margin-top: 16px; }
.statbox { flex: 1; border-radius: 14px; padding: 12px 4px; text-align: center; }
.statbox .n { font-weight: 800; font-size: 22px; }
.statbox .l { font-size: 11px; font-weight: 600; color: var(--muted); }

/* ---------- Employee today list ---------- */
.task { display: flex; align-items: center; gap: 12px; border: 2px solid; border-radius: 15px; padding: 13px 14px; }
.task .box { width: 26px; height: 26px; border-radius: 8px; border: 2px solid; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; flex: 0 0 auto; }
.task .tn { font-weight: 700; font-size: 14.5px; }
.task .ts { font-size: 11px; font-weight: 600; margin-top: 2px; }
.task .tag { border-radius: 7px; padding: 3px 8px; font-size: 10px; font-weight: 700; color: #fff; }
.task .chev { color: #cbd9d2; font-size: 17px; }
.lined { text-decoration: line-through; }

.outline-btn { margin-top: 22px; border: 2px solid var(--ink); border-radius: 16px; padding: 15px; text-align: center; font-weight: 700; font-size: 15px; color: var(--ink); }

/* mini stats (brief) */
.ministat { flex: 1; background: #fff; border-radius: 16px; padding: 14px; text-align: center; box-shadow: var(--shadow); }
.ministat .n { font-weight: 800; font-size: 24px; }
.ministat .l { font-size: 12px; font-weight: 600; color: var(--muted); }

/* CTA */
.cta { background: var(--orange); border-radius: 16px; padding: 16px; text-align: center; color: #fff; font-weight: 700; font-size: 16px;
  box-shadow: 0 10px 22px rgba(217,119,87,.3); }

/* ---------- Shopping ---------- */
.shopitem { display: flex; align-items: center; gap: 11px; background: #fff; border-radius: 14px; padding: 11px 13px; box-shadow: var(--shadow); }
.checkbox { width: 22px; height: 22px; border-radius: 7px; border: 2px solid; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; flex: 0 0 auto; }
.shopitem .nm { flex: 1; font-weight: 600; font-size: 14px; }
.badge { border-radius: 6px; padding: 2px 7px; font-size: 10px; font-weight: 700; color: #fff; }
.pill { border-radius: 999px; padding: 3px 10px; font-size: 10.5px; font-weight: 700; }
.sugcard { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 15px; padding: 11px 12px; box-shadow: var(--shadow); }
.icobtn { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.minibtn { border-radius: 8px; padding: 6px 10px; font-size: 11px; font-weight: 700; color: #fff; background: var(--ink); }
.inputrow { display: flex; gap: 8px; margin-top: 14px; }
.field { flex: 1; border: 2px solid var(--line); background: #fff; border-radius: 13px; padding: 13px 14px; font-size: 14px; font-weight: 600; color: var(--ink); }
.field::placeholder { color: var(--faint); }
.addbtn { background: var(--ink); border-radius: 13px; padding: 0 18px; display: flex; align-items: center; color: #fff; font-weight: 700; font-size: 20px; }

/* ---------- Sheet (bottom sheet) ---------- */
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg); border-radius: 26px 26px 0 0; padding: 10px 18px 24px; box-shadow: 0 -20px 60px rgba(20,36,29,.18); }
.sheet .grab { width: 42px; height: 5px; border-radius: 3px; background: var(--drag); margin: 0 auto 8px; }
.sheet .closeb { width: 32px; height: 32px; border-radius: 16px; background: var(--mint); display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--ink); }
.tagpill { background: var(--greenSoft); padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--green); }
.timerbox { margin-top: 16px; border: 2px solid; border-radius: 20px; padding: 22px; text-align: center; }
.timerbox .tt { font-size: 46px; font-weight: 800; letter-spacing: 1px; color: var(--ink); font-variant-numeric: tabular-nums; }
.timerbox .tl { font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.instr { background: #fff; border-left: 5px solid var(--green); border-radius: 13px; padding: 13px; margin-top: 14px; font-size: 13.5px; line-height: 20px; color: #3a4a43; }
.sheetbtns { display: flex; gap: 9px; margin-top: 16px; }
.sbtn { flex: 1; text-align: center; border-radius: 14px; padding: 14px; font-weight: 700; font-size: 14px; }
.sbtn.ghost { border: 2px solid var(--ink); color: var(--ink); }
.sbtn.solid { background: var(--green); color: #fff; }
.runnote { display: flex; align-items: center; gap: 8px; border: 2px solid var(--greenSoft2); background: #f3f9f5; border-radius: 12px; padding: 10px 12px; margin-top: 11px; font-size: 12px; font-weight: 600; color: #1d4a37; }
.runnote .dot { width: 8px; height: 8px; border-radius: 4px; background: var(--green); }

/* ---------- Bottom nav ---------- */
.nav {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(238,246,241,.96); border-top: 1px solid #dde9e3;
  display: flex; padding: 9px 24px 22px; flex: 0 0 auto;
}
.nav .item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.nav .item .i { font-size: 20px; }
.nav .item .lbl { font-size: 10.5px; font-weight: 700; }

/* tiny helpers used by reconstructed screens */
.spacer { flex: 1; }
.center { display:flex; align-items:center; justify-content:center; }