/* «Дневник инвестора» - стили приложения. Токены, пять тем, стекло и компоненты перенесены из утверждённого макета (prototype/index.html, версия 32). В макете палитра жила на рамке телефона, здесь - на : data-theme (светлая/тёмная схема мессенджера) и data-palette (тема, выбранная вручную). */ :root{ --bg:#EDF0F4; --paper:#FFFFFF; --ink:#16202A; --muted:#5E6B78; --line:#D8DEE6; --accent:#3346C4; --accent-ink:#FFFFFF; --accent-soft:#E3E7FB; --up:#12804F; --down:#C23F37; --warn:#A8690F; --warn-soft:#FBF0DC; --up-soft:#DDF3E8; --down-soft:#FBE3E1; --c1:#3346C4; --c2:#1F8A7E; --c3:#C9892B; --c4:#8A57E6; --c5:#8C98A6; --c6:#2D7DD2; --c7:#B0472F; --app-bg:#F3F5F8; --app-card:#FFFFFF; --display:"Unbounded","Onest",system-ui,sans-serif; --body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif; --num:"JetBrains Mono",ui-monospace,Menlo,monospace; --glass:.5; --logo-ink:var(--ink); --logo-red:#F2412D; --icon-h:20px; color-scheme:light; } @media (prefers-color-scheme: dark){ :root:not([data-theme]){ --bg:#0E1318; --paper:#151C24; --ink:#E5EBF1; --muted:#8B98A5; --line:#26303B; --accent:#8391F5; --accent-ink:#0E1318; --accent-soft:#1F2548; --up:#3CC484; --down:#EF6E64; --warn:#E3A74A; --warn-soft:#3A2C14; --up-soft:#133126; --down-soft:#3A1917; --c1:#8391F5; --c2:#3FB8A9; --c3:#E3A74A; --c4:#B08BF5; --c5:#6F7C8A; --c6:#5CA8E8; --c7:#D97759; --app-bg:#10161D; --app-card:#19212B; --logo-red:#FF5A45; color-scheme:dark; } } :root[data-theme="dark"]{ --bg:#0E1318; --paper:#151C24; --ink:#E5EBF1; --muted:#8B98A5; --line:#26303B; --accent:#8391F5; --accent-ink:#0E1318; --accent-soft:#1F2548; --up:#3CC484; --down:#EF6E64; --warn:#E3A74A; --warn-soft:#3A2C14; --up-soft:#133126; --down-soft:#3A1917; --c1:#8391F5; --c2:#3FB8A9; --c3:#E3A74A; --c4:#B08BF5; --c5:#6F7C8A; --c6:#5CA8E8; --c7:#D97759; --app-bg:#10161D; --app-card:#19212B; --logo-red:#FF5A45; color-scheme:dark; } :root[data-palette="sand"]{ --app-bg:#EFE6D8; --app-card:#FAF4EA; --paper:#FFFFFF; --ink:#3A3128; --muted:#8A7B68; --line:#DCCDB6; --accent:#A9713C; --accent-ink:#FFFFFF; --accent-soft:#EFDFCB; --up:#4B7A46; --down:#B24A34; --warn:#A8690F; --up-soft:#E0EBDA; --down-soft:#F6DED7; --warn-soft:#F5E6C9; --c1:#A9713C; --c2:#4B7A46; --c3:#C08A2E; --c4:#8E5FA8; --c5:#9B8D79; --c6:#4A7C9B; --c7:#B24A34; --logo-red:#F2412D; color-scheme:light; } :root[data-palette="sand-dark"]{ --app-bg:#1C1712; --app-card:#26201A; --paper:#312A22; --ink:#EDE3D5; --muted:#A2917C; --line:#3B3228; --accent:#C98F52; --accent-ink:#1C1712; --accent-soft:#3A2E20; --up:#6FA765; --down:#D4715A; --warn:#E3A74A; --up-soft:#22301F; --down-soft:#36201B; --warn-soft:#382B14; --c1:#C98F52; --c2:#6FA765; --c3:#E3A74A; --c4:#B98BD8; --c5:#9B8D79; --c6:#6FA0C4; --c7:#D4715A; --logo-red:#FF5A45; color-scheme:dark; } :root[data-palette="paper"]{ --app-bg:#F1F2F4; --app-card:#FFFFFF; --paper:#FFFFFF; --ink:#16191D; --muted:#6B7580; --line:#DFE3E8; --accent:#2F6FE0; --accent-ink:#FFFFFF; --accent-soft:#E2EAFB; --up:#1E9E6A; --down:#D2503A; --warn:#A8690F; --up-soft:#DEF2E9; --down-soft:#FAE2DE; --warn-soft:#FBF0DC; --c1:#2F6FE0; --c2:#1E9E6A; --c3:#C9892B; --c4:#8A57E6; --c5:#8C98A6; --c6:#2D7DD2; --c7:#B0472F; --logo-red:#F2412D; color-scheme:light; } :root[data-palette="graphite"]{ --app-bg:#101315; --app-card:#191E22; --paper:#232A30; --ink:#E6EBEF; --muted:#8C99A4; --line:#2A3238; --accent:#5B9BD5; --accent-ink:#0B0E10; --accent-soft:#1E2A35; --up:#46B08B; --down:#DD6E5C; --warn:#E0A64C; --up-soft:#16302A; --down-soft:#341E1A; --warn-soft:#332714; --c1:#5B9BD5; --c2:#46B08B; --c3:#E0A64C; --c4:#BE86F0; --c5:#8C99A4; --c6:#6FA0C4; --c7:#DD6E5C; --logo-red:#FF5A45; color-scheme:dark; } *{box-sizing:border-box} [hidden]{display:none!important} html,body{height:100%} body{margin:0;background:var(--app-bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5; -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior:none} button{font:inherit;color:inherit} p{margin:0} .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .mono{font-family:var(--num)} .up{color:var(--up)} .down{color:var(--down)} .muted{color:var(--muted)} /* каркас: шапка, прокрутка, нижнее меню */ .app{height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden;background:var(--app-bg)} .topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--app-card);border-bottom:1px solid var(--line);flex:none} .brand-logo{flex:0 1 auto;min-width:0;display:flex;align-items:center;pointer-events:none;user-select:none} .brand-logo svg{display:block;height:var(--icon-h);width:auto;max-width:100%} .brand-logo .ink{fill:var(--logo-ink)} .brand-logo .red{fill:var(--logo-red)} .topbar-right{display:flex;align-items:center;gap:4px;min-width:0;flex:0 1 auto} .icon-btn{all:unset;cursor:pointer;width:32px;height:32px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);flex:none;position:relative} .icon-btn:active{color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent)} .icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 12px 90px;display:grid;gap:10px;align-content:start;-webkit-overflow-scrolling:touch} .nav{display:grid;grid-template-columns:repeat(5,1fr);background:var(--app-card);border-top:1px solid var(--line);padding:6px 2px calc(10px + env(safe-area-inset-bottom));flex:none} .nav button{all:unset;cursor:pointer;text-align:center;font-size:10px;color:var(--muted);padding:6px 0;border-radius:10px;display:grid;gap:2px;justify-items:center} .nav button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8} .nav button.on{color:var(--accent);font-weight:600;background:color-mix(in srgb, var(--accent) calc(6% + 8% * var(--glass)), transparent)} .nav button:focus-visible,.row:focus-visible,.fab:focus-visible,.sw:focus-visible,.seg span:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .fab{position:absolute;right:16px;bottom:calc(74px + env(safe-area-inset-bottom));width:52px;height:52px;border-radius:16px;border:0;background:var(--accent);color:var(--accent-ink);cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 20px -8px rgba(51,70,196,.6);z-index:4} .fab .ic{width:22px;height:22px;stroke-width:2.2} /* карточки и строки */ .card{background:var(--app-card);border-radius:16px;padding:14px;display:grid;gap:10px;min-width:0} .card>*{min-width:0} .card-title{font-size:15px;font-weight:700;display:flex;align-items:center} .kv{display:flex;justify-content:space-between;gap:10px;font-size:13px} .seg{display:flex;gap:4px;background:var(--app-bg);border-radius:10px;padding:3px;font-size:12px;overflow-x:auto;scrollbar-width:none} .seg::-webkit-scrollbar{display:none} .seg span{flex:1 0 auto;text-align:center;padding:5px 8px;border-radius:8px;color:var(--muted);white-space:nowrap;cursor:pointer} .seg span.on{background:var(--app-card);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)} .seg.subnav{background:transparent;padding:0 0 2px;border-bottom:1px solid var(--line);border-radius:0;font-size:13px} .seg.subnav span{padding:7px 8px;border-radius:0;border-bottom:2px solid transparent} .seg.subnav span.on{background:transparent;box-shadow:none;border-bottom-color:var(--accent);color:var(--ink)} .flag{font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;white-space:nowrap} .flag.warn{background:var(--warn-soft);color:var(--warn)} .flag.ok{background:var(--up-soft);color:var(--up)} .flag.bad{background:var(--down-soft);color:var(--down)} .flag.acc{background:var(--accent-soft);color:var(--accent)} .flag.off{background:var(--app-bg);color:var(--muted)} .list{background:var(--app-card);border-radius:16px;overflow:hidden} .list-h{display:flex;justify-content:space-between;align-items:center;padding:12px 4px 2px;font-weight:700;font-size:14px} .row{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid var(--line)} .list>.row:first-child{border-top:0} .row.plain{grid-template-columns:30px 1fr auto} .row[data-go]{cursor:pointer} .row .n{font-weight:600;font-size:14px;line-height:1.25} .row .s{font-size:12px;color:var(--muted);line-height:1.3} .tick{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;background:var(--accent)} .rowic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none} .chev{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;color:var(--muted)} .note{font-size:11px;color:var(--muted);text-align:center;padding-top:2px} .back{all:unset;cursor:pointer;color:var(--accent);font-size:14px} .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px} .btn{border:0;border-radius:12px;padding:11px;font:600 14px var(--body);cursor:pointer;background:var(--accent-soft);color:var(--accent)} .btn.main{background:var(--accent);color:var(--accent-ink)} .btn.ghost{background:var(--app-bg);color:var(--muted)} .field{display:grid;gap:4px} .field label{font-size:12px;color:var(--muted)} .inp{background:var(--app-bg);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:16px;color:var(--ink);font-family:var(--body);width:100%} .emptybox{padding:22px 14px;text-align:center;font-size:13px;color:var(--muted);display:grid;gap:9px;justify-items:center} .emptybox .ic{width:28px;height:28px;color:var(--accent)} .emptybox b{color:var(--ink);font-size:15px} /* тумблер */ .swrow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;font-size:13px;padding:7px 0;border-bottom:1px solid var(--line)} .swrow:last-child{border-bottom:0} .swrow .sub{font-size:11px;color:var(--muted)} .sw{all:unset;cursor:pointer;width:42px;height:24px;border-radius:99px;background:var(--line);position:relative;transition:background .15s;flex:none} .sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--paper);transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.3)} .sw[aria-checked="true"]{background:var(--accent)} .sw[aria-checked="true"]::after{transform:translateX(18px)} /* ползунок */ input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;margin:0;cursor:pointer} input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:var(--app-bg)} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-6px;border-radius:50%;background:var(--paper);border:3px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.25)} input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:var(--app-bg)} input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--paper);border:3px solid var(--accent)} /* стекло - формулы приложения WB (styles.css, блок liquid glass) */ .btn.main,.fab,.seg:not(.subnav) span.on,.themebtn.on{ background: radial-gradient(120% 75% at 50% -8%, rgb(255 255 255 / calc(.22 + .3 * var(--glass))) 0%, rgb(255 255 255 / 0) 62%), radial-gradient(95% 60% at 50% 118%, rgb(255 255 255 / calc(.04 + .22 * var(--glass))) 0%, rgb(255 255 255 / 0) 70%), linear-gradient(180deg, rgb(255 255 255 / 0) 55%, rgb(0 0 0 / calc(.06 + .06 * var(--glass))) 100%), color-mix(in srgb, var(--accent) calc(100% - 44% * var(--glass)), transparent); box-shadow: inset 0 1px .5px rgb(255 255 255 / calc(.35 + .45 * var(--glass))), inset 0 -1px 1px rgb(0 0 0 / calc(.1 + .1 * var(--glass))), inset 0 0 0 .5px rgb(255 255 255 / calc(.1 + .35 * var(--glass))); -webkit-backdrop-filter:blur(calc(4px + 16px * var(--glass))) saturate(calc(1.1 + .9 * var(--glass))); backdrop-filter:blur(calc(4px + 16px * var(--glass))) saturate(calc(1.1 + .9 * var(--glass))); text-shadow:0 1px 2px rgb(0 0 0 / calc(.14 + .26 * var(--glass))); } .seg:not(.subnav) span.on,.themebtn.on{color:var(--accent-ink)} .btn:not(.main):not(.ghost){ background:color-mix(in srgb, var(--accent) calc(7% + 9% * var(--glass)), transparent); box-shadow:inset 0 1px 0 rgb(255 255 255 / calc(.25 + .35 * var(--glass))); } /* экран «Оформление» */ .themes{display:grid;grid-template-columns:1fr 1fr;gap:8px} .themebtn{all:unset;cursor:pointer;border:1px solid var(--line);border-radius:12px;padding:10px 11px;display:grid;gap:7px} .themebtn.on{border-color:transparent} .themebtn .sw3{display:flex;gap:4px} .themebtn .sw3 i{width:16px;height:16px;border-radius:5px;border:1px solid rgba(128,128,128,.25)} .themebtn .nm{font-size:12.5px;font-weight:600} .glasshead{display:flex;justify-content:space-between;align-items:baseline;font-size:13px} .glasshead b{font-family:var(--num);font-size:14px} /* значки */ .ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none} .ic.lg{width:20px;height:20px} /* отклик на нажатие: всё, что нажимается, отвечает */ .btn:active,.themebtn:active{transform:scale(.985)} .row[data-go]:active{background:var(--app-bg)} .seg span:active{opacity:.75} .btn,.themebtn,.row,.seg span{transition:transform .08s ease,background .12s ease} .toast{position:absolute;left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom));background:var(--ink);color:var(--app-card);border-radius:12px;padding:10px 13px;font-size:13px;display:flex;gap:8px;align-items:center;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .16s,transform .16s;z-index:70} .toast.on{opacity:.97;transform:none} /* кружки «?» и облачко (версия 30 макета, по образцу приложения WB) */ .qdot{all:unset;box-sizing:border-box;display:inline-grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;border:1px solid var(--line);color:var(--muted);font:600 11px/1 var(--body);cursor:pointer;position:relative;vertical-align:1px;margin-left:6px} .qdot::after{content:"";position:absolute;inset:-8px} .qdot[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)} .qdot:focus-visible{outline:2px solid var(--accent);outline-offset:2px} html.nohints .qdot{display:none} .qnav{display:flex;align-items:center;gap:6px;min-width:0;border-bottom:1px solid var(--line)} .qnav>.seg.subnav{flex:1 1 auto;min-width:0;border-bottom:0} .qnav>.qdot,.qback>.qdot,.qhead>.qdot{margin:0 2px 0 0} .qback{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0} .qhead{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:700;font-size:15px;padding:0 2px} .qpop{position:absolute;z-index:60} .qpop-body{background:var(--app-card);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-size:13px;line-height:1.45;box-shadow:0 10px 28px rgba(0,0,0,.22)} .qmore{all:unset;display:block;margin-top:9px;color:var(--accent);font-weight:600;font-size:12.5px;cursor:pointer} .qpop-arrow{position:absolute;top:-5px;width:10px;height:10px;margin-left:-5px;background:var(--app-card);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)} .qpop.is-above .qpop-arrow{top:auto;bottom:-5px;border-left:none;border-top:none;border-right:1px solid var(--line);border-bottom:1px solid var(--line)} /* «FAQ и инструкции» */ .faqchap{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 4px 0} .card.faqlist{padding:0;gap:0;display:block;overflow:hidden} .faqitem{border-top:1px solid var(--line)} .faqitem:first-child{border-top:0} .faqq{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;cursor:pointer;font-weight:600;font-size:14px;line-height:1.3} .faqq .t{flex:1;min-width:0} .faqq .sg{flex:none;color:var(--muted);font-size:17px;line-height:1;transition:transform .15s} .faqitem.open .faqq .sg{transform:rotate(90deg);color:var(--accent)} .faqa{padding:0 14px 14px;font-size:13px;line-height:1.5;overflow-wrap:anywhere} .faqa p{margin:8px 0 0} .faqa ol,.faqa ul{margin:8px 0 0;padding-left:20px} .faqa li{margin:5px 0 0} .faqa .fnote{background:var(--warn-soft);border-radius:10px;padding:8px 10px} .faqa .fqa{display:grid;gap:2px;margin-top:10px} .faqgo{all:unset;display:inline-block;margin-top:10px;color:var(--accent);font-weight:600;font-size:12.5px;cursor:pointer} .faqitem.flash{animation:faqflash 1.6s ease-out} @keyframes faqflash{0%,35%{background:var(--accent-soft)}100%{background:transparent}} .hintitem{display:grid;gap:3px;padding:11px 14px;border-top:1px solid var(--line);font-size:13px} .hintitem:first-child{border-top:0} /* экран-заглушка входа: закрытый тест, ошибка, обычный браузер */ .gate{height:100%;display:grid;place-content:center;gap:12px;padding:24px;text-align:center;max-width:420px;margin:0 auto} .gate .ic{width:36px;height:36px;color:var(--accent);justify-self:center} .gate h1{font:700 20px/1.25 var(--display);margin:0} .gate p{color:var(--muted);font-size:14px}