/* PeraFlow V3 / Luxe Clarity — restrained, accessible financial interface.
   Editorial hierarchy + fintech precision; intentionally independent from Apple trade dress.
   Contrast, clarity and 44px targets take priority over decoration. */
:root{
  --bg:#F7F7F5;--panel:#FFFFFF;--text:#18242C;--ink:#18242C;
  --muted:#66747B;--line:#E4E8E7;--soft-line:#EDF0EF;
  --accent:#17695F;--accent-light:#E8F3F0;--red:#B65350;
  --sidebar:#FBFBFA;--subtle:#F4F6F5;--quiet:#F1F5F3;
  --pf-champagne:#B79D74;--pf-ink:#18242C;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:14px;line-height:1.55;letter-spacing:-.008em;color:var(--text)}
body button,body input,body select,body textarea{font-family:inherit}
:where(button,a,input,select,textarea,summary):focus-visible{outline:3px solid #469E91;outline-offset:3px}
a,button{-webkit-tap-highlight-color:transparent}
.sidebar{background:var(--sidebar);border-right:1px solid var(--line);width:250px;flex-basis:250px;padding:23px 14px 16px}
.brand{font-family:inherit;font-size:21px;letter-spacing:-.95px;padding:0 9px 28px}
.brand-mark{border-radius:12px;background:var(--pf-ink);height:40px;width:40px}
.brand small,.eyebrow,.nav-section-title{font-family:inherit;letter-spacing:1px}
.workspace-chip{border-radius:13px;padding:12px;margin-bottom:30px;box-shadow:none}
.workspace-chip .avatar{border-radius:11px;background:var(--accent-light);color:var(--accent)}
.sidebar nav a{min-height:44px;border-radius:11px;font-weight:550;padding:10px 12px;color:#56666D}
.sidebar nav a.active{background:#E8F3F0;color:#17695F;font-weight:700}
.sidebar nav a.active::after{width:5px;height:5px;background:#17695F}
.sidebar-footer{border-radius:13px;background:#F1F4F2}
.topbar{height:70px;background:var(--panel);border-bottom:1px solid var(--line)}
.breadcrumb,.breadcrumb strong{font-family:inherit;font-size:12px}
.status-pill,.icon-btn{border-radius:11px}
.icon-btn{width:44px;height:44px}
.top-avatar{border-radius:50%;background:#E8F3F0;color:#17695F}
main{max-width:1470px;padding-top:36px}
.page-heading{margin-bottom:25px}
.page-heading h1{font-family:inherit;font-size:clamp(28px,2.4vw,36px);font-weight:680;line-height:1.14;letter-spacing:-1.35px;color:var(--text)}
.page-heading p{font-size:13px;color:var(--muted);margin-top:9px}
.eyebrow{font-weight:700;color:#6A777A}
.btn{border-radius:12px;min-height:44px;padding:10px 16px;font-size:12px;font-weight:650;box-shadow:none}
.btn.primary{background:#17695F;border-color:#17695F;color:white}
.btn.primary:hover{background:#10544B;border-color:#10544B}
.btn.small{min-height:38px;padding:8px 13px;border-radius:10px;font-size:11.5px}
.btn.soft{color:#17695F;background:#E8F3F0;border-color:#D4E7E2}
.card,.metric,.account-tile{border-radius:17px;border:1px solid var(--line);box-shadow:0 3px 17px #18242C05}
.card{padding:23px}
.metric{padding:19px}
.section-header h2{font-family:inherit;font-size:14px;letter-spacing:-.2px;font-weight:680}
.overview-top{gap:16px;margin-bottom:16px}
.overview-hero{background:#182F31;border:1px solid #263D3F;border-radius:20px;padding:29px 30px;min-height:291px;position:relative;isolation:isolate}
.overview-hero:before{content:"";position:absolute;right:25px;top:23px;width:42px;height:3px;border-radius:3px;background:var(--pf-champagne);opacity:.85}
.hero-kicker,.hero-period{font-family:inherit;font-weight:650;letter-spacing:1.1px;color:#B7D8CE}
.hero-primary-money{font-family:inherit;font-size:clamp(34px,3.5vw,52px);line-height:1.12;letter-spacing:-2px;font-weight:700;margin-top:18px;font-variant-numeric:tabular-nums}
.hero-under{font-size:12px;color:#C7D8D4}
.hero-bottom{border-top:1px solid #496165;gap:12px}
.hero-bottom strong{font-family:inherit;font-size:14px}
.overview-metrics{gap:11px}
.overview-metrics .metric{border-radius:17px;padding:16px 22px}
.overview-metrics .metric-caption{font-size:12px;color:#596B72}
.overview-metrics .metric-value{font-family:inherit;font-weight:700;font-size:clamp(17px,1.6vw,22px);font-variant-numeric:tabular-nums}
.metric-desc{color:#748189}
.cashflow-summary{border-left:3px solid #17695F;background:#EEF5F1;border-radius:0 12px 12px 0;padding:13px 16px;color:#44695F}
.cashflow-summary strong{color:#1D5044}
.cashflow-summary.negative{background:#FBF1EF;border-left-color:#B65350}
.tx-row{padding:13px 0;min-height:62px;border-color:var(--soft-line)}
.tx-symbol{width:40px;height:40px;flex-basis:40px;border-radius:12px;background:#F0F5F3}
.tx-details b{font-size:12.5px;line-height:1.3}
.tx-details small{color:#74818A;line-height:1.4}
.tx-amount{font-family:inherit;letter-spacing:-.2px;font-variant-numeric:tabular-nums;font-size:12.5px}
.pill,.pill.gray,.status-pill{border-radius:9px}
.track,.track i{border-radius:100px}
.modal{border-radius:20px;box-shadow:0 20px 65px #18242C26;border:1px solid var(--line);padding:27px}
.modal-title h2{font-family:inherit;font-size:21px;letter-spacing:-.4px}
.modal-close{height:44px;width:44px;border-radius:11px}
.field input,.field select,.field textarea,.search-input{border-radius:10px;min-height:44px}
.split-section{border-radius:14px}
.ghost-btn{min-width:36px;min-height:36px;border-radius:9px}
.cloud-trust{display:flex;align-items:center;gap:12px;padding:15px 17px;margin-bottom:16px;background:#F0F5F3;border:1px solid #DBE8E2;border-radius:15px;color:#1D554A}
.cloud-trust-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px;background:#DCEDE6;font-size:21px;font-weight:600}
.cloud-trust>div:nth-child(2){flex:1;min-width:0}
.cloud-trust strong{display:block;font-size:12.5px;font-weight:700;line-height:1.45}
.cloud-trust p{font-size:11.5px;line-height:1.5;margin:3px 0 0;color:#527168}
.cloud-trust a{font-size:11.5px;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.cloud-trust[data-tone=pending]{background:#F8F6F1;border-color:#E8DFD0;color:#766047}
.cloud-trust[data-tone=pending] .cloud-trust-icon{background:#EEE8DA}
.cloud-trust[data-tone=pending] p{color:#80715D}
.cloud-trust[data-tone=warn]{background:#FAF0EE;border-color:#ECD8D4;color:#9B4B47}
.cloud-trust[data-tone=warn] .cloud-trust-icon{background:#F1DEDA}
.cloud-trust[data-tone=warn] p{color:#9B625F}
.welcome-setup{background:#FFF;border:1px solid #E6E8E4;border-radius:20px;padding:clamp(24px,3vw,39px);margin-bottom:16px;box-shadow:0 12px 35px #18242C08}
.setup-eyebrow{color:#A28B66;font-weight:750;font-size:10px;letter-spacing:1.5px}
.welcome-setup h2{font-size:clamp(23px,2.7vw,31px);line-height:1.2;letter-spacing:-1px;color:var(--text);margin:9px 0 12px}
.welcome-setup p{font-size:13px;max-width:62ch;line-height:1.7;color:var(--muted)}
.setup-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.setup-actions .btn{display:inline-flex;align-items:center;text-decoration:none}
.data-recovery{padding:23px;border-radius:17px;border:1px solid #DE9B93;background:#FFF7F5;margin:0 0 16px}
.data-recovery strong{font-size:16px;color:#953E3B}
.data-recovery p{max-width:68ch;font-size:12.5px;line-height:1.65;margin:9px 0 16px;color:#804D48}
.data-recovery .btn{display:inline-flex;align-items:center;text-decoration:none}
@media(max-width:980px){
  .sidebar{width:264px;flex-basis:264px;z-index:120}
  main{padding-top:27px}
}
@media(max-width:640px){
  .topbar{height:60px;padding:0 16px}
  .icon-btn{width:42px;height:42px}
  main{padding:23px 16px calc(116px + env(safe-area-inset-bottom))}
  .page-heading h1{font-size:28px;letter-spacing:-1.05px}
  .page-heading .heading-actions .btn.primary{min-height:44px}
  .overview-top{gap:11px}
  .overview-hero{min-height:226px;border-radius:19px;padding:24px 22px}
  .hero-primary-money{font-size:clamp(29px,8vw,39px);letter-spacing:-1.35px;white-space:normal;overflow-wrap:anywhere}
  .hero-bottom strong{font-size:12px}
  .overview-metrics{gap:9px}
  .overview-metrics .metric{min-height:102px;padding:13px}
  .overview-metrics .metric-value{font-size:18px}
  .card{padding:17px;border-radius:16px}
  .metric{border-radius:14px}
  .mobile-tabs{position:fixed;bottom:10px;left:10px;right:10px;border:1px solid var(--line);border-radius:21px;padding:8px 6px calc(8px + env(safe-area-inset-bottom));background:#FFFFFFF3;backdrop-filter:blur(14px);box-shadow:0 6px 24px #18242C1D;z-index:100}
  .mobile-tabs a,.mobile-tabs button{min-height:48px;font-family:inherit;font-size:10.5px;line-height:1.2;color:#65757B}
  .mobile-tabs a.active{color:#17695F}
  .mobile-tabs button svg{background:#17695F;border-radius:14px;box-shadow:0 4px 12px #17695F3D;width:43px;height:43px}
  .mobile-tabs button span{font-family:inherit;color:#17695F}
  .cloud-trust{gap:10px;padding:13px;align-items:flex-start;flex-wrap:wrap}
  .cloud-trust>div:nth-child(2){flex:1 1 calc(100% - 55px)}
  .cloud-trust a{margin-left:46px}
  .welcome-setup{border-radius:18px;padding:24px 19px}
  .setup-actions .btn{width:100%;justify-content:center}
  .tx-row{gap:9px}
  .tx-amount{max-width:38%;text-align:right;overflow-wrap:anywhere}
}
@media(max-width:375px){
  .hero-primary-money{font-size:28px}
  .overview-metrics{grid-template-columns:1fr}
  .overview-metrics .metric:first-child{grid-column:auto}
  .mobile-tabs{left:6px;right:6px;bottom:6px}
}
body.dark{
 --bg:#151B1E;--panel:#20292C;--text:#F0F3F2;--ink:#F0F3F2;
 --muted:#A5B3B7;--line:#354144;--accent:#7DC6B3;--accent-light:#203B36;
 --sidebar:#1B2427;--soft-line:#2E3B3D;--subtle:#273135;--quiet:#243337
}
body.dark .overview-hero{background:#142E30;border-color:#3A5354}
body.dark .brand-mark{background:#314A47;color:#D8F1E9}
body.dark .sidebar nav a.active{background:#27433C;color:#B1E5D6}
body.dark .btn.primary{background:#6DB4A3;border-color:#6DB4A3;color:#132B26}
body.dark .cloud-trust{background:#223C36;border-color:#345A50;color:#B6E4D6}
body.dark .cloud-trust p{color:#ABC8BF}
body.dark .cloud-trust[data-tone=pending]{background:#403B31;border-color:#635645;color:#F1DBC0}
body.dark .cloud-trust[data-tone=pending] p{color:#D1BDA1}
body.dark .cloud-trust[data-tone=warn]{background:#493331;border-color:#714C48;color:#F4C3BE}
body.dark .cloud-trust[data-tone=warn] p{color:#D7AEAA}
body.dark .welcome-setup{background:#20292C;border-color:#354144}
body.dark .data-recovery{background:#493331;border-color:#714C48}
body.dark .data-recovery strong,body.dark .data-recovery p{color:#F0CAC5}
body.dark .mobile-tabs{background:#20292CF2;border-color:#405154}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}

/* Progressive disclosure: simple transactions first; metadata stays available. */
.tx-more-options{border:1px solid var(--line);background:var(--subtle);border-radius:14px;padding:0 15px;margin-top:2px}
.tx-more-options summary{cursor:pointer;min-height:49px;display:flex;align-items:center;gap:8px;font-weight:650;font-size:12px;color:var(--text);list-style:none}
.tx-more-options summary::-webkit-details-marker{display:none}
.tx-more-options summary::before{content:"+";font-size:17px;color:var(--accent);font-weight:700}
.tx-more-options[open] summary::before{content:"−"}
.tx-more-options summary span{margin-left:auto;font-weight:500;font-size:11px;color:var(--muted)}
.tx-more-options .tx-details-grid{padding:3px 0 17px}
body.dark .tx-more-options{background:#273135}

.qa-cloud-warning{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:120;max-width:calc(100vw - 24px);padding:8px 14px;border-radius:11px;background:#16342f;color:#fff;font-size:11px;font-weight:700;text-align:center;pointer-events:none;box-shadow:0 4px 20px #0003}
@media(max-width:700px){.qa-cloud-warning{font-size:9px;bottom:72px;max-width:96vw;padding:6px 9px}}