:root{
  /* светлая тема (зелёный акцент) */
  --bg:#f3f6f4; --surface:#ffffff; --surface-soft:#eef2f0;
  --text:#15201c; --text-2:#5c6661; --text-3:#98a29d;
  --border:#e5eae7; --border-strong:#d3dad6;
  --success-bg:#e3f6ef; --success:#0f7a56; --success-strong:#12b07a;
  --warning-bg:#fbf0d8; --warning:#8a5a12; --warning-strong:#c79a3f;
  --danger-bg:#fcebeb; --danger:#a32d2d; --danger-strong:#e24b4a;
  --accent:#12b07a; --accent-soft:#dff3ea; --on-accent:#ffffff;
  --glow:rgba(18,176,122,0.12); --glass:rgba(255,255,255,0.72); --glass-brd:rgba(20,40,32,0.06);
  --radius:16px; --radius-sm:12px; --app-max:520px;
}
[data-theme="dark"]{
  /* тёмная «зелёная» тема (как в макете) */
  --bg:#0d1311; --surface:#191f1c; --surface-soft:#252c28;
  --text:#eaf0ed; --text-2:#96a29c; --text-3:#646f69;
  --border:#272f2b; --border-strong:#38413c;
  --success-bg:#0f261d; --success:#3fdd98; --success-strong:#22c486;
  --warning-bg:#2a2410; --warning:#e3b766; --warning-strong:#c79a3f;
  --danger-bg:#2c1818; --danger:#f08a8a; --danger-strong:#e05a5a;
  --accent:#22c486; --accent-soft:#13362a; --on-accent:#06140e;
  --glow:rgba(34,200,138,0.28); --glass:rgba(34,44,39,0.55); --glass-brd:rgba(150,210,180,0.12);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; color:var(--text);
  /* зелёное свечение сверху, затухающее вниз */
  background:radial-gradient(135% 62% at 50% -12%, var(--glow), transparent 58%), var(--bg);
  background-attachment:fixed;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -webkit-overflow-scrolling:touch;
  transition:color .2s ease;
}
.app{width:100%; max-width:var(--app-max); margin:0 auto; min-height:100vh; position:relative;
     padding:16px 16px calc(132px + env(safe-area-inset-bottom));}
.page.hidden{display:none;}
h1,h2,h3,p{margin:0;}

/* bottom nav */
.bottom-nav{position:fixed; left:0; right:0; bottom:0; z-index:35;
  max-width:var(--app-max); margin:0 auto;
  display:flex; background:var(--glass); border-top:0.5px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));}
.nav-item{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; color:var(--text-3); font-size:11px; padding:6px 0;
  transition:color .15s ease;}
.nav-item.active{color:var(--accent);}
.nav-ico{width:22px; height:22px;}
.nav-ico svg{width:22px; height:22px;}

/* stats chart & info */
.chart-wrap{width:100%;}
.info-text{font-size:14px; color:var(--text-2); line-height:1.5;}
.info-list{margin:0; padding-left:6px; list-style:none; font-size:14px; color:var(--text-2); line-height:1.5;}
.info-list li{position:relative; padding-left:18px; margin-bottom:10px;}
.info-list li::before{content:""; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--accent);}
.info-text a, .info-list a{color:var(--accent); font-weight:600; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
.icon{width:18px; height:18px; display:inline-block; vertical-align:-3px;}
.icon svg{width:100%; height:100%;}

/* header */
.top-row{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:14px;}
.eyebrow{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:2px;}
.title{font-size:26px; font-weight:700; letter-spacing:-0.02em;}

/* эффект стекла: полупрозрачный фон + размытие (плашки подхватывают зелёный у свечения) */
.glass{ -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); }

/* hero card (чистая прибыль) */
.hero{background:var(--glass); border:0.5px solid var(--glass-brd); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); border-radius:var(--radius); padding:16px 18px; margin-bottom:14px;}
.hero-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px;}
.hero-label{font-size:13px; color:var(--text-2);}
.hero-period{font-size:12px; color:var(--text-3);}
.hero-value{font-size:34px; font-weight:700; letter-spacing:-0.02em; line-height:1.05;}
.hero-sub{font-size:12px; color:var(--text-2); margin-top:8px;}
.stats{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;}
.stat-card{background:var(--glass); border-radius:var(--radius-sm); padding:12px 14px; border:0.5px solid var(--glass-brd); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);}
.stat-label{font-size:12px; color:var(--text-2); margin-bottom:4px;}
.stat-value{font-size:20px; font-weight:700;}

/* tabs */
.tabs{display:flex; gap:4px; background:var(--glass); border:0.5px solid var(--glass-brd); border-radius:999px; padding:4px; margin-bottom:14px; -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);}
.tab{flex:1; text-align:center; padding:8px 0; border-radius:999px; font-size:13px; color:var(--text-2); background:none; border:none;}
.tab.active{background:var(--accent); color:var(--on-accent); font-weight:600;}

/* list */
.row{display:flex; align-items:center; gap:12px; padding:14px; background:var(--glass); border:0.5px solid var(--glass-brd); border-radius:var(--radius); margin-bottom:10px; text-align:left; width:100%; color:var(--text); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);}
.row.stuck{background:var(--warning-bg);}
.status-bar{width:4px; min-height:40px; align-self:stretch; border-radius:3px; flex-shrink:0;}
.row-main{flex:1; min-width:0;}
.row-title{font-size:15px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.row-sub{font-size:12px; color:var(--text-2); margin-top:3px; display:flex; align-items:center; gap:4px;}
.row-amount{font-size:15px; font-weight:700; text-align:right; flex-shrink:0;}
.row-amount .pct{font-size:11px; font-weight:500; margin-top:2px;}
.row-amount .amt-label{font-size:11px; font-weight:400; color:var(--text-3); margin-top:2px;}
.empty-state{text-align:center; padding:50px 20px; color:var(--text-2);}
.empty-state .icon{width:36px; height:36px; margin-bottom:10px; color:var(--text-3);}

/* fab */
.fab-wrap{position:fixed; left:0; right:0; bottom:calc(78px + env(safe-area-inset-bottom));
          display:flex; justify-content:flex-end; max-width:var(--app-max); margin:0 auto;
          padding:0 16px; pointer-events:none; z-index:36;}
.fab{pointer-events:auto; width:56px; height:56px; border-radius:50%; background:var(--accent);
     color:var(--on-accent); border:none; display:flex; align-items:center; justify-content:center;
     box-shadow:0 6px 18px rgba(0,0,0,0.28);}
.fab .icon{width:24px; height:24px;}

/* detail / modal overlays */
.screen{position:fixed; inset:0; z-index:40; overflow-y:auto; -webkit-overflow-scrolling:touch;
        background:radial-gradient(135% 42% at 50% 0%, var(--glow), transparent 52%), var(--bg);
        transform:translateX(100%); transition:transform .3s cubic-bezier(.32,.72,0,1), background-color .2s ease;}
.screen.open{transform:translateX(0);}
.screen.hidden{display:none;}
.detail-header{display:flex; align-items:center; justify-content:space-between; padding:16px; max-width:var(--app-max); margin:0 auto;}
.back-btn{background:none; border:none; color:var(--text); display:flex; align-items:center; gap:4px; font-size:14px; padding:6px 0;}
.saved-tag{font-size:12px; color:var(--success); display:flex; align-items:center; gap:4px; opacity:0; transition:opacity .25s;}
.saved-tag.show{opacity:1;}
.detail-body{max-width:var(--app-max); margin:0 auto; padding:0 16px calc(110px + env(safe-area-inset-bottom));}
.detail-title{margin-bottom:12px;}
.detail-title h2{font-size:22px; font-weight:700; letter-spacing:-0.02em;}
.block{background:var(--glass); border:0.5px solid var(--glass-brd); border-radius:var(--radius); padding:14px 16px; margin-bottom:10px; -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);}
.block-title{font-size:13px; color:var(--text-2); margin-bottom:8px;}
.field-row{display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:0.5px solid var(--border); gap:10px;}
.field-row:last-child{border-bottom:none;}
.field-row label{font-size:13px; color:var(--text-2); flex-shrink:0;}
.field-row input{border:none; background:none; color:var(--text); font-size:16px; text-align:right; outline:none; width:60%; font-family:inherit;}
/* iOS рендерит input[type=date] по-своему и игнорирует text-align —
   делаем ширину по содержимому, чтобы значение прижималось вправо как у остальных полей */
.field-row input[type="date"]{width:auto; max-width:62%; margin-left:auto;}
.field-hint{font-size:11px; color:var(--text-3); margin-top:4px;}
.field-error{font-size:11px; color:var(--danger); margin-top:4px; display:none;}
.invest-block{background:var(--surface-soft); border-color:transparent; display:flex; justify-content:space-between; align-items:center;}
.invest-block span:first-child{font-size:13px; color:var(--text-2);}
.invest-block span:last-child{font-size:17px; font-weight:700; color:var(--text);}
.sold-block{background:var(--success-bg); border-color:transparent; display:flex; justify-content:space-between; align-items:center; padding:16px;}
.sold-block.loss{background:var(--danger-bg);}
.sold-block span:first-child{font-size:13px; color:var(--success); line-height:1.4;}
.sold-block.loss span:first-child{color:var(--danger);}
.sold-block span:last-child{font-size:20px; font-weight:700; color:var(--success); text-align:right;}
.sold-block.loss span:last-child{color:var(--danger);}

.exp-row, .task-row{display:flex; align-items:center; gap:8px; padding:6px 0;}
.exp-row span.lbl, .task-row span.lbl{flex:1; font-size:13px; color:var(--text);}
.exp-row span.lbl.done, .task-row span.lbl.done{color:var(--text-3); text-decoration:line-through;}
.exp-row span.amt{font-size:13px; color:var(--text-2);}
.icon-btn{background:none; border:none; color:var(--text-3); padding:4px; display:flex;}
.checkbox{width:20px; height:20px; border-radius:6px; border:1.5px solid var(--border-strong); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff;
          transition:background-color .15s ease, border-color .15s ease;}
.checkbox .icon{width:13px; height:13px;}
.checkbox.checked{background:var(--success-strong); border-color:var(--success-strong); animation:checkPop .18s ease;}
@keyframes checkPop{0%{transform:scale(.6);}100%{transform:scale(1);}}
.mini-add{display:flex; gap:6px; margin-top:8px;}
.mini-add input{flex:1; min-width:0; border:0.5px solid var(--border); border-radius:8px; padding:7px 9px; font-size:16px; background:var(--surface-soft); color:var(--text); outline:none; font-family:inherit;}
/* акцентная «+» — заметная */
.mini-add button{flex-shrink:0; background:var(--accent); border:none; border-radius:10px; padding:0 14px; color:var(--on-accent); font-size:13px; display:flex; align-items:center; justify-content:center;}
.mini-add button .icon{width:18px; height:18px;}
textarea.notes{width:100%; border:none; background:none; resize:vertical; min-height:50px; font-size:16px; color:var(--text); outline:none; font-family:inherit;}

.photo-grid{display:flex; gap:8px; flex-wrap:wrap;}
.photo-tile{position:relative; width:64px; height:64px; border-radius:10px; background:var(--surface-soft); border:0.5px dashed var(--border-strong); display:flex; align-items:center; justify-content:center; color:var(--text-3); overflow:hidden;}
.photo-tile img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-tile{border-radius:12px;}
.photo-tile.add{color:var(--accent); border-color:var(--accent);}
/* спиннер: пока фото грузится с сервера (loading) или загружается на сервер (uploading) */
.photo-tile.loading::after, .photo-tile.uploading::after{
  content:""; position:absolute; top:50%; left:50%; width:20px; height:20px; margin:-10px 0 0 -10px;
  border:2px solid var(--border-strong); border-top-color:var(--accent); border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.btn-primary{width:100%; background:var(--accent); color:var(--on-accent); border:none; border-radius:var(--radius); padding:14px; font-size:14px; font-weight:600;}
.btn-secondary{width:100%; background:var(--surface); border:0.5px solid var(--border-strong); color:var(--text); border-radius:var(--radius); padding:14px; font-size:14px; font-weight:600;}
.btn-danger{background:var(--danger-strong); color:#fff;}
.delete-link{display:flex; align-items:center; gap:4px; color:var(--danger); font-size:13px; background:none; border:none;}

.form-block{padding:8px 0;}
.form-block label{display:block; font-size:12px; color:var(--text-2); margin-bottom:5px;}
.form-block input{width:100%; border:0.5px solid var(--border); background:var(--surface-soft); border-radius:8px; padding:10px 11px; font-size:16px; color:var(--text); outline:none; font-family:inherit; margin-bottom:14px;}

.modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:60; display:flex; align-items:center; justify-content:center; padding:20px;
               opacity:0; transition:opacity .2s ease;}
.modal-overlay.show{opacity:1;}
.modal-overlay.hidden{display:none;}
.modal{background:var(--surface); border-radius:16px; padding:18px; width:100%; max-width:360px; max-height:88vh; overflow-y:auto;
       transform:scale(.92); transition:transform .2s ease;}
.modal-overlay.show .modal{transform:scale(1);}
.modal h3{font-size:16px; font-weight:600; margin-bottom:14px;}
.modal-actions{display:flex; gap:8px; margin-top:6px;}
.modal-actions button{flex:1;}

/* полноэкранный просмотр фото */
.viewer{position:fixed; inset:0; z-index:90; background:rgba(0,0,0,0.96);
        display:flex; align-items:center; justify-content:center;
        opacity:0; transition:opacity .2s ease;}
.viewer.open{opacity:1;}
.viewer.hidden{display:none;}
.viewer-photo{max-width:100%; max-height:86vh; border-radius:8px; display:block;
              touch-action:none; will-change:transform;}
.viewer-hint{position:fixed; top:calc(14px + env(safe-area-inset-top)); left:0; right:0;
             text-align:center; color:rgba(255,255,255,0.5); font-size:12px; pointer-events:none;}
.viewer-trash{position:fixed; bottom:calc(28px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
              width:52px; height:52px; border-radius:50%; background:rgba(50,50,50,0.85); color:#fff;
              border:none; display:flex; align-items:center; justify-content:center;}
.viewer-trash:active{transform:translateX(-50%) scale(0.92);}

/* iOS: плавающая кнопка скрытия клавиатуры */
.kb-hide{
  position:fixed; right:12px; bottom:12px; z-index:80; display:none;
  align-items:center; gap:6px;
  background:var(--surface); color:var(--text);
  border:0.5px solid var(--border-strong); border-radius:999px;
  padding:8px 14px; font-size:13px; font-weight:600;
  box-shadow:0 4px 14px rgba(0,0,0,0.22);
}
.kb-hide.show{display:flex;}
.modal-overlay.show .lightbox-box{transform:scale(1);}

/* press feedback */
.row, .fab, .btn-primary, .btn-secondary, .icon-btn, .tab, .mini-add button{
  transition:transform .12s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.row:active, .fab:active, .btn-primary:active, .btn-secondary:active, .icon-btn:active, .mini-add button:active{
  transform:scale(0.95);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
}