:root{--bg:#090909;--panel:#151515;--panel2:#1d1a12;--ink:#f7f2e7;--muted:#a99f8c;--line:#342c1c;--accent:#d4af37;--accent2:#f2d675;--danger:#ef6b6b;--safe:#d4af37;--shadow:rgba(0,0,0,.5)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,sans-serif;background:radial-gradient(circle at top,#241b08 0,#0b0b0b 34%,#050505 100%);color:var(--ink)}body{overscroll-behavior:none}.hidden{display:none!important}.screen{min-height:100vh}.lock-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;background:radial-gradient(circle at top,#2a210d,#090909 55%,#000);color:var(--ink)}.brand-mark{width:76px;height:76px;border-radius:24px;background:linear-gradient(145deg,#2d2412,#111);border:1px solid #6f5920;box-shadow:0 0 35px rgba(212,175,55,.14);display:grid;place-items:center;font-size:40px;color:var(--accent2)}.lock-screen h1{margin:18px 0 4px}.lock-screen p{color:var(--muted)}.panel{width:min(420px,100%);background:rgba(24,22,17,.94);border:1px solid #4a3b18;border-radius:22px;padding:16px;box-shadow:0 24px 60px var(--shadow)}.auth-panel{display:grid;gap:12px;margin-top:18px}.security-note{max-width:420px;font-size:12px;line-height:1.8;text-align:center}.topbar{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:1fr auto 44px;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 14px 10px;background:rgba(8,8,8,.88);backdrop-filter:blur(20px);border-bottom:1px solid rgba(212,175,55,.18)}.topbar-title{text-align:center}.topbar h1{font-size:19px;margin:0}.topbar p{margin:3px 0 0;font-size:11px;color:var(--safe)}.profile-button{direction:rtl;justify-self:start;display:flex;align-items:center;gap:9px;background:transparent;padding:0;min-width:0;color:var(--ink)}.profile-avatar,.person-list-avatar,.avatar-preview{display:grid;place-items:center;overflow:hidden;background:#17140d;border:1px solid #5c481c;font-weight:800;color:var(--accent2)}.profile-avatar{width:42px;height:42px;border-radius:15px}.profile-avatar img,.person-list-avatar img,.avatar-preview img{width:100%;height:100%;object-fit:cover}.profile-copy{display:grid;text-align:right;min-width:0}.profile-copy strong{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-copy small{font-size:10px;color:var(--muted)}main{padding:16px 16px 96px;max-width:760px;margin:auto}.toolbar{display:flex;gap:10px}.search-wrap{flex:1}input,select,textarea,button{font:inherit}input,select,textarea{width:100%;border:1px solid var(--line);background:#121212;border-radius:14px;padding:13px 14px;color:var(--ink);outline:none}input:focus,select:focus,textarea:focus{border-color:#8f7427;box-shadow:0 0 0 3px rgba(212,175,55,.1)}button{border:0;cursor:pointer}.primary{background:linear-gradient(135deg,#b88b19,#f1d16a);color:#171006;border-radius:14px;padding:13px 18px;font-weight:800;box-shadow:0 8px 22px rgba(212,175,55,.12)}.compact{padding:11px 14px}.ghost{background:#211e17;color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:12px 18px}.full{width:100%}.icon-btn{width:42px;height:42px;border-radius:14px;background:#18150f;border:1px solid #4e3e1a}.tabs{display:flex;gap:8px;overflow:auto;padding:14px 0 12px;scrollbar-width:none}.tab{white-space:nowrap;padding:9px 13px;border-radius:999px;background:#161616;border:1px solid var(--line);color:#b9ad95}.tab.active{background:linear-gradient(135deg,#ad841e,#e7c85b);color:#171006;border-color:transparent;font-weight:800}.card-stack{display:grid;gap:14px}.wallet-card{position:relative;perspective:1200px;min-height:220px}.wallet-inner{position:relative;width:100%;aspect-ratio:1.586/1;transform-style:preserve-3d;transition:transform .5s}.wallet-card.flipped .wallet-inner{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;border-radius:22px;overflow:hidden;backface-visibility:hidden;background:linear-gradient(145deg,#141414,#342b16);border:1px solid rgba(212,175,55,.25);box-shadow:0 18px 42px rgba(0,0,0,.45)}.card-back{transform:rotateY(180deg)}.card-face img{width:100%;height:100%;object-fit:cover;display:block}.card-placeholder{height:100%;padding:22px;display:flex;flex-direction:column;justify-content:space-between;color:#fff}.card-placeholder.bank{background:linear-gradient(135deg,#0c0c0c,#4b3a12)}.card-placeholder.identity{background:linear-gradient(135deg,#101010,#594a25)}.card-placeholder.other{background:linear-gradient(135deg,#0e0e0e,#302817)}.card-title{font-size:22px;font-weight:800;color:var(--accent2)}.card-subtitle{font-size:14px;opacity:.85}.card-meta{display:flex;justify-content:space-between}.card-actions{position:absolute;z-index:3;left:12px;bottom:12px;display:flex;gap:8px}.card-actions button{background:rgba(13,13,13,.88);color:#f5e8bd;border:1px solid rgba(212,175,55,.25);border-radius:10px;padding:8px 10px}.empty-state{text-align:center;padding:70px 20px}.empty-icon{font-size:64px;color:#826d35}.empty-state p,.muted{color:var(--muted);line-height:1.8}.bottom-actions{position:fixed;z-index:12;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(3,1fr);padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(8,8,8,.94);backdrop-filter:blur(18px);border-top:1px solid rgba(212,175,55,.18)}.bottom-actions button{background:transparent;padding:10px;color:#d9c88c}.dialog{width:min(560px,calc(100% - 24px));max-height:88vh;border:1px solid #4a3b18;border-radius:24px;padding:0;background:#111;color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.7)}.compact-dialog{width:min(430px,calc(100% - 24px))}.dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}.dialog form,.dialog-body{padding:18px;display:grid;gap:14px;overflow:auto;max-height:88vh}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h2{margin:0;font-size:20px;color:var(--accent2)}.close-btn{font-size:28px;background:transparent;color:var(--ink)}.dialog label{display:grid;gap:7px;font-size:13px;font-weight:700}.owner-badge{padding:10px 12px;background:#201b0e;border:1px solid #4a3b18;border-radius:12px;font-weight:700;color:#e5cd7b}.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.photo-picker{border:1px dashed #6a5522;border-radius:16px;padding:12px;text-align:center;min-height:180px;background:#0c0c0c;display:grid;gap:8px;align-content:start}.photo-picker>strong{color:#ebd57e}.photo-picker img{width:100%;margin-top:4px;border-radius:10px;display:none;border:1px solid #453817}.scan-button{width:100%;background:linear-gradient(135deg,#6f5516,#d4af37);color:#120d04;border-radius:12px;padding:12px;font-weight:800}.file-fallback{font-size:11px!important;color:var(--muted);font-weight:500!important}.file-fallback input{font-size:11px;padding:8px;margin-top:4px}.scan-hint{font-size:10px;color:var(--muted);font-weight:400}.dialog-actions{display:flex;justify-content:flex-end;gap:10px}.person-picker-list,.people-list{display:grid;gap:9px}.person-picker-row,.person-row{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);background:#151515;color:var(--ink);border-radius:15px;text-align:right}.person-picker-row b{visibility:hidden}.person-picker-row.active{border-color:#a88528;background:#211b0d}.person-picker-row.active b{visibility:visible;color:var(--accent2)}.person-list-avatar{width:46px;height:46px;border-radius:15px}.person-row-actions{display:flex;gap:6px}.person-row-actions button{padding:8px;border-radius:9px;background:#282218;color:#eadb9d}.person-editor{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:end}.avatar-picker{text-align:center}.avatar-picker input{display:none}.avatar-preview{width:78px;height:78px;border-radius:24px;margin:auto;font-size:28px}.danger{color:#ff9d9d;background:#3a1818!important}.toast{position:fixed;z-index:1200;top:calc(env(safe-area-inset-top) + 72px);left:50%;bottom:auto;transform:translateX(-50%);width:min(420px,calc(100% - 28px));min-height:46px;display:flex;align-items:center;gap:10px;padding:10px 13px 10px 12px;border-radius:16px;background:linear-gradient(135deg,rgba(31,28,20,.96),rgba(13,13,13,.94));color:#f7f2e7;border:1px solid rgba(212,175,55,.38);box-shadow:0 14px 38px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.035);backdrop-filter:blur(18px) saturate(125%);-webkit-backdrop-filter:blur(18px) saturate(125%);font-size:13px;font-weight:650;line-height:1.65;text-align:right;direction:rtl;pointer-events:none;animation:walletToastIn .22s ease-out both}.toast::before{content:"✓";flex:0 0 27px;width:27px;height:27px;border-radius:9px;display:grid;place-items:center;background:rgba(212,175,55,.14);border:1px solid rgba(212,175,55,.28);color:#f2d675;font-size:15px;font-weight:900}.toast[data-kind="copy"]::before{content:"⧉"}.toast[data-kind="face"]::before{content:"⌁";font-size:18px}.toast[data-kind="warning"]{border-color:rgba(237,190,76,.5)}.toast[data-kind="warning"]::before{content:"!";color:#f4cf70;background:rgba(237,190,76,.12)}.toast[data-kind="error"]{border-color:rgba(239,107,107,.52);background:linear-gradient(135deg,rgba(49,24,24,.97),rgba(14,12,12,.95))}.toast[data-kind="error"]::before{content:"!";color:#ffaaa6;background:rgba(239,107,107,.13);border-color:rgba(239,107,107,.28)}@keyframes walletToastIn{from{opacity:0;transform:translate(-50%,-10px) scale(.985)}to{opacity:1;transform:translate(-50%,0) scale(1)}}@media(max-width:430px){.toast{top:calc(env(safe-area-inset-top) + 66px);width:calc(100% - 22px);font-size:12.5px;border-radius:15px}}.scan-overlay{position:fixed;z-index:200;inset:0;background:rgba(0,0,0,.78);display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;color:var(--accent2)}.spinner{width:42px;height:42px;border:4px solid rgba(212,175,55,.25);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}} .camera-dialog{padding:0;border:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:#000}.camera-dialog::backdrop{background:#000}.camera-shell{position:relative;width:100%;height:100%;overflow:hidden;background:#000}.camera-shell video{display:block;width:100%;height:100%;object-fit:cover;background:#050505;visibility:visible;opacity:1}.camera-guide{position:absolute;left:7%;right:7%;top:50%;aspect-ratio:1.586/1;transform:translateY(-50%);border:2px solid rgba(242,214,117,.65);border-radius:18px;box-shadow:0 0 0 999px rgba(0,0,0,.48),0 0 28px rgba(212,175,55,.18);transition:border-color .2s,box-shadow .2s}.camera-guide.ready{border-color:#f6d96e;box-shadow:0 0 0 999px rgba(0,0,0,.48),0 0 36px rgba(212,175,55,.55)}.camera-guide span{position:absolute;width:28px;height:28px;border-color:#f1d16a}.camera-guide span:nth-child(1){right:-2px;top:-2px;border-right:4px solid;border-top:4px solid;border-radius:0 15px 0 0}.camera-guide span:nth-child(2){left:-2px;top:-2px;border-left:4px solid;border-top:4px solid;border-radius:15px 0 0 0}.camera-guide span:nth-child(3){right:-2px;bottom:-2px;border-right:4px solid;border-bottom:4px solid;border-radius:0 0 15px 0}.camera-guide span:nth-child(4){left:-2px;bottom:-2px;border-left:4px solid;border-bottom:4px solid;border-radius:0 0 0 15px}.camera-top{position:absolute;top:0;left:0;right:0;padding:calc(14px + env(safe-area-inset-top)) 16px 14px;display:grid;grid-template-columns:50px 1fr 50px;align-items:center;color:#fff;background:linear-gradient(#000b,transparent)}.camera-top strong{text-align:center}.camera-top button{height:44px;border-radius:14px;background:#191919cc;color:#f5df91}.camera-status{position:absolute;left:22px;right:22px;bottom:calc(105px + env(safe-area-inset-bottom));text-align:center;color:#fff}.camera-status strong{display:block;margin-bottom:9px}.camera-status small{display:block;margin-top:8px;color:#d6d0c2}.scan-progress{height:5px;background:#ffffff30;border-radius:9px;overflow:hidden}.scan-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#9d7615,#f4d66b);transition:width .15s}.manual-capture{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:64px;height:64px;border-radius:50%;border:5px solid #fff;background:#d4af37;box-shadow:0 0 0 3px #0008} @media(min-width:700px){.wallet-card{min-height:auto}}@media(max-width:440px){.topbar{grid-template-columns:1fr 44px}.topbar-title{display:none}.photo-grid{grid-template-columns:1fr}.profile-copy strong{max-width:180px}}@media(display-mode:standalone){.topbar{padding-top:calc(10px + env(safe-area-inset-top))}} .camera-guide.landscape{left:7%;right:7%;width:auto}.camera-guide.portrait{left:50%;right:auto;width:min(68vw,360px);transform:translate(-50%,-50%)}.primary:disabled{opacity:.55;cursor:wait}.wallet-card.portrait{max-width:360px;margin-inline:auto}.wallet-card.portrait .wallet-inner{aspect-ratio:1/1.586} .camera-guide.detecting{width:64%;height:48%;border-style:dashed;opacity:.72} .camera-guide.landscape{width:82%;height:auto;aspect-ratio:1.586/1} .camera-guide.portrait{height:72%;width:auto;aspect-ratio:1/1.586} .version-badge{font-size:11px;color:#d9b35b;border:1px solid rgba(217,179,91,.35);padding:6px 9px;border-radius:999px} .scan-actions{display:grid;grid-template-columns:1fr 76px;gap:10px;align-items:stretch}.orientation-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid #735c22;background:#15130d;color:#f2d675;border-radius:14px;min-height:52px}.orientation-button .orientation-shape{display:block;border:2px solid #e7c55c;border-radius:4px;width:31px;height:19px;transition:.2s}.orientation-button.portrait .orientation-shape{width:19px;height:31px}.orientation-button small{font-size:11px}.camera-shell video{display:block;position:absolute;inset:0;background:#000;visibility:visible;opacity:1;z-index:0}.camera-guide{z-index:2}.camera-top,.camera-status,.manual-capture{z-index:3} .bank-fields{display:grid;gap:10px;padding:12px;border:1px solid #4a3b18;border-radius:16px;background:#0d0c09}.bank-fields-head{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--accent2)}.small{padding:8px 10px;font-size:12px}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}.crop-edit{width:100%;padding:9px;margin-top:3px}.crop-dialog{padding:0;border:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:#050505;color:#fff}.crop-dialog::backdrop{background:#000}.crop-shell{height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:calc(10px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));gap:12px}.crop-head{display:grid;grid-template-columns:80px 1fr 80px;align-items:center;gap:8px}.crop-head strong{text-align:center;color:var(--accent2)}.crop-head>button:first-child{background:#1b1b1b;color:#eee;border-radius:12px;padding:11px}.crop-head .primary{padding:11px}.crop-stage{position:relative;min-height:0;overflow:hidden;border-radius:18px;background:#000;touch-action:none}.crop-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}.crop-box{position:absolute;border:2px solid #f1d16a;box-shadow:0 0 0 9999px rgba(0,0,0,.55);touch-action:none}.crop-box i{position:absolute;width:28px;height:28px;border-radius:50%;background:#f1d16a;border:3px solid #151008;transform:translate(-50%,-50%)}.crop-box i[data-corner=tl]{left:0;top:0}.crop-box i[data-corner=tr]{left:100%;top:0}.crop-box i[data-corner=bl]{left:0;top:100%}.crop-box i[data-corner=br]{left:100%;top:100%}.crop-help{text-align:center;margin:0;color:#bbb;font-size:12px}.ocr-working{opacity:.65;pointer-events:none}@media(max-width:440px){.two-cols{grid-template-columns:1fr}.bank-fields-head{align-items:flex-start;flex-direction:column}} .ocr-progress-panel{margin-top:10px;padding:12px;border:1px solid rgba(212,175,55,.35);border-radius:14px;background:rgba(212,175,55,.06);display:grid;gap:8px;transition:.2s ease} .ocr-progress-panel.hidden{display:none}.ocr-progress-panel.compact{padding:9px 12px} .ocr-progress-head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#f2d56b}.ocr-progress-head span{font-size:11px;border:1px solid rgba(212,175,55,.45);padding:2px 7px;border-radius:999px} .ocr-progress-track{height:7px;background:#181818;border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,.06)} .ocr-progress-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8b6812,#f2d56b);transition:width .2s ease} .ocr-progress-panel small{color:#c9c1ae;line-height:1.7} .version-stack{display:grid;justify-items:center;gap:3px}.version-number{font-size:9px;color:#8f805e;direction:ltr}.version-stack .version-badge{display:inline-block} .ltr-number{direction:ltr!important;unicode-bidi:isolate!important;text-align:left!important;font-variant-numeric:tabular-nums;letter-spacing:.06em} .secret-input{display:grid;grid-template-columns:1fr 46px;gap:8px;direction:ltr}.eye-btn{border:1px solid #5d491d;background:#1c180f;color:#f1d16a;border-radius:13px;font-size:20px}.detail-dialog{width:min(620px,calc(100% - 24px))}.detail-images{display:grid;grid-template-columns:1fr 1fr;gap:10px}.detail-images img{width:100%;border-radius:14px;border:1px solid #4a3b18}.detail-fields{display:grid;gap:8px}.detail-row{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:8px;padding:11px 12px;border:1px solid #342c1c;border-radius:13px;background:#15130e}.detail-row span{color:#ad9f82;font-size:12px}.detail-row strong{overflow-wrap:anywhere}.detail-row.ltr strong{direction:ltr;text-align:left;unicode-bidi:plaintext}.detail-eye{background:#241f14;color:#f2d675;border-radius:10px;padding:7px 10px}.wallet-inner{cursor:pointer}@media(max-width:520px){.detail-images{grid-template-columns:1fr}.detail-row{grid-template-columns:92px 1fr auto}} /* v1.5.4 orientation carousels */ .card-stack{display:grid;gap:22px}.orientation-section{display:grid;gap:10px;min-width:0}.orientation-head{display:flex;justify-content:space-between;align-items:center;padding-inline:3px}.orientation-head h3{margin:0;color:#ead06e;font-size:15px}.orientation-head span{font-size:11px;color:#96896d}.orientation-carousel{display:flex;gap:13px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;padding:2px 3px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.orientation-carousel::-webkit-scrollbar{display:none}.orientation-carousel .wallet-card{flex:0 0 min(88vw,560px);scroll-snap-align:center;margin:0}.orientation-carousel .wallet-card.portrait{flex-basis:min(68vw,330px);max-width:none}.orientation-carousel .wallet-card.portrait .wallet-inner{aspect-ratio:1/1.586}.orientation-carousel .wallet-card.landscape .wallet-inner{aspect-ratio:1.586/1}.detail-row.card-number-row{grid-template-columns:92px minmax(0,1fr)}.card-number-value{direction:ltr!important;unicode-bidi:isolate!important;text-align:left!important;white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important;font-variant-numeric:tabular-nums;font-size:clamp(13px,4vw,18px);letter-spacing:.25px}.detail-row.card-number-row span{direction:rtl}@media(min-width:700px){.orientation-carousel .wallet-card{flex-basis:520px}.orientation-carousel .wallet-card.portrait{flex-basis:320px}} /* My Wallet v1.6.1 luxury redesign */ :root{--gold:#d7ae3a;--gold-soft:#f5dc83;--glass:rgba(20,18,13,.82)} body{background:radial-gradient(100% 55% at 50% -10%,#3b2b0b 0,#0a0907 45%,#030303 100%)} .lock-logo{width:112px;height:112px;object-fit:contain;border-radius:28px;filter:drop-shadow(0 20px 35px rgba(212,175,55,.18))} .topbar{grid-template-columns:1fr minmax(150px,auto) 54px;padding-inline:16px;background:linear-gradient(180deg,rgba(6,6,6,.97),rgba(8,8,8,.78));box-shadow:0 8px 30px rgba(0,0,0,.25)} .brand-title{display:flex!important;align-items:center;justify-content:center;gap:9px;direction:ltr}.brand-title img{width:38px;height:38px;object-fit:contain;border-radius:11px}.brand-title span{text-align:left}.brand-title h1{font-size:18px;letter-spacing:.3px}.brand-title p{font-size:9px;letter-spacing:.7px;color:#b9a46c} .profile-button{background:rgba(255,255,255,.025);border:1px solid rgba(212,175,55,.14);border-radius:16px;padding:4px 7px 4px 5px}.profile-copy small{color:#a58e55} main{padding-bottom:116px}.toolbar{position:sticky;top:79px;z-index:8;padding:9px 0 12px;background:linear-gradient(#080808 70%,transparent)}.add-luxe{display:flex;align-items:center;gap:5px}.add-luxe span{font-size:20px;line-height:1}.add-luxe b{font-size:12px} .bottom-nav{position:fixed;z-index:30;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,1fr);padding:7px 8px calc(7px + env(safe-area-inset-bottom));background:rgba(7,7,7,.92);backdrop-filter:blur(24px) saturate(1.4);border-top:1px solid rgba(212,175,55,.18);box-shadow:0 -18px 38px rgba(0,0,0,.45)}.nav-item{display:grid;justify-items:center;gap:3px;background:transparent;color:#81765f;padding:5px 2px;border-radius:14px}.nav-icon{font-size:22px;line-height:1}.nav-item small{font-size:10px}.nav-item.active{color:var(--gold-soft);background:linear-gradient(180deg,rgba(212,175,55,.12),rgba(212,175,55,.02))}.nav-item.active .nav-icon{filter:drop-shadow(0 0 8px rgba(212,175,55,.45))} .orientation-head h3{font-size:14px}.orientation-carousel{gap:16px;padding:4px 7vw 18px;scroll-padding-inline:7vw}.orientation-carousel .wallet-card{flex-basis:86vw}.orientation-carousel .wallet-card.portrait{flex-basis:65vw}.wallet-card{filter:drop-shadow(0 22px 28px rgba(0,0,0,.45))}.card-face{border-radius:24px;border-color:rgba(229,190,73,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 55px rgba(0,0,0,.5)}.card-face img{object-fit:cover}.card-actions{left:50%;bottom:10px;transform:translateX(-50%);padding:5px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(5,5,5,.62);backdrop-filter:blur(15px)}.card-actions button{width:39px;height:39px;display:grid;place-items:center;padding:0;border-radius:12px;font-size:19px;background:transparent;border:0;color:#f4dda0}.card-actions button.danger-icon{color:#f39494}.card-actions button:active{transform:scale(.92);background:rgba(212,175,55,.14)} .owner-select-label{display:grid;gap:7px;font-size:13px;font-weight:700}.owner-select-label select{background:#1b170f;border-color:#5d491b;color:#f1dc94} .detail-actions{justify-content:center}.icon-action{width:52px;height:52px;border-radius:17px!important;padding:0!important;font-size:25px}.detail-images img{background:#080808;object-fit:contain;max-height:56vh} .settings-dialog{width:min(540px,calc(100% - 20px))}.settings-body{gap:12px;background:radial-gradient(circle at top,#211a0c,#101010 35%)}.settings-card{display:grid;gap:12px;padding:15px;border:1px solid rgba(212,175,55,.18);border-radius:19px;background:rgba(17,16,13,.86);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}.settings-card small{display:block;margin-top:4px;color:#9c927e;font-size:11px;line-height:1.7}.account-setting,.setting-row{grid-template-columns:1fr auto;align-items:center}.settings-chevron,.icon-setting{width:42px;height:42px;border-radius:14px;background:#211d14;color:#e7ca6c;border:1px solid #4d3d18;font-size:25px}.switch input{display:none}.switch i{display:block;width:50px;height:29px;border-radius:999px;background:#2b2b2b;position:relative;transition:.2s;border:1px solid #444}.switch i:after{content:"";position:absolute;width:23px;height:23px;top:2px;left:3px;border-radius:50%;background:#aaa;transition:.2s}.switch input:checked+i{background:#b18a1d;border-color:#d6b84b}.switch input:checked+i:after{left:23px;background:#fff3bc}.password-settings{display:grid;gap:9px;padding-top:5px}.app-info{grid-template-columns:60px 1fr;align-items:center}.app-info img{width:56px;height:56px;object-fit:contain;border-radius:16px} @media(max-width:440px){.topbar{grid-template-columns:1fr auto 48px}.brand-title{display:flex!important}.profile-copy{display:none}.toolbar{top:75px}.orientation-carousel .wallet-card{flex-basis:88vw}.orientation-carousel .wallet-card.portrait{flex-basis:68vw}} /* Backup/Restore v1.6.1 */ .backup-progress{margin:14px 0 4px}.backup-progress-track{height:7px;border-radius:99px;background:#262117;overflow:hidden;border:1px solid rgba(217,179,91,.18)}.backup-progress-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,#8d6b25,#e5c56f);transition:width .25s ease}.backup-progress small{display:block;margin-top:8px;color:#b7aa8a}.backup-summary{margin:12px 0;padding:12px;border-radius:14px;background:#17140f;border:1px solid rgba(217,179,91,.2);font-size:13px;line-height:1.9;color:#ddcfaa}#restoreMode{width:100%;margin-top:10px} /* v1.7.3 profile and edit safety */ .profile-button{justify-self:start;max-width:100%;} .profile-copy strong{max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;} .edit-danger-zone{display:flex;justify-content:flex-start;margin-top:8px;padding-top:14px;border-top:1px solid rgba(255,120,120,.13)} .danger-edit{display:inline-flex;align-items:center;gap:9px;padding:11px 14px;border-radius:13px;background:rgba(83,22,22,.5);border:1px solid rgba(255,120,120,.28);color:#ffadad;font-weight:800} .danger-edit span{font-size:20px} @media(max-width:440px){.topbar{grid-template-columns:minmax(0,1fr) auto 48px}.profile-copy{display:grid!important}.profile-copy strong{max-width:145px;font-size:13px}.profile-copy small{display:none}.profile-avatar{width:38px;height:38px;border-radius:13px}.brand-title span{display:none}.brand-title img{width:38px;height:38px}} /* v1.7.4 compact header */ .topbar{grid-template-columns:minmax(0,1fr) auto auto!important;gap:8px!important;padding-bottom:8px!important} .brand-button{border:0;background:transparent;color:inherit;padding:0;cursor:pointer;min-width:0} .header-actions{direction:ltr;display:flex;align-items:center;gap:7px;justify-self:end} .header-icon-btn{position:relative;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#1b1811,#0d0d0d);border:1px solid rgba(212,175,55,.28);color:#ead37e;box-shadow:0 7px 20px rgba(0,0,0,.25)} .header-icon-btn:active{transform:scale(.94)} .header-icon-btn svg,.search-field svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .add-card-icon .plus-badge{position:absolute;top:-5px;right:-5px;display:grid;place-items:center;width:19px;height:19px;border-radius:999px;background:linear-gradient(135deg,#f5db75,#b98b1d);border:2px solid #080808;color:#171006;font-size:15px;font-weight:900;line-height:1} .header-search-panel{position:sticky;top:70px;z-index:9;padding:8px 0 11px;background:linear-gradient(#080808 75%,transparent)} .search-field{height:46px;display:flex;align-items:center;gap:8px;padding:0 10px 0 5px;border:1px solid #58471f;background:rgba(18,18,18,.97);border-radius:15px;box-shadow:0 12px 28px rgba(0,0,0,.25);color:#cdb863} .search-field input{border:0!important;box-shadow:none!important;background:transparent!important;padding:9px 2px;min-width:0} .search-field button{width:36px;height:36px;border-radius:11px;background:#211d14;color:#d8c78a;font-size:22px} .app-version-card{display:flex;align-items:center;gap:14px;padding:15px;border:1px solid #4a3b18;border-radius:18px;background:linear-gradient(145deg,#1c180f,#0d0d0d)} .app-version-card img{width:64px;height:64px;border-radius:18px;object-fit:cover} .app-version-card div{display:grid;gap:4px}.app-version-card strong{color:#f1d675;font-size:17px}.app-version-card span{direction:ltr;text-align:right;font-weight:800}.app-version-card small{color:#9f947d} main{padding-top:10px!important} @media(max-width:440px){.topbar{grid-template-columns:minmax(0,1fr) 42px auto!important}.brand-title span{display:none!important}.header-icon-btn{width:39px;height:39px;border-radius:13px}.header-actions{gap:6px}.header-search-panel{top:67px}.profile-copy strong{max-width:125px!important}} /* v2.0.2 — deterministic iOS header layout */ .topbar{ direction:ltr!important; display:grid!important; grid-template-columns:52px auto minmax(0,1fr)!important; align-items:center!important; gap:10px!important; min-height:70px; padding:calc(9px + env(safe-area-inset-top)) 12px 9px!important; } .header-logo{ justify-self:start; width:50px; height:50px; display:grid; place-items:center; border-radius:16px; background:linear-gradient(145deg,#242014,#0d0d0d); border:1px solid rgba(212,175,55,.34); box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 18px rgba(212,175,55,.08); } .header-logo img{width:44px;height:44px;display:block;object-fit:contain;filter:contrast(1.08) saturate(1.08)} .header-actions{justify-self:start!important;direction:ltr!important;display:flex!important;gap:7px!important} .profile-button{ justify-self:end!important; direction:rtl!important; display:flex!important; align-items:center!important; gap:9px!important; max-width:100%; min-width:0; } .profile-copy{display:grid!important;text-align:right!important;min-width:0} .profile-copy strong{display:block;max-width:180px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px} .profile-copy small{display:block!important;font-size:10px;color:var(--muted)} .profile-avatar{flex:0 0 auto;width:44px!important;height:44px!important;border-radius:15px!important;background:#17140d;position:relative} .profile-avatar img{width:100%;height:100%;display:block;object-fit:cover} .profile-avatar .avatar-fallback{width:100%;height:100%;display:grid;place-items:center;color:#d7bd62} .profile-avatar .avatar-fallback svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} @media(max-width:520px){ .topbar{grid-template-columns:48px auto minmax(0,1fr)!important;gap:8px!important} .header-logo{width:46px;height:46px;border-radius:15px} .header-logo img{width:40px;height:40px} .header-icon-btn{width:38px!important;height:38px!important} .profile-avatar{width:40px!important;height:40px!important} .profile-copy strong{max-width:115px!important;font-size:13px} .profile-copy small{display:none!important} } @media(max-width:370px){ .topbar{grid-template-columns:44px auto minmax(0,1fr)!important;padding-inline:8px!important;gap:6px!important} .header-logo{width:42px;height:42px}.header-logo img{width:37px;height:37px} .header-icon-btn{width:35px!important;height:35px!important} .profile-copy strong{max-width:88px!important} .profile-avatar{width:37px!important;height:37px!important} } /* v2.0.3 avatar migration and debug */ .profile-avatar img,.person-list-avatar img,.avatar-preview img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit}.avatar-fallback{width:100%;height:100%;display:grid;place-items:center}.avatar-fallback svg{width:65%;height:65%;fill:none;stroke:currentColor;stroke-width:1.7}.debug-info{line-height:2;padding:14px;border:1px solid rgba(212,175,55,.22);border-radius:16px;background:#13110d;color:#e8dbb6;font-size:13px;direction:rtl}.debug-info strong{color:#f2d878} /* v2.0.5 identity document form */ .identity-profile-panel{margin:10px 14px 16px;border:1px solid rgba(212,175,55,.28);border-radius:18px;background:linear-gradient(145deg,rgba(32,28,16,.88),rgba(14,14,14,.96));overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.24)} .identity-profile-summary{width:100%;border:0;background:transparent;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;text-align:right} .identity-profile-summary span:first-child{display:flex;flex-direction:column;gap:3px}.identity-profile-summary small{color:#b8aa7b}.identity-profile-summary strong{font-size:15px}.identity-profile-chevron{color:#d4af37;font-size:22px} .identity-profile-body{padding:0 16px 16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.identity-info-item{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:10px;min-width:0}.identity-info-item.wide{grid-column:1/-1}.identity-info-item span{display:block;color:#a9a9a9;font-size:11px;margin-bottom:4px}.identity-info-item b{font-size:13px;word-break:break-word}.identity-profile-edit{grid-column:1/-1;border:1px solid rgba(212,175,55,.35);background:rgba(212,175,55,.08);color:#e8cb68;border-radius:12px;padding:10px} .identity-fields{display:grid;gap:12px;padding:14px;border:1px solid rgba(212,175,55,.2);border-radius:16px;background:rgba(255,255,255,.025);margin:12px 0}.identity-fields>strong{color:#e3c560} .category-chip{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.3);color:#e7ca67;font-size:12px;margin-bottom:8px} @media(max-width:420px){.identity-profile-body{grid-template-columns:1fr}} /* v2.0.5 document source buttons */ .source-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.source-button{min-height:44px;border:1px solid rgba(214,173,88,.34);border-radius:13px;display:flex;align-items:center;justify-content:center;font-weight:750;cursor:pointer;background:rgba(255,255,255,.035);color:var(--text)}.source-button input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}.gallery-source:before{content:'▧';margin-left:7px;color:var(--gold)}.files-source:before{content:'⌑';margin-left:7px;color:var(--gold)}.optional-label{font-weight:500;color:var(--muted);font-size:.72rem;margin-right:5px}.wallet-card.front-only .wallet-inner{transform:none!important}.wallet-card.front-only .card-front{backface-visibility:visible}.wallet-card.front-only .card-actions{justify-content:flex-end}@media(max-width:430px){.source-actions{grid-template-columns:1fr}} .pdf-preview{width:100%;min-height:150px;border:1px solid rgba(212,175,55,.35);border-radius:18px;background:linear-gradient(145deg,rgba(32,26,14,.96),rgba(10,10,10,.98));color:#f7e8b0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px;margin-top:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)} .pdf-preview span{display:grid;place-items:center;width:62px;height:62px;border-radius:18px;background:linear-gradient(145deg,#b91c1c,#7f1d1d);color:#fff;font-weight:900;letter-spacing:.08em;box-shadow:0 10px 24px rgba(127,29,29,.28)} .pdf-preview b{font-size:15px}.pdf-preview small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#b8aa80;direction:ltr} .pdf-card-face{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(145deg,#2d0a0a,#0d0d0d);color:#fff}.pdf-card-face .pdf-badge{font-weight:900;background:#b91c1c;border-radius:12px;padding:12px 14px;letter-spacing:.08em}.pdf-card-face small{max-width:85%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d7cba4;direction:ltr} .detail-pdf-list{display:grid;gap:10px;margin:12px 0}.detail-pdf-open{display:flex;align-items:center;gap:12px;width:100%;border:1px solid rgba(212,175,55,.28);background:#111;color:#f7e8b0;border-radius:15px;padding:13px 15px;text-align:right}.detail-pdf-open span{display:grid;place-items:center;min-width:44px;height:44px;border-radius:12px;background:#991b1b;color:#fff;font-weight:900}.detail-pdf-open small{display:block;color:#a89a72;direction:ltr;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px} .pdf-thumbnail-face{position:relative;width:100%;height:100%;overflow:hidden;background:#fff}.pdf-thumbnail-face>img{width:100%;height:100%;object-fit:cover;display:block}.pdf-corner-badge{position:absolute;left:10px;bottom:10px;background:rgba(130,12,12,.92);color:#fff;font-weight:900;font-size:11px;border-radius:9px;padding:6px 8px;box-shadow:0 5px 14px rgba(0,0,0,.35);direction:ltr}.pdf-card-face{overflow:hidden} /* v2.1.2 full-width identity document carousel */ .orientation-carousel:has(.identity-document-slide){ direction:ltr; gap:14px; padding:2px 14px 14px; scroll-padding-inline:14px; align-items:flex-start; scroll-snap-type:x mandatory; } .identity-document-slide{ direction:rtl; flex:0 0 calc(100% - 28px); width:calc(100% - 28px); max-width:none; scroll-snap-align:center; scroll-snap-stop:always; display:grid; gap:9px; min-width:0; } .identity-document-slide>h4{margin:0;padding:0 5px;text-align:right;color:#f0d77d;font-size:15px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .identity-document-slide .wallet-card{width:100%!important;max-width:none!important;min-width:0;margin:0!important;flex:none!important;scroll-snap-align:none!important} .identity-document-slide.portrait .wallet-card{width:min(100%,390px)!important;justify-self:center} .identity-document-slide.landscape .wallet-card{width:100%!important} .wallet-card.category-identity .card-face img, .wallet-card.category-identity .pdf-thumbnail-face img{object-fit:contain!important;background:#fff} .wallet-card.category-identity .pdf-thumbnail-face{background:#fff} .wallet-card.category-identity.portrait .wallet-inner{aspect-ratio:1/1.414!important} .wallet-card.category-identity.landscape .wallet-inner{aspect-ratio:1.414/1!important} .wallet-card.category-identity .card-face{background:#111} .wallet-card.category-identity .wallet-inner{cursor:zoom-in} @media(max-width:430px){ .orientation-carousel:has(.identity-document-slide){padding-inline:10px;scroll-padding-inline:10px;gap:10px} .identity-document-slide{flex-basis:calc(100% - 20px);width:calc(100% - 20px)} .identity-document-slide.portrait .wallet-card{width:min(100%,340px)!important} } /* v2.1.3 deterministic full-page identity carousel */ .identity-carousel{ direction:ltr!important; display:flex!important; gap:0!important; padding-inline:0!important; scroll-padding-inline:0!important; scroll-snap-type:x mandatory!important; overflow-x:auto!important; width:100%!important; } .identity-carousel .identity-document-slide{ direction:rtl!important; flex:0 0 100%!important; width:100%!important; min-width:100%!important; max-width:100%!important; padding-inline:10px!important; scroll-snap-align:start!important; scroll-snap-stop:always!important; } .identity-carousel .identity-document-slide.portrait .wallet-card{ width:min(100%,360px)!important; margin-inline:auto!important; } .identity-carousel .identity-document-slide.landscape .wallet-card{ width:100%!important; } /* v2.2.2 Safari PDF preview repaint stability */ .pdf-thumbnail-face,.pdf-thumbnail-face>img,.identity-document-slide{ -webkit-backface-visibility:hidden; backface-visibility:hidden; transform:translateZ(0); } .pdf-thumbnail-face>img{ contain:paint; will-change:transform,opacity; } /* v2.2.2 header person info */ .topbar{direction:ltr!important;grid-template-columns:54px auto 42px minmax(0,1fr)!important;grid-template-areas:"logo actions info profile"!important;gap:8px!important} .header-logo{grid-area:logo!important;justify-self:start!important} .header-actions{grid-area:actions!important;justify-self:start!important} .person-info-icon{grid-area:info!important;justify-self:start!important} .profile-button{grid-area:profile!important;justify-self:end!important;direction:rtl!important} .header-person-panel{position:sticky;top:calc(64px + env(safe-area-inset-top));z-index:9;max-width:732px;margin:0 auto 8px!important;border-radius:0 0 18px 18px!important;background:rgba(14,14,14,.97)!important;backdrop-filter:blur(20px);box-shadow:0 16px 38px rgba(0,0,0,.42)} .header-person-panel .identity-profile-body{padding:14px 16px 16px!important} @media(max-width:440px){.topbar{grid-template-columns:46px auto 38px minmax(0,1fr)!important;gap:5px!important}.person-info-icon{width:37px!important;height:37px!important}.header-person-panel{top:calc(59px + env(safe-area-inset-top))}.profile-copy strong{max-width:110px!important}} /* v2.2.3 compact icon-only person information */ .person-info-icon{ border-color:rgba(242,214,117,.42)!important; background:linear-gradient(145deg,rgba(212,175,55,.16),rgba(19,17,12,.96))!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 5px 16px rgba(0,0,0,.24); } .person-info-icon svg{width:23px!important;height:23px!important;stroke:#f0d77d!important;stroke-width:1.75!important} .person-info-icon .person-info-accent{stroke:#fff1b4!important;stroke-width:2!important} .header-person-panel .identity-profile-body{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; align-items:stretch; } .identity-info-item.icon-only{ min-height:48px; padding:8px 10px!important; display:grid!important; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:8px; direction:rtl; } .identity-info-item.icon-only.wide{grid-column:1/-1} .identity-info-item.icon-only.ltr b{direction:ltr;text-align:left;unicode-bidi:plaintext} .identity-info-item.icon-only b{ font-size:13px!important; line-height:1.55; min-width:0; overflow-wrap:anywhere; } .identity-field-icon{ width:29px; height:29px; border-radius:9px; display:grid; place-items:center; color:#efd673; background:rgba(212,175,55,.09); border:1px solid rgba(212,175,55,.2); } .identity-field-icon svg,.identity-profile-edit.icon-edit svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; } .identity-profile-edit.icon-edit{ grid-column:1/-1; width:42px; height:38px; padding:0!important; justify-self:end; display:grid; place-items:center; } .identity-profile-empty{ grid-column:1/-1; display:flex; align-items:center; gap:10px; padding:10px; color:var(--muted); } @media(max-width:390px){ .header-person-panel .identity-profile-body{grid-template-columns:1fr!important} .identity-info-item.icon-only.wide{grid-column:auto} } /* v2.2.4 header cleanup and modal person panel */ .topbar{ z-index:40!important; grid-template-columns:54px auto minmax(0,1fr)!important; grid-template-areas:"logo actions profile"!important; } .header-logo, .header-icon-btn{ background:transparent!important; border:0!important; box-shadow:none!important; border-radius:0!important; } .header-logo{padding:0!important} .header-icon-btn{width:40px!important;height:40px!important;padding:0!important} .header-icon-btn svg{width:24px!important;height:24px!important} .add-card-icon .plus-badge{right:0!important;top:-2px!important} .profile-cluster{ grid-area:profile; justify-self:end; display:flex; align-items:center; gap:3px; direction:rtl; min-width:0; } .profile-button{grid-area:unset!important;justify-self:unset!important} .person-chevron-btn{ width:32px; height:38px; padding:0; flex:0 0 auto; display:grid; place-items:center; color:#f0d36f; background:transparent; border:0; border-radius:0; } .person-chevron-btn svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease} .person-chevron-btn[aria-expanded="true"] svg{transform:rotate(180deg)} .person-panel-backdrop{ position:fixed; inset:0; z-index:20; background:rgba(0,0,0,.63); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); touch-action:none; } .header-person-panel{ position:fixed!important; top:calc(68px + env(safe-area-inset-top))!important; left:12px!important; right:12px!important; z-index:30!important; max-width:720px!important; max-height:calc(100dvh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin:0 auto!important; overflow-y:auto!important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; border-radius:18px!important; } body.person-panel-open{overflow:hidden!important;position:fixed!important;width:100%!important;left:0!important;right:0!important} @media(max-width:440px){ .topbar{grid-template-columns:46px auto minmax(0,1fr)!important;gap:5px!important} .header-person-panel{top:calc(62px + env(safe-area-inset-top))!important;left:8px!important;right:8px!important;max-height:calc(100dvh - 80px - env(safe-area-inset-top) - env(safe-area-inset-bottom))} .person-chevron-btn{width:28px;height:36px} .person-chevron-btn svg{width:21px;height:21px} } /* v2.2.5 unified header drawers */ .profile-cluster{ direction:rtl!important; display:flex!important; align-items:center!important; gap:2px!important; } .profile-avatar-button,.profile-name-button{ border:0!important;background:transparent!important;box-shadow:none!important;color:var(--ink);padding:0!important; } .profile-avatar-button{display:grid;place-items:center;flex:0 0 auto} .profile-name-button{min-width:0;display:flex;align-items:center} .person-chevron-btn{ order:0!important;width:24px!important;height:36px!important;color:#f3d66f!important; } .person-chevron-btn svg{ width:16px!important;height:16px!important;fill:currentColor!important;stroke:none!important;transition:transform .2s ease!important; filter:drop-shadow(0 1px 5px rgba(212,175,55,.28)); } .person-chevron-btn[aria-expanded="true"] svg{transform:rotate(180deg)!important} .header-drawer{ position:fixed!important; top:calc(68px + env(safe-area-inset-top))!important; left:12px!important;right:12px!important;z-index:30!important; width:auto!important;max-width:720px!important;max-height:calc(100dvh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin:0 auto!important;padding:14px!important;overflow-y:auto!important;overscroll-behavior:contain; -webkit-overflow-scrolling:touch;border:1px solid rgba(212,175,55,.3)!important;border-radius:0 0 18px 18px!important; background:rgba(14,14,14,.98)!important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); box-shadow:0 20px 48px rgba(0,0,0,.55)!important;transform:translateY(-10px);opacity:0;transition:transform .18s ease,opacity .18s ease; } .header-drawer:not(.hidden){transform:translateY(0);opacity:1} .app-info-drawer .app-version-card{margin:0} .person-picker-drawer{display:grid;gap:10px} .person-picker-drawer .person-picker-list{max-height:min(55dvh,480px);overflow:auto;overscroll-behavior:contain} .header-person-panel{padding:0!important} .header-person-panel .identity-profile-body{padding:14px 16px 16px!important} .person-panel-backdrop{z-index:20!important} @media(max-width:440px){ .header-drawer{top:calc(62px + env(safe-area-inset-top))!important;left:8px!important;right:8px!important;max-height:calc(100dvh - 80px - env(safe-area-inset-top) - env(safe-area-inset-bottom))} .person-chevron-btn{width:21px!important;height:34px!important}.person-chevron-btn svg{width:14px!important;height:14px!important} .profile-copy strong{max-width:96px!important} } /* v2.2.6 profile arrow placement and extended identity fields */ .profile-cluster{direction:ltr!important;display:flex!important;align-items:center!important;gap:4px!important} .profile-name-button{order:1!important} .profile-avatar-button{order:2!important;pointer-events:none!important;cursor:default!important} .person-chevron-btn{order:3!important;width:36px!important;height:40px!important;margin-left:2px!important} .person-chevron-btn svg{width:24px!important;height:24px!important} .profile-avatar-static{display:grid;place-items:center} @media(max-width:440px){ .person-chevron-btn{width:34px!important;height:38px!important}.person-chevron-btn svg{width:23px!important;height:23px!important} .profile-copy strong{max-width:105px!important} } /* v2.2.6.3 two-column grouped person information */ .header-person-panel .identity-profile-body{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; } .identity-info-item.icon-only.wide{grid-column:1/-1!important} .identity-info-item.identity-stacked-values{ grid-template-columns:30px minmax(0,1fr)!important; } .identity-value-stack{ display:flex!important; flex-direction:column; justify-content:center; min-width:0; gap:2px; } .identity-value-stack b, .identity-value-stack small{ display:block; margin:0!important; color:var(--ink)!important; font-size:13px!important; line-height:1.45; text-align:left; direction:ltr; unicode-bidi:isolate; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .identity-value-stack small{color:#b8ad91!important;font-size:11.5px!important} .identity-name-item b{font-size:14px!important;color:#f0d77d} .identity-address-item b{direction:rtl!important;text-align:right!important;unicode-bidi:plaintext} @media(max-width:390px){ .header-person-panel .identity-profile-body{grid-template-columns:repeat(2,minmax(0,1fr))!important} .identity-info-item.icon-only.wide{grid-column:1/-1!important} .identity-info-item.icon-only{padding:7px 8px!important;grid-template-columns:27px minmax(0,1fr);gap:6px} .identity-field-icon{width:27px;height:27px} .identity-info-item.icon-only b{font-size:12px!important} .identity-value-stack b{font-size:12px!important} .identity-value-stack small{font-size:10.5px!important} } /* v2.2.6.6: titles for Other documents and hidden orientation headings */ .orientation-head{display:none!important} .other-document-slide{ direction:rtl; display:grid; gap:9px; min-width:0; scroll-snap-align:center; } .other-document-slide>h4{ margin:0; padding:0 5px; text-align:right; color:#f0d77d; font-size:15px; font-weight:850; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .orientation-carousel .other-document-slide{ flex:0 0 min(88vw,560px); } .orientation-carousel .other-document-slide.portrait{ flex-basis:min(68vw,330px); } .other-document-slide .wallet-card{ width:100%!important; max-width:none!important; min-width:0; margin:0!important; flex:none!important; scroll-snap-align:none!important; } @media(min-width:700px){ .orientation-carousel .other-document-slide{flex-basis:520px} .orientation-carousel .other-document-slide.portrait{flex-basis:320px} } @media(max-width:440px){ .orientation-carousel .other-document-slide{flex-basis:88vw} .orientation-carousel .other-document-slide.portrait{flex-basis:68vw} } /* v2.2.6.13 — unified titles + long-press edit */ .wallet-card.category-bank .card-actions{left:auto!important;right:12px!important;transform:none!important;bottom:12px!important;justify-content:flex-end!important} .wallet-card .longpress-edit{display:none!important} .wallet-card.edit-visible .longpress-edit{display:grid!important} .wallet-card.edit-visible .card-actions{background:rgba(5,5,5,.72);border:1px solid rgba(212,175,55,.2)} .wallet-card .wallet-inner{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} .bank-card-slide{direction:rtl;display:grid;gap:9px;min-width:0;scroll-snap-align:center;flex:0 0 min(88vw,560px)} .bank-card-slide>h4{margin:0;padding:0 5px;text-align:right;color:#f0d77d;font-size:15px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bank-card-slide .wallet-card{width:100%!important;max-width:none!important;min-width:0;margin:0!important;flex:none!important;scroll-snap-align:none!important} .orientation-carousel .bank-card-slide.portrait{flex-basis:min(68vw,330px)} @media(min-width:700px){.orientation-carousel .bank-card-slide{flex-basis:520px}.orientation-carousel .bank-card-slide.portrait{flex-basis:320px}} @media(max-width:440px){.orientation-carousel .bank-card-slide{flex-basis:88vw}.orientation-carousel .bank-card-slide.portrait{flex-basis:68vw}} /* v2.2.6.14 — visual polish only */ :root{ --mw-gold:#d8b34a; --mw-gold-soft:#f0d783; --mw-surface:rgba(19,19,19,.78); --mw-hair:rgba(216,179,74,.16); } body{background:radial-gradient(120% 70% at 50% -10%,#171208 0,#080808 42%,#030303 100%);} .topbar{ padding-left:12px!important;padding-right:12px!important; background:rgba(5,5,5,.84)!important; backdrop-filter:blur(28px) saturate(1.25)!important; -webkit-backdrop-filter:blur(28px) saturate(1.25)!important; border-bottom:1px solid rgba(216,179,74,.12)!important; box-shadow:0 8px 30px rgba(0,0,0,.22); } .topbar .header-icon-btn,.topbar .icon-btn,.topbar button:not(.profile-button):not(.person-chevron-btn){ border:0!important;background:transparent!important;box-shadow:none!important; } .topbar .header-icon-btn,.topbar .icon-btn{width:40px!important;height:40px!important;border-radius:12px!important;color:var(--mw-gold-soft)!important;} .topbar .header-icon-btn:active,.topbar .icon-btn:active{background:rgba(216,179,74,.10)!important;transform:scale(.94)} .profile-avatar{border-radius:50%!important;border:1px solid rgba(216,179,74,.55)!important;box-shadow:0 0 0 2px rgba(216,179,74,.08);} .profile-copy strong{font-size:13px;letter-spacing:-.2px}.person-chevron-btn{color:var(--mw-gold-soft)!important;} main{padding-left:10px!important;padding-right:10px!important;padding-top:12px!important;padding-bottom:108px!important;} .orientation-section{margin-bottom:22px!important;} .orientation-head{padding:0 10px!important;margin:0 0 8px!important;min-height:22px!important;} .orientation-head h3{font-size:14px!important;font-weight:750!important;color:#e7cb70!important;letter-spacing:-.2px;} .orientation-carousel{gap:12px!important;padding:2px 10px 18px!important;scroll-padding-inline:10px!important;} .orientation-carousel .wallet-card{filter:drop-shadow(0 18px 26px rgba(0,0,0,.42))!important;} .wallet-card>.item-display-title,.wallet-card>.wallet-item-title,.wallet-card>.card-list-title,.wallet-card .wallet-item-title{ margin:0 4px 8px!important;font-size:14px!important;font-weight:760!important;color:#e4c76b!important;letter-spacing:-.15px!important; } .card-face{border-radius:22px!important;border:1px solid rgba(216,179,74,.30)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 18px 42px rgba(0,0,0,.44)!important;} .wallet-inner{transition:transform .42s cubic-bezier(.2,.7,.2,1)!important;} .card-actions{background:rgba(5,5,5,.46)!important;border:1px solid rgba(255,255,255,.07)!important;backdrop-filter:blur(18px) saturate(1.15)!important;-webkit-backdrop-filter:blur(18px) saturate(1.15)!important;box-shadow:0 8px 24px rgba(0,0,0,.25)!important;} .card-actions button{color:#f1d57a!important;background:transparent!important;border:0!important;} .bottom-nav{ left:8px!important;right:8px!important;bottom:6px!important; border:1px solid rgba(216,179,74,.13)!important;border-radius:22px!important; background:rgba(10,10,10,.78)!important; backdrop-filter:blur(30px) saturate(1.35)!important;-webkit-backdrop-filter:blur(30px) saturate(1.35)!important; box-shadow:0 12px 34px rgba(0,0,0,.48)!important; padding:5px 6px calc(5px + env(safe-area-inset-bottom))!important; } .nav-item{min-height:52px!important;border-radius:16px!important;transition:background .18s ease,color .18s ease,transform .18s ease!important;} .nav-item.active{background:linear-gradient(180deg,rgba(216,179,74,.13),rgba(216,179,74,.035))!important;color:#f0d16e!important;box-shadow:inset 0 0 0 1px rgba(216,179,74,.08)!important;} .nav-item:active{transform:scale(.96)} .nav-icon{font-size:21px!important}.nav-item small{font-size:9.5px!important;font-weight:650!important;} .dialog{background:rgba(15,15,15,.96)!important;border-color:rgba(216,179,74,.28)!important;box-shadow:0 28px 80px rgba(0,0,0,.65)!important;} .detail-row{background:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.065)!important;border-radius:14px!important;} .detail-eye{ width:38px!important;height:38px!important;padding:0!important;display:grid!important;place-items:center!important; border-radius:12px!important;background:rgba(216,179,74,.09)!important;border:1px solid rgba(216,179,74,.24)!important;color:#f2d675!important; } .detail-eye .eye-glyph{position:relative;width:20px;height:13px;display:block;font-size:0;border:1.8px solid currentColor;border-radius:55% 45% 55% 45%;transform:rotate(45deg)} .detail-eye .eye-glyph:after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:currentColor;left:6px;top:2px} .detail-eye .eye-closed:before{content:"";position:absolute;width:24px;height:1.8px;background:currentColor;left:-3px;top:5px;transform:rotate(-90deg);border-radius:2px;box-shadow:0 0 0 2px rgba(15,15,15,.78)} @media(max-width:430px){ .orientation-carousel{padding-inline:8px!important;gap:10px!important} .bottom-nav{left:5px!important;right:5px!important} } /* v2.2.6.15 — unified premium gold frame for title + card/document */ .bank-card-slide,.identity-document-slide,.other-document-slide{ position:relative; gap:0!important; padding:0!important; border:1px solid rgba(216,179,74,.34); border-radius:26px; overflow:hidden; background:linear-gradient(145deg,rgba(31,25,12,.72),rgba(10,10,10,.86) 32%,rgba(7,7,7,.92)); box-shadow:inset 0 1px 0 rgba(255,240,190,.05),0 20px 46px rgba(0,0,0,.38),0 0 0 1px rgba(216,179,74,.025); } .bank-card-slide>h4,.identity-document-slide>h4,.other-document-slide>h4{ min-height:42px; margin:0!important; padding:11px 15px 9px!important; display:flex; align-items:center; text-align:right; color:#f0d77d!important; font-size:14px!important; font-weight:800!important; line-height:1.35; border-bottom:1px solid rgba(216,179,74,.15); background:linear-gradient(90deg,rgba(216,179,74,.035),rgba(216,179,74,.09),rgba(216,179,74,.025)); } .bank-card-slide>.wallet-card,.identity-document-slide>.wallet-card,.other-document-slide>.wallet-card{ padding:9px!important; filter:none!important; } .bank-card-slide .card-face,.identity-document-slide .card-face,.other-document-slide .card-face{ border:0!important; border-radius:18px!important; box-shadow:0 12px 30px rgba(0,0,0,.34)!important; } /* No saved title: keep a clean framed card without an empty header strip. */ .bank-card-slide:not(:has(>h4))>.wallet-card{padding-top:9px!important} @media(max-width:440px){ .bank-card-slide,.identity-document-slide,.other-document-slide{border-radius:23px} .bank-card-slide>h4,.identity-document-slide>h4,.other-document-slide>h4{min-height:39px;padding:9px 13px 8px!important;font-size:13.5px!important} .bank-card-slide>.wallet-card,.identity-document-slide>.wallet-card,.other-document-slide>.wallet-card{padding:7px!important} .bank-card-slide .card-face,.identity-document-slide .card-face,.other-document-slide .card-face{border-radius:17px!important} } /* v2.2.6.16 — tighter title header attached to card */ .bank-card-slide>h4,.identity-document-slide>h4,.other-document-slide>h4{ min-height:30px!important; padding:6px 12px 5px!important; font-size:12.5px!important; font-weight:760!important; line-height:1.2!important; border-bottom:1px solid rgba(216,179,74,.11)!important; background:linear-gradient(90deg,rgba(216,179,74,.025),rgba(216,179,74,.065),rgba(216,179,74,.018))!important; } .bank-card-slide>.wallet-card,.identity-document-slide>.wallet-card,.other-document-slide>.wallet-card{ padding:5px 7px 7px!important; } @media(max-width:440px){ .bank-card-slide>h4,.identity-document-slide>h4,.other-document-slide>h4{ min-height:28px!important; padding:5px 10px 4px!important; font-size:12px!important; } .bank-card-slide>.wallet-card,.identity-document-slide>.wallet-card,.other-document-slide>.wallet-card{ padding:4px 6px 6px!important; } } /* v2.2.6.17 — alerts, favorites, privacy, quick copy */ .header-actions{gap:6px!important} .notification-btn{position:relative} .notification-badge{position:absolute;top:-2px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:#d34c45;color:#fff;font:800 10px/16px system-ui;text-align:center;box-shadow:0 0 0 2px #090909} .privacy-toggle .privacy-slash{opacity:0}.privacy-toggle.active .privacy-slash{opacity:1}.privacy-toggle.active{color:#f0d77d!important} .notifications-drawer{padding:12px 14px 16px!important;max-height:min(70vh,560px);overflow:auto} .drawer-mini-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:2px 2px 10px;border-bottom:1px solid rgba(216,179,74,.12)} .drawer-mini-head strong{color:#f0d77d;font-size:14px}.drawer-mini-head small{color:#938d7e;font-size:10px} .notifications-list{display:grid;gap:8px;padding-top:10px} .notification-row{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:10px;border:1px solid rgba(216,179,74,.14);border-radius:14px;background:rgba(255,255,255,.025)} .notification-type{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(216,179,74,.08);color:#e4c66c;font-size:18px} .notification-row div{display:grid;gap:2px}.notification-row strong{font-size:13px;color:#f4f0e4}.notification-row small{font-size:10.5px;color:#9c9789}.notification-row b{font-size:11px;color:#d8b34a;font-weight:700}.notification-row.expired b{color:#e06d64}.notification-row.urgent b{color:#e7a95a} .notification-empty{min-height:130px;display:grid;place-items:center;align-content:center;gap:5px;color:#9c9789}.notification-empty span{font-size:28px;color:#d8b34a}.notification-empty b{color:#ddd5c1;font-size:13px}.notification-empty small{font-size:10.5px} .bank-card-slide>h4,.identity-document-slide>h4,.other-document-slide>h4{justify-content:space-between;gap:8px} .bank-card-slide>h4>span,.identity-document-slide>h4>span,.other-document-slide>h4>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .favorite-btn{appearance:none;border:0;background:transparent;color:#88784c;font-size:17px;line-height:1;padding:0 2px;min-width:24px;height:22px;cursor:pointer}.favorite-btn.active{color:#f0d77d;text-shadow:0 0 12px rgba(216,179,74,.25)} .detail-row{grid-template-columns:minmax(82px,.7fr) minmax(0,1fr) auto!important}.detail-copy{appearance:none;border:0;background:rgba(216,179,74,.07);color:#d8b34a;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:15px} body.privacy-mode .wallet-card .card-face img,body.privacy-mode .wallet-card .pdf-thumbnail-face img{filter:blur(14px) saturate(.55)!important;transform:scale(1.035)} body.privacy-mode .wallet-card .card-placeholder{filter:blur(7px)} body.privacy-mode .privacy-toggle{color:#f0d77d} @media(max-width:430px){.header-actions{gap:2px!important}.header-icon-btn{width:34px!important;height:34px!important}.notification-badge{top:-1px;right:-1px}} /* v2.2.6.18 — compact header alerts, expiry badge, copy feedback */ .header-logo{position:relative!important;overflow:visible!important} .logo-notification-badge{top:-4px!important;right:-5px!important;cursor:pointer;z-index:3} .header-actions{gap:3px!important} .profile-cluster{min-width:0!important;flex:1 1 auto!important} .profile-name-button{min-width:0!important;max-width:none!important;flex:1 1 auto!important} .profile-copy strong{max-width:156px!important;font-size:13px!important} @media(max-width:430px){.profile-copy strong{max-width:136px!important}.header-actions{gap:0!important}} .slide-title-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .slide-title-actions{display:flex;align-items:center;gap:5px;flex:0 0 auto} .card-expiry-indicator{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:900 11px/1 system-ui;background:rgba(216,179,74,.14);color:#e7c766;border:1px solid rgba(216,179,74,.42);box-shadow:0 0 0 2px rgba(0,0,0,.12)} .card-expiry-indicator.urgent{background:rgba(232,154,74,.16);color:#f0ab63;border-color:rgba(232,154,74,.45)} .card-expiry-indicator.expired{background:rgba(222,84,76,.17);color:#ef817a;border-color:rgba(222,84,76,.48)} .detail-fields{display:grid;gap:8px} .detail-row{display:grid!important;grid-template-columns:minmax(74px,.55fr) minmax(0,1fr) 26px!important;align-items:center!important;gap:7px!important;padding:9px 10px!important;min-width:0} .detail-row>span{font-size:11px!important;white-space:nowrap} .detail-row>strong{min-width:0!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;font-size:12.5px!important;letter-spacing:-.15px} .detail-row.ltr>strong,.detail-row.card-number-row>strong{direction:ltr!important;unicode-bidi:isolate!important;text-align:left!important;font-variant-numeric:tabular-nums;font-size:12px!important} .detail-copy{width:25px!important;height:25px!important;border-radius:8px!important;font-size:13px!important;flex:0 0 auto} .detail-row:has(.detail-eye){grid-template-columns:minmax(74px,.55fr) minmax(0,1fr) 32px 25px!important} .detail-eye{width:32px!important;height:32px!important;border-radius:9px!important} .detail-copy-feedback{position:sticky;bottom:4px;justify-self:center;align-self:end;z-index:20;opacity:0;transform:translateY(8px);pointer-events:none;background:rgba(24,20,10,.96);color:#f4dc89;border:1px solid rgba(216,179,74,.38);border-radius:999px;padding:7px 13px;font-size:11px;font-weight:750;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:opacity .18s ease,transform .18s ease} .detail-copy-feedback.show{opacity:1;transform:translateY(0)} @media(max-width:390px){.detail-row{grid-template-columns:68px minmax(0,1fr) 24px!important;gap:5px!important;padding:8px!important}.detail-row>span{font-size:10px!important}.detail-row>strong{font-size:11.5px!important}.detail-row.ltr>strong,.detail-row.card-number-row>strong{font-size:11.2px!important}.detail-row:has(.detail-eye){grid-template-columns:68px minmax(0,1fr) 30px 24px!important}} /* v2.2.6.20 — logo alert center, left-first carousels, identity copy, stronger expiry */ .header-logo{position:relative!important;overflow:visible!important} .logo-notification-badge{top:-1px!important;right:-1px!important;transform:translate(22%,-22%);min-width:17px!important;height:17px!important;line-height:17px!important;padding:0 4px!important;pointer-events:none!important;box-shadow:0 0 0 2px rgba(8,8,8,.96),0 3px 10px rgba(0,0,0,.5)!important} .logo-center-drawer{padding:11px 14px 13px!important} .logo-drawer-version{display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;gap:6px;direction:ltr;color:#d8b34a} .logo-drawer-version span{font-size:12px;font-weight:750;letter-spacing:.1px}.logo-drawer-version b{font-size:11px;font-weight:650;color:#d7c48c}.logo-drawer-version small{justify-self:end;font-size:9.5px;color:#897d63;direction:rtl} .logo-drawer-divider{height:1px;margin:8px 0 9px;background:linear-gradient(90deg,transparent,rgba(216,179,74,.58),transparent)} .compact-notifications{display:grid;gap:7px}.compact-notifications .notification-row{padding:8px 9px!important}.compact-notifications .notification-empty{padding:8px!important;min-height:0!important} .orientation-carousel{direction:ltr!important;justify-content:flex-start!important;scroll-padding-left:10px!important;scroll-padding-right:10px!important} .orientation-carousel>.bank-card-slide,.orientation-carousel>.identity-document-slide,.orientation-carousel>.other-document-slide{direction:rtl!important} .card-expiry-indicator{display:inline-flex!important;align-items:center!important;gap:4px!important;height:24px!important;padding:0 7px!important;border-radius:999px!important;font-size:10px!important;font-weight:850!important;line-height:1!important;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 5px 14px rgba(0,0,0,.22)!important} .card-expiry-indicator .expiry-alert-mark{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;font-size:11px;font-weight:950;background:currentColor;color:#111} .card-expiry-indicator.warning{background:rgba(233,174,50,.18)!important;color:#ffd56c!important;border:1px solid rgba(245,190,64,.45)!important} .card-expiry-indicator.urgent{background:rgba(225,97,62,.22)!important;color:#ff9a72!important;border:1px solid rgba(255,119,80,.55)!important;animation:expiryPulse 1.7s ease-in-out infinite} .card-expiry-indicator.expired{background:rgba(211,76,69,.28)!important;color:#ff817b!important;border:1px solid rgba(255,97,90,.62)!important} @keyframes expiryPulse{50%{box-shadow:0 0 0 3px rgba(225,97,62,.11),0 5px 14px rgba(0,0,0,.22)}} .identity-info-item.icon-only{display:grid!important;grid-template-columns:24px minmax(0,1fr) 25px!important;align-items:center!important;gap:7px!important} .identity-info-item.icon-only>span.identity-field-icon{grid-column:1}.identity-info-item.icon-only>b,.identity-info-item.icon-only>.identity-value-stack{grid-column:2;min-width:0} .identity-copy-btn{grid-column:3;width:25px;height:25px;border:0;border-radius:8px;background:rgba(216,179,74,.07);color:#d8b34a;display:grid;place-items:center;font-size:13px;padding:0} .identity-info-item.icon-only>b,.identity-value-stack b,.identity-value-stack small{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-width:0} .identity-address-item b{white-space:normal!important;overflow:visible!important;text-overflow:clip!important} .header-person-panel .identity-profile-body{grid-template-columns:repeat(2,minmax(0,1fr))!important} .profile-copy strong{max-width:175px!important} @media(max-width:430px){.profile-copy strong{max-width:148px!important}.logo-drawer-version{grid-template-columns:auto auto}.logo-drawer-version small{grid-column:1/-1;justify-self:start}.identity-info-item.icon-only{grid-template-columns:22px minmax(0,1fr) 23px!important;gap:5px!important}.identity-copy-btn{width:23px;height:23px}.card-expiry-indicator{padding:0 6px!important;font-size:9.5px!important}} /* v2.2.6.20 — clearer expiry, copy/share, callable phones, selectable dates */ .slide-title-actions{gap:7px!important;min-width:0} .card-expiry-indicator{height:22px!important;padding:0 8px!important;white-space:nowrap!important;font-size:9.5px!important;font-weight:850!important;letter-spacing:-.1px!important;max-width:none!important} .card-expiry-indicator .expiry-alert-mark{display:none!important} .bank-card-slide>h4 .slide-title-text{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bank-card-slide>h4 .slide-title-actions{flex:0 0 auto} @media(max-width:390px){.card-expiry-indicator{font-size:8.8px!important;padding:0 6px!important}.favorite-btn{min-width:18px!important;font-size:15px!important}} .detail-row{grid-template-columns:minmax(66px,.48fr) minmax(0,1fr) auto!important} .detail-row>strong{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-width:0!important} .detail-actions{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto} .detail-copy,.detail-share{appearance:none;border:0;background:rgba(216,179,74,.07);color:#d8b34a;width:23px!important;height:23px!important;border-radius:7px!important;display:grid;place-items:center;font-size:12px!important;padding:0!important;flex:0 0 auto} .detail-share{font-size:14px!important} .detail-notes-row>strong{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.65} .detail-row.cvv-row{grid-template-columns:minmax(60px,.42fr) minmax(0,1fr) 29px auto!important} .detail-eye{width:29px!important;height:29px!important;padding:5px!important;display:grid;place-items:center;border:0!important;background:rgba(216,179,74,.08)!important;color:#f2d675!important} .detail-eye svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} @media(max-width:390px){.detail-row{grid-template-columns:58px minmax(0,1fr) auto!important;gap:4px!important}.detail-copy,.detail-share{width:21px!important;height:21px!important}.detail-row.cvv-row{grid-template-columns:54px minmax(0,1fr) 27px auto!important}.detail-eye{width:27px!important;height:27px!important}} .identity-info-item.icon-only{grid-template-columns:24px minmax(0,1fr) auto!important;align-items:center!important} .identity-actions{display:inline-flex;align-items:center;gap:3px;grid-column:3;flex:0 0 auto} .identity-copy-btn,.identity-share-btn{width:22px!important;height:22px!important;border:0;border-radius:7px;background:rgba(216,179,74,.07);color:#d8b34a;display:grid;place-items:center;font-size:11.5px;padding:0;flex:0 0 auto} .identity-share-btn{font-size:13px} .identity-field-icon.identity-call-link{cursor:pointer;text-decoration:none;color:inherit;transition:background .16s ease,transform .16s ease} .identity-field-icon.identity-call-link:active{background:rgba(216,179,74,.18)!important;transform:scale(.94)} .identity-info-item.icon-only>b{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} .identity-address-item{align-items:start!important} .identity-address-item>b{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.7!important;word-break:normal!important;overflow-wrap:anywhere!important} .identity-address-item .identity-actions{align-self:start;margin-top:1px} .identity-stacked-values{align-items:start!important} .identity-stacked-values>.identity-field-icon{margin-top:3px} .identity-stacked-values>.identity-value-stack{display:grid!important;gap:4px!important;min-width:0} .identity-date-line{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px;min-width:0} .identity-date-line>b,.identity-date-line>small{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-width:0} .identity-date-line .identity-actions{grid-column:auto} @media(max-width:430px){.identity-info-item.icon-only{grid-template-columns:22px minmax(0,1fr) auto!important;gap:5px!important}.identity-copy-btn,.identity-share-btn{width:20px!important;height:20px!important;font-size:10.5px!important}.identity-share-btn{font-size:12px!important}.identity-date-line{gap:2px}.identity-date-line .identity-actions{gap:2px}} /* v2.2.6.21 — compact action drawers, date choice, multiline address, normalized call */ .detail-row, .identity-info-item.icon-only{ position:relative; } .detail-row{ grid-template-columns:minmax(66px,.48fr) minmax(0,1fr) 27px!important; align-items:center!important; } .detail-row>strong{ white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; min-width:0!important; } .field-action-wrap{ display:grid; place-items:center; min-width:0; } .field-action-trigger{ appearance:none; border:0; width:25px; height:25px; border-radius:8px; background:rgba(216,179,74,.075); color:#e2c45f; display:grid; place-items:center; padding:0 0 5px; font-size:19px; line-height:1; font-weight:800; flex:0 0 auto; } .field-action-trigger:active{background:rgba(216,179,74,.18);transform:scale(.95)} .field-action-drawer{ grid-column:1/-1!important; width:100%; margin-top:6px; padding:5px; border:1px solid rgba(216,179,74,.25); border-radius:11px; background:rgba(17,15,10,.96); box-shadow:0 8px 20px rgba(0,0,0,.22); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; direction:rtl; } .field-action-drawer.hidden{display:none!important} .field-action-drawer>button, .date-selected-actions>button{ min-height:34px; border:0; border-radius:8px; background:rgba(255,255,255,.035); color:#e9dec0; display:flex; align-items:center; justify-content:center; gap:7px; font-family:inherit; padding:6px 8px; } .field-action-drawer>button:active, .date-selected-actions>button:active{background:rgba(216,179,74,.13)} .field-action-drawer>button span, .date-selected-actions>button span{color:#e2c45f;font-size:14px} .field-action-drawer>button b, .date-selected-actions>button b{font-size:11px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .detail-row.cvv-row{ grid-template-columns:minmax(60px,.42fr) minmax(0,1fr) 29px 27px!important; } .detail-row.cvv-row>.field-action-drawer{grid-column:1/-1!important} .identity-info-item.icon-only{ grid-template-columns:24px minmax(0,1fr) 25px!important; align-items:center!important; gap:7px!important; } .identity-info-item.icon-only>.identity-field-icon{grid-column:1} .identity-info-item.icon-only>b, .identity-info-item.icon-only>.identity-value-stack{grid-column:2;min-width:0} .identity-info-item.icon-only>.field-action-wrap{grid-column:3} .identity-info-item.icon-only>.field-action-drawer{grid-column:1/-1!important} .identity-info-item.icon-only>b, .identity-value-stack b, .identity-value-stack small{ white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; min-width:0!important; } .identity-address-item{ align-items:start!important; } .identity-address-item>b{ white-space:normal!important; overflow:visible!important; text-overflow:clip!important; line-height:1.75!important; word-break:normal!important; overflow-wrap:anywhere!important; max-height:none!important; } .identity-address-item>.field-action-wrap{align-self:start;margin-top:1px} .identity-call-link{ appearance:none; border:0; padding:0; font:inherit; } .identity-stacked-values>.identity-value-stack{ display:grid!important; gap:3px!important; min-width:0; } .date-choice-drawer{ grid-template-columns:1fr!important; } .date-choice-drawer>.date-choice-btn{ width:100%; justify-content:space-between; padding-inline:10px; } .date-choice-btn>span{font-size:10px!important;color:#b9aa7d!important} .date-choice-btn>b{font-size:11.5px!important;color:#f0df9b!important} .date-selected-actions{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; padding-top:5px; border-top:1px solid rgba(216,179,74,.14); } .date-selected-actions.hidden{display:none!important} @media(max-width:430px){ .detail-row{grid-template-columns:58px minmax(0,1fr) 23px!important;gap:4px!important} .detail-row.cvv-row{grid-template-columns:54px minmax(0,1fr) 27px 23px!important} .field-action-trigger{width:23px;height:23px;font-size:17px;border-radius:7px} .identity-info-item.icon-only{grid-template-columns:22px minmax(0,1fr) 23px!important;gap:5px!important} .field-action-drawer{margin-top:5px;padding:4px} } /* v2.2.6.23 — action icon, true multiline address, bidi-safe share */ .field-action-trigger{padding:0!important;font-size:0!important} .field-action-trigger svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block} .field-action-trigger svg circle{fill:rgba(216,179,74,.10);stroke:currentColor} .identity-info-item.icon-only.identity-address-item{align-items:start!important;min-height:auto!important} .identity-info-item.icon-only.identity-address-item>b{ grid-column:2!important; display:block!important; width:100%!important; min-width:0!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; line-height:1.8!important; word-break:normal!important; overflow-wrap:anywhere!important; max-height:none!important; direction:rtl!important; text-align:right!important; unicode-bidi:plaintext!important; } .identity-info-item.icon-only.identity-address-item>.field-action-wrap{align-self:start!important;margin-top:1px!important} \n\n/* v2.2.6.23 — expiry header layout + notification deep-link */\n.bank-card-slide>h4,.identity-document-slide>h4,.other-document-slide>h4{\n display:grid!important;\n grid-template-columns:minmax(0,1fr) auto auto!important;\n align-items:center!important;\n gap:7px!important;\n}\n.slide-expiry-slot{display:flex;align-items:center;justify-content:flex-end;min-width:0}\n.slide-expiry-slot:empty{display:none}\n.card-expiry-indicator{\n position:static!important;\n min-width:max-content!important;\n height:22px!important;\n padding:0 9px!important;\n border-radius:999px!important;\n font-size:9.5px!important;\n white-space:nowrap!important;\n overflow:visible!important;\n text-overflow:clip!important;\n}\n.favorite-btn{grid-column:auto!important;position:static!important;z-index:1}\n.notification-row{\n width:100%;\n appearance:none;\n -webkit-appearance:none;\n color:inherit;\n font:inherit;\n text-align:right;\n cursor:pointer;\n}\n.notification-copy{display:grid;gap:2px;min-width:0}\n.notification-row:active{transform:scale(.992);background:rgba(216,179,74,.055)}\n.bank-card-slide.notification-focus{\n animation:notificationCardFocus 1.55s ease both;\n}\n@keyframes notificationCardFocus{\n 0%,100%{box-shadow:inset 0 1px 0 rgba(255,240,190,.05),0 20px 46px rgba(0,0,0,.38),0 0 0 1px rgba(216,179,74,.025)}\n 35%,70%{box-shadow:inset 0 1px 0 rgba(255,240,190,.10),0 20px 46px rgba(0,0,0,.42),0 0 0 2px rgba(240,194,75,.72),0 0 24px rgba(216,179,74,.22)}\n}\n@media(max-width:390px){\n .bank-card-slide>h4,.identity-document-slide>h4,.other-document-slide>h4{gap:5px!important}\n .card-expiry-indicator{font-size:8.8px!important;padding:0 7px!important}\n}\n /* v2.2.6.24 — readable expiry text + safe notification navigation */ .bank-card-slide > h4 { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(max-content,auto) 24px !important; align-items:center !important; column-gap:9px !important; } .bank-card-slide > h4 .slide-title-text { min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } .bank-card-slide > h4 .slide-expiry-slot { display:flex !important; align-items:center !important; justify-content:center !important; min-width:max-content !important; overflow:visible !important; } .bank-card-slide > h4 .slide-expiry-slot:empty {display:none !important;} .bank-card-slide > h4 .card-expiry-indicator { display:inline-flex !important; position:static !important; width:auto !important; min-width:max-content !important; max-width:none !important; height:auto !important; min-height:0 !important; padding:0 !important; margin:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; animation:none !important; font-size:10.5px !important; font-weight:850 !important; line-height:1.2 !important; white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; color:#e5bd4e !important; } .bank-card-slide > h4 .card-expiry-indicator.urgent {color:#f0a15e !important;} .bank-card-slide > h4 .card-expiry-indicator.expired {color:#ff7f78 !important;} .bank-card-slide > h4 .card-expiry-indicator b {font:inherit !important;color:inherit !important;white-space:nowrap !important;} .bank-card-slide > h4 .favorite-btn { position:static !important; width:24px !important; min-width:24px !important; height:24px !important; padding:0 !important; display:grid !important; place-items:center !important; } @media(max-width:390px){ .bank-card-slide > h4 {grid-template-columns:minmax(0,1fr) max-content 22px !important;column-gap:6px !important;} .bank-card-slide > h4 .card-expiry-indicator {font-size:9.5px !important;} } /* v2.2.6.29 — Face ID / Passkey lock */ .face-unlock{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px 18px;border-radius:14px;background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.42);color:#f1d16a;font-weight:800} .face-id-mark{display:grid;place-items:center;width:25px;height:25px;border:1.5px solid currentColor;border-radius:8px;font-size:19px;line-height:1} .faceid-setting{border-top:1px solid rgba(212,175,55,.12);padding-top:12px;margin-top:2px} .compact-select{width:auto;min-width:104px;padding:9px 28px 9px 10px;border-radius:12px;font-size:12px;background:#15130e;color:var(--ink);border:1px solid #4a3b18} /* v2.2.6.30 — backup status, 30-day trash, bank health */ .backup-status-summary{padding:10px 12px;border-radius:14px;background:rgba(212,175,55,.055);border:1px solid rgba(212,175,55,.14)} .backup-status-summary strong{display:block;font-size:12px;color:#ead27c}.backup-status-summary small{margin-top:3px!important} .trash-list{display:grid;gap:9px;max-height:min(60vh,520px);overflow:auto}.trash-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:11px;border:1px solid rgba(212,175,55,.14);border-radius:14px;background:#111}.trash-row strong{display:block;font-size:12px}.trash-row small{display:block;color:#9c927e;font-size:10.5px;margin-top:3px}.trash-actions{display:flex;gap:6px}.trash-actions button{border:1px solid rgba(212,175,55,.25);background:#1e1a10;color:#e9d17b;border-radius:10px;padding:7px 9px;font-size:10px}.trash-actions button.danger{color:#ff8b84;border-color:rgba(255,105,96,.25);background:rgba(120,25,20,.14)}.trash-empty{padding:18px;text-align:center;color:#8f887b} .slide-expiry-slot{gap:5px!important;flex-wrap:nowrap!important}.card-health-indicator{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:rgba(223,79,69,.14);border:1px solid rgba(239,103,94,.38);color:#ff938b;font-size:9.2px;font-weight:850;white-space:nowrap}.card-health-indicator b{font:inherit;color:inherit}.bank-card-slide>h4{grid-template-columns:minmax(0,1fr) auto auto!important}.bank-card-slide>h4 .slide-expiry-slot{justify-content:flex-end;max-width:62vw;overflow:hidden} @media(max-width:390px){.card-health-indicator{font-size:8.4px;padding:0 6px}.trash-row{grid-template-columns:1fr}.trash-actions{justify-content:flex-end}} /* v2.2.6.32 — compact two-column settings layout */ .settings-body{gap:10px} .compact-settings-card{gap:10px;padding:13px} .settings-card-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 2px 2px} .settings-card-title>strong{font-size:13px;color:#ecd47f;font-weight:750} .settings-card-title>small{margin:0!important;font-size:10px!important;color:#7f7665!important;white-space:nowrap} .settings-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px} .setting-tile{min-width:0;min-height:68px;padding:10px 10px 9px;border-radius:15px;border:1px solid rgba(212,175,55,.13);background:rgba(255,255,255,.018);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px} .setting-tile-copy{min-width:0} .setting-tile strong,.setting-action-tile strong,.setting-action-wide strong{display:block;font-size:12px;line-height:1.35;color:#f1e5bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .setting-tile small,.setting-action-tile small,.setting-action-wide small{margin-top:3px!important;font-size:9.5px!important;line-height:1.35!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .setting-tile .switch i{width:42px;height:25px} .setting-tile .switch i:after{width:19px;height:19px;top:2px;left:3px} .setting-tile .switch input:checked+i:after{left:19px} .password-settings{gap:8px;padding-top:0} .pin-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px} .pin-pair input{min-width:0;padding:10px 9px;font-size:12px;border-radius:12px} .compact-save-pin{min-height:36px;padding:8px 12px;font-size:11px} .compact-row{padding:9px 2px 0;border-top:1px solid rgba(212,175,55,.09)} .compact-row strong{font-size:12px}.compact-row small{font-size:9.5px!important;margin-top:2px!important} .compact-row .compact-select{min-width:92px;max-width:108px;height:34px;padding:5px 8px;font-size:11px;border-radius:11px} .setting-action-tile{appearance:none;-webkit-appearance:none;min-width:0;min-height:64px;padding:9px 10px;border-radius:15px;border:1px solid rgba(212,175,55,.15);background:rgba(255,255,255,.018);color:inherit;display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:8px;text-align:right} .setting-action-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(212,175,55,.09);border:1px solid rgba(212,175,55,.17);color:#e6c85f;font-size:19px;line-height:1} .backup-status-summary{padding:8px 10px;border-radius:12px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px} .backup-status-summary strong{font-size:10px;white-space:nowrap}.backup-status-summary small{margin:0!important;font-size:10px!important;text-align:left;direction:rtl;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .setting-action-wide{appearance:none;-webkit-appearance:none;width:100%;min-height:60px;padding:9px 10px;border-radius:15px;border:1px solid rgba(212,175,55,.14);background:rgba(255,255,255,.018);color:inherit;display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:9px;text-align:right} .setting-status-chip{margin:0!important;padding:4px 7px;border-radius:999px;background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.15);color:#cfb65c!important;font-size:9px!important;white-space:nowrap!important} .account-setting{padding:12px 13px}.app-info{padding:11px 13px;grid-template-columns:44px 1fr}.app-info img{width:40px;height:40px;border-radius:12px} @media(max-width:390px){.compact-settings-card{padding:11px}.setting-tile{padding:9px 8px;gap:6px}.setting-tile strong,.setting-action-tile strong{font-size:11px}.setting-tile .switch i{width:38px}.setting-tile .switch input:checked+i:after{left:15px}.settings-card-title>small{display:none}} /* v2.2.6.32 - interactive bank health repair */ .card-health-indicator{appearance:none;-webkit-appearance:none;font-family:inherit;cursor:pointer;line-height:1;} .card-health-indicator:active{transform:scale(.97)} .card-health-edit-summary{display:grid;gap:3px;padding:9px 11px;border-radius:12px;background:rgba(218,152,44,.10);border:1px solid rgba(229,181,82,.28);color:#f0cf75} .card-health-edit-summary strong{font-size:12px}.card-health-edit-summary small{font-size:10px;color:#cdbd91;line-height:1.7} .card-health-edit-summary .health-complete{color:#83d6a5} .bank-fields .health-missing-field{background:rgba(225,91,71,.105)!important;border-color:rgba(240,112,92,.58)!important;box-shadow:inset 0 0 0 1px rgba(236,96,78,.10),0 0 0 2px rgba(225,91,71,.045);border-radius:11px;transition:background .18s,border-color .18s,box-shadow .18s} .bank-fields label.health-missing-field{padding:7px 8px 8px;margin:-3px -4px} #documentPhotoGrid .photo-picker.health-missing-field{background:rgba(225,91,71,.085)!important;border-color:rgba(240,112,92,.62)!important} /* v2.2.6.36 — Iranian IBAN input */ .iban-label{display:grid;gap:6px}.iban-input-wrap{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:stretch;border:1px solid #4d3d18;border-radius:13px;overflow:hidden;background:#13110d}.iban-input-wrap:focus-within{border-color:#d8b34a;box-shadow:0 0 0 2px rgba(216,179,74,.10)}.iban-prefix{display:grid;place-items:center;border-right:1px solid rgba(216,179,74,.22);color:#e0bd52;font-weight:800;letter-spacing:.7px;background:rgba(216,179,74,.06);direction:ltr}.iban-input-wrap input{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;min-width:0;width:100%;letter-spacing:.35px}.iban-help{font-size:10.5px;color:#8f8269;margin-inline-start:2px}.iban-label.health-missing-field .iban-input-wrap{border-color:#b86f42!important;background:rgba(181,88,55,.10)!important;box-shadow:0 0 0 2px rgba(181,88,55,.08)} /* v2.2.6.37 — full IBAN display in details */ .detail-row.iban-detail-row{ grid-template-columns:minmax(58px,.42fr) minmax(0,1fr) auto!important; align-items:start!important; } .detail-row.iban-detail-row>strong{ white-space:normal!important; overflow:visible!important; text-overflow:clip!important; overflow-wrap:anywhere!important; word-break:normal!important; line-height:1.65!important; direction:ltr!important; unicode-bidi:isolate!important; text-align:left!important; font-variant-numeric:tabular-nums; letter-spacing:.15px!important; } .detail-row.iban-detail-row>.field-action-drawer{grid-column:1/-1!important} @media(max-width:390px){ .detail-row.iban-detail-row{grid-template-columns:52px minmax(0,1fr) 23px!important} .detail-row.iban-detail-row>strong{font-size:11px!important;line-height:1.7!important} } /* v2.2.6.38 — IBAN label on its own line, full number on second line */ .detail-row.iban-detail-row{ grid-template-columns:minmax(0,1fr) auto!important; grid-template-rows:auto auto!important; column-gap:8px!important; row-gap:5px!important; align-items:center!important; } .detail-row.iban-detail-row>span{ grid-column:1/-1!important; grid-row:1!important; justify-self:start!important; white-space:nowrap!important; font-size:11px!important; } .detail-row.iban-detail-row>strong{ grid-column:1!important; grid-row:2!important; min-width:0!important; width:100%!important; white-space:nowrap!important; overflow:visible!important; text-overflow:clip!important; overflow-wrap:normal!important; word-break:normal!important; direction:ltr!important; unicode-bidi:isolate!important; text-align:left!important; font-variant-numeric:tabular-nums; font-size:11.6px!important; line-height:1.45!important; letter-spacing:.08px!important; } .detail-row.iban-detail-row>.field-action-wrap{ grid-column:2!important; grid-row:2!important; align-self:center!important; } .detail-row.iban-detail-row>.field-action-drawer{ grid-column:1/-1!important; grid-row:3!important; } @media(max-width:390px){ .detail-row.iban-detail-row{column-gap:5px!important} .detail-row.iban-detail-row>strong{font-size:10.7px!important;letter-spacing:0!important} } /* v2.2.6.40 — fixed edit actions + manual OCR */ #cardDialog[open]{display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden} #cardDialog #cardForm{min-height:0;max-height:none;overflow:auto;padding-bottom:24px;overscroll-behavior:contain} .card-form-fixed-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:10px;padding:10px 18px calc(10px + env(safe-area-inset-bottom));background:rgba(14,14,14,.97);backdrop-filter:blur(18px);border-top:1px solid rgba(212,175,55,.22);box-shadow:0 -12px 30px rgba(0,0,0,.36);z-index:5} .card-form-fixed-actions button{min-height:46px} #ocrCardBtn{white-space:nowrap} @media(max-width:440px){.card-form-fixed-actions{padding-left:12px;padding-right:12px}.bank-fields-head{flex-direction:row;align-items:center}.bank-fields-head strong{min-width:0}.bank-fields-head #ocrCardBtn{font-size:11px;padding:8px 9px}} /* v2.2.6.40 — standalone manual OCR action above hint */ .ocr-manual-btn{display:block;width:100%;margin:10px 0 7px;min-height:44px;font-weight:700} /* v2.2.6.47 — working manual OCR + review before apply */ .ocr-review-dialog{max-width:520px} .ocr-review-help{margin:0 0 10px;line-height:1.8} .ocr-review-fields{display:grid;gap:9px} .ocr-review-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(212,175,55,.22);border-radius:14px;background:#0d0d0d} .ocr-review-row input{width:20px;height:20px;accent-color:#d4af37} .ocr-review-row span{display:grid;gap:4px;min-width:0} .ocr-review-row b{font-size:13px;color:#e9d48a} .ocr-review-row small{font-size:14px;color:#fff;overflow-wrap:anywhere} /* v2.2.6.42 — OCR review stays inside the edit dialog; no stacked modal */ #cardDialog{position:relative} #cardDialog.ocr-review-open #cardForm{overflow:hidden;pointer-events:none;user-select:none} #cardDialog.ocr-review-open .card-form-fixed-actions{visibility:hidden;pointer-events:none} .ocr-review-drawer{position:absolute;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center} .ocr-review-drawer.hidden{display:none} .ocr-review-backdrop{position:absolute;inset:0;border:0;border-radius:0;background:rgba(0,0,0,.66);backdrop-filter:blur(4px);padding:0} .ocr-review-sheet{position:relative;width:100%;max-height:min(72dvh,620px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;padding:16px 16px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#17150f 0%,#0b0b0b 30%);border:1px solid rgba(212,175,55,.38);border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 -18px 50px rgba(0,0,0,.55);overflow:hidden} .ocr-review-sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(212,175,55,.18)} .ocr-review-sheet-head h3{margin:0 0 4px;color:#f0d36d;font-size:16px}.ocr-review-sheet-head small{color:#bdb6a5;line-height:1.7} .ocr-review-sheet .ocr-review-fields{overflow:auto;overscroll-behavior:contain;padding:2px 1px 4px} .ocr-review-sheet-actions{display:grid;grid-template-columns:1fr 1.45fr;gap:10px;padding-top:2px} .ocr-review-sheet-actions button{min-height:46px} /* v2.2.6.43 — restored compact settings + expiry alert controls */ .settings-body{gap:10px} .compact-settings-card{gap:10px;padding:13px} .settings-card-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 2px 2px} .settings-card-title>strong{font-size:13px;color:#ecd47f;font-weight:750} .settings-card-title>small{margin:0!important;font-size:10px!important;color:#7f7665!important;white-space:nowrap} .settings-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px} .setting-tile{min-width:0;min-height:68px;padding:10px 10px 9px;border-radius:15px;border:1px solid rgba(212,175,55,.13);background:rgba(255,255,255,.018);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px} .setting-tile-copy{min-width:0} .setting-tile strong,.setting-action-tile strong,.setting-action-wide strong,.setting-select-tile strong{display:block;font-size:12px;line-height:1.35;color:#f1e5bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .setting-tile small,.setting-action-tile small,.setting-action-wide small,.setting-select-tile small{margin-top:3px!important;font-size:9.5px!important;line-height:1.35!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .setting-tile .switch i{width:42px;height:25px}.setting-tile .switch i:after{width:19px;height:19px;top:2px;left:3px}.setting-tile .switch input:checked+i:after{left:19px} .password-settings{gap:8px;padding-top:0}.pin-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.pin-pair input{min-width:0;padding:10px 9px;font-size:12px;border-radius:12px}.compact-save-pin{min-height:36px;padding:8px 12px;font-size:11px} .compact-row{padding:9px 2px 0;border-top:1px solid rgba(212,175,55,.09)}.compact-row strong{font-size:12px}.compact-row small{font-size:9.5px!important;margin-top:2px!important}.compact-row .compact-select{min-width:92px;max-width:108px;height:34px;padding:5px 8px;font-size:11px;border-radius:11px} .setting-action-tile{appearance:none;-webkit-appearance:none;min-width:0;min-height:64px;padding:9px 10px;border-radius:15px;border:1px solid rgba(212,175,55,.15);background:rgba(255,255,255,.018);color:inherit;display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:8px;text-align:right} .setting-action-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(212,175,55,.09);border:1px solid rgba(212,175,55,.17);color:#e6c85f;font-size:19px;line-height:1} .backup-status-summary{padding:8px 10px;border-radius:12px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px}.backup-status-summary strong{font-size:10px;white-space:nowrap}.backup-status-summary small{margin:0!important;font-size:10px!important;text-align:left;direction:rtl;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .setting-action-wide{appearance:none;-webkit-appearance:none;width:100%;min-height:60px;padding:9px 10px;border-radius:15px;border:1px solid rgba(212,175,55,.14);background:rgba(255,255,255,.018);color:inherit;display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:9px;text-align:right}.setting-status-chip{margin:0!important;padding:4px 7px;border-radius:999px;background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.15);color:#cfb65c!important;font-size:9px!important;white-space:nowrap!important} .setting-select-tile{min-width:0;padding:10px;border-radius:15px;border:1px solid rgba(212,175,55,.13);background:rgba(255,255,255,.018);display:grid;gap:8px}.setting-select-tile span{min-width:0}.setting-select-tile .compact-select{width:100%;height:35px;border-radius:11px;padding:5px 7px;font-size:11px} .compact-account-setting{padding:12px 13px}.app-info{padding:11px 13px;grid-template-columns:44px 1fr}.app-info img{width:40px;height:40px;border-radius:12px} @media(max-width:390px){.compact-settings-card{padding:11px}.setting-tile{padding:9px 8px;gap:6px}.setting-tile strong,.setting-action-tile strong{font-size:11px}.setting-tile .switch i{width:38px}.setting-tile .switch input:checked+i:after{left:15px}.settings-card-title>small{display:none}.expiry-settings-pair{grid-template-columns:1fr 1fr}.setting-select-tile{padding:8px}} /* v2.2.6.47 — local passport expiry warning remains visible after notification snooze */ .passport-expiry-local{ display:inline-flex!important; align-items:center; justify-content:flex-start; width:max-content; max-width:100%; margin-top:3px; padding:3px 7px; border-radius:999px; font-style:normal; font-size:9px; font-weight:850; line-height:1.2; white-space:nowrap; overflow:visible; text-overflow:clip; direction:rtl; } .passport-expiry-local.warning{background:rgba(233,174,50,.16);border:1px solid rgba(245,190,64,.38);color:#ffd56c} .passport-expiry-local.urgent{background:rgba(225,97,62,.18);border:1px solid rgba(255,119,80,.45);color:#ff9a72} .passport-expiry-local.expired{background:rgba(211,76,69,.24);border:1px solid rgba(255,97,90,.52);color:#ff817b} /* v2.2.6.52 — iOS 15 crop touch compatibility */ #cropStage,#cropBox,#cropBox i{touch-action:none;-webkit-user-select:none;user-select:none} #cropBox{pointer-events:auto} #cropBox i{pointer-events:auto} /* v2.2.6.53 — notification deep-link highlight for passport */ .identity-info-item.notification-focus{ animation:notificationIdentityFocus 1.55s ease both; border-radius:14px; } @keyframes notificationIdentityFocus{ 0%,100%{background:transparent;box-shadow:none} 35%,70%{background:rgba(216,179,74,.10);box-shadow:0 0 0 1px rgba(240,194,75,.42),0 0 22px rgba(216,179,74,.16)} } /* v2.2.6.54 — notification read state + persistent message list */ .notification-row{ grid-template-columns:minmax(0,1fr) 30px!important; gap:6px!important; padding:0!important; overflow:hidden; } .notification-main{ width:100%;min-width:0;border:0;background:transparent;color:inherit; display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center; padding:10px;text-align:right;font:inherit;cursor:pointer; } .notification-delete{ width:28px;height:28px;margin-left:5px;border:0;border-radius:9px; background:rgba(255,255,255,.045);color:#a9a395;font-size:18px;line-height:1; display:grid;place-items:center;cursor:pointer; } .notification-delete:active{background:rgba(224,109,100,.12);color:#e08a80} .notification-snoozed{opacity:.78} .notification-snoozed .notification-copy b{color:#9c9789!important} .compact-notifications .notification-main{padding:8px 9px} /* v2.2.6.55 — payment reminders */ .bottom-nav{gap:2px} .bottom-nav .nav-item{min-width:0;position:relative} .payment-nav-badge{position:absolute;top:5px;right:calc(50% - 23px);min-width:16px;height:16px;padding:0 4px;border-radius:10px;background:#b5483c;color:#fff;font-size:10px;line-height:16px;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.28)} .payment-nav-badge.hidden{display:none} .payments-dialog .dialog-body,.payment-edit-dialog .dialog-body{max-width:680px} .payments-body{padding-bottom:calc(24px + env(safe-area-inset-bottom))} .payments-toolbar{display:flex;align-items:center;gap:10px;justify-content:space-between;margin:8px 0 12px} .payment-tabs{display:flex;gap:5px;padding:4px;border:1px solid rgba(197,155,82,.2);border-radius:14px;background:rgba(255,255,255,.025);overflow:auto} .payment-tab{border:0;background:transparent;color:var(--muted,#aaa);font-size:12px;padding:8px 10px;border-radius:10px;white-space:nowrap} .payment-tab.active{color:#f1d79a;background:rgba(197,155,82,.14)} .payment-add-btn{white-space:nowrap;padding:9px 12px} .payments-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px} .payments-summary span{border:1px solid rgba(197,155,82,.14);border-radius:12px;padding:8px;text-align:center;background:rgba(255,255,255,.02)} .payments-summary b{display:block;font-size:16px;color:#f0d28d}.payments-summary small{font-size:10px;color:#9c9c9c}.payments-summary .danger b{color:#e38b7f} .payments-list{display:flex;flex-direction:column;gap:9px} .payment-card{display:flex;align-items:stretch;border:1px solid rgba(197,155,82,.2);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.015));overflow:hidden} .payment-card.overdue{border-color:rgba(217,93,76,.55);box-shadow:inset 3px 0 0 rgba(217,93,76,.7)} .payment-card.paid{opacity:.72} .payment-card-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0;border:0;background:transparent;color:inherit;text-align:right;padding:12px} .payment-kind{width:32px;height:32px;flex:0 0 32px;border-radius:11px;display:grid;place-items:center;background:rgba(197,155,82,.12);color:#e0bf77;font-size:17px} .payment-copy{display:flex;flex-direction:column;min-width:0;gap:2px;flex:1}.payment-copy strong{font-size:13px;color:#eee;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.payment-copy small{font-size:11px;color:#a5a5a5}.payment-copy b{font-size:11px;color:#d7ba78}.payment-copy em{font-style:normal;font-size:10px;color:#888} .payment-card.overdue .payment-copy b{color:#e99387} .payment-paid-btn{border:0;border-right:1px solid rgba(197,155,82,.14);background:rgba(197,155,82,.08);color:#e0c27e;padding:0 11px;font-size:11px;font-weight:700} .payment-empty{padding:26px 12px;text-align:center;color:#aaa}.payment-empty span{display:block;font-size:24px;color:#c7a45c}.payment-empty b,.payment-empty small{display:block;margin-top:4px} .payment-form{padding-bottom:calc(88px + env(safe-area-inset-bottom))} .payment-form select,.payment-form input,.payment-form textarea{width:100%} .sticky-payment-actions{position:sticky;bottom:0;z-index:3;display:flex;gap:8px;align-items:center;margin:16px -2px -2px;padding:10px 2px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(to top,rgba(13,13,15,.98) 70%,rgba(13,13,15,.88),transparent);backdrop-filter:blur(12px)} .sticky-payment-actions .spacer{flex:1} .payment-form-actions .danger{color:#e79084} @media(max-width:430px){.bottom-nav .nav-item small{font-size:9px}.bottom-nav .nav-icon{font-size:19px}.payments-toolbar{align-items:stretch}.payment-add-btn{font-size:11px}.payment-tabs{flex:1}.payment-tab{padding:8px 8px}.payment-form .two-cols{grid-template-columns:1fr 1fr;gap:8px}} /* v2.2.6.59 — payments as a main page, scrollable bottom nav, Persian calendar */ .bottom-nav{display:flex!important;grid-template-columns:none!important;overflow-x:auto;overflow-y:hidden;white-space:nowrap;gap:4px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding-inline:7px!important} .bottom-nav::-webkit-scrollbar{display:none} .bottom-nav .nav-item{flex:0 0 76px;min-width:76px!important;scroll-snap-align:center} .bottom-nav{scroll-snap-type:x proximity} .payments-page{padding:10px 12px calc(92px + env(safe-area-inset-bottom));min-height:calc(100dvh - 118px)} .payments-page.hidden{display:none!important} .payments-page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 12px;padding:12px 12px;border:1px solid rgba(197,155,82,.18);border-radius:17px;background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.015))} .payments-page-head h2{margin:0;color:#f0d28d;font-size:18px}.payments-page-head small{display:block;color:#949494;margin-top:3px;font-size:10px} .payments-page-toolbar{margin:0 0 12px}.payments-page-toolbar .payment-tabs{width:100%;justify-content:space-between}.payments-page-toolbar .payment-tab{flex:1;text-align:center} .persian-date-field{display:flex;align-items:center;gap:6px;width:100%}.persian-date-field input{flex:1;min-width:0}.date-picker-btn{flex:0 0 42px;height:42px;border:1px solid rgba(197,155,82,.28);border-radius:12px;background:rgba(197,155,82,.08);color:#e0bf77;font-size:20px} .persian-calendar-dialog .dialog-body{max-width:360px}.persian-calendar-body{padding:14px}.persian-calendar-head{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:6px;margin-bottom:10px}.persian-calendar-head strong{text-align:center;color:#f0d28d;font-size:15px}.persian-calendar-head button{height:38px;border:1px solid rgba(197,155,82,.2);border-radius:11px;background:rgba(255,255,255,.03);color:#e2c47e;font-size:23px} .persian-weekdays,.persian-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.persian-weekdays{margin-bottom:5px}.persian-weekdays span{text-align:center;color:#807866;font-size:10px;padding:5px 0}.persian-calendar-grid button,.persian-calendar-grid span{aspect-ratio:1;display:grid;place-items:center;border-radius:10px}.persian-calendar-grid button{border:0;background:rgba(255,255,255,.025);color:#ddd;font-size:12px}.persian-calendar-grid button.today{box-shadow:inset 0 0 0 1px rgba(197,155,82,.55);color:#f2d896}.persian-calendar-grid button.selected{background:rgba(197,155,82,.22);color:#ffe5a6;box-shadow:inset 0 0 0 1px rgba(197,155,82,.5)}.persian-calendar-grid button.friday{color:#e4968a} @media(max-width:390px){.bottom-nav .nav-item{flex-basis:72px;min-width:72px!important}.payments-page{padding-inline:9px}.payments-page-head{padding:10px}.payment-add-btn{padding-inline:9px}} /* v2.2.6.59 — Persian calendar inside payment modal; avoids nested modal dialog issues on iOS */ .persian-calendar-overlay{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .persian-calendar-overlay.hidden{display:none!important} .persian-calendar-sheet{width:min(360px,calc(100vw - 28px));padding:14px;border:1px solid rgba(197,155,82,.34);border-radius:20px;background:linear-gradient(180deg,rgba(25,23,20,.98),rgba(12,11,10,.98));box-shadow:0 24px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04)} .payment-edit-dialog:has(.persian-calendar-overlay:not(.hidden)) .sticky-payment-actions{visibility:hidden;pointer-events:none} /* v2.2.6.59 — inline Persian date picker inside payment form */ .payment-date-control{min-width:0} .persian-calendar-slot{grid-column:1/-1;width:100%;margin-top:8px} .persian-calendar-inline.hidden{display:none!important} .persian-calendar-inline{display:block;width:100%;position:static;z-index:auto;margin:0} .persian-calendar-inline .persian-calendar-sheet{width:100%;max-width:none;padding:12px;border-radius:16px;background:linear-gradient(180deg,rgba(25,23,20,.98),rgba(12,11,10,.98));box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 30px rgba(0,0,0,.22)} .persian-calendar-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-top:10px} .persian-calendar-actions button{min-width:0} .payment-edit-dialog .sticky-payment-actions{visibility:visible!important;pointer-events:auto!important} @media(max-width:520px){.persian-calendar-grid button,.persian-calendar-grid span{min-height:36px;aspect-ratio:auto}.persian-calendar-inline .persian-calendar-sheet{padding:10px}} /* v2.2.6.63 - payment dashboard */ .payment-installments-section{margin:12px 0 86px;border:1px solid rgba(197,155,82,.22);border-radius:16px;background:rgba(255,255,255,.025);padding:12px} .payment-installments-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px} .payment-installments-head h3{margin:0;color:#f0d28d;font-size:14px;font-weight:800} .payment-installments-head small{display:block;margin-top:4px;color:#a8a8a8;font-size:11px} .payment-installments-list{display:grid;gap:8px} .installment-row{border:1px solid rgba(197,155,82,.16);border-radius:13px;background:rgba(0,0,0,.18);padding:10px;display:grid;gap:8px} .installment-row.paid{border-color:rgba(94,179,116,.35);background:rgba(56,120,72,.09)} .installment-row.overdue{border-color:rgba(217,93,76,.4);background:rgba(135,52,42,.09)} .installment-row-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .installment-row-title{display:grid;gap:2px;min-width:0} .installment-row-title strong{font-size:13px;color:#eee}.installment-row-title small{font-size:11px;color:#aaa;direction:ltr;text-align:right} .installment-status{min-width:112px;border:1px solid rgba(197,155,82,.22);border-radius:10px;background:#141414;color:#eee;padding:7px 8px;font-size:11px} .installment-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .installment-edit-grid label{font-size:10px;color:#aaa;display:grid;gap:4px} .installment-edit-grid input{width:100%;box-sizing:border-box;border:1px solid rgba(197,155,82,.16);border-radius:10px;background:#101010;color:#eee;padding:8px;font-size:12px} .installment-note{grid-column:1/-1} .installment-state-pill{font-size:10px;border-radius:999px;padding:3px 7px;border:1px solid rgba(197,155,82,.18);color:#cfcfcf} .installment-row.paid .installment-state-pill{color:#9bd0a8;border-color:rgba(94,179,116,.35)} .installment-row.overdue .installment-state-pill{color:#f0a49a;border-color:rgba(217,93,76,.4)} @media(max-width:430px){.installment-edit-grid{grid-template-columns:1fr}.installment-note{grid-column:auto}.installment-status{min-width:104px}} /* v2.2.6.63 - simplified payment dashboard */ .payment-main-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 10px;padding:4px;border:1px solid rgba(197,155,82,.22);border-radius:15px;background:rgba(255,255,255,.025)} .payment-main-tab{border:0;border-radius:11px;padding:10px 12px;background:transparent;color:var(--muted,#aaa);font:inherit;font-weight:700;cursor:pointer} .payment-main-tab.active{background:linear-gradient(180deg,rgba(197,155,82,.22),rgba(197,155,82,.08));color:#f0d59b;box-shadow:inset 0 0 0 1px rgba(197,155,82,.24)} .payment-ops-tabs{width:100%;display:flex;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch} .payment-ops-tabs::-webkit-scrollbar{display:none}.payment-ops-tabs .payment-tab{flex:0 0 auto;min-width:82px;white-space:nowrap} .payment-card.reminder,.payment-card.occurrence{position:relative}.payment-edit-short{flex:0 0 38px;height:38px;border-radius:12px;border:1px solid rgba(197,155,82,.25);background:rgba(197,155,82,.08);color:#e6c983;font-size:17px} .payment-undo-btn{flex:0 0 auto;border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:8px 9px;background:rgba(255,255,255,.05);color:#ddd;font:inherit;font-size:11px;white-space:nowrap} .payment-card.occurrence.paid{opacity:.78}.payment-card.occurrence.overdue{border-color:rgba(223,86,86,.38)} @media(max-width:430px){.payment-main-tab{padding:9px 8px}.payment-ops-tabs .payment-tab{min-width:76px}.payment-edit-short{flex-basis:34px;width:34px;height:34px}} /* v2.2.6.64 - compact payment navigation and summaries */ .payments-page{padding-top:8px} .payment-section-row{display:flex;align-items:center;gap:8px;margin:0 0 10px} .payment-section-row .payment-main-tabs{flex:1;min-width:0;margin:0} .payment-add-icon{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(197,155,82,.30);border-radius:12px;background:linear-gradient(180deg,rgba(197,155,82,.16),rgba(197,155,82,.06));color:#efd18a;font-size:23px;line-height:1;font-weight:500;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)} .payment-add-icon.hidden{display:none!important} .payments-page-toolbar{display:block;margin:0 0 6px;overflow:hidden} .payments-page-toolbar.hidden{display:none!important} .payments-page-toolbar .payment-tabs.payment-ops-tabs{width:100%;max-width:100%;display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;gap:5px;padding:4px} .payments-page-toolbar .payment-tabs.payment-ops-tabs::-webkit-scrollbar{display:none} .payments-page-toolbar .payment-tabs.payment-ops-tabs .payment-tab{flex:0 0 auto!important;min-width:max-content!important;padding:8px 11px!important;white-space:nowrap!important} .payment-summary-line{display:flex!important;align-items:center;min-height:24px;margin:0 2px 8px;padding:0 2px;border:0;background:transparent;gap:5px;color:#9e9e9e;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .payment-summary-line.hidden{display:none!important} .payment-summary-line b{display:inline!important;font-size:11px!important;color:#d9bc7d!important;font-weight:700} .payment-summary-line .danger{color:#e99387!important} .payment-summary-line span{border:0!important;border-radius:0!important;padding:0!important;text-align:right!important;background:transparent!important} @media(max-width:390px){.payment-add-icon{flex-basis:38px;width:38px;height:38px}.payments-page-toolbar .payment-tabs.payment-ops-tabs .payment-tab{padding-inline:10px!important}} /* v2.2.6.65 - reminder add action beside tab; installments managed only in Payments */ .payment-section-row .payment-main-tabs{width:100%;} .payment-reminder-tab-group{display:flex;align-items:stretch;gap:5px;min-width:0;} .payment-reminder-tab-group .payment-main-tab{flex:1 1 auto;min-width:0;} .payment-reminder-tab-group .payment-add-icon{align-self:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;font-size:20px;padding:0;} .payment-main-tabs>.payment-main-tab{min-width:0;} @media(max-width:390px){.payment-reminder-tab-group .payment-add-icon{flex-basis:32px;width:32px;height:32px;font-size:19px}} /* v2.2.6.66 - payment occurrence rows are operational, not navigation */ .payment-occurrence-static{cursor:default;-webkit-tap-highlight-color:transparent;} .lock-version{margin-top:10px;font-size:11px;line-height:1.4;color:rgba(212,175,55,.62);letter-spacing:.2px;text-align:center;user-select:none;-webkit-user-select:none} \n/* v2.2.6.71 — safe in-place PWA update */ .lock-update-btn{margin-top:5px;padding:5px 10px;border:0;background:transparent;color:rgba(212,175,55,.72);font-size:10px;line-height:1.4;text-decoration:underline;text-decoration-color:rgba(212,175,55,.28);text-underline-offset:3px;cursor:pointer} .lock-update-btn:disabled{opacity:.55;cursor:default;text-decoration:none} /* v2.2.6.71 — in-app update control beside the logo version */ .logo-version-update{display:inline-flex;align-items:center;gap:4px;padding:2px 5px;margin:0;border:0;border-radius:8px;background:transparent;color:#d7c48c;cursor:pointer;direction:ltr;line-height:1} .logo-version-update b{font-size:11px;font-weight:650;color:inherit} .logo-version-update svg{width:12px;height:12px;fill:none;stroke:#d8b34a;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.78} .logo-version-update:active{background:rgba(216,179,74,.09)} .logo-version-update:disabled{opacity:.5;cursor:default} /* v2.2.6.72 — highlight delayed installments in current month */ .payment-card.occurrence.late{ border-color:rgba(230,76,76,.72); background:linear-gradient(145deg,rgba(128,30,30,.20),rgba(82,18,18,.12)); box-shadow:inset 3px 0 0 rgba(230,76,76,.78),0 0 0 1px rgba(230,76,76,.08); } .payment-card.occurrence.late .payment-kind{ background:rgba(230,76,76,.18); color:#ffaaa0; border:1px solid rgba(230,76,76,.35); } .payment-card.occurrence.late .payment-copy b{color:#ff9f96;} .payment-card.occurrence.late .payment-copy em{ display:inline-flex;align-self:flex-start;align-items:center; margin-top:2px;padding:3px 7px;border-radius:999px; background:rgba(230,76,76,.18);border:1px solid rgba(230,76,76,.38); color:#ffaaa0;font-weight:750;font-size:10px; } .payment-card.occurrence.late .payment-paid-btn{ border-right-color:rgba(230,76,76,.20); } /* v2.2.6.73 — periodic payments */ .payment-variable-amount{margin:0 12px 9px;padding:7px 9px;border:1px solid rgba(197,155,82,.2);border-radius:11px;background:rgba(255,255,255,.025);display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted,#aaa)} .payment-variable-amount span{white-space:nowrap}.payment-variable-amount input{min-width:0;flex:1;height:34px;border-radius:9px;padding:6px 8px}.payment-variable-amount small{white-space:nowrap;color:#cdb98d} /* v2.2.6.75 - periodic payment form stabilization */ #paymentPeriodicFields.hidden,#paymentStartRow.hidden,#paymentRepeatRow.hidden{display:none!important} .payment-form select#paymentAmountMode,.payment-form input#paymentPeriodicDay{width:100%} /* v2.2.6.76 - payment amount/readability polish */ .payment-copy small.payment-meta-line{display:flex;align-items:center;gap:5px;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap} .payment-meta-line .payment-subtype,.payment-meta-line .payment-recipient{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .payment-meta-line .payment-recipient{flex:0 1 auto} .payment-meta-line .payment-amount-inline{flex:0 0 auto;white-space:nowrap;direction:rtl;unicode-bidi:isolate;font-variant-numeric:tabular-nums;color:#bbb} .payment-meta-sep{flex:0 0 auto;color:#666} .payment-variable-amount{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:8px;margin-top:0} .payment-variable-input-wrap{display:flex;align-items:center;gap:6px;min-width:0;direction:ltr} .payment-variable-input-wrap input{flex:1 1 auto;min-width:0;text-align:left;font-variant-numeric:tabular-nums} .payment-variable-input-wrap small{flex:0 0 auto;white-space:nowrap;direction:rtl} .payment-form #paymentAmount{font-variant-numeric:tabular-nums} .payment-card.occurrence .payment-copy{overflow:hidden} @media(max-width:390px){.payment-copy small.payment-meta-line{gap:4px;font-size:10.5px}.payment-variable-amount{grid-template-columns:1fr}.payment-variable-input-wrap{width:100%}} /* v2.2.6.77 — compact payment rows: title+date, single-line amount, no late text */ .payment-card.occurrence{display:flex;align-items:stretch} .payment-occurrence-content{display:flex;flex-direction:column;flex:1 1 auto;min-width:0} .payment-card.occurrence .payment-card-main{padding:10px 10px 7px;align-items:center} .payment-title-date{display:flex;align-items:baseline;gap:8px;min-width:0;width:100%} .payment-title-date strong{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .payment-title-date b{flex:0 0 auto;white-space:nowrap;font-size:10.5px;color:#d7ba78;font-weight:650} .payment-card.occurrence .payment-meta-line{margin-top:1px} .payment-card.occurrence .payment-recipient{display:inline-block!important;max-width:48%;color:#bdbdbd} .payment-main-amount{display:flex;align-items:baseline;gap:4px;max-width:100%;white-space:nowrap;direction:rtl;unicode-bidi:isolate;margin-top:2px;color:#e9e9e9;font-size:11px;line-height:1.4} .payment-main-amount-number{white-space:nowrap;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate} .payment-main-amount-unit{white-space:nowrap;color:#aaa;font-size:10px} .payment-variable-amount{margin:0 10px 9px} .payment-variable-input-wrap{white-space:nowrap} .payment-variable-input-wrap input{min-width:86px} .payment-card.occurrence.late .payment-copy em{display:none!important} .payment-card.occurrence.late .payment-title-date b{color:#ff9f96} .payment-paid-btn,.payment-undo-btn{flex:0 0 72px;min-width:72px;white-space:normal;line-height:1.35;padding-inline:8px} @media(max-width:390px){ .payment-card.occurrence .payment-card-main{gap:7px;padding-inline:8px} .payment-kind{width:29px;height:29px;flex-basis:29px} .payment-title-date{gap:5px} .payment-title-date strong{font-size:12px} .payment-title-date b{font-size:9.8px} .payment-card.occurrence .payment-meta-line{font-size:10px} .payment-main-amount{font-size:10.5px} .payment-paid-btn,.payment-undo-btn{flex-basis:66px;min-width:66px;font-size:10.5px} } /* v2.2.6.78 */ #paymentPeriodicFields{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:430px){#paymentPeriodicFields{grid-template-columns:1fr 1fr}#paymentPeriodicFields label:last-child{grid-column:1/-1}} /* v2.2.6.79 — reminder ordering and periodic start-mode fix */ .payment-card.reminder .payment-kind{font-size:16px} /* v2.2.6.167 — reliable reminder type icons on iOS */ .payment-kind{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .payment-kind .payment-type-svg{display:block;width:22px;height:22px;overflow:visible} /* v2.2.6.167 — separate payment type and status icons */ .payment-title-date .payment-status-icon{ display:inline-flex;align-items:center;justify-content:center; width:18px;height:18px;min-width:18px;border-radius:50%; font-size:11px;line-height:1;font-weight:800; opacity:.78;margin-inline:5px 2px; } .payment-title-date .payment-status-icon.pending{opacity:.6} .payment-title-date .payment-status-icon.overdue, .payment-title-date .payment-status-icon.late{opacity:1} .payment-title-date .payment-status-icon.paid{opacity:.9} /* v2.2.6.167 — payment server sync / Web Push */ .payment-sync-tools{display:flex;align-items:center;gap:5px;margin-inline-start:auto;white-space:nowrap;flex:0 0 auto} .payment-sync-icon{width:32px;height:32px;min-width:32px;border:1px solid var(--line,#303642);border-radius:10px;background:transparent;color:inherit;display:inline-flex;align-items:center;justify-content:center;font-size:16px;padding:0} .payment-sync-icon:disabled{opacity:.45} .payment-sync-tools small{font-size:10px;opacity:.62;max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:430px){.payment-sync-tools small{display:none}.payment-sync-icon{width:30px;height:30px;min-width:30px}} /* v2.2.6.167 — payment due today + cleaner Push controls */ .payment-card.occurrence.today{ border-color:rgba(245,158,11,.72); background:linear-gradient(180deg,rgba(245,158,11,.12),rgba(245,158,11,.045)); box-shadow:inset 3px 0 0 rgba(245,158,11,.72); } .payment-card.occurrence.today .payment-status-icon.today, .payment-card.occurrence.today .payment-today-label{ color:#f59e0b; font-weight:800; } .payment-card.occurrence.today .payment-status-icon.today{ background:rgba(245,158,11,.13); } .push-settings .settings-pair{align-items:stretch} /* v2.2.6.167 — automatic server sync status */ .payment-auto-sync-status{ display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px; border:1px solid var(--line,#303642);border-radius:12px; } .payment-auto-sync-icon{font-size:20px;opacity:.8;flex:0 0 auto} .payment-auto-sync-status>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0} .payment-auto-sync-status strong{font-size:13px} .payment-auto-sync-status small{font-size:11px;opacity:.7} #paymentAutoSyncState[data-state="ok"]{opacity:.9} #paymentAutoSyncState[data-state="waiting"]{opacity:.85} #paymentAutoSyncState[data-state="error"]{font-weight:700} /* v2.2.6.167 — debt summary */ .debt-summary-group{display:flex;flex-direction:column;gap:8px;margin-bottom:16px} .debt-summary-group-title{display:flex;align-items:center;justify-content:space-between;padding:2px 4px} .debt-summary-group-title strong{font-size:13px}.debt-summary-group-title small{font-size:11px;opacity:.62} .debt-summary-card{border:1px solid var(--line,#303642);border-radius:14px;overflow:hidden;background:var(--panel,#151922)} .debt-summary-card.overdue{border-color:rgba(239,68,68,.55)}.debt-summary-card.today{border-color:rgba(245,158,11,.65);background:linear-gradient(180deg,rgba(245,158,11,.08),transparent)}.debt-summary-card.paid{opacity:.82} .debt-summary-main{width:100%;border:0;background:transparent;color:inherit;display:flex;align-items:center;gap:10px;padding:11px;text-align:right} .debt-summary-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px}.debt-summary-title{display:flex;align-items:center;justify-content:space-between;gap:8px} .debt-summary-title strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.debt-summary-title em{font-size:10px;font-style:normal;white-space:nowrap;opacity:.78} .debt-summary-card.overdue .debt-summary-title em{color:#ef4444;font-weight:800}.debt-summary-card.today .debt-summary-title em{color:#f59e0b;font-weight:800} .debt-summary-copy>small{font-size:11px;opacity:.7}.debt-money-line,.debt-periodic-line{display:flex;gap:12px;justify-content:space-between;flex-wrap:nowrap} .debt-money-line b,.debt-periodic-line b{font-size:11px;font-weight:650;white-space:nowrap} .debt-progress-track{display:block;height:4px;border-radius:999px;background:rgba(127,127,127,.18);overflow:hidden}.debt-progress-track i{display:block;height:100%;border-radius:inherit;background:currentColor;opacity:.72}.debt-progress-track.large{height:6px} .payment-debt-detail-dialog{max-width:560px}.debt-detail-body{max-height:82vh;overflow:auto}.debt-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .debt-detail-grid>div{border:1px solid var(--line,#303642);border-radius:11px;padding:9px;display:flex;flex-direction:column;gap:3px;min-width:0}.debt-detail-grid small{font-size:10px;opacity:.62}.debt-detail-grid strong{font-size:12px;overflow-wrap:anywhere} .debt-detail-progress{margin:13px 1px}.debt-detail-progress-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:11px} .debt-detail-list-head{display:flex;align-items:center;justify-content:space-between;margin:13px 1px 7px}.debt-detail-list-head strong{font-size:13px}.debt-detail-list-head small{font-size:10px;opacity:.62} .debt-detail-installments{display:flex;flex-direction:column;gap:7px}.debt-detail-row{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid var(--line,#303642);border-radius:11px;padding:9px 10px} .debt-detail-row>span{display:flex;flex-direction:column;gap:2px;min-width:0}.debt-detail-row>span:last-child{text-align:left;align-items:flex-end}.debt-detail-row strong,.debt-detail-row b{font-size:12px}.debt-detail-row small{font-size:10px;opacity:.65}.debt-detail-row em{font-size:10px;font-style:normal;opacity:.76} .debt-detail-row.overdue em{color:#ef4444;font-weight:800}.debt-detail-row.today em{color:#f59e0b;font-weight:800} /* v2.2.6.167 — one-row payment tabs + gold debt trend chart */ .payment-main-tabs-nowrap{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;gap:6px} .payment-main-tabs-nowrap::-webkit-scrollbar{display:none} .payment-main-tabs-nowrap>.payment-main-tab,.payment-main-tabs-nowrap>.payment-reminder-tab-group{flex:0 0 auto} .payment-main-tabs-nowrap .payment-reminder-tab-group{display:flex;align-items:center;gap:4px} .debt-trend-panel{margin:4px 0 14px} .debt-trend-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:10px} .debt-metric{border:1px solid var(--line,#303642);border-radius:11px;padding:8px;display:flex;flex-direction:column;gap:2px;min-width:0;background:rgba(212,175,55,.025)} .debt-metric small{font-size:9.5px;opacity:.62;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .debt-metric strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .debt-metric em{font-size:9px;font-style:normal;opacity:.62;white-space:nowrap} .debt-metric.trend-down strong{color:#d4af37}.debt-metric.trend-up strong{font-weight:800}.debt-metric.trend-flat strong{opacity:.8} .debt-chart-shell{position:relative;border:1px solid rgba(212,175,55,.16);border-radius:16px;padding:8px 6px 0;background:linear-gradient(180deg,rgba(212,175,55,.035),rgba(212,175,55,0))} .debt-trend-canvas{display:block;width:100%;height:210px} .debt-trend-tooltip{position:absolute;z-index:4;pointer-events:none;min-width:140px;padding:7px 9px;border-radius:10px;background:rgba(18,18,20,.94);border:1px solid rgba(212,175,55,.26);box-shadow:0 8px 28px rgba(0,0,0,.22);display:flex;flex-direction:column;gap:2px} .debt-trend-tooltip strong{font-size:11px;color:#d4af37}.debt-trend-tooltip small{font-size:10px;opacity:.82} @media(max-width:430px){ .debt-trend-metrics{grid-template-columns:repeat(2,minmax(0,1fr))} .debt-trend-canvas{height:195px} } /* v2.2.6.167 — cleaner debt chart scale */ .debt-trend-canvas{height:238px} .debt-chart-shell{padding-left:2px} @media(max-width:430px){.debt-trend-canvas{height:225px}} /* v2.2.6.167 — debt chart layout fixes */ .debt-trend-panel{margin-top:0} .debt-trend-metrics{gap:6px;margin-bottom:7px} .debt-metric{padding:7px 8px} .debt-metric-peak strong{color:#d4af37} .debt-chart-shell{ padding:2px 4px 0; overflow:hidden; } .debt-trend-canvas{ height:218px; margin:0; } @media(max-width:430px){ .debt-trend-canvas{height:218px} } /* v2.2.6.167 — chart-only refinement; updater/cache code unchanged */ .debt-trend-panel{margin-top:0} .debt-trend-metrics{gap:6px;margin-bottom:6px} .debt-metric{padding:7px 8px} .debt-chart-shell{ position:relative; overflow:hidden; padding:3px 0 0; } .debt-trend-canvas{ display:block; width:100%; height:172px; margin:0; } .debt-trend-months{ height:54px; margin:0 12px 0 60px; display:grid; align-items:center; overflow:hidden; } .debt-trend-months>span{ position:relative; height:54px; min-width:0; } .debt-trend-months b{ position:absolute; left:50%; bottom:4px; display:block; white-space:nowrap; font-size:9px; font-weight:500; opacity:.72; transform:translateX(-50%) rotate(-90deg); transform-origin:center; } .debt-metric-peak strong{color:#d4af37} @media(max-width:430px){ .debt-trend-canvas{height:172px} .debt-trend-months{height:54px} } /* v2.2.6.167 — full month names + tighter 5M chart ceiling */ .debt-trend-canvas{ height:176px; } .debt-trend-months{ height:74px; margin:0 12px 0 60px; padding-top:2px; } .debt-trend-months>span{ height:74px; overflow:visible; } .debt-trend-months b{ bottom:7px; font-size:9.5px; opacity:.80; transform:translateX(-50%) rotate(-90deg); transform-origin:center center; } .debt-chart-shell{ padding-bottom:2px; } @media(max-width:430px){ .debt-trend-canvas{height:176px} .debt-trend-months{height:74px} } /* v2.2.6.167 — full month labels + collapsed debt groups */ .debt-trend-months{ height:88px; margin:0 12px 0 60px; padding:0; overflow:hidden; align-items:start; } .debt-trend-months>span{ position:relative; height:88px; min-width:0; overflow:visible; } .debt-trend-months b{ position:absolute; left:50%; top:36px; bottom:auto; display:block; white-space:nowrap; font-size:9.5px; font-weight:500; opacity:.82; transform:translate(-50%,-50%) rotate(-90deg); transform-origin:center center; } .debt-chart-shell{padding-bottom:0} .debt-summary-accordion{ border:1px solid var(--line,#303642); border-radius:13px; overflow:hidden; margin-bottom:9px; background:var(--panel,#151922); } .debt-summary-accordion-head{ width:100%; border:0; background:transparent; color:inherit; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; text-align:right; } .debt-summary-accordion-head>span{ display:flex; align-items:center; gap:8px; min-width:0; } .debt-summary-accordion-head strong{font-size:13px} .debt-summary-accordion-head small{font-size:10px;opacity:.62} .debt-summary-accordion-head i{ font-style:normal; font-size:16px; opacity:.65; transition:transform .18s ease; } .debt-summary-accordion.open .debt-summary-accordion-head i{transform:rotate(180deg)} .debt-summary-accordion-body{ display:flex; flex-direction:column; gap:8px; padding:0 8px 8px; } .debt-summary-accordion-body.hidden{display:none} .debt-summary-accordion-body .debt-summary-card{margin:0} @media(max-width:430px){ .debt-trend-months{height:88px} } /* v2.2.6.167 — chronological Persian month axis */ .debt-trend-months{ direction:ltr !important; height:92px; margin:0 12px 0 60px; padding:0; align-items:start; overflow:hidden; } .debt-trend-months>span{ direction:ltr; position:relative; height:92px; min-width:0; overflow:visible; } .debt-trend-months b{ direction:rtl; position:absolute; left:50%; top:42px; bottom:auto; display:block; white-space:nowrap; font-size:9.5px; line-height:1; font-weight:500; opacity:.82; transform:translate(-50%,-50%) rotate(-90deg); transform-origin:center center; text-align:center; } @media(max-width:430px){ .debt-trend-months{height:92px} } /* v2.2.6.167 — zero baseline + top-aligned month labels */ .debt-trend-months{ height:82px; margin-top:-1px; } .debt-trend-months>span{ height:82px; } .debt-trend-months b{ top:4px; left:50%; transform:translateX(-50%) rotate(-90deg); transform-origin:top center; } @media(max-width:430px){ .debt-trend-months{height:82px} } /* v2.2.6.167 — readable month axis + minimum debt reference */ .debt-trend-months{height:76px;margin:0 12px 0 60px;padding-top:3px;overflow:visible;align-items:start} .debt-trend-months>span{height:73px;overflow:visible} .debt-trend-months b{top:3px;bottom:auto;left:50%;font-size:9.5px;line-height:1;transform:translateX(-50%) rotate(-90deg);transform-origin:top center;text-align:left} .debt-chart-shell{overflow:visible;padding-bottom:3px} @media(max-width:430px){.debt-trend-months{height:76px}} /* v2.2.6.167 — month labels start below ZERO baseline and top-align correctly */ .debt-chart-shell{ display:flex; flex-direction:column; overflow:visible; padding-bottom:2px; } .debt-trend-canvas{ flex:0 0 auto; margin:0; } .debt-trend-months{ direction:ltr !important; flex:0 0 78px; height:78px; margin:0 12px 0 60px !important; padding:3px 0 0 !important; display:grid; align-items:start !important; overflow:visible !important; position:relative; } .debt-trend-months>span{ direction:ltr; position:relative; height:75px; min-width:0; overflow:visible !important; } .debt-trend-months b{ direction:rtl; position:absolute; left:50%; top:0 !important; bottom:auto !important; display:block; white-space:nowrap; font-size:9.5px; line-height:1; font-weight:500; opacity:.82; text-align:right; transform:translateX(-50%) rotate(-90deg) !important; transform-origin:top left !important; } @media(max-width:430px){ .debt-trend-months{ flex-basis:78px; height:78px; } } /* v2.2.6.167 — true top alignment for rotated month labels */ .debt-trend-months b{ top:3px !important; left:50% !important; bottom:auto !important; transform-origin:top left !important; transform:translateX(-50%) rotate(-90deg) translateX(-100%) !important; } /* v2.2.6.167 — month labels aligned to actual chart x-coordinates */ .debt-trend-months{ position:relative !important; display:block !important; direction:ltr !important; height:82px !important; margin:0 !important; padding:3px 0 0 !important; overflow:visible !important; } .debt-trend-months .debt-month-label{ position:absolute; top:3px; width:0; height:76px; overflow:visible; } .debt-trend-months .debt-month-label b{ position:absolute; top:0 !important; left:0 !important; bottom:auto !important; white-space:nowrap; font-size:9.5px; line-height:1; font-weight:500; opacity:.82; transform:rotate(-90deg) translateX(-100%) !important; transform-origin:top left !important; direction:rtl; } .debt-trend-months .debt-month-label.year-start b{ font-weight:650; opacity:.92; } /* v2.2.6.167 — privacy-safe payments + modern main tabs */ body.privacy-mode #paymentsPage .payment-main-amount, body.privacy-mode #paymentsPage .payment-amount-inline, body.privacy-mode #paymentsPage .debt-money-line b, body.privacy-mode #paymentsPage .debt-metric strong, body.privacy-mode #paymentsPage .debt-metric em, body.privacy-mode #paymentsPage .debt-detail-grid strong, body.privacy-mode #paymentsPage .debt-detail-row b, body.privacy-mode #paymentsPage #paymentsSummary{ filter:blur(6px); user-select:none; } .payment-main-tabs-nowrap{ align-items:center; gap:7px; } .payment-main-tab{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:7px 10px; border:1px solid var(--line,#303642); border-radius:11px; background:rgba(255,255,255,.025); color:inherit; font-weight:650; font-size:11.5px; white-space:nowrap; transition:background .18s ease,border-color .18s ease,transform .18s ease; } .payment-main-tab.active{ border-color:rgba(212,175,55,.50); background:rgba(212,175,55,.10); } .payment-main-tab:active{transform:scale(.97)} .payment-tab-icon{ width:18px; height:18px; display:grid; place-items:center; flex:0 0 auto; } .payment-tab-icon svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.78; } .payment-main-tab.active .payment-tab-icon{ color:#d4af37; opacity:1; } .payment-reminder-tab-group{ gap:4px!important; } /* v2.2.6.167 — professional payment filters + exact chart label alignment */ .payment-ops-tabs{ display:flex; flex-wrap:nowrap; gap:6px; overflow-x:auto; scrollbar-width:none; padding:1px 0 2px; } .payment-ops-tabs::-webkit-scrollbar{display:none} .payment-ops-tabs .payment-tab{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:34px; padding:6px 9px; border-radius:10px; border:1px solid var(--line,#303642); background:rgba(255,255,255,.022); color:inherit; font-size:10.5px; font-weight:620; white-space:nowrap; } .payment-ops-tabs .payment-tab.active{ border-color:rgba(212,175,55,.48); background:rgba(212,175,55,.09); } .payment-filter-icon{ width:16px; height:16px; display:grid; place-items:center; flex:0 0 auto; } .payment-filter-icon svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:.72; } .payment-tab.active .payment-filter-icon{ color:#d4af37; opacity:1; } .debt-trend-months .debt-month-label b{ left:0 !important; transform:rotate(-90deg) translateX(-100%) !important; transform-origin:top left !important; } /* v2.2.6.167 — chart month alignment + visible vertical guides */ .debt-trend-months .debt-month-label{ margin-left:0 !important; } .debt-trend-months .debt-month-label b{ margin:0 !important; } /* v2.2.6.167 — swipe month-by-month on debt chart */ .debt-trend-canvas{ touch-action:pan-y; } /* v2.2.6.167 — active debts separated from settled history */ .settled-debts-accordion{ margin:10px 8px 2px; border:1px solid rgba(255,255,255,.08); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.018); } .settled-debts-head{ min-height:52px; opacity:.82; } .settled-debts-head strong{ font-weight:650; } .settled-debts-body{ padding-top:2px; } .settled-debts-body .debt-summary-card{ opacity:.78; } /* v2.2.6.167 — confirmed amount for variable periodic payments */ .periodic-confirmed-amount{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .periodic-amount-edit-btn{ appearance:none; border:0; background:transparent; color:var(--gold,#d4af37); font:inherit; font-size:12px; padding:3px 0; } .periodic-amount-missing{ display:inline-flex; width:max-content; max-width:100%; margin-top:5px; padding:4px 8px; border:1px dashed rgba(212,175,55,.28); border-radius:9px; color:rgba(230,210,145,.85); font-size:12px; } .payment-variable-amount-editor{ margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.07); } .periodic-amount-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:7px; } .periodic-amount-actions .mini{ min-height:34px; padding:6px 11px; border-radius:9px; font-size:12px; } /* v2.2.6.167 — compact variable periodic amount */ .periodic-amount-compact{ display:inline-flex; align-items:center; gap:7px; width:max-content; max-width:100%; margin-top:3px; min-height:24px; color:rgba(240,240,240,.92); font-size:13px; line-height:1.2; } .periodic-amount-compact.missing{ color:rgba(205,205,205,.68); font-size:12px; } .periodic-amount-icon-btn{ appearance:none; border:0; background:transparent; color:var(--gold,#d4af37); display:inline-flex; align-items:center; justify-content:center; padding:0; margin:0; cursor:pointer; line-height:1; } .periodic-amount-icon-btn.add{ width:25px; height:25px; font-size:23px; font-weight:800; } .periodic-amount-icon-btn.edit{ width:23px; height:23px; font-size:16px; font-weight:700; } .payment-variable-amount-editor{ margin:7px 0 0; padding:8px 0 1px; border-top:1px solid rgba(212,175,55,.12); } .periodic-inline-editor{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:7px; } .periodic-inline-editor .payment-variable-input-wrap{ margin:0; } .periodic-inline-editor .payment-variable-input-wrap input{ min-height:38px; } .periodic-save-amount{ min-height:38px!important; padding:6px 13px!important; margin:0!important; border-radius:10px!important; white-space:nowrap; } .periodic-inline-cancel{ appearance:none; border:0; background:transparent; color:rgba(255,255,255,.52); width:27px; height:34px; padding:0; font-size:21px; line-height:1; } /* v2.2.6.167 — touch-safe payment confirmation */ .payment-confirm-dialog{ width:min(92vw,420px); padding:0; border:0; background:transparent; overflow:visible; } .payment-confirm-dialog::backdrop{ background:rgba(0,0,0,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .payment-confirm-card{ border:1px solid rgba(212,175,55,.24); border-radius:22px; background: linear-gradient(180deg,rgba(24,24,24,.98),rgba(12,12,12,.99)); box-shadow:0 22px 65px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.035); padding:20px 18px 16px; text-align:right; } .payment-confirm-icon{ width:44px;height:44px; border-radius:14px; display:flex;align-items:center;justify-content:center; margin-bottom:14px; border:1px solid rgba(212,175,55,.34); background:rgba(212,175,55,.08); color:var(--gold,#d4af37); font-size:23px; font-weight:800; } .payment-confirm-copy h2{ margin:0 0 7px; font-size:17px; font-weight:750; } .payment-confirm-copy p{ margin:0; color:rgba(235,235,235,.72); font-size:13px; line-height:1.8; } .payment-confirm-meta{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:14px; } .payment-confirm-meta:empty{display:none} .payment-confirm-meta span{ padding:9px 10px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.055); } .payment-confirm-meta small{ display:block; color:rgba(255,255,255,.48); font-size:10px; margin-bottom:3px; } .payment-confirm-meta strong{ display:block; font-size:12px; line-height:1.6; } .payment-confirm-actions{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:17px; } .payment-confirm-actions button{ min-height:46px; border-radius:13px; font-size:13px; font-weight:700; } .payment-confirm-actions .danger-action{ background:rgba(190,66,66,.14)!important; border:1px solid rgba(220,90,90,.28)!important; color:#f0a0a0!important; } .payment-confirm-dialog.undo-mode .payment-confirm-icon{ border-color:rgba(220,90,90,.28); background:rgba(190,66,66,.10); color:#e99191; } /* v2.2.6.167 — confirmation appears over the actual current screen */ .payment-confirm-dialog{ background:transparent!important; } .payment-confirm-dialog::backdrop{ background:rgba(0,0,0,.42)!important; -webkit-backdrop-filter:blur(5px) saturate(.82)!important; backdrop-filter:blur(5px) saturate(.82)!important; } .payment-confirm-card{ background: linear-gradient(180deg,rgba(27,27,27,.94),rgba(13,13,13,.96))!important; box-shadow: 0 18px 55px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.045)!important; } /* v2.2.6.167 — combined monthly commitments */ .debt-chart-legend{ display:flex; justify-content:flex-end; align-items:center; gap:13px; margin:3px 8px 7px; color:rgba(220,220,220,.68); font-size:10px; } .debt-chart-legend span{ display:inline-flex; align-items:center; gap:5px; } .debt-chart-legend span::before{ content:""; width:16px; height:2px; border-radius:3px; background:rgba(210,210,210,.46); } .debt-chart-legend .total::before{ height:3px; background:#d4af37; } .debt-chart-legend .periodic::before{ background:repeating-linear-gradient( 90deg, rgba(210,210,210,.46) 0 4px, transparent 4px 7px ); } .debt-metric-periodic em{ display:block; margin-top:2px; font-style:normal; font-size:9px; color:rgba(212,175,55,.72); } .debt-metric-total strong{ color:#d4af37; } .debt-trend-tooltip{ min-width:154px; } .debt-trend-tooltip small{ display:block; } .debt-trend-tooltip .debt-tip-total{ color:#d4af37; font-weight:700; margin-top:4px; } .debt-trend-tooltip em{ display:block; margin-top:3px; font-style:normal; color:rgba(212,175,55,.72); font-size:9px; } /* v2.2.6.167 — periodic chart inclusion switch */ .periodic-chart-toggle-row{ grid-column:1/-1; display:flex!important; align-items:center; justify-content:space-between; gap:14px; min-height:56px; padding:9px 11px!important; border:1px solid rgba(212,175,55,.12); border-radius:13px; background:rgba(212,175,55,.025); } .periodic-chart-toggle-copy{ display:block; min-width:0; } .periodic-chart-toggle-copy strong{ display:block; font-size:13px; font-weight:650; color:rgba(245,245,245,.94); } .periodic-chart-toggle-copy small{ display:block; margin-top:3px; font-size:10px; line-height:1.55; color:rgba(255,255,255,.48); } .periodic-chart-toggle-row .switch{ flex:0 0 auto; } /* v2.2.6.167 — scrollable history/current/future in one chart frame */ .debt-chart-shell{overflow:hidden!important} .debt-chart-scroller{ width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain; } .debt-chart-scroller::-webkit-scrollbar{display:none} .debt-chart-content{position:relative;min-height:224px} .debt-trend-current-marker{ position:absolute;top:0;width:1px;pointer-events:none;z-index:2; background:linear-gradient(180deg,rgba(212,175,55,.18),rgba(212,175,55,.65) 20%,rgba(212,175,55,.65) 78%,rgba(212,175,55,.10)); } .debt-trend-current-marker::before{ content:"ماه جاری"; position:absolute;top:4px;left:7px; white-space:nowrap;color:rgba(212,175,55,.88);font-size:9px;font-weight:650; } .debt-month-label.past{opacity:.48} .debt-month-label.current{color:#d4af37!important;opacity:1!important;font-weight:700} /* v2.2.6.167 — fixed Y axis + reliable history scrolling in RTL app */ .debt-chart-shell{position:relative} .debt-trend-y-axis{ position:absolute; left:0; top:0; width:60px; height:176px; z-index:8; pointer-events:none; background:linear-gradient(90deg,rgba(13,13,13,.98) 0%,rgba(13,13,13,.94) 78%,rgba(13,13,13,0) 100%); } .debt-chart-scroller{ direction:ltr!important; position:relative; z-index:1; } .debt-chart-content{direction:ltr} /* v2.2.6.167 — true fixed Y axis + 12-month historical scroll */ .debt-chart-shell{ display:grid!important; grid-template-columns:60px minmax(0,1fr); align-items:start; position:relative; overflow:hidden!important; } .debt-chart-y-fixed{ grid-column:1; position:relative; width:60px; height:176px; z-index:10; overflow:hidden; pointer-events:none; touch-action:none; background:rgba(13,13,13,.98); } .debt-trend-y-axis{ position:static!important; display:block; width:60px!important; height:176px!important; background:transparent!important; } .debt-chart-scroll-zone{ grid-column:2; min-width:0; overflow:hidden; } .debt-chart-scroller{ width:100%; overflow-x:auto!important; overflow-y:hidden!important; direction:ltr!important; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain; touch-action:pan-x; } .debt-chart-scroller::-webkit-scrollbar{display:none} .debt-chart-content{ direction:ltr; position:relative; } /* v2.2.6.167 — keep fixed Y axis physically on the left inside RTL app */ .debt-chart-shell{ direction:ltr!important; } .debt-chart-y-fixed{ grid-column:1!important; direction:ltr!important; } .debt-chart-scroll-zone{ grid-column:2!important; direction:ltr!important; } .debt-trend-months{ direction:ltr!important; } /* v2.2.6.167 — wider plot, compact month axis */ .debt-chart-shell{ grid-template-columns:44px minmax(0,1fr)!important; } .debt-chart-y-fixed{ width:44px!important; } .debt-trend-y-axis{ width:44px!important; } .debt-month-label{ font-size:9px; } /* v2.2.6.167 — compact one-year viewport */ .debt-month-label{ font-size:10px; white-space:nowrap; } /* v2.2.6.167 — one-third tighter monthly spacing */ .debt-month-label{ font-size:10px; } /* v2.2.6.167 — current month: line + stronger month label only */ .debt-trend-current-marker::before{ content:none!important; display:none!important; } .debt-month-label.current, .debt-month-label.current b{ color:#d4af37!important; opacity:1!important; font-weight:800!important; font-size:9px!important; } /* v2.2.6.167 — universal reminder/chart/push controls */ .payment-reminder-options{ margin-top:4px; padding:10px; border:1px solid rgba(212,175,55,.12); border-radius:15px; background:rgba(212,175,55,.025); } .payment-reminder-options-title{ display:flex;justify-content:space-between;align-items:center; margin-bottom:7px; } .payment-reminder-options-title strong{font-size:13px} .payment-reminder-options-title small{font-size:10px;color:rgba(255,255,255,.44)} .payment-option-row,.payment-reminder-select-row{ display:flex!important;align-items:center;justify-content:space-between; gap:12px;min-height:48px;padding:6px 2px!important; border-top:1px solid rgba(255,255,255,.05); } .payment-option-row>span:first-child,.payment-reminder-select-row>span:first-child{min-width:0} .payment-option-row strong,.payment-reminder-select-row strong{display:block;font-size:12px} .payment-option-row small,.payment-reminder-select-row small{display:block;margin-top:2px;font-size:9px;color:rgba(255,255,255,.46)} .payment-reminder-select-row select{width:auto;min-width:105px} .payment-push-custom-options{ display:grid;gap:6px;margin-top:5px;padding-top:7px;border-top:1px solid rgba(212,175,55,.10); } .payment-push-custom-options label,.payment-default-push-item{ display:flex!important;align-items:center;gap:9px; padding:7px 8px!important;border:1px solid rgba(255,255,255,.055); border-radius:10px;background:rgba(255,255,255,.018); } .payment-push-custom-options input,.payment-default-push-item input{accent-color:#d4af37} .payment-push-custom-options strong,.payment-default-push-item strong{display:block;font-size:11px} .payment-push-custom-options small,.payment-default-push-item small{display:block;font-size:9px;color:rgba(255,255,255,.44);margin-top:2px} .payment-default-reminder-settings{ margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06); } .payment-default-days{margin-bottom:8px} .payment-default-push-grid{display:grid;grid-template-columns:1fr;gap:6px} #paymentStartRow{grid-template-columns:minmax(0,1fr)} /* v2.2.6.167 — configurable before/after Push days */ .push-days-row{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px} .push-days-input{display:flex!important;align-items:center;gap:4px;direction:rtl;white-space:nowrap} .push-days-input input{width:48px!important;min-width:48px!important;height:34px;padding:4px 5px!important;text-align:center;direction:ltr} .push-days-input small{margin:0!important;font-size:9px!important} /* v2.2.6.167 — reminder archive + edit-icon-only interaction */ .payment-card.reminder .payment-card-static{ cursor:default; user-select:none; -webkit-user-select:none; } .payment-reminder-actions{ display:flex; align-items:center; gap:5px; flex:0 0 auto; } .payment-restore-short{ appearance:none; border:0; background:transparent; color:#d4af37; width:34px; height:34px; border-radius:10px; font-size:18px; display:grid; place-items:center; } .payment-archive-accordion{ margin-top:10px; border-top:1px solid rgba(255,255,255,.06); padding-top:8px; } .payment-archive-head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; border:0; background:rgba(255,255,255,.018); color:inherit; border-radius:12px; padding:10px 11px; text-align:right; } .payment-archive-head span{display:block} .payment-archive-head strong{display:block;font-size:12px} .payment-archive-head small{display:block;margin-top:2px;font-size:9px;color:rgba(255,255,255,.44)} .payment-archive-head i{font-style:normal;color:#d4af37;transition:transform .18s ease} .payment-archive-accordion.open>.payment-archive-head i{transform:rotate(180deg)} .payment-archive-body{padding-top:7px} .archived-reminder{opacity:.70} .archived-reminder .payment-kind{opacity:.70} .payment-archive-state{color:rgba(212,175,55,.72)!important;font-weight:600!important} /* v2.2.6.167 — notification delete confirmation only */ .notification-delete-confirm-icon{ color:#d4af37!important; border-color:rgba(212,175,55,.28)!important; } /* v2.2.6.167 — unified trash: documents + notification messages */ .trash-row-copy{ display:flex; flex-direction:column; gap:3px; min-width:0; } .trash-kind-badge{ align-self:flex-start; padding:2px 7px; border-radius:999px; font-size:9px; font-weight:700; } .trash-kind-badge.message{ border:1px solid rgba(212,175,55,.20); background:rgba(212,175,55,.06); color:#d4af37; } .trash-kind-badge.document{ border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035); color:rgba(255,255,255,.62); } .notification-trash-row{ opacity:.92; } #debugInfo details{margin-top:7px} #debugInfo pre{ white-space:pre-wrap; word-break:break-word; font-size:9px; direction:ltr; text-align:left; max-height:180px; overflow:auto; } /* v2.2.6.174 — Settings visual review */ .settings-dialog{overflow:hidden} .settings-dialog .settings-body{padding:0;gap:0;max-height:88vh;overflow:auto;background:radial-gradient(circle at top,#211a0c,#101010 34%);scrollbar-width:none} .settings-dialog .settings-body::-webkit-scrollbar{display:none} .settings-dialog .dialog-head{position:sticky;top:0;z-index:8;padding:16px 18px 12px;background:rgba(13,13,13,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(212,175,55,.14)} .settings-dialog .settings-card{margin:10px 14px 0} .settings-dialog .app-info{margin-bottom:94px} .settings-subhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px;padding:10px 2px 7px;border-top:1px solid rgba(212,175,55,.13)} .settings-subhead span{font-size:12px;font-weight:800;color:#e8cd76} .settings-subhead small{margin:0!important;font-size:10px!important;color:#807762!important} .backup-reminder-setting{margin-top:2px} .settings-sticky-actions{position:sticky;bottom:0;z-index:10;display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(12,12,12,.55),rgba(9,9,9,.98) 30%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(212,175,55,.18);box-shadow:0 -10px 28px rgba(0,0,0,.35)} .settings-sticky-btn{min-height:52px;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:9px 11px;border-radius:15px;background:#1a1711;color:#eee2ba;border:1px solid rgba(212,175,55,.22);text-align:right} .settings-sticky-btn span:nth-child(2){display:grid;gap:1px} .settings-sticky-btn strong{font-size:12px}.settings-sticky-btn small{margin:0!important;color:#8f856f!important;font-size:9.5px!important} .settings-sticky-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:10px;background:rgba(212,175,55,.09);border:1px solid rgba(212,175,55,.18);color:#f0d271;font-size:19px} .settings-exit-btn{background:#181818} @media(max-width:390px){.settings-dialog .settings-card{margin-left:10px;margin-right:10px}.settings-sticky-actions{padding-left:10px;padding-right:10px}.settings-subhead small{display:none}} /* v2.2.6.178 — Payment reminder hierarchy visual polish */ .payment-default-reminder-settings{margin-top:8px;padding-top:0;border-top:0} .reminder-default-head{margin-top:0;padding-top:10px;border-top:1px solid rgba(212,175,55,.13)} .payment-default-days{margin:0 0 8px} .push-schedule-head{align-items:stretch;padding-top:9px;padding-bottom:8px} .push-schedule-title{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0} .push-schedule-title>span{font-size:12px;font-weight:800;color:#e8cd76} .push-schedule-title>small{margin:0!important;font-size:9.5px!important;color:#807762!important} .push-main-toggle{display:flex!important;align-items:center;gap:7px;min-width:142px;padding:7px 9px!important;border:1px solid rgba(212,175,55,.18);border-radius:11px;background:rgba(212,175,55,.045)} .push-main-toggle input{accent-color:#d4af37;flex:0 0 auto} .push-main-toggle span{display:flex;flex-direction:column;gap:1px;min-width:0} .push-main-toggle strong{font-size:10.5px;color:#eee2ba;white-space:nowrap} .push-main-toggle small{margin:0!important;font-size:10px!important;color:#8d836d!important;white-space:nowrap} .payment-default-push-grid{padding-top:0} .payment-default-push-item{min-height:49px} @media(max-width:390px){ .push-schedule-head{gap:7px} .push-schedule-title>small{display:none!important} .push-main-toggle{min-width:136px;padding-left:7px!important;padding-right:7px!important} } /* v2.2.6.178 — superseded reminder containment rules */ .reminder-default-head{ display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:3px; } .reminder-default-head small{ display:block!important; line-height:1.7; text-align:right; width:100%; } .push-schedule-head{ display:block!important; width:100%; box-sizing:border-box; overflow:hidden; } .push-schedule-title{ width:100%; box-sizing:border-box; text-align:right; } .push-main-toggle{ width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; margin-top:8px; padding:8px 10px!important; justify-content:flex-start!important; direction:rtl; overflow:hidden; } .push-main-toggle input{ flex:0 0 auto!important; margin:0!important; } .push-main-toggle span{ min-width:0!important; flex:1 1 auto!important; overflow:hidden; text-align:right; } .push-main-toggle strong, .push-main-toggle small{ white-space:normal!important; overflow-wrap:anywhere; } @media(max-width:390px){ .reminder-default-head small{display:block!important;font-size:9px!important} .push-main-toggle{width:100%!important;min-width:0!important;padding:8px!important} } /* v2.5.75 — fixed compact inline reminder / Push layout */ .payment-default-reminder-settings{ min-width:0; } .reminder-default-head{ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-start!important; gap:0!important; margin-top:0!important; padding:9px 2px 5px!important; } .payment-default-days{ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:space-between!important; gap:8px!important; width:100%!important; min-width:0!important; min-height:46px!important; margin:0 0 8px!important; padding:7px 9px!important; } .payment-default-days>span{ flex:1 1 auto!important; min-width:0!important; text-align:right!important; } .payment-default-days>span strong{ display:block!important; white-space:nowrap!important; overflow:visible!important; text-overflow:clip!important; } .payment-default-days .compact-select{ flex:0 0 102px!important; width:102px!important; min-width:102px!important; max-width:102px!important; height:34px!important; margin:0!important; padding:4px 6px!important; font-size:10.5px!important; } .push-schedule-head{ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:space-between!important; gap:7px!important; width:100%!important; min-width:0!important; box-sizing:border-box!important; overflow:hidden!important; padding:9px 2px 8px!important; } .push-schedule-title{ flex:1 1 auto!important; min-width:0!important; width:auto!important; text-align:right!important; } .push-schedule-title>span{ display:block!important; font-size:11.5px!important; white-space:nowrap!important; } .push-main-toggle{ display:flex!important; flex:0 0 auto!important; align-items:center!important; justify-content:center!important; gap:5px!important; width:auto!important; max-width:118px!important; min-width:0!important; box-sizing:border-box!important; margin:0!important; padding:5px 7px!important; border:1px solid rgba(212,175,55,.18)!important; border-radius:10px!important; background:rgba(212,175,55,.045)!important; direction:rtl!important; overflow:hidden!important; } .push-main-toggle input[type="checkbox"]{ appearance:auto!important; -webkit-appearance:checkbox!important; flex:0 0 17px!important; width:17px!important; min-width:17px!important; max-width:17px!important; height:17px!important; margin:0!important; padding:0!important; border-radius:3px!important; accent-color:#d4af37!important; } .push-main-toggle span{ display:block!important; flex:0 1 auto!important; min-width:0!important; overflow:hidden!important; text-align:right!important; } .push-main-toggle strong{ display:block!important; max-width:86px!important; font-size:9.5px!important; line-height:1.25!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .push-main-toggle small{display:none!important} @media(max-width:390px){ .payment-default-days{gap:6px!important;padding:6px 7px!important} .payment-default-days .compact-select{flex-basis:96px!important;width:96px!important;min-width:96px!important;max-width:96px!important;font-size:10px!important} .push-schedule-head{gap:5px!important} .push-schedule-title>span{font-size:11px!important} .push-main-toggle{max-width:110px!important;padding:5px 6px!important;gap:4px!important} .push-main-toggle input[type="checkbox"]{flex-basis:16px!important;width:16px!important;min-width:16px!important;max-width:16px!important;height:16px!important} .push-main-toggle strong{max-width:80px!important;font-size:9px!important} } /* v2.5.75 — compact responsive redesign for New Reminder form */ .payment-edit-dialog .dialog-body.payment-form{ width:min(680px,calc(100vw - 18px)); padding:12px 12px calc(76px + env(safe-area-inset-bottom)); gap:8px; } .payment-edit-dialog .dialog-head{margin-bottom:2px} .payment-edit-dialog .payment-form>label, .payment-edit-dialog .payment-form .two-cols>label, .payment-edit-dialog .payment-date-control>label{ font-size:11px; gap:4px; } .payment-edit-dialog .payment-form input, .payment-edit-dialog .payment-form select, .payment-edit-dialog .payment-form textarea{ min-height:40px; padding:8px 9px; border-radius:11px; font-size:12px; box-sizing:border-box; } .payment-edit-dialog .payment-form textarea{min-height:58px;resize:vertical} .payment-edit-dialog .payment-form .two-cols{gap:7px 8px} .payment-edit-dialog .payment-primary-grid{margin:0} .payment-edit-dialog .payment-periodic-grid>label:last-child{grid-column:1/-1} .payment-edit-dialog #paymentStartRow, .payment-edit-dialog #paymentRepeatRow, .payment-edit-dialog #paymentRepeatEndFields{margin-top:0} .payment-edit-dialog .persian-date-field{gap:5px} .payment-edit-dialog .date-picker-btn{height:40px;flex-basis:38px;border-radius:10px} /* reminder controls: two useful cards per row where width allows */ .payment-edit-dialog .payment-reminder-compact{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px; margin-top:1px; padding:8px; border-radius:14px; } .payment-edit-dialog .payment-reminder-compact>.payment-reminder-options-title{ grid-column:1/-1; margin:0 1px 2px; padding-bottom:5px; border-bottom:1px solid rgba(255,255,255,.05); } .payment-edit-dialog .payment-reminder-compact>.payment-option-row, .payment-edit-dialog .payment-reminder-compact>.payment-reminder-select-row{ min-width:0; min-height:54px; margin:0; padding:7px 8px!important; border:1px solid rgba(255,255,255,.055); border-radius:11px; background:rgba(255,255,255,.018); } .payment-edit-dialog .payment-reminder-compact>.payment-option-row:nth-of-type(3){grid-column:1/-1} .payment-edit-dialog .payment-reminder-select-row select{ min-width:86px; max-width:108px; width:auto; min-height:36px; padding-inline:7px; } .payment-edit-dialog .payment-reminder-compact .switch{flex:0 0 auto} .payment-edit-dialog .payment-reminder-compact>.payment-push-custom-options{ grid-column:1/-1; grid-template-columns:1fr 1fr; gap:6px; margin-top:0; padding-top:0; border-top:0; } .payment-edit-dialog .payment-push-custom-options>label:first-child{grid-column:1/-1} .payment-edit-dialog .payment-push-custom-options label{ min-width:0; min-height:48px; padding:6px 7px!important; } .payment-edit-dialog .payment-push-custom-options .push-days-row{ display:grid!important; grid-template-columns:auto minmax(0,1fr) auto; gap:6px; } .payment-edit-dialog .payment-push-custom-options .push-days-input{ min-width:54px; gap:2px; } .payment-edit-dialog .payment-push-custom-options .push-days-input input{ width:42px!important; min-height:34px; padding:5px!important; } .payment-edit-dialog .payment-notes-field{margin-top:0} .payment-edit-dialog .sticky-payment-actions{ margin-top:8px; padding-top:7px; padding-bottom:calc(7px + env(safe-area-inset-bottom)); } .payment-edit-dialog .sticky-payment-actions button{min-height:40px;padding:8px 12px} @media(max-width:370px){ .payment-edit-dialog .dialog-body.payment-form{width:calc(100vw - 10px);padding-inline:9px} .payment-edit-dialog .payment-form .two-cols{gap:6px} .payment-edit-dialog .payment-reminder-compact{grid-template-columns:1fr} .payment-edit-dialog .payment-reminder-compact>.payment-reminder-options-title, .payment-edit-dialog .payment-reminder-compact>.payment-option-row:nth-of-type(3), .payment-edit-dialog .payment-reminder-compact>.payment-push-custom-options{grid-column:1} .payment-edit-dialog .payment-reminder-compact>.payment-push-custom-options{grid-template-columns:1fr} .payment-edit-dialog .payment-push-custom-options>label:first-child{grid-column:1} } /* v2.5.75 — New Reminder: popup-width-safe compact layout */ .payment-edit-dialog{ width:min(96vw,520px)!important; max-width:520px!important; margin:auto!important; } .payment-edit-dialog .dialog-body.payment-form{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; padding-inline:10px!important; overflow-x:hidden!important; } .payment-edit-dialog .payment-form .two-cols{ grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; min-width:0!important; } .payment-edit-dialog .payment-form .two-cols>*{min-width:0!important;max-width:100%!important} .payment-edit-dialog .payment-form input, .payment-edit-dialog .payment-form select, .payment-edit-dialog .payment-form textarea{min-width:0!important;max-width:100%!important;box-sizing:border-box!important} .payment-edit-dialog .payment-due-repeat-row{align-items:start!important} .payment-edit-dialog .payment-custom-repeat-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;margin:0} .payment-edit-dialog .payment-custom-repeat-row>label{grid-column:2;min-width:0} .payment-edit-dialog .payment-reminder-compact{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important} .payment-edit-dialog .payment-reminder-compact>.payment-reminder-options-title{grid-column:1/-1!important} .payment-edit-dialog .payment-reminder-compact>.payment-option-row, .payment-edit-dialog .payment-reminder-compact>.payment-reminder-select-row{min-width:0!important} .payment-edit-dialog .payment-reminder-select-row select{width:96px!important;min-width:78px!important;max-width:96px!important} @media(max-width:390px){ .payment-edit-dialog{width:calc(100vw - 12px)!important} .payment-edit-dialog .dialog-body.payment-form{padding-inline:8px!important} .payment-edit-dialog .payment-form .two-cols{gap:6px!important} .payment-edit-dialog .payment-reminder-compact{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:5px!important;padding:6px!important} .payment-edit-dialog .payment-reminder-compact>.payment-option-row, .payment-edit-dialog .payment-reminder-compact>.payment-reminder-select-row{padding:6px!important;min-height:50px!important} .payment-edit-dialog .payment-reminder-select-row select{width:82px!important;min-width:72px!important;font-size:10px!important;padding-inline:5px!important} } /* v2.2.6.182 — settings fixed header actions + sync strip */ .settings-dialog .settings-main-head{ display:flex;align-items:center;justify-content:space-between;gap:8px; padding:12px 14px 9px; } .settings-dialog .settings-main-head h2{font-size:17px;white-space:nowrap;min-width:0} .settings-head-actions{display:flex;align-items:center;gap:5px;direction:rtl;flex:0 0 auto} .settings-head-btn,.settings-head-close{ position:relative;box-sizing:border-box;width:34px;height:34px;min-width:34px; padding:0!important;border-radius:11px;display:grid;place-items:center; } .settings-head-btn{ color:#ead173;background:rgba(212,175,55,.055); border:1px solid rgba(212,175,55,.17);font-size:18px;line-height:1; } .settings-head-close{font-size:25px!important} .settings-head-badge{ position:absolute;top:-5px;left:-5px;z-index:2;min-width:16px;height:16px;padding:0 3px; border-radius:9px;display:grid;place-items:center;box-sizing:border-box; background:#b3261e;color:#fff;border:2px solid #101010;font-size:9px;font-style:normal;font-weight:900; } .settings-head-badge.hidden{display:none!important} .settings-sync-strip{ position:sticky;top:56px;z-index:7;margin:0;padding:6px 14px 7px; display:flex;align-items:center;justify-content:space-between;gap:10px; background:rgba(13,13,13,.94);border-bottom:1px solid rgba(212,175,55,.11); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); } .settings-sync-copy{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden} .settings-sync-copy strong{font-size:10.5px;color:#cbb66d;white-space:nowrap} .settings-sync-copy small{margin:0!important;font-size:9.5px!important;color:#817966!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .settings-sync-btn{ flex:0 0 auto;width:29px;height:29px;padding:0!important;border-radius:9px; display:grid;place-items:center;background:rgba(212,175,55,.07);color:#ead173; border:1px solid rgba(212,175,55,.17);font-size:17px; } .settings-sync-btn.is-syncing{animation:settingsSyncSpin .8s linear infinite} @keyframes settingsSyncSpin{to{transform:rotate(-360deg)}} #settingsSyncState[data-state="ok"]{color:#b9aa77} #settingsSyncState[data-state="waiting"]{color:#d7b85c} #settingsSyncState[data-state="error"]{color:#e07a72} .settings-dialog .app-info{margin-bottom:16px} .settings-restore-wide{width:100%;box-sizing:border-box;margin-top:2px} .settings-sticky-actions{display:none!important} @media(max-width:390px){ .settings-dialog .settings-main-head{padding-left:10px;padding-right:10px} .settings-dialog .settings-main-head h2{font-size:15px} .settings-head-actions{gap:3px} .settings-head-btn,.settings-head-close{width:31px;height:31px;min-width:31px;border-radius:10px} .settings-sync-strip{padding-left:10px;padding-right:10px} .settings-sync-copy strong{display:none} } /* v2.2.6.183 — larger touch targets + header version + real trash icon */ .settings-head-title{ min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px; } .settings-head-title h2{margin:0} .settings-head-title small{ margin:0!important;font-size:10px!important;line-height:1.2;color:#766f5f!important; font-weight:500;letter-spacing:.1px; } .settings-head-actions{gap:8px} .settings-head-btn,.settings-head-close{ width:40px;height:40px;min-width:40px;border-radius:12px; } .settings-head-btn{font-size:21px} .settings-head-close{font-size:28px!important} .settings-trash-icon{ width:21px;height:21px;display:block;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round; } .settings-head-badge{top:-4px;left:-4px} @media(max-width:390px){ .settings-dialog .settings-main-head{gap:6px} .settings-head-actions{gap:6px} .settings-head-btn,.settings-head-close{width:37px;height:37px;min-width:37px} .settings-head-title h2{font-size:14.5px!important} .settings-head-title small{font-size:10px!important} } /* v2.2.6.184 — inline selectors for auto-lock and backup reminder */ .settings-dialog .inline-select-setting{ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; min-width:0; } .settings-dialog .inline-select-setting>div, .settings-dialog .inline-select-setting>span{ flex:1 1 auto; min-width:0; } .settings-dialog .inline-select-setting>.compact-select{ flex:0 0 auto; width:auto!important; min-width:108px; max-width:46%; margin:0!important; } .settings-dialog .backup-reminder-setting{ padding-top:9px; padding-bottom:9px; } @media(max-width:390px){ .settings-dialog .inline-select-setting{gap:7px!important} .settings-dialog .inline-select-setting>.compact-select{ min-width:98px; max-width:48%; font-size:11px; padding-left:7px; padding-right:7px; } .settings-dialog .inline-select-setting small{ font-size:9px!important; } } /* v2.2.6.186 — payment calendar secondary segmented filters */ .payment-filter-panel{ margin-top:8px!important; padding:7px 8px!important; display:flex; align-items:center; gap:8px; border:1px solid rgba(212,175,55,.10); border-radius:14px; background:rgba(255,255,255,.018); } .payment-filter-panel.hidden{display:none!important} .payment-filter-label{ flex:0 0 auto; font-size:10px; font-weight:800; color:#8d836d; white-space:nowrap; padding-inline:2px; } .payment-segmented-control{ flex:1 1 auto; min-width:0; display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px!important; padding:3px!important; border-radius:11px; background:#0f0f0f; border:1px solid rgba(255,255,255,.045); } .payment-segmented-control .payment-tab{ min-width:0!important; min-height:34px!important; padding:5px 4px!important; border-radius:8px!important; border:0!important; background:transparent!important; box-shadow:none!important; display:flex!important; align-items:center; justify-content:center; gap:4px!important; color:#8f897a!important; font-size:9.5px!important; white-space:nowrap; } .payment-segmented-control .payment-tab.active{ color:#ead784!important; background:rgba(212,175,55,.10)!important; box-shadow:inset 0 0 0 1px rgba(212,175,55,.15)!important; } .payment-segmented-control .payment-filter-icon{ width:14px!important; height:14px!important; flex:0 0 14px!important; opacity:.76; } .payment-segmented-control .payment-filter-icon svg{width:14px!important;height:14px!important} .payment-segmented-control .payment-tab.active .payment-filter-icon{opacity:1} @media(max-width:390px){ .payment-filter-panel{gap:5px;padding:6px!important} .payment-filter-label{font-size:9px} .payment-segmented-control .payment-tab{font-size:10px!important;gap:2px!important;padding-left:2px!important;padding-right:2px!important} .payment-segmented-control .payment-filter-icon{width:12px!important;height:12px!important;flex-basis:12px!important} .payment-segmented-control .payment-filter-icon svg{width:12px!important;height:12px!important} } /* v2.2.6.187 — quick calendar filters: no tab/segment appearance */ .payment-filter-panel{ margin-top:7px!important; padding:4px 3px 5px!important; display:flex; align-items:center; gap:7px; border:0!important; border-radius:0!important; background:transparent!important; } .payment-filter-label{ flex:0 0 auto; padding:0!important; font-size:9.5px!important; font-weight:650!important; color:#716b5e!important; } .payment-segmented-control{ flex:1 1 auto; min-width:0; display:flex!important; align-items:center; justify-content:space-between; gap:2px!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; } .payment-segmented-control .payment-tab{ position:relative; flex:1 1 0; min-width:0!important; min-height:34px!important; padding:4px 2px 7px!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; color:#7f796c!important; font-size:9.5px!important; font-weight:600!important; display:flex!important; align-items:center; justify-content:center; gap:3px!important; } .payment-segmented-control .payment-tab::after{ content:""; position:absolute; right:35%; left:35%; bottom:2px; height:2px; border-radius:2px; background:transparent; } .payment-segmented-control .payment-tab.active{ color:#ead784!important; background:transparent!important; box-shadow:none!important; font-weight:800!important; } .payment-segmented-control .payment-tab.active::after{ background:#d4af37; } .payment-segmented-control .payment-filter-icon{ width:13px!important;height:13px!important;flex:0 0 13px!important; opacity:.68; } .payment-segmented-control .payment-tab.active .payment-filter-icon{opacity:1} .payment-segmented-control .payment-filter-icon svg{width:13px!important;height:13px!important} @media(max-width:390px){ .payment-filter-panel{gap:4px!important} .payment-filter-label{font-size:10px!important} .payment-segmented-control .payment-tab{font-size:10px!important;gap:2px!important} .payment-segmented-control .payment-filter-icon{width:11px!important;height:11px!important;flex-basis:11px!important} .payment-segmented-control .payment-filter-icon svg{width:11px!important;height:11px!important} } /* v2.2.6.188 — larger, clearer payment calendar quick filters */ .payment-filter-panel{ padding-top:6px!important; padding-bottom:7px!important; } .payment-filter-label{ font-size:10.5px!important; color:#958c78!important; } .payment-segmented-control .payment-tab{ min-height:40px!important; padding:5px 3px 8px!important; font-size:11px!important; font-weight:650!important; color:#aaa18d!important; gap:5px!important; } .payment-segmented-control .payment-filter-icon{ width:17px!important; height:17px!important; flex:0 0 17px!important; opacity:.9!important; color:#b9ad91!important; } .payment-segmented-control .payment-filter-icon svg{ width:17px!important; height:17px!important; stroke:currentColor!important; } .payment-segmented-control .payment-tab.active{ color:#f0d77b!important; } .payment-segmented-control .payment-tab.active .payment-filter-icon{ opacity:1!important; color:#e5c966!important; } .payment-segmented-control .payment-tab::after{ right:32%; left:32%; height:2.5px; } @media(max-width:390px){ .payment-filter-label{font-size:9.5px!important} .payment-segmented-control .payment-tab{ min-height:38px!important; font-size:10px!important; gap:3px!important; } .payment-segmented-control .payment-filter-icon{ width:15px!important;height:15px!important;flex-basis:15px!important; } .payment-segmented-control .payment-filter-icon svg{ width:15px!important;height:15px!important; } } /* v2.2.6.189 — shorter quick-filter label, keep row within viewport */ .payment-filter-panel{ width:100%; max-width:100%; box-sizing:border-box; overflow:hidden; } .payment-filter-label{ flex:0 0 auto; white-space:nowrap; } .payment-segmented-control{ min-width:0!important; overflow:hidden; } .payment-segmented-control .payment-tab{ min-width:0!important; } /* v2.2.6.190 — clearer due dates in payment calendar list */ .payment-card.occurrence .payment-title-date b{ font-size:12px!important; line-height:1.35; font-weight:750; letter-spacing:.05px; } @media(max-width:390px){ .payment-card.occurrence .payment-title-date b{ font-size:11.3px!important; } } /* v2.2.6.192 — prominent payment action */ .payment-card.occurrence .payment-paid-btn{ display:flex!important; align-items:center; justify-content:center; gap:6px; min-height:40px; border-radius:11px!important; border:1px solid rgba(212,175,55,.48)!important; background:linear-gradient(180deg,rgba(212,175,55,.19),rgba(212,175,55,.08))!important; color:#f0d77b!important; font-weight:800!important; box-shadow:0 3px 10px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.055)!important; } .payment-card.occurrence .payment-paid-btn:active{ transform:translateY(1px); background:rgba(212,175,55,.13)!important; box-shadow:inset 0 1px 3px rgba(0,0,0,.22)!important; } .payment-paid-icon{ width:19px; height:19px; flex:0 0 19px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(212,175,55,.16); border:1px solid rgba(234,209,115,.38); font-size:12px; line-height:1; font-weight:900; } /* v2.2.6.193 — payment icon as corner badge, more breathing room */ .payment-card.occurrence .payment-paid-btn{ position:relative; overflow:visible!important; min-height:38px; padding:7px 10px!important; gap:0!important; } .payment-card.occurrence .payment-paid-btn .payment-paid-icon{ position:absolute; top:-8px; right:-7px; width:18px; height:18px; min-width:18px; border-radius:50%; background:#19170f; border:1px solid rgba(234,209,115,.62); color:#efd574; box-shadow:0 2px 6px rgba(0,0,0,.35); font-size:11px; z-index:2; } /* v2.2.6.194 — small payment icon above label, fully inside button */ .payment-card.occurrence .payment-paid-btn{ position:relative; overflow:hidden!important; min-height:43px; padding:5px 8px 4px!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:2px!important; } .payment-card.occurrence .payment-paid-btn .payment-paid-icon{ position:static!important; width:13px!important; height:13px!important; min-width:13px!important; flex:0 0 13px!important; margin:0!important; border-radius:50%; background:transparent!important; border:0!important; box-shadow:none!important; color:#e6c965!important; font-size:10px!important; line-height:13px!important; } /* v2.2.6.195 — bank-card payment icon */ .payment-card.occurrence .payment-paid-btn .payment-paid-icon{ width:16px!important; height:13px!important; min-width:16px!important; flex:0 0 13px!important; display:flex!important; align-items:center; justify-content:center; color:#e6c965!important; } .payment-card.occurrence .payment-paid-btn .payment-paid-icon svg{ width:16px; height:13px; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } /* v2.2.6.196 — professional payment confirmation */ .payment-confirm-dialog::backdrop{ background:rgba(0,0,0,.26)!important; -webkit-backdrop-filter:blur(2.5px) saturate(.96)!important; backdrop-filter:blur(2.5px) saturate(.96)!important; } .payment-confirm-card{ padding:18px 17px 15px!important; border-radius:20px!important; border:1px solid rgba(212,175,55,.32)!important; background:linear-gradient(180deg,rgba(29,28,24,.97),rgba(14,14,14,.98))!important; box-shadow:0 14px 38px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.055)!important; } .payment-confirm-icon{ width:38px!important;height:38px!important; margin-bottom:10px!important; border-radius:12px!important; background:rgba(212,175,55,.07)!important; } .payment-confirm-icon svg{ width:21px;height:17px;display:block;fill:none;stroke:currentColor; stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; } .payment-confirm-copy h2{ font-size:18px!important; margin-bottom:5px!important; color:#ead276; } .payment-confirm-copy p{ font-size:12px!important; line-height:1.75!important; color:rgba(235,235,235,.70)!important; } .payment-confirm-copy p strong{color:#eee1b7;font-weight:750} .payment-confirm-meta{ margin-top:12px!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:7px!important; } .payment-confirm-meta span{ padding:9px 10px!important; min-width:0; background:rgba(255,255,255,.025)!important; border-color:rgba(212,175,55,.10)!important; } .payment-confirm-meta .payment-confirm-title-row, .payment-confirm-meta .payment-confirm-recipient-row{ grid-column:1/-1; } .payment-confirm-meta small{ color:#8f856e!important; font-size:9.5px!important; } .payment-confirm-meta strong{ color:#eee6cf; font-size:12.5px!important; overflow-wrap:anywhere; } .payment-confirm-actions{ margin-top:14px!important; gap:8px!important; } .payment-confirm-actions button{ min-height:44px!important; } #paymentConfirmOk:not(.danger-action){ background:linear-gradient(135deg,#8b6c1e,#d4af37)!important; color:#171106!important; border:1px solid rgba(239,210,108,.58)!important; font-weight:850!important; } @media(max-width:390px){ .payment-confirm-dialog{width:min(94vw,410px)!important} .payment-confirm-card{padding:16px 14px 13px!important} } /* v2.2.6.198 — show last backup under last sync */ .settings-sync-times{ display:flex; flex-direction:column; gap:1px; min-width:0; } .settings-sync-times small{ display:block; margin:0!important; font-size:9.3px!important; line-height:1.35; color:#817966!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #settingsLastBackup{ color:#746d5d!important; } /* v2.2.6.199 — clearer sync/backup status lines */ .settings-sync-times{ gap:2px!important; } .settings-sync-times small{ font-size:10.5px!important; line-height:1.45!important; color:#9a917d!important; } #settingsLastBackup{ color:#8c846f!important; } .settings-sync-copy>strong{ font-size:11.5px!important; } /* v2.2.6.200 — auto-sync status only; manual refresh removed */ .settings-sync-strip{ padding-inline:12px!important; } .settings-sync-copy{ width:100%; max-width:100%; min-width:0; } .settings-sync-times{ width:100%; min-width:0; } .settings-sync-times small{ white-space:normal!important; overflow:visible!important; text-overflow:clip!important; } /* v2.2.6.201 — settings header app logo + clearer version */ .settings-head-brand{ display:flex; align-items:center; gap:7px; min-width:0; } .settings-head-logo{ width:25px; height:25px; object-fit:contain; flex:0 0 25px; border-radius:6px; } .settings-head-brand h2{ margin:0!important; } #settingsHeaderVersion{ display:block; margin-top:3px; font-size:10.5px!important; line-height:1.35; color:#9b927f!important; font-weight:600; } /* v2.2.6.202 — larger, stronger settings header logo */ .settings-head-logo{ width:34px!important; height:34px!important; flex:0 0 34px!important; object-fit:contain!important; opacity:1!important; filter:contrast(1.14) saturate(1.12) brightness(1.08); } .settings-head-brand{ gap:8px!important; } /* v2.2.6.203 — stronger settings logo + consistent people action icon */ .settings-head-logo{ width:43px!important; height:43px!important; flex:0 0 43px!important; object-fit:contain!important; opacity:1!important; filter:contrast(1.28) saturate(1.22) brightness(1.16) drop-shadow(0 1px 4px rgba(212,175,55,.18))!important; } .settings-head-brand{ gap:9px!important; } .settings-people-icon{ width:23px!important; height:23px!important; display:block; fill:none; stroke:#d8c477; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; opacity:.96; } .settings-people-btn{ color:#d8c477!important; } /* v2.2.6.204 — secure cold-start shield; App Switcher remains untouched */ .secure-startup-shield{ position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; background:#050505; padding:calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); box-sizing:border-box; } .secure-startup-shield.hidden{display:none!important} .secure-startup-shield img{ width:min(58vw,250px); height:auto; max-height:38vh; object-fit:contain; opacity:1; filter:contrast(1.22) saturate(1.18) brightness(1.12) drop-shadow(0 5px 24px rgba(212,175,55,.19)); } /* v2.3.0 — Custom Fields / virtual Other documents */ .custom-fields-section{margin:10px 0 12px;padding:12px;border:1px solid rgba(212,175,55,.16);border-radius:15px;background:rgba(212,175,55,.025)} .custom-fields-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .custom-fields-head>div{display:flex;flex-direction:column;gap:2px;min-width:0} .custom-fields-head strong{font-size:13px;color:#ead278} .custom-fields-head small{font-size:9.5px;color:#817968;line-height:1.45} .custom-field-add{width:36px;height:36px;flex:0 0 36px;border-radius:11px;border:1px solid rgba(212,175,55,.32);background:rgba(212,175,55,.08);color:#e7cc68;font-size:21px} .custom-fields-list{display:flex;flex-direction:column;gap:6px;margin-top:9px} .custom-fields-empty,.custom-field-row{width:100%;border:1px solid rgba(255,255,255,.065);background:rgba(255,255,255,.025);border-radius:11px;color:#d9d5ca} .custom-fields-empty{padding:10px;font-size:10.5px}.custom-fields-empty b{color:#dfc45f;margin-right:5px} .custom-field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(70px,.8fr) 10px;align-items:center;gap:7px;padding:8px 9px;text-align:right} .custom-field-row span{display:flex;flex-direction:column;min-width:0}.custom-field-row b{font-size:11px}.custom-field-row small{font-size:10px;color:#807866;margin-top:2px}.custom-field-row strong{font-size:10.5px;color:#cfc7b2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.custom-field-row i{color:#b49a47;font-style:normal} .virtual-document-orientation{margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.055);display:flex;align-items:center;justify-content:space-between;gap:8px} .virtual-document-orientation>span{font-size:10px;color:#938a76} .virtual-orientation-options{display:flex;gap:5px}.virtual-orientation-options button{display:flex;align-items:center;gap:5px;padding:6px 8px;border-radius:9px;border:1px solid rgba(255,255,255,.07);background:#121212;color:#8d8677;font-size:9px}.virtual-orientation-options button.active{border-color:rgba(212,175,55,.38);color:#e0c765;background:rgba(212,175,55,.07)} .orientation-mini{display:inline-block;border:1.4px solid currentColor;border-radius:2px}.orientation-mini.landscape{width:13px;height:8px}.orientation-mini.portrait{width:8px;height:13px} .custom-field-dialog{width:min(92vw,430px)}.custom-field-dialog .dialog-body{padding-bottom:16px}.custom-expiry-calendar{display:flex;align-items:center;justify-content:space-between;padding:8px 9px;border:1px solid rgba(255,255,255,.07);border-radius:10px}.custom-expiry-calendar>span{font-size:10px;color:#aaa18d}.custom-expiry-calendar>div{display:flex;gap:4px}.custom-expiry-calendar button{padding:5px 9px;border-radius:8px;border:1px solid rgba(255,255,255,.07);background:#111;color:#8e8778;font-size:9px}.custom-expiry-calendar button.active{color:#e0c765;border-color:rgba(212,175,55,.35);background:rgba(212,175,55,.07)} .custom-field-more{margin-top:4px;border:1px solid rgba(255,255,255,.06);border-radius:11px;padding:8px 10px}.custom-field-more summary{font-size:10px;color:#aaa18e;cursor:pointer}.custom-switch{display:flex!important;align-items:center;gap:8px;margin-top:9px!important;font-size:10px!important}.custom-switch input{width:17px!important;height:17px!important;margin:0!important}.custom-field-actions{grid-template-columns:auto 1fr 1.2fr}.danger-text{color:#d98e88!important} .virtual-document-card{width:100%;height:100%;box-sizing:border-box;padding:11px 12px;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(circle at 15% 10%,rgba(212,175,55,.11),transparent 38%),linear-gradient(145deg,#191814,#0d0d0c 62%,#16140f);border:1px solid rgba(212,175,55,.32);color:#e9e2ce;overflow:hidden} .virtual-doc-top{display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(212,175,55,.12);padding-bottom:7px}.virtual-doc-symbol{width:27px;height:27px;border:1px solid rgba(212,175,55,.34);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#e1c55f;font-size:16px}.virtual-doc-top>div{display:flex;flex-direction:column;min-width:0}.virtual-doc-top b{font-size:12px;color:#ead278;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.virtual-doc-top small{font-size:10px;color:#807968;margin-top:1px} .virtual-doc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 10px;margin:8px 0;min-height:0}.virtual-document-card.portrait .virtual-doc-fields{grid-template-columns:1fr}.virtual-doc-fields>div{min-width:0;display:flex;flex-direction:column}.virtual-doc-fields small{font-size:9.5px;color:#807866}.virtual-doc-fields strong{font-size:9.5px;color:#ddd4bd;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.virtual-doc-empty{grid-column:1/-1} .virtual-doc-foot{display:flex;justify-content:space-between;align-items:center;padding-top:6px;border-top:1px solid rgba(255,255,255,.045);font-size:9px;letter-spacing:.7px;color:#716a5a} .custom-detail-row>span{display:flex;flex-direction:column}.custom-detail-row>span small{font-size:10px;color:#77705f;margin-top:2px}.custom-detail-row.sensitive strong{letter-spacing:2px;color:#b9af96} /* v2.3.2 — Custom View: Iranian vehicle plate */ .iran-plate-editor{display:grid;gap:7px;padding:10px;border:1px solid rgba(212,175,55,.15);border-radius:13px;background:rgba(255,255,255,.018)} .iran-plate-editor-title{font-size:10px;color:#9c927b} .iran-plate-input-shell{direction:ltr;display:grid;grid-template-columns:38px 44px 50px 58px 54px;align-items:stretch;gap:0;min-height:55px;border:2px solid #222;border-radius:8px;overflow:hidden;background:#f3f0e6;color:#111} .iran-plate-blue,.plate-blue{background:#164c9e;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1} .iran-plate-blue b,.plate-blue b{font-size:10px;letter-spacing:.5px}.iran-plate-blue small,.plate-blue small{font-size:9px;margin-top:4px;color:#fff} .iran-plate-input-shell input,.iran-plate-input-shell select{min-width:0!important;width:100%!important;height:100%!important;padding:4px!important;border:0!important;border-left:1px solid rgba(0,0,0,.15)!important;border-radius:0!important;background:#f3f0e6!important;color:#111!important;text-align:center!important;font-size:18px!important;font-weight:800!important;box-shadow:none!important} .iran-plate-input-shell select{appearance:none;-webkit-appearance:none;font-size:19px!important} .iran-plate-region{display:grid;grid-template-rows:18px 1fr;border-left:1px solid rgba(0,0,0,.25);background:#f3f0e6} .iran-plate-region small{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;border-bottom:1px solid rgba(0,0,0,.25);color:#111} .iran-plate-region input{border-left:0!important} .iran-plate-help{font-size:10px;color:#807867} .iran-plate-view{display:inline-grid;grid-template-columns:22px 28px 30px 42px 34px;align-items:stretch;direction:ltr;min-height:34px;border:1.4px solid #252525;border-radius:5px;overflow:hidden;background:#f4f1e7;color:#111;vertical-align:middle;max-width:100%} .iran-plate-view .plate-blue{min-width:22px}.iran-plate-view .plate-blue b{font-size:9px}.iran-plate-view .plate-blue small{font-size:4px;margin-top:2px} .iran-plate-view>.plate-a,.iran-plate-view>.plate-letter,.iran-plate-view>.plate-b{display:flex;align-items:center;justify-content:center;font-size:12px;border-left:1px solid rgba(0,0,0,.16);font-weight:900} .iran-plate-view>.plate-letter{font-size:13px} .iran-plate-view>.plate-region{display:grid;grid-template-rows:12px 1fr;border-left:1px solid rgba(0,0,0,.22)} .iran-plate-view>.plate-region small{display:flex;align-items:center;justify-content:center;font-size:5px;border-bottom:1px solid rgba(0,0,0,.22);color:#111} .iran-plate-view>.plate-region b{display:flex;align-items:center;justify-content:center;font-size:10px} .iran-plate-view.compact{transform:scale(.87);transform-origin:right center} .custom-field-plate-preview{overflow:visible!important;white-space:normal!important} .virtual-doc-plate-field{grid-column:1/-1!important}.virtual-doc-plate-field>strong{overflow:visible!important;white-space:normal!important;margin-top:3px!important} .virtual-doc-plate-field .iran-plate-view{transform:scale(.82);transform-origin:right center} .plate-detail-row>strong{overflow:visible!important} .plate-detail-row .iran-plate-view{min-width:158px} @media(max-width:390px){ .iran-plate-input-shell{grid-template-columns:34px 40px 45px 52px 48px} .iran-plate-input-shell input,.iran-plate-input-shell select{font-size:16px!important} } /* v2.3.3 — Persian plate digits + linked field Custom View */ .linked-field-editor{display:grid;gap:9px;padding:10px;border:1px solid rgba(212,175,55,.15);border-radius:13px;background:rgba(255,255,255,.018)} .linked-field-head{display:flex;flex-direction:column;gap:2px}.linked-field-head strong{font-size:11px;color:#e1c762}.linked-field-head small{font-size:10px;line-height:1.55;color:#817968} .linked-field-editor label{gap:5px!important} .linked-field-preview{padding:9px 10px;border:1px solid rgba(212,175,55,.13);border-radius:10px;background:rgba(212,175,55,.035);display:flex;align-items:center;justify-content:space-between;gap:8px} .linked-field-preview small{font-size:10px;color:#817867}.linked-field-preview strong{font-size:10.5px;color:#e0d6bd;min-width:0;text-align:left} .linked-value{color:inherit}.linked-missing{color:#b77e78!important;font-size:9px!important} .virtual-doc-linked-field>strong{color:#e5d9bb} .linked-detail-row>span small{color:#9d8951!important} .iran-plate-input-shell input{font-family:Tahoma,"Segoe UI",sans-serif!important} /* v2.4.0 — Cross-person links + virtual document designer */ .virtual-designer-entry{margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.055);display:flex;align-items:center;justify-content:space-between;gap:10px} .virtual-designer-entry>div{display:flex;flex-direction:column;gap:2px}.virtual-designer-entry strong{font-size:10.5px;color:#cfc4a6}.virtual-designer-entry small{font-size:10px;color:#776f60} .virtual-designer-entry button{min-height:34px;padding:7px 10px;border:1px solid rgba(212,175,55,.30);border-radius:10px;background:rgba(212,175,55,.07);color:#dfc562;font-size:9.5px;font-weight:750} .virtual-designer-dialog{width:min(96vw,560px)} .virtual-designer-body{display:grid;gap:10px;padding-bottom:15px} .virtual-designer-body .dialog-head>div{min-width:0}.virtual-designer-body .dialog-head small{display:block;margin-top:2px;font-size:10px;color:#817968} .virtual-designer-toolbar{display:flex;justify-content:flex-end;gap:6px}.virtual-designer-toolbar button{min-height:32px;padding:6px 9px;font-size:9px} .virtual-designer-stage-wrap{display:flex;justify-content:center;align-items:center;min-height:270px;padding:10px;border:1px solid rgba(212,175,55,.11);border-radius:14px;background:#090909} .virtual-designer-stage{position:relative;overflow:hidden;background:radial-gradient(circle at 15% 10%,rgba(212,175,55,.12),transparent 37%),linear-gradient(145deg,#191814,#0d0d0c 62%,#16140f);border:1px solid rgba(212,175,55,.38);border-radius:15px;box-shadow:0 14px 35px rgba(0,0,0,.28)} .virtual-designer-stage.landscape{width:min(100%,470px);aspect-ratio:1.62/1}.virtual-designer-stage.portrait{height:min(56dvh,480px);aspect-ratio:.64/1} .designer-card-brand{position:absolute;left:6%;right:6%;top:5%;height:11%;display:flex;align-items:center;gap:6px;border-bottom:1px solid rgba(212,175,55,.10);color:#e4cb6e;pointer-events:none} .designer-card-brand span{font-size:15px}.designer-card-brand b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .designer-card-footer{position:absolute;left:6%;right:6%;bottom:4%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.5px;color:#716a5a;pointer-events:none} .designer-field-layer{position:absolute;inset:0} .designer-field{position:absolute;transform:translate(0,-50%);max-width:43%;min-width:20%;padding:4px 5px;border:1px dashed transparent;border-radius:7px;background:transparent;color:#ddd4bd;text-align:right;touch-action:none;user-select:none;-webkit-user-select:none} .designer-field.selected{border-color:rgba(222,192,91,.65);background:rgba(212,175,55,.07);box-shadow:0 0 0 2px rgba(212,175,55,.035)} .designer-field small{display:block;color:#817866;font-size:9px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .designer-field strong{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .designer-field.size-small strong{font-size:9.5px}.designer-field.size-small small{font-size:9px} .designer-field.size-large strong{font-size:12px}.designer-field.size-large small{font-size:10px} .designer-field .iran-plate-view{transform:scale(.76);transform-origin:right center} .designer-guide{position:absolute;display:none;pointer-events:none;background:rgba(212,175,55,.45);z-index:9}.designer-guide.vertical{top:0;bottom:0;left:50%;width:1px}.designer-guide.horizontal{left:0;right:0;top:50%;height:1px} .virtual-designer-stage.near-v .designer-guide.vertical,.virtual-designer-stage.near-h .designer-guide.horizontal{display:block} .designer-selected-tools{display:grid;grid-template-columns:minmax(70px,1fr) auto;align-items:center;gap:7px;padding:8px 9px;border:1px solid rgba(212,175,55,.12);border-radius:11px;background:rgba(255,255,255,.018)} .designer-selected-tools>span{font-size:10px;color:#e1c762;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .designer-selected-tools>div{display:flex;gap:4px}.designer-selected-tools>div button{padding:5px 7px;border:1px solid rgba(255,255,255,.07);border-radius:7px;background:#111;color:#817a6b;font-size:10px}.designer-selected-tools>div button.active{color:#e2c866;border-color:rgba(212,175,55,.32);background:rgba(212,175,55,.06)} .designer-selected-tools .custom-switch{grid-column:1/-1;margin-top:2px!important} .virtual-document-card.designer-render{position:relative!important} .virtual-document-card.designer-render .virtual-doc-top.compact{position:absolute;left:6%;right:6%;top:5%;height:11%;padding:0 0 5px!important;z-index:2} .virtual-manual-layer{position:absolute;inset:0;z-index:1} .virtual-positioned-field{position:absolute;transform:translate(0,-50%);max-width:43%;min-width:18%;color:#ddd4bd} .virtual-positioned-field small{display:block;font-size:9px;color:#817866;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .virtual-positioned-field strong{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .virtual-positioned-field.size-small strong{font-size:9px}.virtual-positioned-field.size-large strong{font-size:11px}.virtual-positioned-field.size-large small{font-size:9.5px} .virtual-positioned-field .iran-plate-view{transform:scale(.72);transform-origin:right center} .linked-field-editor select{width:100%} @media(max-width:390px){ .virtual-designer-stage-wrap{min-height:235px;padding:7px} .designer-selected-tools{grid-template-columns:1fr}.designer-selected-tools>div{justify-content:flex-start} } /* v2.4.1 — freer designer, optional labels, rotation */ .designer-card-footer{justify-content:flex-start!important} .designer-field{ max-width:none!important; min-width:0!important; width:max-content; overflow:visible!important; transform:translate(0,-50%) rotate(var(--field-rotation,0deg))!important; transform-origin:center center; } .designer-field strong, .designer-field small{ overflow:visible!important; text-overflow:clip!important; max-width:none!important; } .designer-field .iran-plate-view{ transform:none!important; transform-origin:center center!important; } .virtual-positioned-field{ max-width:none!important; min-width:0!important; width:max-content; overflow:visible!important; transform:translate(0,-50%) rotate(var(--field-rotation,0deg))!important; transform-origin:center center; } .virtual-positioned-field strong, .virtual-positioned-field small{ overflow:visible!important; text-overflow:clip!important; max-width:none!important; } .virtual-positioned-field .iran-plate-view{ transform:none!important; transform-origin:center center!important; } .designer-orientation-tools{ display:flex; gap:4px; } .designer-orientation-tools button{ padding:5px 8px; border:1px solid rgba(255,255,255,.07); border-radius:7px; background:#111; color:#817a6b; font-size:10px; } .designer-orientation-tools button.active{ color:#e2c866; border-color:rgba(212,175,55,.32); background:rgba(212,175,55,.06); } .designer-selected-tools{ grid-template-columns:minmax(70px,1fr) auto!important; } .designer-selected-tools .designer-orientation-tools{ grid-column:1/-1; } .virtual-document-card.designer-render .virtual-doc-top.compact small, .virtual-document-card .virtual-doc-top small{ display:none!important; } /* v2.4.2 — iPhone-friendly select-then-drag + alignment tools */ .designer-field{--custom-scale:1} .designer-field.size-small{--custom-scale:.78} .designer-field.size-medium{--custom-scale:1} .designer-field.size-large{--custom-scale:1.28} .designer-field .iran-plate-view{ transform:scale(var(--custom-scale))!important; transform-origin:right center!important; } .virtual-positioned-field{--custom-scale:1} .virtual-positioned-field.size-small{--custom-scale:.78} .virtual-positioned-field.size-medium{--custom-scale:1} .virtual-positioned-field.size-large{--custom-scale:1.28} .virtual-positioned-field .iran-plate-view{ transform:scale(var(--custom-scale))!important; transform-origin:right center!important; } .designer-align-tools{ grid-column:1/-1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; } .designer-align-tools button{ min-height:30px; padding:5px 6px; border:1px solid rgba(255,255,255,.07); border-radius:7px; background:#111; color:#918979; font-size:10px; } .designer-align-tools button:active{ color:#e2c866; border-color:rgba(212,175,55,.34); background:rgba(212,175,55,.08); } .designer-field.selected{ border-style:solid!important; border-width:1px!important; } /* v2.5.75 — true item-edge alignment and movable document title */ .designer-field, .virtual-positioned-field{ --field-scale:1; transform:var(--anchor-transform,translateX(0)) translateY(-50%) rotate(var(--field-rotation,0deg)) scale(var(--field-scale))!important; } .designer-field.size-small,.virtual-positioned-field.size-small{--field-scale:.78!important} .designer-field.size-medium,.virtual-positioned-field.size-medium{--field-scale:1!important} .designer-field.size-large,.virtual-positioned-field.size-large{--field-scale:1.28!important} .designer-field .iran-plate-view, .virtual-positioned-field .iran-plate-view{transform:none!important;transform-origin:center!important} .designer-field.anchor-left,.virtual-positioned-field.anchor-left{transform-origin:left center!important} .designer-field.anchor-center,.virtual-positioned-field.anchor-center{transform-origin:center center!important} .designer-field.anchor-right,.virtual-positioned-field.anchor-right{transform-origin:right center!important} .designer-title-field,.virtual-title-field{color:#e4cb6e!important;font-weight:850;z-index:4} .designer-title-field strong{font-size:11px!important} .virtual-title-field strong{font-size:10px!important;color:#e4cb6e!important} .virtual-document-card.designer-render .virtual-doc-top.compact{display:none!important} /* v2.5.75 — designer/render parity; remove stale fixed brand/footer */ .virtual-designer-stage.landscape{ width:min(100%,470px)!important; aspect-ratio:1.586/1!important; } .virtual-designer-stage.portrait{ height:min(56dvh,480px)!important; aspect-ratio:1/1.586!important; } .designer-card-brand, .designer-card-footer{ display:none!important; } .virtual-document-card.designer-render{ padding:0!important; position:relative!important; overflow:hidden!important; } .virtual-document-card.designer-render .virtual-manual-layer{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; padding:0!important; margin:0!important; } .virtual-document-card.designer-render .virtual-doc-foot, .virtual-document-card.designer-render .virtual-doc-top{ display:none!important; } /* The designer itself uses the same full-card coordinate system. */ .virtual-designer-stage{ padding:0!important; box-sizing:border-box!important; } .designer-field-layer{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; } /* Keep custom views and text blocks from inheriting list/detail widths. */ .designer-field, .virtual-positioned-field{ width:max-content!important; max-width:none!important; min-width:0!important; box-sizing:border-box!important; padding:2px 3px!important; } .designer-field strong, .designer-field small, .virtual-positioned-field strong, .virtual-positioned-field small{ max-width:none!important; overflow:visible!important; text-overflow:clip!important; } /* Iranian plate remains a single scalable block with no extra wrapper width. */ .designer-field .iran-plate-view, .virtual-positioned-field .iran-plate-view{ display:inline-grid!important; width:auto!important; max-width:none!important; margin:0!important; } /* v2.5.75 — dedicated detail view for virtual/custom documents */ .detail-fields.custom-doc-detail{ display:flex!important; flex-direction:column!important; gap:7px!important; width:100%; } .custom-doc-detail .detail-row{ /* legacy rows such as Notes can stay compatible without forcing the bank-card grid */ width:100%; } .custom-doc-detail-row{ width:100%; min-height:54px; display:grid; grid-template-columns:minmax(0,1fr) 34px; align-items:center; gap:8px; padding:9px 10px; border:1px solid rgba(255,255,255,.065); border-radius:13px; background:rgba(255,255,255,.025); direction:rtl; overflow:hidden; } .custom-doc-detail-copy{ min-width:0; display:flex; flex-direction:column; gap:4px; align-items:flex-start; } .custom-doc-detail-label{ width:100%; color:#b8a77e; font-size:9.5px; line-height:1.35; text-align:right; white-space:normal; } .custom-doc-detail-value{ width:100%; min-width:0; color:#f0eadb; font-size:12px; font-weight:780; line-height:1.55; text-align:right; overflow-wrap:anywhere; word-break:normal; unicode-bidi:plaintext; direction:auto; } .custom-doc-detail-value.bidi-safe-value{ unicode-bidi:isolate; direction:ltr; text-align:right; font-variant-numeric:tabular-nums; } .custom-doc-detail-action{ width:34px; min-width:34px; display:flex; align-items:center; justify-content:center; align-self:center; } .custom-doc-detail-action .field-action-trigger{ width:30px!important; height:30px!important; } .custom-doc-detail-action .field-action-drawer{ position:absolute; z-index:12; width:min(250px,72vw); margin-top:4px; } /* Plate gets its own full-width, stable row instead of inheriting text-grid sizing. */ .custom-doc-detail-row.plate-detail-row{ grid-template-columns:minmax(0,1fr) 34px; min-height:66px; } .custom-doc-detail-row.plate-detail-row .custom-doc-detail-copy{ overflow:visible; } .custom-doc-detail-row.plate-detail-row .custom-doc-detail-value{ display:flex; align-items:center; justify-content:flex-start; overflow:visible; } .custom-doc-detail-row.plate-detail-row .iran-plate-view{ transform:none!important; width:auto!important; max-width:100%!important; margin:0!important; } /* Linked values use the same bidi-safe presentation as local values. */ .custom-doc-detail-row.linked-detail-row .linked-value{ display:inline-block; max-width:100%; unicode-bidi:plaintext; } /* Sensitive rows are deliberately quieter. */ .custom-doc-detail-row.sensitive .custom-doc-detail-value{ letter-spacing:2px; color:#c6bda8; } /* Keep the edit action visually separated below the content. */ .detail-dialog .detail-actions{ margin-top:10px!important; } @media(max-width:390px){ .custom-doc-detail-row{ grid-template-columns:minmax(0,1fr) 31px; gap:6px; padding:8px 9px; } .custom-doc-detail-action{ width:31px; min-width:31px; } .custom-doc-detail-action .field-action-trigger{ width:28px!important; height:28px!important; } .custom-doc-detail-label{font-size:9px} .custom-doc-detail-value{font-size:11.5px} } /* v2.5.75 — per-expiry configurable reminder days */ .custom-expiry-reminder{ margin-top:7px; padding:9px 10px; border:1px solid rgba(212,175,55,.13); border-radius:11px; background:rgba(212,175,55,.035); } .custom-expiry-reminder>label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:9.5px;color:#b8a77e} .custom-expiry-days-input{display:flex;align-items:center;gap:5px;direction:rtl} .custom-expiry-days-input input{width:72px!important;min-height:34px;text-align:center;direction:ltr} .custom-expiry-days-input b{font-size:9px;color:#8e8572;white-space:nowrap} .custom-expiry-reminder>small{display:block;margin-top:5px;color:#756e61;font-size:10px;line-height:1.55} .custom-expiry-status{display:block;margin-top:2px;color:#9d8f67;font-size:10px;font-weight:600} /* v2.5.75 — document-expiry Push tests */ .server-push-test{ width:100%; margin-top:7px; } .custom-expiry-test-btn{ width:100%; margin-top:7px; min-height:34px; border:1px solid rgba(212,175,55,.23); border-radius:9px; background:rgba(212,175,55,.06); color:#d9bf63; font-size:9px; font-weight:750; } /* v2.5.75 — make document reminder timing unmistakable */ .custom-expiry-reminder{ display:grid; gap:8px; } .custom-expiry-reminder.hidden{display:none!important} .custom-expiry-reminder-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .custom-expiry-reminder-head strong{ font-size:11px; color:#e2c767; } .custom-expiry-reminder-head small{ font-size:10px; color:#827967; text-align:left; } .custom-expiry-reminder>label{ min-height:40px; padding:6px 7px; border:1px solid rgba(255,255,255,.05); border-radius:9px; background:rgba(255,255,255,.018); } .custom-expiry-status{ color:#c0a95f!important; font-size:10px!important; } /* v2.5.75 — clearer designer alignment controls */ .designer-align-tools button{ min-height:34px; padding:6px 7px; font-size:10px; font-weight:700; line-height:1.2; } /* v2.5.75 — Copy/Share actions in custom-document detail rows */ .custom-doc-detail-row{ position:relative; overflow:visible!important; } .custom-doc-detail-row .custom-doc-detail-action{ position:relative; z-index:3; } .custom-doc-detail-row .field-action-drawer{ top:calc(100% + 5px); left:0; right:auto; margin:0!important; z-index:40!important; } /* v2.5.75 — stable card editor viewport + full internal scrolling on iPhone */ #cardDialog{ position:fixed!important; inset:max(8px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom)) 10px!important; width:auto!important; height:auto!important; max-width:560px!important; max-height:none!important; margin:auto!important; padding:0!important; overflow:hidden!important; overscroll-behavior:contain; border-radius:20px!important; } #cardDialog.card-dialog, #cardDialog[open]{ display:block; } #cardDialog .card-editor-form{ height:100%!important; max-height:none!important; min-height:0!important; overflow-y:auto!important; overflow-x:hidden!important; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; touch-action:pan-y; padding:0 16px calc(18px + env(safe-area-inset-bottom))!important; display:block!important; scroll-padding-top:64px; scroll-padding-bottom:90px; } #cardDialog .dialog-head{ position:sticky!important; top:0!important; z-index:20!important; margin:0 -16px 12px!important; padding:14px 16px 11px!important; background:rgba(17,17,17,.97)!important; border-bottom:1px solid rgba(212,175,55,.12); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } #cardDialog .card-editor-form > :not(.dialog-head){ margin-inline:0; } #cardDialog .dialog-actions{ padding-bottom:max(4px,env(safe-area-inset-bottom)); } @supports(height:100dvh){ #cardDialog{ max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)))!important; } } @media(max-width:600px){ #cardDialog{ left:8px!important; right:8px!important; top:max(6px,env(safe-area-inset-top))!important; bottom:max(6px,env(safe-area-inset-bottom))!important; border-radius:17px!important; } #cardDialog .card-editor-form{ padding-left:14px!important; padding-right:14px!important; } #cardDialog .dialog-head{ margin-left:-14px!important; margin-right:-14px!important; padding-left:14px!important; padding-right:14px!important; } } /* v2.5.75 — restore always-visible Save/Cancel bar in card editor */ #cardDialog[open]{ display:grid!important; grid-template-rows:minmax(0,1fr) auto!important; overflow:hidden!important; } #cardDialog .card-editor-form{ grid-row:1!important; height:auto!important; min-height:0!important; max-height:none!important; overflow-y:auto!important; overflow-x:hidden!important; padding-bottom:24px!important; } #cardDialog .card-form-fixed-actions{ grid-row:2!important; position:relative!important; left:auto!important; right:auto!important; bottom:auto!important; width:100%!important; display:grid!important; visibility:visible; flex-shrink:0; z-index:50!important; padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important; background:rgba(14,14,14,.985)!important; border-top:1px solid rgba(212,175,55,.24)!important; box-shadow:0 -10px 28px rgba(0,0,0,.42)!important; } #cardDialog .card-form-fixed-actions button{ min-height:46px!important; } /* OCR review intentionally hides the main actions while its own actions are active. */ #cardDialog.ocr-review-open .card-form-fixed-actions{ visibility:hidden!important; pointer-events:none!important; } /* v2.5.75 — reminder-window orange state + cleaner notification date line */ .payment-card.occurrence.reminder-window{ border-color:rgba(230,156,61,.62)!important; box-shadow:inset 3px 0 0 rgba(230,156,61,.82)!important; background:linear-gradient(145deg,rgba(230,156,61,.085),rgba(255,255,255,.018))!important; } .payment-card.occurrence.reminder-window .payment-title-date>b, .payment-card.occurrence.reminder-window .payment-copy b, .payment-card.occurrence.reminder-window .payment-today-label{ color:#e9a34d!important; } .payment-status-icon.reminder-window{ color:#f1a64d!important; border-color:rgba(230,156,61,.45)!important; background:rgba(230,156,61,.11)!important; opacity:1!important; } .notification-copy{ min-width:0; } .notification-date-line{ display:flex!important; flex-wrap:wrap; align-items:center; gap:4px 6px; width:100%; margin-top:3px; direction:rtl; text-align:right; line-height:1.55; } .notification-date-line>span{ color:#8f8676; font-size:9px; } .notification-date-line>b{ color:#d4c39a!important; font-size:10px!important; font-weight:700!important; unicode-bidi:isolate; white-space:nowrap; } .notification-date-line>em{ color:#b89555; font-size:9px; font-style:normal; white-space:nowrap; } .notification-message-line{ display:block!important; margin-top:2px; direction:rtl; text-align:right; } /* v2.5.75 — remaining/overdue days in current-month payment list */ .payment-reminder-window-label{ color:#e9a34d!important; font-weight:700; } .payment-overdue-label{ color:#e99387!important; font-weight:700; } /* v2.5.75 — explicit elapsed-days label for overdue current-month payments */ .payment-card.occurrence .payment-overdue-label{ display:block!important; margin-top:2px!important; color:#e99387!important; font-size:10px!important; font-weight:750!important; opacity:1!important; } /* v2.5.75 — force elapsed-days text visible on red overdue cards */ .payment-card.occurrence.overdue .payment-overdue-label, .payment-card.occurrence.late .payment-overdue-label, .payment-card.occurrence:has([data-overdue-days]) .payment-overdue-label{ display:block!important; visibility:visible!important; height:auto!important; max-height:none!important; overflow:visible!important; opacity:1!important; color:#ef8f83!important; font-size:10.5px!important; line-height:1.45!important; font-weight:750!important; white-space:nowrap; } /* v2.5.75 — overdue elapsed days as a dedicated visible row */ .payment-overdue-days-row{ display:block!important; visibility:visible!important; opacity:1!important; width:100%!important; height:auto!important; max-height:none!important; overflow:visible!important; margin-top:3px!important; color:#ef8f83!important; font-size:10.5px!important; line-height:1.5!important; font-weight:800!important; white-space:nowrap!important; direction:rtl!important; text-align:right!important; } .payment-card.occurrence.overdue .payment-overdue-days-row, .payment-card.occurrence.late .payment-overdue-days-row{ display:block!important; } /* v2.5.75 — show recipient/babat for periodic payments in cost analysis */ .debt-periodic-recipient{ display:block!important; margin-top:2px!important; color:#bfae85!important; font-size:10px!important; line-height:1.45!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* v2.5.75 — image-backed custom documents still show their fields */ #detailImages .detail-image-open{ display:block; width:100%; padding:0; border:0; background:transparent; color:inherit; text-align:center; } #detailImages .detail-image-open img{ display:block; width:100%; height:auto; border-radius:12px; } #detailImages .detail-image-open small{ display:block; margin-top:5px; color:#847b6b; font-size:10px; } /* v2.5.75 — selectable Image / Virtual Card mode for all Wallet categories */ .card-display-mode{ display:grid; gap:9px; padding:11px; margin-bottom:10px; border:1px solid rgba(212,175,55,.18); border-radius:13px; background:rgba(212,175,55,.035); } .card-display-mode>div:first-child{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .card-display-mode>div:first-child strong{ color:#e4cb6e; font-size:11px; } .card-display-mode>div:first-child small{ color:#827967; font-size:10px; line-height:1.5; text-align:left; } .card-display-mode-options{ display:grid; grid-template-columns:1fr 1fr; gap:6px; } .card-display-mode-options button{ min-height:38px; border:1px solid rgba(255,255,255,.07); border-radius:10px; background:#111; color:#9f9684; font-size:10px; font-weight:750; } .card-display-mode-options button.active{ color:#efd473; border-color:rgba(212,175,55,.42); background:rgba(212,175,55,.09); } #documentPhotoGrid.display-mode-secondary{ opacity:.72; } #documentPhotoGrid.display-mode-secondary::before{ content:"تصویر ذخیره می‌شود اما نمای اصلی کارت مجازی است"; grid-column:1/-1; display:block; margin-bottom:2px; color:#8c826e; font-size:10px; text-align:center; } /* v2.5.75 — compact document previews; information stays primary */ #detailImages{ display:block!important; width:100%; margin:0 0 10px; } #detailImages.hidden{ display:none!important; } #detailImages .detail-image-strip{ display:grid; gap:8px; align-items:start; justify-content:start; margin-bottom:8px; } #detailImages .detail-image-strip.one-sided{ grid-template-columns:minmax(0,145px); } #detailImages .detail-image-strip.two-sided{ grid-template-columns:repeat(2,minmax(0,132px)); } #detailImages .detail-image-open.detail-image-thumb{ position:relative; display:grid!important; grid-template-rows:auto auto; gap:4px; width:100%!important; max-width:145px!important; padding:5px!important; border:1px solid rgba(212,175,55,.16)!important; border-radius:11px!important; background:rgba(255,255,255,.025)!important; color:inherit; overflow:hidden; text-align:center; } #detailImages .detail-image-open.detail-image-thumb img{ display:block; width:100%!important; height:82px!important; object-fit:cover!important; border-radius:7px!important; margin:0!important; } #detailImages .detail-image-strip.two-sided .detail-image-open.detail-image-thumb img{ height:76px!important; } #detailImages .detail-image-open.detail-image-thumb small{ display:block!important; margin:0!important; color:#8d8370!important; font-size:9.5px!important; line-height:1.35!important; } .detail-image-thumb-label{ position:absolute; z-index:2; top:9px; right:9px; min-width:28px; padding:2px 5px; border-radius:7px; background:rgba(10,10,10,.82); border:1px solid rgba(212,175,55,.18); color:#e0c46d; font-size:9.5px; font-weight:750; line-height:1.3; } #detailImages .detail-pdf-list.compact-media{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:4px; } #detailImages .detail-pdf-list.compact-media .detail-pdf-open{ min-height:54px; padding:7px 8px; border-radius:10px; } /* Detail fields get visual priority immediately after the compact media previews. */ #cardDetailDialog #detailFields{ margin-top:2px!important; } @media(max-width:390px){ #detailImages .detail-image-strip.one-sided{ grid-template-columns:minmax(0,132px); } #detailImages .detail-image-strip.two-sided{ grid-template-columns:repeat(2,minmax(0,118px)); } #detailImages .detail-image-open.detail-image-thumb img{ height:70px!important; } } /* v2.5.75 — shared live Wallet fields in Financial Management */ .payment-extra-fields-section{ display:grid;gap:8px;padding:10px;border:1px solid rgba(212,175,55,.14); border-radius:13px;background:rgba(212,175,55,.025) } .payment-extra-fields-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .payment-extra-fields-head>div{display:grid;gap:2px} .payment-extra-fields-head strong{font-size:11px;color:#e1c66d} .payment-extra-fields-head small{font-size:10px;color:#807767} .payment-extra-fields-list{display:grid;gap:6px} .payment-extra-empty,.payment-extra-edit-row{ width:100%;border:1px solid rgba(255,255,255,.065);border-radius:10px;background:#111;color:inherit;padding:8px 9px;text-align:right } .payment-extra-empty{color:#928a7c;font-size:9px} .payment-extra-edit-row{display:grid;grid-template-columns:minmax(0,1fr) auto 12px;align-items:center;gap:8px} .payment-extra-edit-row span{display:grid;gap:2px;min-width:0}.payment-extra-edit-row b{font-size:10px}.payment-extra-edit-row small{font-size:10px;color:#847b6b} .payment-extra-edit-row>strong{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d7c68c;font-size:9.5px} .payment-extra-linked{display:grid;gap:9px} .payment-extra-display-options{display:grid;grid-template-columns:1fr 1fr;gap:7px;border:1px solid rgba(255,255,255,.07);border-radius:11px;padding:9px} .payment-extra-display-options legend{padding:0 5px;color:#b99f60;font-size:9px} .payment-extra-display-options label{display:flex!important;grid-template-columns:none!important;align-items:center;gap:6px!important;font-size:9px!important;font-weight:600!important} .payment-extra-display-options input{width:17px;height:17px;accent-color:#d4af37} .payment-extra-inline{display:grid;gap:4px;margin-top:4px} .payment-extra-inline-row{display:flex;align-items:center;gap:6px;min-width:0} .payment-extra-inline-row>small{font-size:10px;color:#90856e;white-space:nowrap} .payment-extra-inline-row>strong{display:flex;align-items:center;gap:4px;min-width:0;font-size:9.5px;color:#e0cf9a;font-weight:700} .payment-extra-inline-row .field-action-trigger{width:24px!important;height:24px!important} .payment-extra-inline-row .field-action-drawer{z-index:50} .payment-confirm-extra{grid-column:1/-1!important} .payment-confirm-extra>strong{display:flex!important;align-items:center;gap:5px} .payment-debt-extra{grid-column:1/-1;padding-top:8px;margin-top:8px;border-top:1px solid rgba(212,175,55,.11)} .payment-extra-value{unicode-bidi:plaintext} @media(max-width:390px){.payment-extra-display-options{grid-template-columns:1fr}.payment-extra-edit-row>strong{max-width:105px}} /* v2.5.75 — functional Copy/Share drawers for financial linked fields */ .payment-extra-inline-row, .payment-confirm-extra{ position:relative!important; overflow:visible!important; } .payment-extra-inline-row>strong, .payment-confirm-extra>strong{ position:relative!important; overflow:visible!important; } .payment-extra-inline-row .field-action-wrap, .payment-confirm-extra .field-action-wrap{ position:relative!important; z-index:5; } .payment-extra-inline-row .field-action-drawer, .payment-confirm-extra .field-action-drawer{ position:absolute!important; top:calc(100% + 4px)!important; right:auto!important; left:0!important; z-index:80!important; width:min(240px,72vw)!important; margin:0!important; } .payment-card, .payment-card-main, .payment-occurrence-content, .payment-copy{ overflow:visible!important; } /* v2.5.75 — live linked fields for person information */ .profile-extra-fields-section{ display:grid; gap:8px; margin-top:10px; padding:10px; border:1px solid rgba(212,175,55,.14); border-radius:13px; background:rgba(212,175,55,.025); } .profile-extra-fields-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .profile-extra-fields-head>div{display:grid;gap:2px} .profile-extra-fields-head strong{font-size:11px;color:#e1c66d} .profile-extra-fields-head small{font-size:10px;color:#807767} .profile-extra-fields-list{display:grid;gap:6px} .profile-extra-empty,.profile-extra-edit-row{ width:100%; border:1px solid rgba(255,255,255,.065); border-radius:10px; background:#111; color:inherit; padding:8px 9px; text-align:right; } .profile-extra-empty{color:#928a7c;font-size:9px} .profile-extra-edit-row{ display:grid; grid-template-columns:minmax(0,1fr) auto 12px; align-items:center; gap:8px; } .profile-extra-edit-row span{display:grid;gap:2px;min-width:0} .profile-extra-edit-row b{font-size:10px} .profile-extra-edit-row small{font-size:10px;color:#847b6b} .profile-extra-edit-row>strong{ max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#d7c68c; font-size:9.5px; } .profile-extra-linked{display:grid;gap:9px} .profile-extra-info-item{ position:relative!important; overflow:visible!important; } .profile-extra-info-copy{ display:grid; gap:3px; min-width:0; width:100%; } .profile-extra-info-copy>small{ color:#8f846d; font-size:10px; } .profile-extra-info-copy>strong{ display:flex; align-items:center; gap:5px; min-width:0; color:#e1d0a0; font-size:10.5px; } .profile-extra-info-item .field-action-drawer{ z-index:80!important; } .profile-extra-value{unicode-bidi:plaintext} @media(max-width:390px){ .profile-extra-edit-row>strong{max-width:105px} } /* v2.5.75 — Custom Field stabilization */ .custom-template-row{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin:2px 0 8px } .custom-template-row select,.custom-template-row button{ min-height:36px;border:1px solid rgba(212,175,55,.15);border-radius:9px;background:#111;color:#b9ad8d;font-size:9px } .custom-template-row button{padding:0 10px;color:#dec66e;font-weight:750} .custom-fields-health{display:block;margin-top:3px;color:#e49b61;font-size:10px;font-style:normal} .custom-display-options{ display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:8px;border:1px solid rgba(255,255,255,.06);border-radius:9px } .custom-display-options>strong{grid-column:1/-1;color:#a79568;font-size:10px} .custom-display-options label{display:flex!important;align-items:center;gap:4px!important;font-size:10px!important} .custom-display-options input{width:16px;height:16px;accent-color:#d4af37} .linked-mini-badge{font-style:normal;margin-right:4px;color:#c8aa50;font-size:10px} .broken-link-row{border-color:rgba(226,127,78,.32)!important;background:rgba(226,127,78,.04)!important} .linked-source-chip{ display:inline-flex;align-items:center;gap:3px;min-height:24px;padding:2px 6px;border:1px solid rgba(212,175,55,.18); border-radius:7px;background:rgba(212,175,55,.04);color:#baa052;font-size:9.5px } .linked-source-chip.broken{border-color:rgba(225,117,80,.3);color:#df8a6c} .linked-inline-badge{display:inline-flex;align-items:center;margin-inline-start:3px;color:#b89d52;font-size:10px} .field-action-drawer [data-action-call], .field-action-drawer [data-action-open-url]{ width:100%;display:flex;align-items:center;gap:7px } @media(max-width:390px){.custom-display-options{grid-template-columns:1fr 1fr}} /* v2.5.75 — wrap financial linked fields cleanly on narrow iPhone screens */ .payment-extra-inline-row{ display:grid!important; grid-template-columns:auto minmax(0,1fr)!important; align-items:start!important; column-gap:7px!important; row-gap:3px!important; width:100%!important; min-width:0!important; } .payment-extra-inline-row>small{ grid-column:1; grid-row:1; padding-top:2px; white-space:nowrap; } .payment-extra-inline-row>strong{ grid-column:2; grid-row:1; display:block!important; min-width:0!important; width:100%!important; } .payment-extra-field-content{ display:flex; flex-wrap:wrap; align-items:center; gap:5px 6px; min-width:0; width:100%; } .payment-extra-value{ display:block; min-width:0; max-width:100%; overflow-wrap:anywhere; word-break:break-word; line-height:1.45; } .payment-extra-field-actions{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px; max-width:100%; position:relative; z-index:8; } .payment-extra-field-actions .linked-source-chip{ flex:none; } .payment-extra-inline-row .field-action-drawer{ left:auto!important; right:0!important; top:calc(100% + 5px)!important; z-index:120!important; } .payment-card .payment-actions, .payment-card .payment-pay-action, .payment-card .payment-pay-btn{ position:relative; z-index:2; } /* Template area is now visibly a separate tool. */ .custom-template-block{ display:grid; gap:6px; margin:3px 0 9px; padding:8px; border:1px solid rgba(212,175,55,.11); border-radius:10px; background:rgba(212,175,55,.018); } .custom-template-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; } .custom-template-head strong{ font-size:9.5px; color:#cdb66c; } .custom-template-head small{ font-size:9.5px; color:#7f7665; } @media(max-width:430px){ .payment-extra-inline-row{ grid-template-columns:1fr!important; } .payment-extra-inline-row>small{ grid-column:1!important; grid-row:1!important; } .payment-extra-inline-row>strong{ grid-column:1!important; grid-row:2!important; } .payment-extra-field-content{ align-items:flex-start; } .payment-extra-value{ flex:1 1 100%; width:100%; font-size:10px; } .payment-extra-field-actions{ flex:1 1 100%; justify-content:flex-start; width:100%; } } /* v2.5.75 — keep field actions beside value + visually frame linked values */ .payment-extra-field-content{ display:inline-flex!important; flex-wrap:nowrap!important; align-items:center!important; gap:5px!important; width:auto!important; max-width:100%!important; min-width:0!important; } .payment-extra-value{ display:inline-flex!important; align-items:center!important; gap:4px!important; min-width:0!important; max-width:100%!important; overflow-wrap:anywhere; word-break:break-word; } .payment-extra-field-actions{ display:inline-flex!important; flex-wrap:nowrap!important; align-items:center!important; gap:3px!important; flex:0 0 auto!important; width:auto!important; max-width:none!important; } .payment-extra-field-content.is-linked{ padding:3px 5px!important; border:1px solid rgba(212,175,55,.28)!important; border-radius:8px!important; background:rgba(212,175,55,.045)!important; } .linked-value-chain{ display:inline-block; flex:0 0 auto; color:#c8aa50; font-size:10px; font-style:normal; line-height:1; } .payment-extra-field-actions .field-action-wrap, .payment-extra-field-actions .linked-source-chip{ flex:0 0 auto!important; } .profile-extra-value.is-linked{ display:inline-flex!important; align-items:center!important; gap:4px!important; padding:3px 5px!important; border:1px solid rgba(212,175,55,.28)!important; border-radius:8px!important; background:rgba(212,175,55,.045)!important; } @media(max-width:430px){ .payment-extra-inline-row{ grid-template-columns:auto minmax(0,1fr)!important; } .payment-extra-inline-row>small{ grid-column:1!important; grid-row:1!important; } .payment-extra-inline-row>strong{ grid-column:2!important; grid-row:1!important; } .payment-extra-field-content{ flex-wrap:nowrap!important; width:100%!important; } .payment-extra-value{ flex:1 1 auto!important; width:auto!important; } .payment-extra-field-actions{ flex:0 0 auto!important; width:auto!important; justify-content:flex-start!important; } } /* v2.5.75 — readable linked financial fields; actions below value, inside same field */ .payment-extra-field-content{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:4px!important; width:100%!important; max-width:100%!important; min-width:0!important; } .payment-extra-field-content.is-linked{ padding:5px 6px!important; border:1px solid rgba(212,175,55,.28)!important; border-radius:8px!important; background:rgba(212,175,55,.045)!important; } .payment-extra-value{ display:flex!important; align-items:flex-start!important; gap:4px!important; min-width:0!important; width:100%!important; max-width:100%!important; line-height:1.5!important; overflow-wrap:anywhere!important; word-break:break-word!important; } .payment-extra-field-actions{ display:flex!important; flex-wrap:nowrap!important; align-items:center!important; justify-content:flex-start!important; gap:4px!important; width:100%!important; max-width:100%!important; min-width:0!important; padding-top:1px!important; } .payment-extra-field-actions .field-action-wrap, .payment-extra-field-actions .linked-source-chip{ flex:0 0 auto!important; } .payment-extra-field-actions .field-action-trigger{ width:25px!important; height:25px!important; min-width:25px!important; } .payment-extra-field-actions .linked-source-chip{ min-height:25px!important; padding:2px 6px!important; font-size:9.5px!important; } .payment-extra-inline-row{ display:grid!important; grid-template-columns:auto minmax(0,1fr)!important; align-items:start!important; column-gap:7px!important; row-gap:3px!important; width:100%!important; min-width:0!important; } .payment-extra-inline-row>small{ grid-column:1!important; grid-row:1!important; padding-top:5px!important; } .payment-extra-inline-row>strong{ grid-column:2!important; grid-row:1!important; display:block!important; width:100%!important; min-width:0!important; } .payment-extra-inline-row .field-action-drawer{ top:calc(100% + 4px)!important; right:0!important; left:auto!important; z-index:120!important; } @media(max-width:430px){ .payment-extra-inline-row{ grid-template-columns:1fr!important; } .payment-extra-inline-row>small{ grid-column:1!important; grid-row:1!important; padding-top:0!important; } .payment-extra-inline-row>strong{ grid-column:1!important; grid-row:2!important; } } /* v2.5.75 — no box in payment list; value and actions stay on the same line */ .payment-extra-field-content, .payment-extra-field-content.is-linked{ display:inline-flex!important; flex-wrap:nowrap!important; align-items:center!important; gap:4px!important; width:auto!important; max-width:100%!important; min-width:0!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; } .payment-extra-value{ display:inline-block!important; flex:1 1 auto!important; min-width:0!important; width:auto!important; max-width:100%!important; line-height:1.45!important; overflow-wrap:anywhere!important; } .payment-extra-field-actions{ display:inline-flex!important; flex:0 0 auto!important; flex-wrap:nowrap!important; align-items:center!important; gap:3px!important; width:auto!important; padding:0!important; } .payment-extra-field-actions .field-action-trigger{ width:24px!important; height:24px!important; min-width:24px!important; } .payment-extra-field-actions .linked-source-chip{ min-height:24px!important; padding:2px 5px!important; } .linked-value-chain{ margin-inline-end:3px; } /* A source reached from a link is highlighted on its main Wallet card. */ .wallet-card.linked-source-focus{ position:relative; outline:2px solid rgba(224,190,79,.88)!important; outline-offset:3px!important; box-shadow:0 0 0 5px rgba(212,175,55,.09),0 12px 34px rgba(0,0,0,.38)!important; animation:linkedSourcePulse 1.15s ease-in-out 2; } .linked-source-field-badge{ position:absolute; z-index:35; top:8px; left:8px; max-width:calc(100% - 16px); padding:5px 8px; border:1px solid rgba(212,175,55,.5); border-radius:9px; background:rgba(13,13,13,.94); color:#ead276; font-size:10px; font-weight:750; line-height:1.4; box-shadow:0 6px 18px rgba(0,0,0,.35); pointer-events:none; } @keyframes linkedSourcePulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.012)} } @media(max-width:430px){ .payment-extra-inline-row{ grid-template-columns:auto minmax(0,1fr)!important; } .payment-extra-inline-row>small{ grid-column:1!important; grid-row:1!important; padding-top:3px!important; } .payment-extra-inline-row>strong{ grid-column:2!important; grid-row:1!important; } .payment-extra-field-content{ width:100%!important; } } .identity-profile-body.linked-profile-source-focus, #identityProfileBody.linked-profile-source-focus{ outline:2px solid rgba(224,190,79,.78); outline-offset:4px; border-radius:12px; animation:linkedSourcePulse 1.15s ease-in-out 2; } /* v2.5.75 — source preview popup keeps the user in context */ .linked-source-preview-dialog{ max-width:430px; } .linked-source-preview-body{ display:grid; gap:10px; padding:2px 0 6px; } .linked-source-preview-path, .linked-source-preview-value{ display:grid; gap:4px; padding:10px; border:1px solid rgba(212,175,55,.13); border-radius:11px; background:rgba(255,255,255,.018); } .linked-source-preview-path small, .linked-source-preview-value small{ color:#8c8169; font-size:10px; } .linked-source-preview-path strong{ color:#cdbb87; font-size:9.5px; line-height:1.75; font-weight:700; } .linked-source-preview-path i{ color:#8c7b4b; font-style:normal; padding:0 2px; } .linked-source-preview-value strong{ color:#ead17a; font-size:11px; line-height:1.65; overflow-wrap:anywhere; } .linked-source-preview-value.broken{ border-color:rgba(224,116,81,.26); } .linked-source-preview-value.broken strong{ color:#e29277; } /* v2.5.75 — stable bidirectional rendering for numeric/linked values */ .bidi-isolate-value{ unicode-bidi:isolate!important; direction:inherit; display:inline-block; max-width:100%; } .bidi-isolate-value.force-ltr{ direction:ltr!important; unicode-bidi:isolate!important; text-align:left!important; font-variant-numeric:tabular-nums; } .linked-source-popup-value.force-ltr{ font-size:11px; letter-spacing:.15px; } .payment-extra-value .bidi-isolate-value.force-ltr, .profile-extra-value .bidi-isolate-value.force-ltr, .linked-field-preview .bidi-isolate-value.force-ltr{ white-space:nowrap; } /* v2.5.75 — financial commitments list: long linked values go below their label */ .payment-extra-inline.reminder .payment-extra-inline-row{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:3px!important; align-items:start!important; width:100%!important; min-width:0!important; } .payment-extra-inline.reminder .payment-extra-inline-row>small{ grid-column:1!important; grid-row:1!important; display:block!important; width:100%!important; padding:0!important; margin:0!important; white-space:normal!important; line-height:1.35!important; } .payment-extra-inline.reminder .payment-extra-inline-row>strong{ grid-column:1!important; grid-row:2!important; display:block!important; width:100%!important; min-width:0!important; margin:0!important; } .payment-extra-inline.reminder .payment-extra-field-content{ display:inline-flex!important; flex-wrap:nowrap!important; align-items:center!important; gap:4px!important; width:100%!important; max-width:100%!important; min-width:0!important; } .payment-extra-inline.reminder .payment-extra-value{ display:block!important; flex:1 1 auto!important; min-width:0!important; max-width:100%!important; overflow-wrap:anywhere!important; word-break:break-word!important; } .payment-extra-inline.reminder .payment-extra-field-actions{ display:inline-flex!important; flex:0 0 auto!important; flex-wrap:nowrap!important; align-items:center!important; gap:3px!important; width:auto!important; } .payment-extra-inline.reminder .field-action-trigger{ width:24px!important; height:24px!important; min-width:24px!important; } .payment-extra-inline.reminder .linked-source-chip{ min-height:24px!important; flex:0 0 auto!important; } /* v2.5.75 — linked source opens directly in detail view and highlights the exact field */ .detail-row.linked-detail-source-focus, .custom-doc-detail-row.linked-detail-source-focus, .identity-info-item.linked-detail-source-focus{ position:relative!important; z-index:3; border-color:rgba(224,190,79,.72)!important; outline:2px solid rgba(224,190,79,.42)!important; outline-offset:2px; background:rgba(212,175,55,.075)!important; box-shadow:0 7px 20px rgba(0,0,0,.24)!important; animation:linkedDetailPulse 1.05s ease-in-out 2; } .linked-detail-focus-label{ position:absolute; top:-8px; left:8px; z-index:6; padding:2px 6px; border:1px solid rgba(212,175,55,.42); border-radius:7px; background:#111; color:#e4c864; font-size:9px; font-weight:800; pointer-events:none; } @keyframes linkedDetailPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.008)} } #linkedSourcePreviewDialog{display:none!important} .wallet-card.linked-source-focus{outline:none!important;box-shadow:inherit!important;animation:none!important} .linked-source-field-badge{display:none!important} /* v2.5.75 — source field stays highlighted until the detail view is closed */ .detail-row.linked-detail-source-focus, .custom-doc-detail-row.linked-detail-source-focus, .identity-info-item.linked-detail-source-focus{ animation:none!important; outline:2px solid rgba(224,190,79,.52)!important; border-color:rgba(224,190,79,.78)!important; background:rgba(212,175,55,.085)!important; box-shadow:0 7px 20px rgba(0,0,0,.24)!important; } .linked-detail-focus-label{ opacity:1!important; visibility:visible!important; } /* v2.5.75 — reusable virtual-card templates */ .virtual-designer-entry-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px} .virtual-designer-entry-actions button{min-height:34px} .template-settings .template-manage-btn{width:100%} .template-save-summary{display:flex;justify-content:space-between;gap:10px;padding:9px 10px;border:1px solid rgba(212,175,55,.13);border-radius:10px;background:rgba(212,175,55,.025)} .template-save-summary strong{font-size:9.5px;color:#d8c078} .template-save-summary span{font-size:10px;color:#8c826f} .template-privacy-note{display:block;color:#8d846f;font-size:10px;line-height:1.7} .template-manager-intro{padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.025);color:#8e8574;font-size:10px;line-height:1.6} .template-manager-list{display:grid;gap:8px;margin-top:9px} .template-manager-row{display:grid;gap:8px;padding:10px;border:1px solid rgba(212,175,55,.12);border-radius:12px;background:#111} .template-manager-row.builtin{background:rgba(255,255,255,.018)} .template-manager-copy{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 7px;align-items:center} .template-manager-copy .template-kind{grid-row:1/3;align-self:center;padding:3px 6px;border-radius:7px;background:rgba(212,175,55,.07);color:#bda55c;font-size:9px} .template-manager-copy strong{font-size:10.5px} .template-manager-copy small{font-size:10px;color:#807767} .template-manager-actions{display:flex;flex-wrap:wrap;gap:5px} .template-manager-actions button{min-height:30px;padding:0 9px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:#151515;color:#c5b88d;font-size:10px} .template-manager-actions button.danger{color:#df8b78} .template-edit-fields-head{display:grid;gap:2px;padding-top:3px} .template-edit-fields-head strong{font-size:10px;color:#d5bd70} .template-edit-fields-head small{font-size:10px;color:#817867} .template-edit-fields{display:grid;gap:6px} .template-edit-field-row{display:grid;grid-template-columns:minmax(0,1fr) auto 30px;gap:6px;align-items:center} .template-edit-field-row input{min-width:0} .template-edit-field-row small{color:#8e846e;font-size:9.5px} .template-edit-field-row button{width:30px;height:30px;border:1px solid rgba(220,100,80,.16);border-radius:8px;background:rgba(220,100,80,.04);color:#d88976} .template-layout-note{display:grid;gap:3px;padding:9px;border:1px solid rgba(212,175,55,.1);border-radius:10px} .template-layout-note strong{font-size:9px;color:#cbb268} .template-layout-note span{font-size:10px;color:#cfc29a} .template-layout-note small{font-size:9.5px;color:#807766;line-height:1.55} /* v2.5.75 — Template Manager in Settings header + safe template row actions */ .settings-template-btn .settings-template-icon{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .template-manager-row{ position:relative; cursor:pointer; touch-action:manipulation; } .template-manager-row.selected{ border-color:rgba(212,175,55,.34)!important; background:rgba(212,175,55,.045)!important; } .template-manager-actions{ position:relative!important; z-index:3!important; } .template-manager-actions button{ position:relative!important; z-index:4!important; pointer-events:auto!important; touch-action:manipulation!important; } .template-manager-copy{ pointer-events:none; } .settings-head-actions{ gap:4px!important; } @media(max-width:390px){ .settings-head-actions .settings-head-btn{ width:32px!important; height:32px!important; min-width:32px!important; } .settings-template-btn .settings-template-icon{ width:18px; height:18px; } } /* v2.5.75 — templates are directly editable; field structure is not fixed */ .template-manager-row{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:center!important; gap:8px!important; } .template-manager-copy{ pointer-events:auto!important; } .template-row-chevron{ color:#9a8956; font-size:20px; line-height:1; } .template-edit-fields-head{ display:flex!important; align-items:center; justify-content:space-between; gap:10px; } .template-edit-fields-head>span{ display:grid; gap:2px; } .template-edit-field-row{ width:100%; display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:center!important; gap:8px!important; padding:9px 10px!important; border:1px solid rgba(255,255,255,.065)!important; border-radius:10px!important; background:#111!important; color:inherit!important; text-align:right!important; } .template-edit-field-row>span{ display:grid; gap:3px; min-width:0; } .template-edit-field-row strong{ font-size:10px; } .template-edit-field-row small{ color:#8b816d; font-size:10px; } .template-edit-field-row>i{ color:#9e8b54; font-style:normal; font-size:18px; } .template-fields-empty{ width:100%; min-height:40px; border:1px dashed rgba(212,175,55,.18); border-radius:10px; background:rgba(212,175,55,.018); color:#aa9864; font-size:9px; } .template-field-expiry-options{ display:grid; } .template-edit-actions{ flex-wrap:wrap; } /* v2.5.75 — complete document template: fields + virtual-card designer + preview */ .template-layout-note{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:center!important; gap:10px!important; } .template-layout-note-copy{ display:grid; gap:3px; min-width:0; } .template-layout-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; } .template-layout-actions button{ min-height:34px; padding-inline:10px; } .template-preview-stage{ display:flex; align-items:center; justify-content:center; width:100%; min-height:260px; padding:18px 8px; overflow:auto; } .template-preview-stage .template-preview-card{ position:relative; width:min(100%,360px); min-width:280px; } .template-preview-stage.portrait .template-preview-card{ width:min(82%,285px); } .template-preview-card .virtual-positioned-field{ pointer-events:none; } .virtual-designer-dialog.template-designer-active .virtual-designer-stage{ box-shadow:0 0 0 1px rgba(212,175,55,.18),0 18px 45px rgba(0,0,0,.35); } @media(max-width:430px){ .template-layout-note{ grid-template-columns:1fr!important; } .template-layout-actions{ justify-content:stretch; } .template-layout-actions button{ flex:1 1 0; } } /* v2.5.75 — simplified, single-level Template Editor */ .template-edit-body{ gap:12px!important; } .template-edit-head{ padding-bottom:4px; } .template-edit-head>div{ display:grid; gap:2px; min-width:0; } .template-edit-head h2{ max-width:250px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .template-edit-head small{ color:#7e7566; font-size:9.5px; } .template-edit-meta{ display:grid; grid-template-columns:minmax(0,1fr) 110px; gap:8px; } .template-design-preview-card{ display:grid; gap:8px; width:100%; padding:9px!important; border:1px solid rgba(212,175,55,.14)!important; border-radius:13px!important; background:rgba(212,175,55,.018)!important; color:inherit!important; text-align:right!important; } .template-design-preview-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .template-design-preview-head>span{ display:grid; gap:2px; } .template-design-preview-head strong{ font-size:10px; color:#d6bd70; } .template-design-preview-head small{ font-size:9.5px; color:#817865; } .template-design-preview-head>i{ font-size:22px; color:#9e8950; font-style:normal; } .template-inline-preview{ display:flex; align-items:center; justify-content:center; min-height:150px; padding:8px; overflow:hidden; border-radius:10px; background:#0c0c0c; } .template-inline-preview .template-preview-card{ position:relative; width:min(100%,310px)!important; transform:scale(.92); transform-origin:center; pointer-events:none; } .template-inline-preview.portrait .template-preview-card{ width:min(75%,230px)!important; } .template-edit-more{ border-top:1px solid rgba(255,255,255,.055); padding-top:5px; } .template-edit-more summary{ color:#837968; font-size:10px; cursor:pointer; } .template-edit-more>div{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; } .template-edit-savebar{ position:sticky; bottom:-1px; z-index:8; padding-top:8px; background:linear-gradient(to top,#0c0c0c 74%,rgba(12,12,12,0)); } .template-edit-savebar .primary{ width:100%; min-height:42px; } .virtual-designer-savebar{ position:sticky; bottom:-1px; z-index:8; padding-top:8px; background:linear-gradient(to top,#0c0c0c 74%,rgba(12,12,12,0)); } .virtual-designer-savebar .primary{ width:100%; } @media(max-width:390px){ .template-edit-meta{ grid-template-columns:minmax(0,1fr) 92px; } .template-inline-preview{ min-height:135px; } } /* v2.5.75 — Template/Custom Field stabilization */ .template-picker-preview{display:grid;gap:6px;margin-top:7px;padding:7px;border:1px solid rgba(212,175,55,.12);border-radius:10px;background:rgba(212,175,55,.018)} .template-picker-preview-head{display:flex;justify-content:space-between;gap:8px} .template-picker-preview-head span{display:grid;gap:2px} .template-picker-preview-head strong{font-size:9.5px;color:#d1b96d} .template-picker-preview-head small{font-size:9.5px;color:#827967} .template-picker-mini{display:flex;align-items:center;justify-content:center;min-height:95px;overflow:hidden;border-radius:8px;background:#0c0c0c} .template-picker-mini .template-preview-card{position:relative;width:min(100%,250px)!important;transform:scale(.74);transform-origin:center;pointer-events:none} .template-linked-placeholder-note{padding:8px;border:1px solid rgba(212,175,55,.12);border-radius:9px;color:#9a8d70;background:rgba(212,175,55,.025);font-size:10px;line-height:1.65} .template-field-required{margin-top:2px} .template-field-order{display:inline-flex;align-items:center;gap:3px} .template-field-order button{width:25px;height:25px;padding:0;border:1px solid rgba(255,255,255,.06);border-radius:7px;background:#151515;color:#b39d60;font-size:11px} .template-field-order>i{margin-inline-start:2px} /* v2.5.75 — cleaner template field list + stable scaled template previews */ .template-edit-field-row{ grid-template-columns:minmax(0,1fr) auto!important; } .template-edit-field-row>i{ color:#9e8b54; font-style:normal; font-size:18px; line-height:1; } .template-field-order{ display:none!important; } .template-picker-mini, .template-inline-preview{ position:relative!important; overflow:hidden!important; display:flex!important; align-items:center!important; justify-content:center!important; } .template-preview-frame{ position:relative; flex:0 0 auto; transform-origin:center center; } .template-preview-frame.landscape{ width:360px; height:225px; } .template-preview-frame.portrait{ width:225px; height:360px; } .template-preview-frame .template-preview-card{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; min-width:0!important; max-width:none!important; transform:none!important; margin:0!important; } .template-picker-mini .template-preview-frame.landscape{ transform:scale(.58); } .template-picker-mini .template-preview-frame.portrait{ transform:scale(.42); } .template-inline-preview .template-preview-frame.landscape{ transform:scale(.78); } .template-inline-preview .template-preview-frame.portrait{ transform:scale(.56); } .template-picker-mini{ height:138px!important; min-height:138px!important; } .template-inline-preview{ height:205px!important; min-height:205px!important; } .template-preview-card .virtual-manual-layer{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; } @media(max-width:390px){ .template-inline-preview{ height:180px!important; min-height:180px!important; } .template-inline-preview .template-preview-frame.landscape{ transform:scale(.67); } .template-inline-preview .template-preview-frame.portrait{ transform:scale(.49); } } .template-picker-mini .template-preview-card, .template-inline-preview .template-preview-card{ transform:none!important; width:100%!important; } /* v2.5.75 — drag handle for template field ordering */ .template-edit-field-row-wrap{ display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:6px; width:100%; transition:transform .14s ease,opacity .14s ease,background .14s ease; } .template-edit-field-row-wrap.dragging{ opacity:.82; transform:scale(.992); background:rgba(212,175,55,.035); border-radius:10px; } .template-field-drag-handle{ width:34px; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.06); border-radius:9px; background:#121212; color:#a9955b; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; } .template-field-drag-handle:active{ cursor:grabbing; border-color:rgba(212,175,55,.28); background:rgba(212,175,55,.055); } .template-field-drag-handle span{ font-size:16px; line-height:1; transform:rotate(90deg); letter-spacing:-3px; } .template-edit-field-row{ width:100%!important; } /* v2.5.75 — drag starts only after intentional vertical movement */ .template-field-drag-handle{ touch-action:none; -webkit-tap-highlight-color:transparent; } .template-field-drag-handle:not(:active){ transform:none; } /* v2.5.75 — template confirmations use Wallet themed dialog */ #notificationDeleteConfirmDialog .dialog-body{ direction:rtl; } #notificationDeleteConfirmDialog #notificationDeleteConfirmMessage{ line-height:1.8; } /* v2.5.75 — final Template/Custom Field structural stabilization */ .template-picker-preview-head small{line-height:1.55} .template-inline-preview .template-preview-card .virtual-positioned-field, .template-picker-mini .template-preview-card .virtual-positioned-field{max-width:88%} /* v2.5.75 — global edit/dialog scrolling: header and close always accessible */ dialog{ overflow:hidden!important; max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px)!important; } dialog > .dialog-body, dialog > form, dialog .modal-body, dialog .sheet-body, dialog .edit-body{ overscroll-behavior:contain; } /* Dialogs whose form/body is the scrolling surface */ dialog > form{ max-height:inherit; } /* Common sticky top bars inside every dialog/edit screen */ dialog .dialog-head, dialog .dialog-header, dialog .modal-head, dialog .modal-header, dialog .sheet-head, dialog .sheet-header, dialog .editor-head, dialog .editor-header{ position:sticky!important; top:0!important; z-index:80!important; flex:0 0 auto!important; background:linear-gradient(180deg,#111 0%,#101010 88%,rgba(16,16,16,.96) 100%)!important; padding-top:max(10px,env(safe-area-inset-top))!important; } /* Close / cancel controls must remain tappable above scrolling content */ dialog [data-close], dialog [data-dialog-close], dialog [data-template-edit-close], dialog .dialog-close, dialog .modal-close, dialog .sheet-close, dialog .close-btn{ position:relative; z-index:90; } /* Main card/document editor: content starts below its fixed/sticky heading */ #cardDialog{ padding-top:0!important; } #cardDialog #cardForm{ overflow-y:auto!important; overflow-x:hidden!important; max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 18px)!important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } #cardDialog #cardForm > .dialog-head, #cardDialog #cardForm > .dialog-header{ position:sticky!important; top:0!important; z-index:85!important; } /* Template editor / field editor */ #templateEditDialog, #templateFieldDialog, #customFieldDialog{ overflow:hidden!important; } #templateEditDialog > form, #templateFieldDialog > form, #customFieldDialog > form{ overflow-y:auto!important; overflow-x:hidden!important; max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 14px)!important; -webkit-overflow-scrolling:touch; } /* Ensure a focused field is not hidden behind the sticky header */ dialog input, dialog select, dialog textarea, dialog button{ scroll-margin-top:82px; scroll-margin-bottom:22px; } @media(max-width:600px){ dialog{ margin-top:max(6px,env(safe-area-inset-top))!important; margin-bottom:max(6px,env(safe-area-inset-bottom))!important; } } /* v2.5.75 — hide scrolling content completely behind sticky edit headers */ dialog{ background:#0f0f0f!important; isolation:isolate!important; } dialog > .dialog-body, dialog > form, dialog .modal-body, dialog .sheet-body, dialog .edit-body{ position:relative!important; background:#0f0f0f!important; } /* Header is a fully opaque visual layer; content must never be visible through/above it. */ dialog .dialog-head, dialog .dialog-header, dialog .modal-head, dialog .modal-header, dialog .sheet-head, dialog .sheet-header, dialog .editor-head, dialog .editor-header{ position:sticky!important; top:0!important; z-index:100!important; background:#111!important; background-image:none!important; isolation:isolate!important; overflow:visible!important; box-shadow:0 1px 0 rgba(212,175,55,.07),0 8px 14px rgba(15,15,15,.98)!important; } /* Opaque cap above the sticky header prevents iOS rubber-band/scroll content from peeking through the top safe-area. */ dialog .dialog-head::before, dialog .dialog-header::before, dialog .modal-head::before, dialog .modal-header::before, dialog .sheet-head::before, dialog .sheet-header::before, dialog .editor-head::before, dialog .editor-header::before{ content:""; position:absolute; left:-24px; right:-24px; bottom:100%; height:calc(env(safe-area-inset-top) + 48px); background:#111; z-index:-1; pointer-events:none; } /* A short opaque curtain below the header makes the scroll begin visually under the header instead of appearing to pass behind it. */ dialog .dialog-head::after, dialog .dialog-header::after, dialog .modal-head::after, dialog .modal-header::after, dialog .sheet-head::after, dialog .sheet-header::after, dialog .editor-head::after, dialog .editor-header::after{ content:""; position:absolute; left:-20px; right:-20px; top:100%; height:8px; background:linear-gradient(to bottom,#111 0%,rgba(17,17,17,.98) 55%,rgba(17,17,17,0) 100%); pointer-events:none; } /* Avoid iOS overscroll revealing content above the sticky header. */ #cardDialog #cardForm, #templateEditDialog > form, #templateFieldDialog > form, #customFieldDialog > form, dialog > .dialog-body{ overscroll-behavior-y:none!important; -webkit-overflow-scrolling:touch; } /* Keep the X visually on the header plane. */ dialog .close-btn, dialog [data-close], dialog [data-template-edit-close]{ position:relative!important; z-index:110!important; } /* v2.5.75 — commercial, minimal feature overview from version tap */ .settings-version-link{ display:inline-flex; align-items:center; width:max-content; padding:0; border:0; background:transparent; color:#8d836e; font:inherit; font-size:10px; cursor:pointer; } .settings-version-link::after{ content:"›"; margin-inline-start:4px; color:#b89c50; font-size:11px; } .app-features-dialog{ width:min(92vw,480px)!important; max-width:480px!important; } .app-features-body{ gap:12px!important; padding-bottom:14px!important; } .app-features-head{ align-items:center!important; } .app-features-brand{ display:flex; align-items:center; gap:9px; } .app-features-brand img{ width:34px; height:34px; border-radius:10px; object-fit:cover; } .app-features-brand>span{ display:grid; gap:1px; } .app-features-brand h2{ margin:0; font-size:14px; letter-spacing:.15px; } .app-features-brand small{ color:#8e846e; font-size:10px; } .app-features-hero{ display:grid; gap:5px; padding:12px 11px; border:1px solid rgba(212,175,55,.13); border-radius:13px; background:linear-gradient(135deg,rgba(212,175,55,.07),rgba(212,175,55,.015)); } .app-features-hero strong{ color:#e6cc76; font-size:11px; line-height:1.65; } .app-features-hero p{ margin:0; color:#958b77; font-size:10px; line-height:1.7; } .app-feature-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; } .app-feature-grid article{ display:flex; align-items:flex-start; gap:8px; min-height:76px; padding:9px; border:1px solid rgba(255,255,255,.055); border-radius:11px; background:#111; } .app-feature-icon{ display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border:1px solid rgba(212,175,55,.16); border-radius:9px; color:#d2b65d; background:rgba(212,175,55,.035); font-size:13px; } .app-feature-grid article>div{ display:grid; gap:3px; min-width:0; } .app-feature-grid strong{ color:#d6c79e; font-size:9px; line-height:1.4; } .app-feature-grid small{ color:#81796a; font-size:9.5px; line-height:1.65; } .app-features-footer{ display:flex; justify-content:center; align-items:center; gap:7px; padding-top:2px; color:#817762; font-size:9.5px; direction:ltr; } .app-features-footer i{ color:#665a3b; font-style:normal; } @media(max-width:390px){ .app-feature-grid{grid-template-columns:1fr} .app-feature-grid article{min-height:64px} } /* v2.5.75 — contextual help without visual clutter */ .context-help-btn{ display:inline-grid!important; place-items:center!important; width:18px!important; height:18px!important; min-width:18px!important; padding:0!important; margin-inline-start:4px!important; border:1px solid rgba(212,175,55,.18)!important; border-radius:50%!important; background:transparent!important; color:#b59c55!important; font-size:9px!important; font-weight:800!important; line-height:1!important; vertical-align:middle!important; } .context-help-btn:active{background:rgba(212,175,55,.08)!important} .payment-section-row{position:relative} .payment-help-btn{ position:absolute!important; top:-2px; left:2px; z-index:5; opacity:.76; } .app-feature-grid .app-feature-card{ position:relative; display:flex; align-items:flex-start; gap:8px; min-height:76px; padding:9px 26px 9px 9px; border:1px solid rgba(255,255,255,.055); border-radius:11px; background:#111; color:inherit; text-align:right; } .app-feature-grid .app-feature-card:active{ border-color:rgba(212,175,55,.18); background:rgba(212,175,55,.025); } .app-feature-copy{display:grid;gap:3px;min-width:0} .app-feature-copy strong{color:#d6c79e;font-size:9px;line-height:1.4} .app-feature-copy small{color:#81796a;font-size:9.5px;line-height:1.65} .app-feature-help-mark{ position:absolute; top:7px; left:7px; display:grid; place-items:center; width:15px; height:15px; border:1px solid rgba(212,175,55,.13); border-radius:50%; color:#9f8b50; font-style:normal; font-size:9px; } .context-help-dialog{width:min(90vw,430px)!important;max-width:430px!important} .context-help-body{gap:11px!important} .context-help-head>div{display:grid;gap:2px} .context-help-head h2{margin:0;font-size:13px} .context-help-head small{color:#8b816d;font-size:10px} .context-help-content{display:grid;gap:10px} .context-help-intro{ padding:10px; border:1px solid rgba(212,175,55,.12); border-radius:11px; background:rgba(212,175,55,.025); color:#cbbd98; font-size:9px; line-height:1.8; } .context-help-steps{display:grid;gap:7px} .context-help-steps>div{ display:grid; grid-template-columns:24px minmax(0,1fr); gap:7px; align-items:start; } .context-help-steps i{ display:grid; place-items:center; width:24px;height:24px; border-radius:8px; background:#151515; color:#c4a95b; font-size:10px; font-style:normal; } .context-help-steps span{ color:#9e9480; font-size:10px; line-height:1.75; padding-top:2px; } .context-help-setting{ display:grid; gap:4px; padding:9px 10px; border-top:1px solid rgba(255,255,255,.055); } .context-help-setting strong{color:#cdb872;font-size:10px} .context-help-setting span{color:#887f6d;font-size:10px;line-height:1.7} @media(max-width:390px){ .app-feature-grid .app-feature-card{min-height:64px} } /* v2.5.75 — Smart Global Search */ .smart-search-panel{ position:fixed; inset:0; z-index:180; display:block; overflow-y:auto; overflow-x:hidden; padding:calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 24px); background:rgba(7,7,7,.985); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); overscroll-behavior:contain; } .smart-search-panel.hidden{display:none!important} .smart-search-sticky{ position:sticky; top:calc(-1 * (env(safe-area-inset-top) + 10px)); z-index:8; padding:calc(env(safe-area-inset-top) + 10px) 0 9px; background:linear-gradient(to bottom,#070707 82%,rgba(7,7,7,.96)); } .smart-search-field{ display:grid!important; grid-template-columns:22px minmax(0,1fr) 26px auto!important; align-items:center; gap:7px; min-height:44px; padding:0 9px!important; border:1px solid rgba(212,175,55,.15)!important; border-radius:13px!important; background:#101010!important; } .smart-search-field svg{width:20px;height:20px;fill:none;stroke:#a9904e;stroke-width:1.7} .smart-search-field input{min-width:0;border:0!important;background:transparent!important;font-size:12px!important;color:#eee!important} .smart-search-clear{width:25px;height:25px;border:0;background:transparent;color:#867b67;font-size:18px} .smart-search-close{border:0!important;background:transparent!important;color:#c5aa5e!important;font-size:9px!important;padding:5px!important} .smart-search-filters{display:flex;gap:5px;margin-top:8px;overflow-x:auto;scrollbar-width:none} .smart-search-filters::-webkit-scrollbar{display:none} .smart-search-filters button{ flex:0 0 auto;min-height:29px;padding:0 11px;border:1px solid rgba(255,255,255,.055);border-radius:999px; background:#101010;color:#8d8472;font-size:10px } .smart-search-filters button.active{border-color:rgba(212,175,55,.25);background:rgba(212,175,55,.065);color:#d7bc6b} .smart-search-meta{display:flex;justify-content:space-between;align-items:end;gap:8px;padding:9px 3px} .smart-search-meta strong{font-size:9px;color:#cdb872} .smart-search-meta small{font-size:9.5px;color:#776f61} .smart-search-results{display:grid;gap:13px} .smart-search-group{display:grid;gap:6px} .smart-search-group h3{display:flex;align-items:center;gap:6px;margin:0;padding:0 3px;color:#988b70;font-size:10px;font-weight:700} .smart-search-group h3 small{display:grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:#121212;color:#716753;font-size:9px} .smart-search-result{ position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px; width:100%;padding:9px;border:1px solid rgba(255,255,255,.05);border-radius:12px;background:#0f0f0f;color:inherit;text-align:right } .smart-search-result:active{border-color:rgba(212,175,55,.18);background:rgba(212,175,55,.025)} .smart-result-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(212,175,55,.045);color:#c3a757;font-size:14px} .smart-result-copy{display:grid;gap:2px;min-width:0} .smart-result-copy strong{display:flex;align-items:center;gap:5px;min-width:0;color:#d8c9a1;font-size:9.5px;line-height:1.5} .smart-result-copy strong em{font-style:normal;font-size:10px;color:#9c8748} .smart-result-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#aaa08c;font-size:10px;direction:auto} .smart-result-copy i{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#665f54;font-size:9px;font-style:normal} .smart-result-copy mark{padding:0 1px;border-radius:2px;background:rgba(212,175,55,.16);color:#f2d982} .smart-result-actions{display:flex;align-items:center} .smart-result-actions button{width:30px;height:30px;border:1px solid rgba(255,255,255,.05);border-radius:8px;background:#121212;color:#aa9455;font-size:12px} .smart-search-empty{display:grid;place-items:center;gap:6px;min-height:260px;padding:30px;text-align:center} .smart-search-empty>span{font-size:28px;color:#62583d} .smart-search-empty strong{font-size:10px;color:#b8aa86} .smart-search-empty small{max-width:300px;color:#716a5e;font-size:10px;line-height:1.8} .smart-search-recent{display:grid;gap:5px} .smart-search-recent h3{margin:4px 2px;color:#827867;font-size:10px} .smart-search-recent button{display:flex;align-items:center;gap:8px;width:100%;padding:8px;border:0;border-bottom:1px solid rgba(255,255,255,.035);background:transparent;color:#aaa08a;text-align:right} .smart-search-recent button span{color:#8b7844}.smart-search-recent button b{font-size:9px;font-weight:600} body.smart-search-open{overflow:hidden!important} /* v2.5.75 — isolated Smart Search open path */ .smart-search-empty.error strong{color:#d5907d} .smart-search-empty.error small{color:#9a766d} /* v2.5.75 — Smart Search readability pass */ .smart-search-panel{ background:#080808!important; } .smart-search-sticky{ background:linear-gradient(to bottom,#080808 84%,rgba(8,8,8,.97))!important; } .smart-search-field{ min-height:48px!important; border-color:rgba(212,175,55,.22)!important; background:#121212!important; } .smart-search-field input{ font-size:14px!important; font-weight:500!important; color:#f3f0e8!important; } .smart-search-field input::placeholder{ color:#8f8778!important; opacity:1!important; } .smart-search-filters{ gap:6px!important; margin-top:9px!important; } .smart-search-filters button{ min-height:32px!important; padding:0 13px!important; font-size:9px!important; font-weight:600!important; color:#aaa18f!important; border-color:rgba(255,255,255,.075)!important; } .smart-search-filters button.active{ color:#f0d57d!important; background:rgba(212,175,55,.085)!important; border-color:rgba(212,175,55,.34)!important; } .smart-search-meta{ padding:12px 4px 9px!important; } .smart-search-meta strong{ font-size:11px!important; color:#e0c87b!important; font-weight:700!important; } .smart-search-meta small{ font-size:9px!important; color:#a59b88!important; } .smart-search-results{ gap:16px!important; } .smart-search-group{ gap:8px!important; } .smart-search-group h3{ padding:0 4px 2px!important; font-size:10px!important; color:#b7aa90!important; font-weight:700!important; } .smart-search-group h3 small{ min-width:20px!important; height:20px!important; font-size:10px!important; color:#aa9d80!important; background:#151515!important; } .smart-search-result{ grid-template-columns:40px minmax(0,1fr) auto!important; gap:10px!important; min-height:72px!important; padding:11px 10px!important; border-radius:13px!important; border-color:rgba(255,255,255,.075)!important; background:#121212!important; } .smart-search-result:active{ background:rgba(212,175,55,.04)!important; border-color:rgba(212,175,55,.26)!important; } .smart-result-icon{ width:40px!important; height:40px!important; border-radius:11px!important; font-size:16px!important; color:#d4b65d!important; background:rgba(212,175,55,.06)!important; } .smart-result-copy{ gap:4px!important; } .smart-result-copy strong{ font-size:11px!important; line-height:1.6!important; font-weight:700!important; color:#f0e6c9!important; } .smart-result-copy strong em{ font-size:9px!important; color:#c7a94f!important; } .smart-result-copy small{ font-size:10px!important; line-height:1.55!important; color:#d0c6b3!important; font-weight:500!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; word-break:break-word; } .smart-result-copy i{ margin-top:1px!important; font-size:10px!important; line-height:1.45!important; color:#908776!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; } .smart-result-copy mark{ padding:0 2px!important; border-radius:3px!important; background:rgba(212,175,55,.25)!important; color:#ffe395!important; font-weight:800!important; } .smart-result-actions button{ width:34px!important; height:34px!important; border-radius:9px!important; font-size:14px!important; color:#d1b45e!important; background:#171717!important; border-color:rgba(212,175,55,.12)!important; } .smart-search-empty{ min-height:290px!important; } .smart-search-empty>span{ font-size:32px!important; color:#8a794b!important; } .smart-search-empty strong{ font-size:12px!important; color:#d2c6a7!important; } .smart-search-empty small{ font-size:9px!important; line-height:1.9!important; color:#948b7c!important; } .smart-search-recent h3{ font-size:9.5px!important; color:#9f947f!important; } .smart-search-recent button{ min-height:42px!important; padding:10px 8px!important; color:#d0c5ac!important; } .smart-search-recent button b{ font-size:10px!important; } @media(max-width:390px){ .smart-search-result{ min-height:68px!important; padding:10px 9px!important; } .smart-result-copy strong{ font-size:10.5px!important; } .smart-result-copy small{ font-size:9.5px!important; } .smart-result-copy i{ font-size:10px!important; } } /* v2.5.75 — relevance-first Smart Search */ .smart-search-meta small{ max-width:62%; text-align:left; } /* v2.5.75 — multi-word Smart Search uses AND relevance */ .smart-search-meta small{ color:#aaa08c!important; font-weight:500; } /* v2.5.75 — strict multi-word matching; fuzzy only for single-word search */ .smart-search-meta small{ line-height:1.45; } /* v2.5.75 — return to the exact Smart Search results after closing a document */ /* v2.5.75 — password visibility for Backup / Restore */ .backup-password-wrap{ position:relative; display:block; width:100%; } .backup-password-wrap #backupPassword{ width:100%; padding-inline-end:46px!important; } .password-eye-btn{ position:absolute; top:50%; inset-inline-end:7px; transform:translateY(-50%); display:grid; place-items:center; width:34px; height:34px; padding:0; border:0; border-radius:9px; background:transparent; color:#b69b50; z-index:3; } .password-eye-btn:active{ background:rgba(212,175,55,.075); } .password-eye-btn svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .password-eye-btn[aria-pressed="true"]{ color:#e0c56f; } /* v2.5.75 — bidi-safe Backup / Restore password */ .backup-password-input, .bidi-password{ direction:ltr!important; unicode-bidi:isolate!important; text-align:left!important; font-variant-ligatures:none; letter-spacing:.02em; } .backup-password-input::placeholder{ direction:rtl!important; text-align:right!important; unicode-bidi:plaintext; letter-spacing:0; } /* Keep the revealed password visually stable even inside RTL dialogs. */ .backup-password-input[type="text"]{ direction:ltr!important; unicode-bidi:isolate!important; text-align:left!important; } /* iOS/Safari password reveal must not inherit the surrounding RTL direction. */ .backup-password-wrap{ direction:ltr!important; } .backup-password-wrap .password-eye-btn{ direction:ltr!important; } /* v2.5.75 — structured birth certificate serial, bidi-safe end-to-end */ .birth-serial-editor{ direction:ltr!important; display:grid; grid-template-columns:minmax(64px,1fr) 18px minmax(50px,.72fr) minmax(46px,.55fr); align-items:center; gap:5px; width:100%; margin-top:5px; } .birth-serial-editor input{ min-width:0!important; width:100%!important; text-align:center!important; padding-inline:5px!important; } .birth-serial-number{ direction:ltr!important; unicode-bidi:isolate!important; } .birth-serial-letter{ direction:rtl!important; unicode-bidi:isolate!important; text-align:center!important; } .birth-serial-slash{ display:grid; place-items:center; height:38px; color:#c5aa5c; font-size:17px; font-weight:500; user-select:none; } .birth-serial-info-item{ direction:rtl; } .birth-serial-display{ direction:ltr!important; unicode-bidi:isolate!important; display:inline-flex; align-items:center; gap:6px; min-width:0; color:#e0d8c3; white-space:nowrap; } .birth-serial-display b{ direction:ltr!important; unicode-bidi:isolate!important; font:inherit; font-weight:700; } .birth-serial-display i{ direction:ltr!important; color:#aa9559; font-style:normal; font-weight:700; } .birth-serial-display em{ direction:rtl!important; unicode-bidi:isolate!important; color:#e0d8c3; font-style:normal; font-weight:700; } .birth-serial-display.masked{ letter-spacing:2px; } @media(max-width:390px){ .birth-serial-editor{ grid-template-columns:minmax(54px,1fr) 15px minmax(45px,.7fr) minmax(40px,.55fr); gap:4px; } } /* v2.5.75 — birth certificate serial visual order: letter on the left */ .birth-serial-editor{ grid-template-columns:minmax(46px,.55fr) minmax(50px,.72fr) 18px minmax(64px,1fr)!important; } @media(max-width:390px){ .birth-serial-editor{ grid-template-columns:minmax(40px,.55fr) minmax(45px,.7fr) 15px minmax(54px,1fr)!important; } } /* v2.5.75 — birth serial display mirrors editor exactly */ .birth-serial-display-visual{ direction:ltr!important; unicode-bidi:isolate!important; display:inline-grid!important; grid-template-columns:auto auto auto auto; align-items:center; justify-content:start; column-gap:6px; } .birth-serial-display-visual > em, .birth-serial-display-visual > b, .birth-serial-display-visual > i{ unicode-bidi:isolate!important; } /* v2.5.75 — Copy/Share birth serial uses plain visual-order text, no bidi controls */ /* v2.5.75 — Persian visual digits for birth certificate serial */ .birth-serial-number{ font-variant-numeric:tabular-nums; } .birth-serial-display-visual > b{ font-variant-numeric:tabular-nums; } /* v2.5.75 — Stable Foundation (no Vault migration) */ :root{ --mw-font-body:12px; --mw-font-secondary:10.5px; --mw-font-caption:10px; --mw-line-body:1.65; } body{line-height:var(--mw-line-body)} .muted, .settings-card-title small, .smart-result-copy i, .context-help-setting span, .context-help-steps span, .app-feature-copy small, .notification-copy small{ line-height:1.65!important; } button,input,select,textarea{ -webkit-text-size-adjust:100%; } /* v2.5.75 — Settings must scroll vertically only */ #settingsDialog, .settings-dialog{ overflow-x:hidden!important; max-width:100vw!important; box-sizing:border-box!important; overscroll-behavior-x:none!important; } #settingsDialog .settings-body, .settings-dialog .settings-body{ width:100%!important; max-width:100%!important; min-width:0!important; overflow-x:hidden!important; overflow-y:auto!important; box-sizing:border-box!important; overscroll-behavior-x:none!important; touch-action:pan-y!important; } #settingsDialog .settings-body *, .settings-dialog .settings-body *{ box-sizing:border-box; min-width:0; } #settingsDialog .settings-card, #settingsDialog .compact-settings-card, #settingsDialog .settings-pair, #settingsDialog .setting-tile, #settingsDialog .setting-action-tile, #settingsDialog .setting-action-wide, #settingsDialog .setting-select-tile, #settingsDialog .password-settings, #settingsDialog .pin-pair, .settings-dialog .settings-card, .settings-dialog .compact-settings-card, .settings-dialog .settings-pair, .settings-dialog .setting-tile, .settings-dialog .setting-action-tile, .settings-dialog .setting-action-wide, .settings-dialog .setting-select-tile, .settings-dialog .password-settings, .settings-dialog .pin-pair{ width:100%; max-width:100%!important; min-width:0!important; } #settingsDialog input, #settingsDialog select, #settingsDialog textarea, #settingsDialog button, .settings-dialog input, .settings-dialog select, .settings-dialog textarea, .settings-dialog button{ max-width:100%; } #settingsDialog .settings-main-head, .settings-dialog .settings-main-head{ width:100%; max-width:100%; overflow:hidden; box-sizing:border-box; } /* Prevent long status/version strings from widening the settings viewport. */ #settingsDialog small, #settingsDialog strong, #settingsDialog span, .settings-dialog small, .settings-dialog strong, .settings-dialog span{ overflow-wrap:anywhere; } /* Horizontal action rows may visually clip, but must never move the whole page sideways. */ #settingsDialog .settings-head-actions, .settings-dialog .settings-head-actions{ max-width:100%; overflow:hidden; flex-shrink:1; } @media(max-width:420px){ #settingsDialog, .settings-dialog{ width:calc(100vw - 12px)!important; max-width:calc(100vw - 12px)!important; margin-inline:auto!important; } #settingsDialog .settings-body, .settings-dialog .settings-body{ padding-inline:10px!important; } } /* v2.5.75 — create templates directly from Template Manager */ .template-manager-head{ gap:10px; } .template-manager-head-actions{ display:flex; align-items:center; gap:7px; flex:0 0 auto; } .template-new-btn{ display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:34px; padding:0 10px; border:1px solid rgba(212,175,55,.24); border-radius:10px; background:rgba(212,175,55,.07); color:#ddc36d; font-family:inherit; } .template-new-btn span{ font-size:18px; line-height:1; } .template-new-btn b{ font-size:10px; white-space:nowrap; } .template-new-btn:active{ background:rgba(212,175,55,.13); transform:scale(.98); } .template-edit-meta{ grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr) minmax(0,.72fr)!important; } .template-edit-meta>label{ min-width:0!important; } .template-edit-meta input, .template-edit-meta select{ width:100%!important; min-width:0!important; box-sizing:border-box!important; } @media(max-width:430px){ .template-manager-head-actions{gap:5px} .template-new-btn{padding:0 8px} .template-new-btn b{font-size:9.5px} .template-edit-meta{ grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; } .template-edit-meta>label:first-child{ grid-column:1/-1; } } /* v2.5.75 — direct data entry for fields applied from templates */ .template-data-entry{ margin:12px 0; padding:12px; border:1px solid rgba(212,175,55,.18); border-radius:14px; background:rgba(255,255,255,.025); } .template-data-entry.hidden{display:none!important} .template-data-entry-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:10px; } .template-data-entry-head span{display:flex;flex-direction:column;gap:3px} .template-data-entry-head strong{font-size:12px;color:#e5d7ae} .template-data-entry-head small{font-size:10px;color:rgba(255,255,255,.52);line-height:1.55} .template-data-entry-fields{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:9px; } .template-entry-field{ min-width:0; display:flex; flex-direction:column; gap:5px; } .template-entry-field>span{ font-size:10.5px; color:rgba(255,255,255,.72); } .template-entry-field>span i{ color:#d8b64f; font-style:normal; margin-inline-start:3px; } .template-entry-field input, .template-entry-field textarea{ width:100%; min-width:0; box-sizing:border-box; min-height:40px; border-radius:10px; } .template-entry-field textarea{resize:vertical} .template-entry-linked, .template-entry-plate{ width:100%; min-height:42px; border:1px solid rgba(212,175,55,.18); border-radius:10px; background:rgba(255,255,255,.035); color:inherit; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 9px; } .template-entry-linked span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .template-entry-linked b, .template-entry-plate>b{ flex:0 0 auto; font-size:9.5px; color:#d8bd68; } .template-entry-plate{ flex-direction:column; align-items:stretch; } @media(max-width:430px){ .template-data-entry-fields{grid-template-columns:minmax(0,1fr)} } /* v2.5.75 — template date fields: YYYY/MM/DD with automatic separators */ .template-entry-field input[data-template-date]{ text-align:center; direction:ltr!important; unicode-bidi:isolate; letter-spacing:.35px; font-variant-numeric:tabular-nums; } /* v2.5.75 — live template binding for documents */ .template-binding-notice{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0 12px; padding:10px 11px; border:1px solid rgba(212,175,55,.22); border-radius:13px; background:rgba(212,175,55,.055); } .template-binding-notice.hidden{display:none!important} .template-binding-notice>span{ min-width:0; display:flex; flex-direction:column; gap:3px; } .template-binding-notice strong{ color:#e6cc77; font-size:11px; } .template-binding-notice small{ color:#a89e89; font-size:9.5px; line-height:1.55; } .template-binding-notice button{ flex:0 0 auto; min-height:34px; padding:0 10px; border:1px solid rgba(212,175,55,.2); border-radius:9px; background:#15130d; color:#d7bc65; font-family:inherit; font-size:9.5px; } /* v2.5.75 — user-defined categories for Other Documents */ .other-category-bar{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 38px; align-items:center; gap:7px; width:100%; max-width:100%; margin:0 0 10px; padding:5px 7px; border:1px solid rgba(212,175,55,.10); border-radius:13px; background:rgba(13,13,13,.86); box-sizing:border-box; overflow:visible; } .other-category-bar.hidden{display:none!important} .other-category-tabs-wrap{ direction:rtl; display:flex; align-items:center; min-width:0; max-width:100%; gap:5px; overflow:hidden; } .other-category-tabs{ display:flex; align-items:center; gap:5px; min-width:0; max-width:100%; overflow:hidden; } .other-category-tab{ flex:0 1 auto; min-width:0; max-width:118px; min-height:30px; padding:0 9px; border:1px solid transparent; border-radius:9px; background:transparent; color:#999080; font-family:inherit; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .other-category-tab:first-child{flex:0 0 auto} .other-category-tab.active{ color:#ead07a; border-color:rgba(212,175,55,.22); background:rgba(212,175,55,.07); } .other-category-manage-btn{ direction:ltr; display:grid; place-items:center; width:36px; height:34px; min-width:36px; padding:0; border:1px solid rgba(212,175,55,.16); border-radius:10px; background:#12110e; color:#cdb25c; } .other-category-manage-btn svg{ width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round } .other-category-more-wrap{ position:relative; flex:0 0 auto; } .other-category-more-wrap.hidden{display:none!important} .other-category-more-btn{ width:32px;height:30px;padding:0;border:0;border-radius:9px;background:rgba(255,255,255,.035);color:#a99a78;font-size:14px } .other-category-more-menu{ position:absolute; z-index:70; top:36px; right:0; display:grid; width:min(210px,70vw); padding:5px; border:1px solid rgba(212,175,55,.16); border-radius:11px; background:#111; box-shadow:0 16px 34px rgba(0,0,0,.45); } .other-category-more-menu.hidden{display:none!important} .other-category-more-menu .other-category-tab{ width:100%; max-width:none; text-align:right; justify-content:flex-start; } /* Category manager */ .other-category-manager-dialog .dialog-body{ width:min(470px,calc(100vw - 18px)); max-width:100%; overflow-x:hidden; } .other-category-add-form{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; margin:2px 0 12px; } .other-category-add-form input{min-width:0} .other-category-add-form button{min-width:74px} .other-category-manager-list{display:grid;gap:7px} .other-category-manager-row{ display:grid; grid-template-columns:30px minmax(0,1fr) auto 32px; align-items:center; gap:6px; min-width:0; padding:6px; border:1px solid rgba(255,255,255,.055); border-radius:11px; background:rgba(255,255,255,.02); } .other-category-manager-row input{ min-width:0; width:100%; min-height:36px; box-sizing:border-box; } .other-category-manager-row small{ color:#8f8675; font-size:9.5px; white-space:nowrap; } .other-category-drag, .other-category-delete{ display:grid; place-items:center; width:30px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:#8f8264 } .other-category-drag{touch-action:none;cursor:grab} .other-category-delete{color:#bb7568;font-size:18px} .other-category-empty{padding:24px;text-align:center;color:#837b6e;font-size:10px} @media(max-width:390px){ .other-category-bar{grid-template-columns:minmax(0,1fr) 36px;padding-inline:5px} .other-category-tab{max-width:96px;padding-inline:7px;font-size:9.5px} .other-category-manager-row{grid-template-columns:28px minmax(0,1fr) 30px} .other-category-manager-row small{grid-column:2;grid-row:2} } /* v2.5.75 — template default category */ .template-default-category-label{ grid-column:1/-1; } .template-default-category-label.hidden{ display:none!important; } .template-default-category-label small{ display:block; margin-top:4px; color:#8f8778; font-size:9.5px; line-height:1.55; } /* v2.5.75 — compact All / Other toggle in first category slot */ .other-category-base{ flex:0 0 auto!important; min-width:42px!important; max-width:52px!important; padding-inline:7px!important; color:#ead07a!important; border-color:rgba(212,175,55,.22)!important; background:rgba(212,175,55,.07)!important; } /* v2.5.75 — clearer All / Other toggle affordance */ .other-category-base{ display:inline-flex!important; align-items:center; justify-content:center; gap:3px; } .other-category-base svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.8; flex:0 0 auto; } /* v2.5.75 — active state for All / Other toggle */ .other-category-base{ color:#999080!important; border-color:transparent!important; background:transparent!important; } .other-category-base.active{ color:#ead07a!important; border-color:rgba(212,175,55,.22)!important; background:rgba(212,175,55,.07)!important; } .other-category-base:not(.active) svg{ opacity:.58; } /* v2.5.75 — aiowallet brand system */ .aio-brand{font-style:normal;font-weight:700;letter-spacing:-.35px;color:#f2f2f2} .aio-brand i{font-style:normal;color:#d9aa41} .brand-wordmark{display:flex!important;align-items:baseline;justify-content:center;gap:0;font-size:22px!important;letter-spacing:-.6px} .brand-wordmark>span{color:#d9aa41} .brand-wordmark>small{display:block;margin-inline-start:8px;color:#a59d8e;font-size:8px;font-weight:400;letter-spacing:.25px} .logo-drawer-version>span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05} .logo-drawer-version>span>small{margin-top:3px;color:#8f8778;font-size:7.5px;letter-spacing:.15px} #appFeaturesDialog .aio-brand{font-size:19px} .settings-card.app-info .aio-brand{font-size:14px} /* v2.5.75 — payment calendar fields: label above, value/actions below */ .payment-extra-inline.calendar{ width:100%!important; min-width:0!important; } .payment-extra-inline.calendar .payment-extra-inline-row{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; grid-template-rows:auto auto!important; gap:3px!important; align-items:start!important; width:100%!important; min-width:0!important; } .payment-extra-inline.calendar .payment-extra-inline-row>small{ grid-column:1!important; grid-row:1!important; display:block!important; width:100%!important; min-width:0!important; margin:0!important; padding:0!important; white-space:normal!important; overflow-wrap:anywhere!important; line-height:1.4!important; } .payment-extra-inline.calendar .payment-extra-inline-row>strong{ grid-column:1!important; grid-row:2!important; display:block!important; width:100%!important; min-width:0!important; margin:0!important; } .payment-extra-inline.calendar .payment-extra-field-content{ display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important; align-items:center!important; gap:4px!important; width:100%!important; max-width:100%!important; min-width:0!important; } .payment-extra-inline.calendar .payment-extra-value{ display:block!important; flex:1 1 auto!important; min-width:0!important; max-width:100%!important; overflow-wrap:anywhere!important; word-break:break-word!important; } .payment-extra-inline.calendar .payment-extra-field-actions{ display:inline-flex!important; flex:0 0 auto!important; align-items:center!important; flex-wrap:nowrap!important; gap:3px!important; width:auto!important; min-width:max-content!important; } .payment-extra-inline.calendar .field-action-trigger{ flex:0 0 24px!important; width:24px!important; height:24px!important; min-width:24px!important; } .payment-extra-inline.calendar .linked-source-chip{ flex:0 0 auto!important; min-height:24px!important; } /* Override the older mobile two-column rule as well. */ @media(max-width:430px){ .payment-extra-inline.calendar .payment-extra-inline-row{ grid-template-columns:minmax(0,1fr)!important; grid-template-rows:auto auto!important; } .payment-extra-inline.calendar .payment-extra-inline-row>small{ grid-column:1!important; grid-row:1!important; } .payment-extra-inline.calendar .payment-extra-inline-row>strong{ grid-column:1!important; grid-row:2!important; } } /* v2.5.75 — Compact UI pass: Other Documents editor */ #cardDialog.unified-document-editor .card-editor-form{gap:9px!important;padding-bottom:88px!important} #cardDialog.other-document-editor .owner-select-label, #cardDialog.other-document-editor #cardTitle, #cardDialog.other-document-editor #otherCategorySelectLabel, #cardDialog.other-document-editor #cardSubtitleLabel{margin-bottom:0!important} #cardDialog.other-document-editor .other-compact-nav{ position:sticky;top:58px;z-index:18; display:grid!important;grid-template-columns:repeat(3,1fr); gap:4px;padding:4px;margin:1px 0 3px; border:1px solid rgba(215,171,75,.16);border-radius:12px; background:rgba(15,15,15,.94);backdrop-filter:blur(14px); } #cardDialog.other-document-editor .other-compact-nav button{ min-height:34px;padding:5px 7px;border:0;border-radius:9px; background:transparent;color:var(--muted);font-size:11px;font-weight:650; } #cardDialog.other-document-editor .other-compact-nav button.active{ background:rgba(215,171,75,.13);color:var(--gold); } #cardDialog.unified-document-editor .compact-section-title{ display:flex;align-items:center;justify-content:space-between;gap:8px; margin:0 0 8px;padding:0 1px; } #cardDialog.unified-document-editor .compact-section-title>span{ display:flex;flex-direction:column;gap:1px;min-width:0 } #cardDialog.unified-document-editor .compact-section-title strong{font-size:13px;line-height:1.35} #cardDialog.unified-document-editor .compact-section-title small{font-size:9px;color:var(--muted);line-height:1.35} #cardDialog.unified-document-editor .compact-collapse-btn{ width:30px;height:30px;min-width:30px;border-radius:9px; border:1px solid rgba(215,171,75,.18);background:rgba(215,171,75,.07); color:var(--gold);font-size:16px;transition:transform .18s ease } #cardDialog.unified-document-editor .compact-collapse-btn.is-collapsed{transform:rotate(90deg)} #cardDialog.unified-document-editor #otherCustomFieldsSection, #cardDialog.unified-document-editor .other-compact-section{ margin:0!important;padding:10px!important;border-radius:14px!important; border:1px solid rgba(215,171,75,.14)!important;background:rgba(255,255,255,.02)!important } #cardDialog.unified-document-editor #otherCustomFieldsSection{ display:block!important } #cardDialog.unified-document-editor .custom-template-block, #cardDialog.unified-document-editor .template-data-entry, #cardDialog.unified-document-editor .virtual-designer-entry, #cardDialog.unified-document-editor .card-display-mode, #cardDialog.unified-document-editor .virtual-document-orientation{ margin-top:8px!important;margin-bottom:8px!important } #cardDialog.unified-document-editor .custom-template-head small, #cardDialog.unified-document-editor .card-display-mode>div>small, #cardDialog.unified-document-editor .virtual-designer-entry>div>small{ font-size:9px!important;line-height:1.3!important } #cardDialog.unified-document-editor #documentPhotoGrid{margin:0!important;gap:8px!important} #cardDialog.unified-document-editor #documentPhotoGrid.compact-collapsed, #cardDialog.unified-document-editor #otherNotesCompactBody.compact-collapsed{display:none!important} #cardDialog.unified-document-editor #cardNotes{min-height:64px!important} #cardDialog.unified-document-editor .edit-danger-zone{margin-top:8px!important} /* v2.5.75: legacy Bank/Identity visual exception removed; shared editor enabled. */ @media(max-width:430px){ #cardDialog.other-document-editor .other-compact-nav{top:55px} #cardDialog.unified-document-editor #otherCustomFieldsSection, #cardDialog.unified-document-editor .other-compact-section{padding:9px!important} } /* v2.5.75 — Template-first workflow */ #cardDialog.unified-document-editor .compact-template-select-row{display:block!important} #cardDialog.unified-document-editor .compact-template-select-row select{width:100%!important} #cardDialog.unified-document-editor.template-bound .card-display-mode, #cardDialog.unified-document-editor.template-bound .custom-fields-head, #cardDialog.unified-document-editor.template-bound #customFieldsList, #cardDialog.unified-document-editor.template-bound #virtualDocumentOrientation, #cardDialog.unified-document-editor.template-bound #virtualDesignerEntry, #cardDialog.unified-document-editor.template-bound #templatePickerPreview{display:none!important} #cardDialog.unified-document-editor .compact-template-bound{margin-top:8px!important;padding:10px!important;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(215,171,75,.2);border-radius:12px;background:rgba(215,171,75,.055)} #cardDialog.unified-document-editor .compact-template-bound.hidden{display:none!important} #cardDialog.unified-document-editor .compact-template-bound>span{min-width:0;display:flex;flex-direction:column;gap:2px} #cardDialog.unified-document-editor .compact-template-bound strong{font-size:12px} #cardDialog.unified-document-editor .compact-template-bound small{font-size:9px;color:var(--muted)} #cardDialog.unified-document-editor .template-values-button{flex:0 0 auto;min-height:36px;padding:6px 10px;border-radius:10px;border:1px solid rgba(215,171,75,.25);background:rgba(215,171,75,.11);color:var(--gold);font-size:11px} .template-values-dialog{width:min(94vw,560px);max-height:88dvh;padding:0!important;border:1px solid rgba(215,171,75,.22);border-radius:18px;background:var(--panel,#111);color:var(--text,#fff);overflow:hidden} .template-values-shell{display:flex;flex-direction:column;max-height:88dvh} .template-values-head{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:8px;padding:10px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(15,15,15,.97)} .template-values-head>span{display:flex;flex-direction:column;gap:2px;min-width:0}.template-values-head strong{font-size:14px}.template-values-head small{font-size:9px;color:var(--muted)} .template-values-save{min-height:36px;padding:6px 12px;border:0;border-radius:10px;background:var(--gold);color:#111;font-weight:800} .template-values-fields-host{overflow:auto;padding:12px;overscroll-behavior:contain} .template-values-fields-host .template-data-entry{display:block!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important} .template-values-fields-host .template-data-entry-fields{display:grid;gap:10px} @media(max-width:430px){#cardDialog.unified-document-editor .compact-template-bound{align-items:flex-start;flex-direction:column}#cardDialog.unified-document-editor .template-values-button{width:100%}.template-values-dialog{width:96vw;max-height:92dvh}} /* v2.5.75 — compact document media controls */ #cardDialog.unified-document-editor #cardSubtitleLabel{display:none!important} #cardDialog.unified-document-editor .compact-media-actions{ display:grid; grid-template-columns:minmax(92px,1fr) auto auto; align-items:center; gap:7px; margin-top:7px; } #cardDialog.unified-document-editor .compact-scan-button{ min-height:38px!important; padding:7px 10px!important; border-radius:10px!important; font-size:11px!important; white-space:nowrap; } #cardDialog.unified-document-editor .compact-source-button{ position:relative; min-width:64px; min-height:38px; padding:5px 8px; display:flex; align-items:center; justify-content:center; gap:5px; border:1px solid rgba(215,171,75,.22); border-radius:10px; background:rgba(215,171,75,.075); color:var(--gold); cursor:pointer; overflow:hidden; } #cardDialog.unified-document-editor .compact-source-button>span{font-size:17px;line-height:1} #cardDialog.unified-document-editor .compact-source-button>small{font-size:9px;white-space:nowrap} #cardDialog.unified-document-editor .compact-source-button input{ position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer } #cardDialog.unified-document-editor .legacy-media-input{ position:absolute!important; width:1px!important;height:1px!important; opacity:0!important;pointer-events:none!important; } #cardDialog.unified-document-editor .compact-media-actions .orientation-button{ margin:0!important; min-height:38px!important; } #cardDialog.unified-document-editor #documentPhotoGrid .scan-hint{display:none!important} #cardDialog.unified-document-editor #documentPhotoGrid .photo-picker{ padding:9px!important; } #cardDialog.unified-document-editor #documentPhotoGrid .photo-picker>strong{ margin-bottom:2px!important; font-size:11px!important; } #cardDialog.unified-document-editor #frontPreview:not([src]), #cardDialog.unified-document-editor #backPreview:not([src]){ display:none!important; } @media(max-width:380px){ #cardDialog.unified-document-editor .compact-media-actions{ grid-template-columns:1fr auto auto; gap:5px } #cardDialog.unified-document-editor .compact-source-button small{display:none} #cardDialog.unified-document-editor .compact-source-button{min-width:40px;padding:5px} } /* v2.5.75 Template-first compact flow */ #cardDialog.unified-document-editor .other-template-decision{display:block!important;margin:0;padding:10px;border:1px solid rgba(215,171,75,.16);border-radius:14px;background:rgba(255,255,255,.02)} #cardDialog.unified-document-editor .other-template-decision.hidden{display:none!important}.other-template-undecided{display:grid;grid-template-columns:1fr auto;gap:7px}.other-template-undecided.hidden{display:none!important} #cardDialog.unified-document-editor .other-choice-label{font-size:11px;color:var(--muted);margin-bottom:7px}#cardDialog.unified-document-editor #otherInitialTemplateSelect{height:40px;min-width:0} #cardDialog.unified-document-editor .continue-without-template{height:40px;padding:5px 9px;display:flex;align-items:center;gap:4px;border:1px solid rgba(215,171,75,.22);border-radius:10px;background:rgba(215,171,75,.07);color:var(--gold)} #cardDialog.unified-document-editor .continue-without-template span{font-size:18px}.continue-without-template small{font-size:9px} #cardDialog.unified-document-editor .other-inline-summary{min-height:48px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid rgba(215,171,75,.15);border-radius:12px;background:rgba(255,255,255,.02)} #cardDialog.unified-document-editor .other-inline-summary.hidden{display:none!important}#cardDialog.unified-document-editor .other-template-decision .other-inline-summary{padding:0;border:0;background:transparent} #cardDialog.unified-document-editor .other-inline-summary>span{display:flex;flex-direction:column;gap:2px}.other-inline-summary small{font-size:9px;color:var(--muted)}.other-inline-summary strong{font-size:12px} #cardDialog.unified-document-editor .other-inline-summary>button{width:34px;height:34px;border-radius:9px;border:1px solid rgba(215,171,75,.2);background:rgba(215,171,75,.07);color:var(--gold)} #cardDialog.other-document-editor #otherCategorySelectLabel{display:none!important}#cardDialog.unified-document-editor #otherFormAfterDecision.hidden{display:none!important}#cardDialog.unified-document-editor #otherFormAfterDecision:not(.hidden){display:contents!important} #cardDialog.unified-document-editor:not(.other-decision-made) #otherCompactNav{display:none!important} .compact-picker-dialog{width:min(92vw,480px);max-height:72dvh;padding:0!important;border:1px solid rgba(215,171,75,.22);border-radius:18px;background:var(--panel,#111);color:var(--text,#fff);overflow:hidden}.compact-picker-shell{display:flex;flex-direction:column;max-height:72dvh} .compact-picker-shell>header{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid rgba(255,255,255,.07)}.compact-picker-shell>header button{width:34px;height:34px;border:0;border-radius:9px;background:rgba(255,255,255,.06);color:inherit;font-size:18px} .compact-picker-list{padding:8px;overflow:auto;display:grid;gap:5px}.compact-picker-list button{width:100%;min-height:46px;padding:8px 10px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(255,255,255,.025);color:inherit;text-align:right;display:flex;align-items:center;justify-content:space-between}.compact-picker-list button.active{border-color:rgba(215,171,75,.35);background:rgba(215,171,75,.09)}.compact-picker-list button span{display:flex;flex-direction:column;gap:2px}.compact-picker-list button small{font-size:9px;color:var(--muted)} /* v2.5.75 — simplify Other Documents edit flow */ #cardDialog.unified-document-editor #otherCompactNav{display:none!important} #cardDialog.unified-document-editor .other-template-decision{ padding:8px!important; } #cardDialog.unified-document-editor .other-choice-label{display:none!important} #cardDialog.unified-document-editor .other-decision-summary-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:7px; } #cardDialog.unified-document-editor .other-decision-summary-row.hidden{display:none!important} #cardDialog.unified-document-editor .other-decision-summary-row .other-inline-summary{ min-width:0; margin:0!important; } #cardDialog.unified-document-editor .other-decision-summary-row .other-inline-summary strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media(max-width:390px){ #cardDialog.unified-document-editor .other-decision-summary-row{ grid-template-columns:1fr; } } @container (max-width:420px){ #cardDialog.unified-document-editor .other-decision-summary-row{ grid-template-columns:1fr; } } /* Template selection already happened above; don't repeat it inside "اطلاعات". */ #cardDialog.unified-document-editor .custom-template-block{ display:none!important; } #cardDialog.unified-document-editor .other-info-title{ margin-bottom:6px!important; } #cardDialog.unified-document-editor.template-bound .other-info-title{ display:none!important; } #cardDialog.unified-document-editor.template-bound #templateBindingNotice{ margin-top:0!important; } /* The template-bound card is now just an action card, not another template explanation. */ #cardDialog.unified-document-editor.template-bound #templateBindingNotice>span{ display:none!important; } #cardDialog.unified-document-editor.template-bound .template-values-button{ width:100%!important; justify-content:center!important; min-height:42px!important; font-size:12px!important; } /* v2.5.75 — template values behaves as a true modal layer */ #cardDialog.unified-document-editor #templateDataEntry{ display:none!important; } #templateValuesFieldsHost #templateDataEntry{ display:block!important; } /* Native dialog backdrop for the child editor. */ #templateValuesDialog::backdrop{ background:rgba(0,0,0,.58); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); } /* Extra iOS/PWA fallback: blur/dim the parent editor while child dialog is open. */ html.template-values-open #cardDialog[open]{ filter:blur(4px) brightness(.56); transform:scale(.992); transition:filter .16s ease,transform .16s ease; pointer-events:none; } html.template-values-open #templateValuesDialog[open]{ filter:none!important; transform:none!important; pointer-events:auto!important; } /* Keep child dialog visually crisp above dimmed parent. */ #templateValuesDialog{ z-index:10050!important; } /* v2.5.75 — virtual-first document display */ #cardDialog.unified-document-editor #virtualDocumentOrientation{ display:none!important; } #cardDialog.unified-document-editor .document-display-choice{ display:flex; align-items:center; justify-content:space-between; gap:9px; margin:0 0 9px; padding:9px 10px; border:1px solid rgba(215,171,75,.16); border-radius:12px; background:rgba(255,255,255,.02); } #cardDialog.unified-document-editor .document-display-choice.hidden{ display:none!important; } #cardDialog.unified-document-editor .document-display-choice>span{ min-width:0; display:flex; flex-direction:column; gap:2px; } #cardDialog.unified-document-editor .document-display-choice strong{ font-size:11px; } #cardDialog.unified-document-editor .document-display-choice small{ font-size:9px; line-height:1.35; color:var(--muted); } #cardDialog.unified-document-editor .document-display-choice>button{ flex:0 0 auto; max-width:164px; min-height:36px; padding:6px 9px; border:1px solid rgba(215,171,75,.23); border-radius:10px; background:rgba(215,171,75,.07); color:var(--gold); font-size:9px; line-height:1.35; } #cardDialog.unified-document-editor.image-display-active .document-display-choice{ border-color:rgba(215,171,75,.3); background:rgba(215,171,75,.065); } /* Keep Designer visible but dimmed when image display is deliberately active. */ #cardDialog.unified-document-editor.image-display-active:not(.template-bound) #virtualDesignerEntry{ position:relative; opacity:.42; filter:saturate(.55); pointer-events:none; } #cardDialog.unified-document-editor.image-display-active:not(.template-bound) #virtualDesignerEntry::after{ content:"نمایش کارت از تصویر فعال است"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:8px; border-radius:12px; background:rgba(10,10,10,.28); color:var(--muted); font-size:10px; font-weight:700; text-align:center; } /* Image/display choice is only relevant for independent documents. */ #cardDialog.unified-document-editor.template-bound #documentDisplayChoice{ display:none!important; } /* Designer now owns the virtual-card orientation. */ .virtual-designer-toolbar{ flex-wrap:wrap; } .designer-card-orientation{ display:inline-flex; align-items:center; gap:4px; padding:3px; border:1px solid rgba(215,171,75,.16); border-radius:10px; background:rgba(255,255,255,.025); } .designer-card-orientation button{ min-height:32px; padding:5px 8px; display:inline-flex; align-items:center; gap:5px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:10px; } .designer-card-orientation button.active{ color:var(--gold); background:rgba(215,171,75,.12); } .designer-card-orientation .orientation-mini{ pointer-events:none; } @media(max-width:430px){ #cardDialog.unified-document-editor .document-display-choice{ align-items:flex-start; flex-direction:column; } #cardDialog.unified-document-editor .document-display-choice>button{ width:100%; max-width:none; } } /* v2.5.75 — contextual guidance instead of silent buttons */ #cardDialog.unified-document-editor .context-action-message{ margin-top:7px; padding:9px 10px; border:1px dashed rgba(215,171,75,.24); border-radius:11px; background:rgba(215,171,75,.045); color:var(--muted); font-size:10px; line-height:1.55; } #cardDialog.unified-document-editor .context-action-message.hidden{ display:none!important; } #cardDialog.unified-document-editor .context-action-message button{ margin-right:7px; padding:4px 8px; min-height:30px; border:1px solid rgba(215,171,75,.24); border-radius:8px; background:rgba(215,171,75,.1); color:var(--gold); font-size:10px; font-weight:700; } #cardDialog.unified-document-editor #documentDisplayMessage{ margin:-2px 0 9px; } .virtual-designer-toolbar .designer-save-template-btn{ margin-inline-start:auto; } @media(max-width:430px){ .virtual-designer-toolbar .designer-save-template-btn{ width:100%; margin-inline-start:0; } } /* v2.5.75 */ #cardDialog .shared-orientation-proxy{display:none!important} #virtualDesignerDialog .virtual-designer-stage.portrait{width:min(56vw,235px)!important;height:min(79vw,335px)!important;max-height:46dvh!important;margin-inline:auto!important} #virtualDesignerDialog .virtual-designer-stage.landscape{max-height:46dvh!important} /* v2.5.75 — simple Wallet display selection */ #cardDialog.unified-document-editor .document-display-choice, #cardDialog.unified-document-editor #documentDisplayMessage{ display:none!important; } #cardDialog.unified-document-editor .wallet-display-summary{ margin-top:8px!important; } #cardDialog.unified-document-editor.template-bound .wallet-display-summary{ display:none!important; } .wallet-display-picker-message{ margin:0 8px 8px; padding:9px 10px; border:1px dashed rgba(215,171,75,.24); border-radius:10px; background:rgba(215,171,75,.05); color:var(--muted); font-size:10px; line-height:1.5; } .wallet-display-picker-message.hidden{display:none!important} .wallet-display-picker-message button{ margin-top:7px; width:100%; min-height:34px; border:1px solid rgba(215,171,75,.25); border-radius:9px; background:rgba(215,171,75,.1); color:var(--gold); font-size:10px; font-weight:700; } /* Image display still dims Designer, but without extra explanatory block. */ #cardDialog.unified-document-editor.image-display-active:not(.template-bound) #virtualDesignerEntry{ opacity:.42; filter:saturate(.55); pointer-events:none; } #cardDialog.unified-document-editor.image-display-active:not(.template-bound) #virtualDesignerEntry::after{ content:"نمایش کارت از تصویر فعال است"; } /* v2.5.75 — Wallet display inline under category */ #cardDialog.unified-document-editor .wallet-display-summary{ margin-top:7px!important; } #cardDialog.unified-document-editor .wallet-display-inline-picker{ margin-top:6px; padding:6px; display:grid; gap:5px; border:1px solid rgba(215,171,75,.16); border-radius:11px; background:rgba(255,255,255,.02); } #cardDialog.unified-document-editor .wallet-display-inline-picker.hidden{ display:none!important; } #cardDialog.unified-document-editor .wallet-display-inline-picker>button{ width:100%; min-height:42px; padding:7px 9px; display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid rgba(255,255,255,.07); border-radius:9px; background:rgba(255,255,255,.02); color:inherit; text-align:right; } #cardDialog.unified-document-editor .wallet-display-inline-picker>button.active{ border-color:rgba(215,171,75,.3); background:rgba(215,171,75,.08); } #cardDialog.unified-document-editor .wallet-display-inline-picker>button span{ display:flex; flex-direction:column; gap:2px; } #cardDialog.unified-document-editor .wallet-display-inline-picker>button small{ font-size:9px; color:var(--muted); } #cardDialog.unified-document-editor .wallet-display-inline-message{ padding:8px 9px; border:1px dashed rgba(215,171,75,.22); border-radius:9px; background:rgba(215,171,75,.045); color:var(--muted); font-size:10px; line-height:1.5; } #cardDialog.unified-document-editor .wallet-display-inline-message.hidden{ display:none!important; } #cardDialog.unified-document-editor .wallet-display-inline-message button{ margin-top:6px; width:100%; min-height:32px; border:1px solid rgba(215,171,75,.25); border-radius:8px; background:rgba(215,171,75,.1); color:var(--gold); font-size:10px; font-weight:700; } /* Designer directly follows Wallet display */ #cardDialog.unified-document-editor #virtualDesignerEntry{ margin-top:8px!important; } #cardDialog.unified-document-editor.template-bound #walletDisplaySummaryRow, #cardDialog.unified-document-editor.template-bound #walletDisplayInlinePicker, #cardDialog.unified-document-editor.template-bound #virtualDesignerEntry{ display:none!important; } /* v2.5.75 — simplified image-display state */ #cardDialog.unified-document-editor .wallet-display-inline-message{ display:none!important; } #cardDialog.unified-document-editor .wallet-image-empty-card{ width:100%; min-height:118px; margin-top:7px; padding:14px 12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; border:1px dashed rgba(215,171,75,.28); border-radius:14px; background:rgba(215,171,75,.045); color:inherit; text-align:center; } #cardDialog.unified-document-editor .wallet-image-empty-card.hidden{ display:none!important; } #cardDialog.unified-document-editor .wallet-image-empty-icon{ font-size:28px; color:var(--gold); line-height:1; } #cardDialog.unified-document-editor .wallet-image-empty-card>span:nth-child(2){ display:flex; flex-direction:column; gap:3px; } #cardDialog.unified-document-editor .wallet-image-empty-card strong{ font-size:12px; } #cardDialog.unified-document-editor .wallet-image-empty-card small{ font-size:9px; color:var(--muted); } #cardDialog.unified-document-editor .wallet-image-empty-card>i{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(215,171,75,.2); border-radius:9px; background:rgba(215,171,75,.07); color:var(--gold); font-style:normal; } /* When image mode is selected, Designer remains visible but dimmed. */ #cardDialog.unified-document-editor.image-display-active:not(.template-bound) #virtualDesignerEntry{ opacity:.4!important; filter:saturate(.5)!important; pointer-events:none!important; } #cardDialog.unified-document-editor.image-display-active:not(.template-bound) #virtualDesignerEntry::after{ content:"نمایش تصویر مدرک فعال است"!important; } /* For Other Documents, default document-image orientation is portrait. */ #cardDialog.unified-document-editor #documentImageOrientationBtn.portrait{ color:var(--gold); } /* v2.5.75 — empty image mode is represented directly on the document card */ .wallet-card .missing-document-image-card{ width:100%; height:100%; min-height:100%; padding:16px 12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:0; border-radius:inherit; background:linear-gradient(180deg,rgba(215,171,75,.055),rgba(255,255,255,.015)); color:inherit; text-align:center; } .wallet-card .missing-document-image-icon{ font-size:30px; line-height:1; color:var(--gold); } .wallet-card .missing-document-image-card>span:nth-child(2){ display:flex; flex-direction:column; gap:4px; } .wallet-card .missing-document-image-card strong{ font-size:12px; line-height:1.5; } .wallet-card .missing-document-image-card small{ font-size:9px; color:var(--muted); } .wallet-card .missing-document-image-card>i{display:none!important; width:31px; height:31px; display:flex; align-items:center; justify-content:center; margin-top:2px; border:1px solid rgba(215,171,75,.22); border-radius:9px; background:rgba(215,171,75,.08); color:var(--gold); font-style:normal; } /* An image-mode Other Document with no image should remain portrait in the main list. */ .other-document-slide.portrait .missing-document-image-card{ min-height:100%; } /* v2.5.75 — only pencil opens edit */ .wallet-card .missing-document-image-card{ cursor:default; } .wallet-card .missing-document-image-card .missing-document-image-edit{ width:31px; height:31px; display:flex; align-items:center; justify-content:center; margin-top:2px; padding:0; border:1px solid rgba(215,171,75,.22); border-radius:9px; background:rgba(215,171,75,.08); color:var(--gold); font-size:14px; } /* v2.5.75 — unified document image header */ #cardDialog.unified-document-editor .document-media-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 9px; padding:9px 10px; border:1px solid rgba(215,171,75,.15); border-radius:12px; background:rgba(255,255,255,.02); } #cardDialog.unified-document-editor .document-media-header-copy{ min-width:0; display:flex; flex-direction:column; gap:2px; } #cardDialog.unified-document-editor .document-media-header-copy strong{ font-size:12px; line-height:1.35; } #cardDialog.unified-document-editor .document-media-header-copy small{ font-size:9px; line-height:1.45; color:var(--muted); } #cardDialog.unified-document-editor .document-media-header-actions{ flex:0 0 auto; display:flex; align-items:center; gap:6px; } #cardDialog.unified-document-editor .document-media-header-actions .orientation-button{ min-height:36px!important; margin:0!important; } #cardDialog.unified-document-editor .document-media-header-actions .compact-collapse-btn{ width:36px!important; height:36px!important; min-width:36px!important; } #cardDialog.unified-document-editor #frontDocumentPhotoPicker{ scroll-margin-top:74px; } @media(max-width:390px){ #cardDialog.unified-document-editor .document-media-header{ align-items:flex-start; } #cardDialog.unified-document-editor .document-media-header-copy small{ max-width:155px; } } /* v2.5.75 — simple outer media header; orientation appears only inside opened content */ #cardDialog.unified-document-editor .document-media-header{display:none!important} #cardDialog.unified-document-editor .document-orientation-panel{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 9px; padding:9px 10px; border:1px solid rgba(215,171,75,.16); border-radius:11px; background:rgba(255,255,255,.025); } #cardDialog.unified-document-editor .document-orientation-panel>span{ min-width:0; display:flex; flex-direction:column; gap:2px; } #cardDialog.unified-document-editor .document-orientation-panel strong{ font-size:11px; } #cardDialog.unified-document-editor .document-orientation-panel small{ font-size:9px; line-height:1.4; color:var(--muted); } #cardDialog.unified-document-editor .document-orientation-panel .orientation-button{ flex:0 0 auto; margin:0!important; min-height:36px!important; } #cardDialog.unified-document-editor .document-photo-anchor{ height:1px; margin:0; scroll-margin-top:68px; } #cardDialog.unified-document-editor #frontDocumentPhotoPicker{ scroll-margin-top:68px; } /* v2.5.75 — shared orientation is part of the "روی مدرک" block */ #cardDialog.unified-document-editor .document-orientation-panel{display:none!important} #cardDialog.unified-document-editor .front-document-picker{padding-top:9px!important} #cardDialog.unified-document-editor .front-document-header{ display:flex;align-items:center;justify-content:space-between;gap:10px; margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.055) } #cardDialog.unified-document-editor .front-document-header>span{min-width:0;display:flex;flex-direction:column;gap:2px} #cardDialog.unified-document-editor .front-document-header strong{font-size:11px} #cardDialog.unified-document-editor .front-document-header small{font-size:9px;line-height:1.4;color:var(--muted)} #cardDialog.unified-document-editor .front-document-header .orientation-button{flex:0 0 auto;margin:0!important;min-height:36px!important} #cardDialog.unified-document-editor .back-document-header{display:flex;align-items:center;gap:6px;margin-bottom:6px} #cardDialog.unified-document-editor .back-document-header strong{font-size:11px} /* v2.5.75 — anchor native iOS file picker to the visible Front file button */ #cardDialog.unified-document-editor #frontFileButton{ scroll-margin-top:96px; } /* v2.5.75 — native iOS picker anchor must be the real front file input */ #cardDialog.unified-document-editor #frontFileButton{ position:relative!important; overflow:hidden!important; isolation:isolate; } #cardDialog.unified-document-editor #frontFileButton #frontFile{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; margin:0!important; padding:0!important; opacity:.001!important; display:block!important; cursor:pointer; z-index:5!important; } /* v2.5.75 — iOS native picker must be opened by a real tap on the visible file control */ #cardDialog.unified-document-editor #frontFileButton.front-file-attention{ position:relative; z-index:20; outline:2px solid rgba(215,171,75,.72); outline-offset:3px; box-shadow:0 0 0 5px rgba(215,171,75,.12),0 0 18px rgba(215,171,75,.25); animation:frontFileAttentionPulse .8s ease-in-out 2; } @keyframes frontFileAttentionPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.045)} } /* v2.5.75 — longer visible guidance for Front image/file button */ #cardDialog.unified-document-editor .front-file-guidance{ margin-top:7px; padding:8px 10px; border:1px solid rgba(215,171,75,.28); border-radius:9px; background:rgba(215,171,75,.08); color:var(--gold); font-size:10px; line-height:1.5; text-align:center; opacity:0; transform:translateY(-2px); transition:opacity .2s ease,transform .2s ease; } #cardDialog.unified-document-editor .front-file-guidance.hidden{display:none!important} #cardDialog.unified-document-editor .front-file-guidance.show{ opacity:1; transform:translateY(0); } #cardDialog.unified-document-editor #frontFileButton.front-file-attention{ animation:frontFileAttentionPulse 1s ease-in-out 5; } /* v2.5.75 — expiry state for Other Document virtual cards */ .other-expiry-indicator{ display:inline-flex;align-items:center;min-height:24px;padding:3px 7px;border-radius:999px; white-space:nowrap;font-size:9px;line-height:1.2 } .other-expiry-indicator b{font-weight:750} .other-expiry-indicator.warning{ border:1px solid rgba(238,156,47,.42);background:rgba(238,156,47,.13);color:#f0a13c } .other-expiry-indicator.expired{ border:1px solid rgba(226,72,72,.46);background:rgba(226,72,72,.14);color:#ef6666 } .wallet-card.virtual-expiry-warning .virtual-document-card{ border-color:rgba(238,156,47,.72)!important; box-shadow:inset 0 0 0 1px rgba(238,156,47,.14),0 0 18px rgba(238,156,47,.10)!important; background:linear-gradient(180deg,rgba(238,156,47,.115),rgba(238,156,47,.035)),var(--panel,#111)!important } .wallet-card.virtual-expiry-expired .virtual-document-card{ border-color:rgba(226,72,72,.78)!important; box-shadow:inset 0 0 0 1px rgba(226,72,72,.16),0 0 18px rgba(226,72,72,.12)!important; background:linear-gradient(180deg,rgba(226,72,72,.13),rgba(226,72,72,.04)),var(--panel,#111)!important } .wallet-card.virtual-expiry-warning .virtual-document-card .virtual-positioned-field, .wallet-card.virtual-expiry-expired .virtual-document-card .virtual-positioned-field{ text-shadow:0 1px 2px rgba(0,0,0,.35) } @media(max-width:430px){ .other-expiry-indicator{max-width:150px;overflow:hidden;text-overflow:ellipsis;font-size:8.5px} } /* v2.5.75 — branded Face ID entry */ #lockScreen.lock-screen{ justify-content:center; } #lockScreen .lock-brand{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; } #lockScreen .lock-logo{ width:min(50vw,210px); height:auto; max-height:30vh; object-fit:contain; margin:0 auto 8px; filter:contrast(1.16) saturate(1.12) brightness(1.08) drop-shadow(0 5px 22px rgba(212,175,55,.16)); } #lockScreen .lock-brand-name{ display:flex; direction:ltr; align-items:baseline; justify-content:center; gap:0; font-size:25px; line-height:1; font-weight:760; letter-spacing:-.7px; } #lockScreen .lock-brand-name .aio-part{color:#d9aa41} #lockScreen .lock-brand-name .wallet-part{color:#fff} #lockScreen .lock-brand-tagline{ direction:ltr; margin-top:6px; color:#9f988b; font-size:9px; line-height:1; font-weight:500; letter-spacing:.55px; } #lockScreen .face-unlock-icon{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:76px; min-height:72px; margin:18px auto 0; padding:8px; border:0; border-radius:18px; background:transparent; color:#d9aa41; box-shadow:none; } #lockScreen .face-unlock-icon.hidden{display:none!important} #lockScreen .face-unlock-icon svg{ width:42px; height:42px; fill:none; stroke:currentColor; stroke-width:2.15; stroke-linecap:round; stroke-linejoin:round; } #lockScreen .face-unlock-icon>span{ color:#bfb8aa; font-size:9px; font-weight:650; letter-spacing:.15px; } #lockScreen .face-unlock-icon:active{ transform:scale(.96); opacity:.82; } #lockScreen #lockHint{ margin:11px 0 0; font-size:10px; text-align:center; } #lockScreen .auth-panel{ margin-top:12px; } /* v2.5.75 — branded automatic Face ID launch */ .secure-startup-shield .startup-brand{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; } .secure-startup-shield .startup-brand img{ width:min(50vw,215px); height:auto; max-height:30vh; object-fit:contain; margin:0 auto 8px; } .secure-startup-shield .startup-brand-name{ display:flex; direction:ltr; align-items:baseline; justify-content:center; gap:0; font-size:25px; line-height:1; font-weight:760; letter-spacing:-.7px; } .secure-startup-shield .startup-brand-name .aio-part{color:#d9aa41} .secure-startup-shield .startup-brand-name .wallet-part{color:#fff} .secure-startup-shield .startup-brand-tagline{ direction:ltr; margin-top:6px; color:#9f988b; font-size:9px; line-height:1; font-weight:500; letter-spacing:.55px; } .secure-startup-shield .startup-face-mark{ margin-top:18px; color:#d9aa41; opacity:.9; } .secure-startup-shield .startup-face-mark svg{ width:42px; height:42px; fill:none; stroke:currentColor; stroke-width:2.15; stroke-linecap:round; stroke-linejoin:round; } /* v2.5.75 — configurable Bank Health Check */ .bank-health-required-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } .bank-health-required-item{ min-width:0; display:flex; align-items:center; gap:8px; min-height:40px; padding:8px 10px; border:1px solid rgba(212,175,55,.13); border-radius:11px; background:rgba(255,255,255,.02); color:var(--ink); } .bank-health-required-item input{ width:17px!important; height:17px!important; min-width:17px; margin:0!important; padding:0!important; accent-color:#d9aa41; } .bank-health-required-item span{ min-width:0; font-size:10.5px; line-height:1.35; } .bank-health-required-item:has(input:checked){ border-color:rgba(212,175,55,.34); background:rgba(212,175,55,.07); } .bank-health-image-rule{grid-column:1/-1} .bank-health-settings-note{ display:block; margin-top:8px; color:var(--muted); font-size:9px; line-height:1.55; } @media(max-width:370px){ .bank-health-required-grid{grid-template-columns:1fr} .bank-health-image-rule{grid-column:auto} } /* v2.5.75 — collapsible settings drawer */ .settings-drawer-toggle{ width:100%; min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0; border:0; background:transparent; color:var(--ink); text-align:right; } .settings-drawer-copy{ min-width:0; display:flex; flex-direction:column; gap:3px; } .settings-drawer-copy strong{font-size:12px} .settings-drawer-copy small{ color:var(--muted); font-size:9px; line-height:1.4; } .settings-drawer-chevron{ flex:0 0 auto; color:#d9aa41; font-size:20px; line-height:1; transition:transform .18s ease; } .settings-drawer-toggle.is-open .settings-drawer-chevron{transform:rotate(180deg)} .settings-drawer-body{ padding-top:10px; border-top:1px solid rgba(255,255,255,.055); } .settings-drawer-body.hidden{display:none!important} /* v2.5.75 — unified Bank / Identity / Other editor UI */ #cardDialog.unified-document-editor .unified-document-section, #cardDialog.unified-document-editor #otherMediaCompactSection, #cardDialog.unified-document-editor #otherCustomFieldsSection{ margin:9px 0; padding:10px; border:1px solid rgba(212,175,55,.14); border-radius:14px; background:rgba(255,255,255,.018); } #cardDialog.unified-document-editor .unified-document-body{ display:grid; gap:9px; padding-top:9px; } #cardDialog.unified-document-editor .unified-document-body.compact-collapsed{ display:none!important; } #cardDialog.bank-document-editor #bankFields .bank-fields-head{display:none!important} #cardDialog.identity-document-editor #identityFields.hidden{display:none!important} #cardDialog.identity-document-editor #identityFields:not(.hidden){display:block!important} #cardDialog.bank-document-editor #cardSubtitleLabel, #cardDialog.identity-document-editor #cardSubtitleLabel{ display:none!important; } /* The template controls remain specific to Other Documents; bank/identity only use their legacy fields + optional custom fields for now. */ #cardDialog.bank-document-editor #otherCustomFieldsSection .custom-template-block, #cardDialog.bank-document-editor #otherCustomFieldsSection #templateBindingNotice, #cardDialog.bank-document-editor #otherCustomFieldsSection #templateDataEntry, #cardDialog.identity-document-editor #otherCustomFieldsSection .custom-template-block, #cardDialog.identity-document-editor #otherCustomFieldsSection #templateBindingNotice, #cardDialog.identity-document-editor #otherCustomFieldsSection #templateDataEntry{ display:none!important; } #cardDialog.bank-document-editor #otherCustomFieldsSection .other-info-title, #cardDialog.identity-document-editor #otherCustomFieldsSection .other-info-title{ margin-bottom:7px; } /* Shared media orientation should be visible in all unified editors. */ #cardDialog.bank-document-editor #documentImageOrientationBtn, #cardDialog.identity-document-editor #documentImageOrientationBtn, #cardDialog.unified-document-editor #documentImageOrientationBtn{ display:flex!important; } /* v2.5.75 — one Template-first workflow for Bank / Identity / Other */ #cardDialog.unified-document-editor #otherTemplateDecision{display:block} #cardDialog.unified-document-editor #otherTemplateDecision.hidden{display:none!important} #cardDialog.unified-document-editor .other-template-undecided{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; align-items:center; } #cardDialog.unified-document-editor .other-decision-summary-row{ display:flex; flex-wrap:wrap; gap:7px; } #cardDialog.unified-document-editor .other-decision-summary-row.hidden{display:none!important} #cardDialog.unified-document-editor .other-inline-summary{ flex:1 1 150px; min-width:0; } #cardDialog.unified-document-editor #otherCategoryTextRow.hidden{display:none!important} /* The top decision is the only template picker in the editor. */ #cardDialog.unified-document-editor #otherCustomFieldsSection .custom-template-block{ display:none!important; } /* Bound-template behavior, same as Other Documents. */ #cardDialog.unified-document-editor.template-bound #otherCustomFieldsSection .custom-fields-head, #cardDialog.unified-document-editor.template-bound #otherCustomFieldsSection #customFieldsList, #cardDialog.unified-document-editor.template-bound #virtualDocumentOrientation, #cardDialog.unified-document-editor.template-bound #virtualDesignerEntry, #cardDialog.unified-document-editor.template-bound #templatePickerPreview{ display:none!important; } #cardDialog.unified-document-editor .compact-template-bound{ margin-top:8px!important; padding:10px!important; display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid rgba(215,171,75,.2); border-radius:12px; background:rgba(215,171,75,.055) } #cardDialog.unified-document-editor .compact-template-bound.hidden{display:none!important} #cardDialog.unified-document-editor .compact-template-bound>span{ min-width:0;display:flex;flex-direction:column;gap:2px } #cardDialog.unified-document-editor .compact-template-bound strong{font-size:12px} #cardDialog.unified-document-editor .compact-template-bound small{font-size:9px;color:var(--muted)} #cardDialog.unified-document-editor .template-values-button{ flex:0 0 auto;min-height:36px;padding:6px 10px;border-radius:10px; border:1px solid rgba(215,171,75,.25);background:rgba(215,171,75,.11); color:var(--gold);font-size:11px } /* Undo the temporary v2.5.75 rule that hid template binding for bank/identity. */ #cardDialog.bank-document-editor.template-bound #templateBindingNotice, #cardDialog.identity-document-editor.template-bound #templateBindingNotice{ display:flex!important; } #cardDialog.bank-document-editor #templateBindingNotice.hidden, #cardDialog.identity-document-editor #templateBindingNotice.hidden{ display:none!important; } /* Same media UI for all three categories. */ #cardDialog.unified-document-editor .compact-media-actions{ display:grid; grid-template-columns:minmax(92px,1fr) auto auto; align-items:center; gap:7px; margin-top:7px; } #cardDialog.unified-document-editor .compact-scan-button{ min-height:38px!important;padding:7px 10px!important;border-radius:10px!important; font-size:11px!important;white-space:nowrap } #cardDialog.unified-document-editor .compact-source-button{ position:relative;min-width:64px;min-height:38px;padding:5px 8px; display:flex;align-items:center;justify-content:center;gap:5px; border:1px solid rgba(215,171,75,.22);border-radius:10px; background:rgba(215,171,75,.075);color:var(--gold);cursor:pointer;overflow:hidden } #cardDialog.unified-document-editor .compact-source-button>span{font-size:17px;line-height:1} #cardDialog.unified-document-editor .compact-source-button>small{font-size:9px;white-space:nowrap} #cardDialog.unified-document-editor .compact-source-button input{ position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer } #cardDialog.unified-document-editor .legacy-media-input{ position:absolute!important;width:1px!important;height:1px!important; opacity:0!important;pointer-events:none!important } #cardDialog.unified-document-editor .compact-media-actions .orientation-button{ margin:0!important;min-height:38px!important } #cardDialog.unified-document-editor #documentPhotoGrid .scan-hint{display:none!important} #cardDialog.unified-document-editor #documentPhotoGrid .photo-picker{padding:9px!important} /* Bank/Identity image direction starts landscape unless a template overrides it. */ #cardDialog.bank-document-editor .front-document-header, #cardDialog.identity-document-editor .front-document-header{ min-height:38px } /* When "ثبت/ویرایش اطلاعات" opens for a Bank/Identity template, standard legacy fields and template custom fields share one modal. */ .template-values-fields-host .template-standard-entry{ display:grid!important; gap:9px!important; margin:0 0 12px!important; padding:0 0 12px!important; border:0!important; border-bottom:1px solid rgba(255,255,255,.07)!important; background:transparent!important; } .template-values-fields-host .template-standard-entry.compact-collapsed{display:grid!important} @media(max-width:430px){ #cardDialog.unified-document-editor .compact-template-bound{ align-items:flex-start;flex-direction:column } #cardDialog.unified-document-editor .template-values-button{width:100%} } /* v2.5.75 — themed, tidy template-first controls */ #cardDialog.unified-document-editor .other-template-decision{ margin:8px 0 10px!important; padding:0!important; } #cardDialog.unified-document-editor .other-template-undecided{ display:grid!important; grid-template-columns:minmax(0,1fr) 86px!important; gap:8px!important; align-items:stretch!important; } #cardDialog.unified-document-editor .unified-template-select{ appearance:none!important; -webkit-appearance:none!important; width:100%!important; min-width:0!important; min-height:42px!important; margin:0!important; padding:8px 34px 8px 12px!important; border:1px solid rgba(215,171,75,.27)!important; border-radius:11px!important; background: linear-gradient(45deg,transparent 50%,#d9aa41 50%) calc(14px) 17px/5px 5px no-repeat, linear-gradient(135deg,#d9aa41 50%,transparent 50%) calc(9px) 17px/5px 5px no-repeat, rgba(215,171,75,.055)!important; color:var(--text,#fff)!important; font:inherit!important; font-size:11px!important; line-height:1.4!important; text-align:right!important; direction:rtl!important; box-shadow:none!important; } #cardDialog.unified-document-editor .unified-template-select:focus{ outline:none!important; border-color:rgba(215,171,75,.55)!important; box-shadow:0 0 0 2px rgba(215,171,75,.08)!important; } #cardDialog.unified-document-editor .unified-template-select option, #cardDialog.unified-document-editor .unified-template-select optgroup{ background:#151515!important; color:#fff!important; } #cardDialog.unified-document-editor .unified-no-template-btn{ width:86px!important; min-width:86px!important; min-height:42px!important; margin:0!important; padding:6px 8px!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:1px!important; border:1px solid rgba(215,171,75,.27)!important; border-radius:11px!important; background:rgba(215,171,75,.075)!important; color:var(--gold,#d9aa41)!important; box-shadow:none!important; } #cardDialog.unified-document-editor .unified-no-template-btn span{ font-size:14px!important;line-height:1!important;color:var(--gold,#d9aa41)!important } #cardDialog.unified-document-editor .unified-no-template-btn small{ font-size:9px!important;color:var(--text,#fff)!important;white-space:nowrap } /* Clean aligned summary after choosing template/no-template */ #cardDialog.unified-document-editor .other-decision-summary-row{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:7px!important; margin-top:8px!important; align-items:stretch!important; } #cardDialog.unified-document-editor .other-decision-summary-row.hidden{display:none!important} #cardDialog.unified-document-editor #walletDisplaySummaryRow{ grid-column:1/-1!important; } #cardDialog.unified-document-editor .other-inline-summary{ width:auto!important; min-width:0!important; margin:0!important; min-height:44px!important; } #cardDialog.unified-document-editor .other-inline-summary button{ appearance:none!important; -webkit-appearance:none!important; width:34px!important; min-width:34px!important; height:34px!important; padding:0!important; border:1px solid rgba(215,171,75,.20)!important; border-radius:9px!important; background:rgba(215,171,75,.07)!important; color:var(--gold,#d9aa41)!important; box-shadow:none!important; font-size:13px!important; } /* Designer uses predefined standard fields; custom additions are optional. */ #cardDialog.bank-document-editor #otherCustomFieldsSection, #cardDialog.identity-document-editor #otherCustomFieldsSection{ opacity:.88; } #cardDialog.bank-document-editor #otherCustomFieldsSection .custom-fields-head small, #cardDialog.identity-document-editor #otherCustomFieldsSection .custom-fields-head small{ font-size:9px!important; } /* Image display => virtual designer visible but clearly unavailable, same pattern for all docs. */ #cardDialog.unified-document-editor.image-display-active #virtualDesignerEntry, #cardDialog.unified-document-editor #virtualDesignerEntry.designer-disabled{ opacity:.34!important; filter:saturate(.25)!important; pointer-events:none!important; } #cardDialog.unified-document-editor.image-display-active #virtualDesignerEntry::after, #cardDialog.unified-document-editor #virtualDesignerEntry.designer-disabled::after{ content:'نمایش تصویر مدارک فعال است'; display:block; margin-top:7px; padding-top:6px; border-top:1px solid rgba(255,255,255,.06); color:var(--muted); font-size:9px; text-align:center; } #cardDialog.unified-document-editor #openVirtualDesignerBtn:disabled{ opacity:.6!important; } /* Avoid browser-native bright/white button backgrounds in this decision area. */ #cardDialog.unified-document-editor .other-template-decision button, #cardDialog.unified-document-editor .other-decision-summary-row button{ -webkit-tap-highlight-color:transparent; } @media(max-width:370px){ #cardDialog.unified-document-editor .other-template-undecided{ grid-template-columns:minmax(0,1fr) 78px!important; } #cardDialog.unified-document-editor .unified-no-template-btn{ width:78px!important;min-width:78px!important } } /* v2.5.75 — shared Wallet Display / Image Empty / Summary UI for all document types */ #cardDialog.unified-document-editor .unified-wallet-display-picker{ display:grid; grid-template-columns:1fr; gap:7px; margin:7px 0 0; padding:0; background:transparent; } #cardDialog.unified-document-editor .unified-wallet-display-picker.hidden{ display:none!important; } #cardDialog.unified-document-editor .unified-wallet-display-picker button{ appearance:none!important; -webkit-appearance:none!important; width:100%!important; min-height:46px!important; margin:0!important; padding:8px 10px!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; border:1px solid rgba(215,171,75,.18)!important; border-radius:11px!important; background:rgba(255,255,255,.018)!important; color:var(--text,#fff)!important; box-shadow:none!important; text-align:right!important; } #cardDialog.unified-document-editor .unified-wallet-display-picker button.active{ border-color:rgba(215,171,75,.48)!important; background:rgba(215,171,75,.095)!important; } #cardDialog.unified-document-editor .unified-wallet-display-picker button span{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px; } #cardDialog.unified-document-editor .unified-wallet-display-picker button strong{ color:var(--text,#fff)!important; font-size:11px!important; } #cardDialog.unified-document-editor .unified-wallet-display-picker button small{ color:var(--muted)!important; font-size:9px!important; } #cardDialog.unified-document-editor .unified-wallet-display-picker button b{ color:var(--gold,#d9aa41)!important; font-size:16px!important; font-weight:500!important; } #cardDialog.unified-document-editor .unified-wallet-image-empty{ appearance:none!important; -webkit-appearance:none!important; width:100%!important; min-height:72px!important; margin:8px 0 0!important; padding:10px!important; display:grid!important; grid-template-columns:34px minmax(0,1fr) 30px!important; align-items:center!important; gap:9px!important; border:1px dashed rgba(215,171,75,.28)!important; border-radius:12px!important; background:rgba(215,171,75,.045)!important; color:var(--text,#fff)!important; box-shadow:none!important; text-align:right!important; } #cardDialog.unified-document-editor .unified-wallet-image-empty.hidden{ display:none!important; } #cardDialog.unified-document-editor .unified-wallet-image-empty .wallet-image-empty-icon{ width:34px;height:34px; display:flex;align-items:center;justify-content:center; border:1px solid rgba(215,171,75,.22); border-radius:9px; color:var(--gold,#d9aa41)!important; background:rgba(215,171,75,.06)!important; } #cardDialog.unified-document-editor .unified-wallet-image-empty span:nth-child(2){ min-width:0; display:flex; flex-direction:column; gap:2px; } #cardDialog.unified-document-editor .unified-wallet-image-empty strong{ color:var(--text,#fff)!important; font-size:11px!important; } #cardDialog.unified-document-editor .unified-wallet-image-empty small{ color:var(--muted)!important; font-size:9px!important; } #cardDialog.unified-document-editor .unified-wallet-image-empty i{ width:28px;height:28px; display:flex;align-items:center;justify-content:center; border:1px solid rgba(215,171,75,.18); border-radius:8px; background:rgba(215,171,75,.055); color:var(--gold,#d9aa41)!important; font-style:normal!important; } /* Template and category always share one row after the initial decision. */ #cardDialog.unified-document-editor .other-decision-summary-row{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:7px!important; } #cardDialog.unified-document-editor #otherTemplateSummary, #cardDialog.unified-document-editor #otherCategoryTextRow{ grid-column:auto!important; } #cardDialog.unified-document-editor #walletDisplaySummaryRow{ grid-column:1/-1!important; } #cardDialog.unified-document-editor #editOtherCategoryBtn.hidden{ display:none!important; } /* Shared summary pencils/buttons always stay inside the black/gold theme. */ #cardDialog.unified-document-editor .other-inline-summary button{ color:var(--gold,#d9aa41)!important; background:rgba(215,171,75,.065)!important; border-color:rgba(215,171,75,.20)!important; } /* Image mode dims the designer but keeps its place visible. */ #cardDialog.unified-document-editor.image-display-active #virtualDesignerEntry{ opacity:.34!important; filter:saturate(.2)!important; } /* v2.5.75 — clean shared decision stack 1) template + category 2) wallet display + its drawer 3) virtual designer */ #cardDialog.unified-document-editor .other-template-decision{ display:flex; flex-direction:column; gap:8px; } #cardDialog.unified-document-editor .other-template-decision.hidden{display:none!important} #cardDialog.unified-document-editor .other-decision-summary-row{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:7px!important; width:100%!important; margin:0!important; } #cardDialog.unified-document-editor .other-decision-summary-row.hidden{display:none!important} #cardDialog.unified-document-editor #otherTemplateSummary, #cardDialog.unified-document-editor #otherCategoryTextRow{ width:100%!important; min-width:0!important; margin:0!important; } #cardDialog.unified-document-editor .wallet-display-block{ display:flex; flex-direction:column; gap:7px; width:100%; margin:0; padding:0; } #cardDialog.unified-document-editor .wallet-display-block.hidden{display:none!important} #cardDialog.unified-document-editor #walletDisplaySummaryRow{ width:100%!important; min-width:0!important; margin:0!important; grid-column:auto!important; } #cardDialog.unified-document-editor #walletDisplayInlinePicker{ width:100%!important; margin:0!important; } #cardDialog.unified-document-editor #walletImageEmptyCard{ width:100%!important; margin:0!important; } /* Designer is never part of template/category or Wallet picker layout. */ #cardDialog.unified-document-editor #virtualDesignerEntry{ width:100%!important; margin:0!important; box-sizing:border-box!important; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px!important; border:1px solid rgba(215,171,75,.14); border-radius:12px; background:rgba(255,255,255,.018); } #cardDialog.unified-document-editor #virtualDesignerEntry.hidden{display:none!important} #cardDialog.unified-document-editor #virtualDesignerEntry .virtual-designer-entry-actions{ margin:0!important; align-self:center; } #cardDialog.unified-document-editor #virtualDesignerEntry #designerEntryMessage{ grid-column:1/-1; } #cardDialog.unified-document-editor #virtualDesignerEntry.designer-disabled{ opacity:.34!important; filter:saturate(.25)!important; pointer-events:none!important; } /* The Wallet drawer always expands beneath its own summary. */ #cardDialog.unified-document-editor .unified-wallet-display-picker{ position:static!important; inset:auto!important; float:none!important; clear:both!important; z-index:auto!important; } /* Generic template placeholder: no category-specific visual wording. */ #cardDialog.unified-document-editor .unified-template-select{ text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } @media(max-width:430px){ #cardDialog.unified-document-editor #virtualDesignerEntry{ grid-template-columns:minmax(0,1fr) auto; } } /* v2.5.75 — remove reserved empty space between Wallet Display and Designer */ #cardDialog.unified-document-editor .wallet-display-block{ gap:0!important; min-height:0!important; height:auto!important; padding:0!important; margin:0!important; } #cardDialog.unified-document-editor .wallet-display-block > *{ min-height:0; } #cardDialog.unified-document-editor .wallet-display-block > .hidden{ display:none!important; height:0!important; min-height:0!important; max-height:0!important; margin:0!important; padding:0!important; border:0!important; overflow:hidden!important; } #cardDialog.unified-document-editor .wallet-display-block.has-expanded-content{ gap:7px!important; } /* The picker and image prompt participate in layout only while visible. */ #cardDialog.unified-document-editor #walletDisplayInlinePicker.hidden, #cardDialog.unified-document-editor #walletImageEmptyCard.hidden{ position:absolute!important; width:0!important; height:0!important; min-height:0!important; max-height:0!important; margin:0!important; padding:0!important; border:0!important; opacity:0!important; pointer-events:none!important; overflow:hidden!important; } /* Keep Designer immediately below the Wallet block. */ #cardDialog.unified-document-editor #virtualDesignerEntry{ margin-top:0!important; } /* v2.5.75 — structural Wallet gap fix The wrapper is logical only; it must never reserve vertical space. */ #cardDialog.unified-document-editor #walletDisplayBlock:not(.hidden){ display:contents!important; } #cardDialog.unified-document-editor #walletDisplayBlock.hidden{ display:none!important; } /* Children become direct items in the shared vertical stack. */ #cardDialog.unified-document-editor #walletDisplaySummaryRow{ margin:0!important; width:100%!important; } #cardDialog.unified-document-editor #walletDisplayInlinePicker{ margin:0!important; width:100%!important; } #cardDialog.unified-document-editor #walletImageEmptyCard{ margin:0!important; width:100%!important; } #cardDialog.unified-document-editor #walletDisplayInlinePicker.hidden, #cardDialog.unified-document-editor #walletImageEmptyCard.hidden{ display:none!important; } /* Exact vertical order/spacing: summary -> drawer/image prompt -> designer. */ #cardDialog.unified-document-editor #otherTemplateDecision{ gap:8px!important; } #cardDialog.unified-document-editor #virtualDesignerEntry{ margin:0!important; } /* v2.5.75 — TRUE shared document editor for Bank / Identity / Other */ /* Virtual-card orientation is controlled only inside Designer. */ #cardDialog.unified-document-editor #virtualDocumentOrientation{ display:none!important; } /* All shared section headers/drawer controls use the same UI. */ #cardDialog.unified-document-editor .compact-section-title{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:8px!important; margin:0 0 8px!important; padding:0 1px!important; } #cardDialog.unified-document-editor .compact-section-title>span{ display:flex!important; flex-direction:column!important; gap:1px!important; min-width:0!important; } #cardDialog.unified-document-editor .compact-section-title strong{ font-size:13px!important; line-height:1.35!important; } #cardDialog.unified-document-editor .compact-section-title small{ font-size:9px!important; color:var(--muted)!important; line-height:1.35!important; } #cardDialog.unified-document-editor .compact-collapse-btn{ display:flex!important; align-items:center!important; justify-content:center!important; width:30px!important; height:30px!important; min-width:30px!important; padding:0!important; border-radius:9px!important; border:1px solid rgba(215,171,75,.18)!important; background:rgba(215,171,75,.07)!important; color:var(--gold)!important; font-size:16px!important; transition:transform .18s ease!important; } #cardDialog.unified-document-editor .compact-collapse-btn.is-collapsed{ transform:rotate(90deg)!important; } /* Image/File and Notes are identical drawers for all categories. */ #cardDialog.unified-document-editor #otherMediaCompactSection, #cardDialog.unified-document-editor #otherNotesCompactSection{ display:block!important; margin:0!important; padding:10px!important; border:1px solid rgba(215,171,75,.14)!important; border-radius:14px!important; background:rgba(255,255,255,.02)!important; } #cardDialog.unified-document-editor #documentPhotoGrid{ margin:0!important; gap:8px!important; } #cardDialog.unified-document-editor #documentPhotoGrid.compact-collapsed, #cardDialog.unified-document-editor #otherNotesCompactBody.compact-collapsed{ display:none!important; } #cardDialog.unified-document-editor #cardNotes{ min-height:64px!important; } #cardDialog.unified-document-editor .edit-danger-zone{ margin-top:8px!important; } /* Same image/file controls and cards. */ #cardDialog.unified-document-editor #documentPhotoGrid .photo-picker{ padding:9px!important; border:1px dashed rgba(215,171,75,.24)!important; border-radius:13px!important; background:rgba(255,255,255,.012)!important; } #cardDialog.unified-document-editor .front-document-header, #cardDialog.unified-document-editor .back-document-header{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:8px!important; } #cardDialog.unified-document-editor .compact-media-actions{ display:grid!important; grid-template-columns:minmax(92px,1fr) auto auto!important; align-items:center!important; gap:7px!important; margin-top:7px!important; } #cardDialog.unified-document-editor .compact-scan-button{ min-height:38px!important; padding:7px 10px!important; border-radius:10px!important; font-size:11px!important; white-space:nowrap!important; } #cardDialog.unified-document-editor .compact-source-button{ position:relative!important; min-width:64px!important; min-height:38px!important; padding:5px 8px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:5px!important; border:1px solid rgba(215,171,75,.22)!important; border-radius:10px!important; background:rgba(215,171,75,.075)!important; color:var(--gold)!important; cursor:pointer!important; overflow:hidden!important; } #cardDialog.unified-document-editor .compact-source-button>span{ font-size:17px!important; line-height:1!important; } #cardDialog.unified-document-editor .compact-source-button>small{ font-size:9px!important; white-space:nowrap!important; } #cardDialog.unified-document-editor .compact-source-button input{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; opacity:0!important; cursor:pointer!important; } #cardDialog.unified-document-editor .legacy-media-input{ position:absolute!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important; } #cardDialog.unified-document-editor .compact-media-actions .orientation-button{ margin:0!important; min-height:38px!important; } #cardDialog.unified-document-editor #documentPhotoGrid .scan-hint{ display:none!important; } #cardDialog.unified-document-editor .shared-orientation-proxy{ display:none!important; } #cardDialog.unified-document-editor #documentImageOrientationBtn{ display:flex!important; } /* Custom information card uses one style too. */ #cardDialog.unified-document-editor #otherCustomFieldsSection{ display:block!important; margin:0!important; padding:10px!important; border:1px solid rgba(215,171,75,.14)!important; border-radius:14px!important; background:rgba(255,255,255,.02)!important; opacity:1!important; } /* True shared vertical rhythm. */ #cardDialog.unified-document-editor #otherFormAfterDecision{ display:flex!important; flex-direction:column!important; gap:9px!important; } #cardDialog.unified-document-editor #otherFormAfterDecision.hidden{ display:none!important; } @media(max-width:430px){ #cardDialog.unified-document-editor #otherMediaCompactSection, #cardDialog.unified-document-editor #otherNotesCompactSection, #cardDialog.unified-document-editor #otherCustomFieldsSection{ padding:9px!important; } } /* v2.5.75 — definitive single Shared Document Editor. Shared components must never key off bank/identity/other classes. */ #cardDialog.unified-document-editor .compact-source-button{ position:relative!important; } #cardDialog.unified-document-editor .compact-source-button>small{ display:none!important; } #cardDialog.unified-document-editor .compact-source-button{ min-width:42px!important; width:42px!important; padding:5px!important; } #cardDialog.unified-document-editor .compact-source-button>span{ font-size:19px!important; } /* Real native input fills the same visible icon control for every category. */ #cardDialog.unified-document-editor #frontFileButton{ position:relative!important; overflow:hidden!important; } #cardDialog.unified-document-editor #frontFileButton #frontFile{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; opacity:0!important; cursor:pointer!important; } /* Identical 10-second attention guide for Bank / Identity / Other. */ #cardDialog.unified-document-editor #frontFileButton.front-file-attention{ position:relative!important; z-index:20!important; outline:2px solid rgba(215,171,75,.72)!important; outline-offset:3px!important; box-shadow:0 0 0 5px rgba(215,171,75,.12),0 0 18px rgba(215,171,75,.25)!important; animation:frontFileAttentionPulse 1s ease-in-out 5!important; } #cardDialog.unified-document-editor .front-file-guidance{ margin-top:7px!important; padding:8px 10px!important; border:1px solid rgba(215,171,75,.28)!important; border-radius:9px!important; background:rgba(215,171,75,.08)!important; color:var(--gold)!important; font-size:10px!important; line-height:1.5!important; text-align:center!important; opacity:0; transform:translateY(-2px); transition:opacity .2s ease,transform .2s ease; } #cardDialog.unified-document-editor .front-file-guidance.hidden{display:none!important} #cardDialog.unified-document-editor .front-file-guidance.show{ opacity:1!important; transform:translateY(0)!important; } /* Same compact media layout on every viewport/category. */ #cardDialog.unified-document-editor .compact-media-actions{ grid-template-columns:minmax(0,1fr) 42px!important; } #cardDialog.unified-document-editor .compact-media-actions .shared-orientation-proxy{ display:none!important; } /* Image/File and Notes use exactly the same drawer mechanics everywhere. */ #cardDialog.unified-document-editor #otherMediaCompactSection, #cardDialog.unified-document-editor #otherNotesCompactSection{ display:block!important; } #cardDialog.unified-document-editor #documentPhotoGrid.compact-collapsed, #cardDialog.unified-document-editor #otherNotesCompactBody.compact-collapsed{ display:none!important; } /* Virtual orientation is not duplicated in the form; Designer owns it. */ #cardDialog.unified-document-editor #virtualDocumentOrientation{ display:none!important; } /* v2.5.75 — approved aiowallet full-brand logo */ #secureStartupShield .new-full-brand-logo{ width:min(72vw,330px)!important; max-height:none!important; height:auto!important; margin:0 auto!important; object-fit:contain!important; filter:none!important; } #lockScreen .new-full-brand-logo{ width:min(68vw,300px)!important; max-height:none!important; height:auto!important; margin:0 auto 10px!important; object-fit:contain!important; filter:none!important; } #appLogoBtn.header-logo{ width:72px!important; height:44px!important; padding:0!important; overflow:visible!important; } #appLogoBtn.header-logo img{ width:72px!important; height:44px!important; object-fit:contain!important; border-radius:0!important; } .app-features-brand>img{ width:84px!important; height:62px!important; object-fit:contain!important; border-radius:0!important; } .settings-head-brand .settings-head-logo{ width:70px!important; height:48px!important; object-fit:contain!important; border-radius:0!important; } .settings-card.app-info>img{ width:84px!important; height:62px!important; object-fit:contain!important; border-radius:0!important; } /* v2.5.75 — definitions and values are separate */ #customFieldForm.custom-field-definition-mode #customFieldValueLabel, #customFieldForm.custom-field-definition-mode #iranPlateEditor{display:none!important} #customFieldForm.custom-field-value-mode > label, #customFieldForm.custom-field-value-mode #customExpiryCalendarRow, #customFieldForm.custom-field-value-mode #customExpiryReminderRow, #customFieldForm.custom-field-value-mode #linkedFieldEditor, #customFieldForm.custom-field-value-mode .custom-field-more{display:none!important} #customFieldForm.custom-field-value-mode #iranPlateEditor{display:block!important} #customFieldForm.custom-field-value-mode .custom-field-actions .danger-text{display:none!important} /* Standard bank/identity values live only inside the shared Data Entry section. */ #cardDialog.unified-document-editor #bankFields, #cardDialog.unified-document-editor #identityFields{display:none!important} #cardDialog.unified-document-editor #unifiedDataEntrySection{ display:block!important;margin:0!important;padding:10px!important; border:1px solid rgba(215,171,75,.14)!important;border-radius:14px!important; background:rgba(255,255,255,.02)!important } #cardDialog.unified-document-editor #unifiedDataEntryBody.compact-collapsed{display:none!important} .unified-data-entry-body{display:flex;flex-direction:column;gap:10px} .unified-data-standard-fields,.unified-data-custom-fields{display:grid;gap:9px} .unified-data-standard-fields:empty,.unified-data-custom-fields:empty{display:none} .data-entry-standard-body{display:grid!important;gap:9px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important} .unified-entry-field{ display:flex;flex-direction:column;gap:5px;padding:8px; border:1px solid rgba(255,255,255,.055);border-radius:11px;background:rgba(255,255,255,.015) } .unified-entry-field>span{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px} .unified-entry-field>span i{ padding:2px 6px;border-radius:999px;background:rgba(215,171,75,.14); color:var(--gold);font-size:8px;font-style:normal } .data-entry-required{border-color:rgba(215,171,75,.35)!important;background:rgba(215,171,75,.065)!important} .data-entry-required input,.data-entry-required textarea,.data-entry-required select{border-color:rgba(215,171,75,.26)!important} .health-missing-field,.unified-entry-field:has(:invalid){border-color:rgba(226,72,72,.55)!important;background:rgba(226,72,72,.07)!important} .unified-entry-special{ min-height:42px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px; padding:7px 9px;border:1px solid rgba(215,171,75,.18);border-radius:10px; background:rgba(215,171,75,.055);color:var(--text) } .unified-entry-special b{color:var(--gold);font-size:9px} .unified-data-empty{ padding:10px;border:1px dashed rgba(215,171,75,.18);border-radius:10px; color:var(--muted);font-size:9px;text-align:center } .custom-field-row.definition-row>strong{display:none!important} .custom-field-row.definition-row.read-only{opacity:.8;pointer-events:none} .custom-fields-empty.static{padding:10px;color:var(--muted);font-size:9px;text-align:center} /* v2.5.75 — Widgets take the former daily-use Privacy slot */ .under-logo-privacy{ position:relative; height:0; z-index:12; pointer-events:none; } .under-logo-privacy-btn{ position:absolute; top:3px; left:22px; width:25px; height:25px; padding:4px; display:flex; align-items:center; justify-content:center; border:0; border-radius:8px; background:rgba(255,255,255,.025); color:var(--muted); opacity:.72; pointer-events:auto; } .under-logo-privacy-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7} .under-logo-privacy-btn.active{color:var(--gold);background:rgba(215,171,75,.08);opacity:1} .widgets-toggle.active{color:var(--gold)!important;background:rgba(215,171,75,.10)!important} .widgets-panel{ position:relative; z-index:11; margin:0 12px 10px; padding:10px; border:1px solid rgba(215,171,75,.15); border-radius:0 0 16px 16px; background:rgba(10,10,11,.98); box-shadow:0 14px 28px rgba(0,0,0,.24); opacity:0; transform:translateY(-5px); transition:opacity .18s ease,transform .18s ease; } .widgets-panel.widgets-visible{opacity:1;transform:translateY(0)} .widgets-panel.hidden{display:none!important} .widgets-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px} .widgets-panel-head>span{display:flex;flex-direction:column;gap:1px} .widgets-panel-head strong{font-size:12px} .widgets-panel-head small{font-size:8px;color:var(--muted)} .widgets-panel-head button{width:27px;height:27px;border:0;border-radius:8px;background:rgba(255,255,255,.04);color:var(--muted);font-size:18px} .widget-card{padding:10px;border:1px solid rgba(215,171,75,.14);border-radius:13px;background:linear-gradient(145deg,rgba(215,171,75,.055),rgba(255,255,255,.012))} .widget-card-head{display:flex;align-items:center;gap:8px} .widget-card-head>span:nth-child(2){display:flex;flex:1;flex-direction:column;gap:1px} .widget-card-head strong{font-size:11px} .widget-card-head small{font-size:8px;color:var(--muted)} .widget-card-head em{padding:2px 6px;border-radius:999px;background:rgba(215,171,75,.09);color:var(--gold);font-size:7px;font-style:normal} .widget-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:rgba(215,171,75,.10);color:var(--gold);font-size:17px} .widget-placeholder{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.055)} .widget-placeholder b{font-size:9px;color:var(--gold)} .widget-placeholder small{font-size:8px;color:var(--muted);text-align:left} /* v2.5.75 — Privacy belongs inside logo drawer, not over page content */ .under-logo-privacy{display:none!important} .logo-drawer-tools{display:grid;gap:7px} .logo-drawer-tool{ width:100%;min-height:42px;padding:7px 9px; display:flex;align-items:center;gap:9px; border:1px solid rgba(215,171,75,.12);border-radius:11px; background:rgba(255,255,255,.018);color:var(--text);text-align:right } .logo-drawer-tool svg{ width:19px;height:19px;flex:0 0 auto; fill:none;stroke:currentColor;stroke-width:1.7;color:var(--muted) } .logo-drawer-tool>span{display:flex;flex-direction:column;gap:1px;min-width:0} .logo-drawer-tool strong{font-size:10px} .logo-drawer-tool small{font-size:8px;color:var(--muted)} .logo-drawer-tool.active{border-color:rgba(215,171,75,.30);background:rgba(215,171,75,.065)} .logo-drawer-tool.active svg{color:var(--gold)} /* Gold Radar widget — compact dashboard composition */ .gold-radar-widget{padding:11px!important} .gold-radar-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .gold-radar-title{display:flex;align-items:center;gap:8px} .gold-radar-title>span:last-child{display:flex;flex-direction:column;gap:1px} .gold-radar-title strong{font-size:12px} .gold-radar-title small{font-size:8px;color:var(--muted)} .gold-radar-mark{ width:32px;height:32px;display:grid;place-items:center; border-radius:9px;background:rgba(215,171,75,.11);color:var(--gold);font-size:18px } .gold-radar-status{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:7px} .gold-radar-status i{width:6px;height:6px;border-radius:50%;background:rgba(215,171,75,.8);box-shadow:0 0 8px rgba(215,171,75,.35)} .gold-radar-market-grid{ display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:7px;margin-top:10px } .gold-market-tile{ min-width:0;padding:9px 8px;border:1px solid rgba(255,255,255,.055); border-radius:11px;background:rgba(255,255,255,.015);text-align:center } .gold-market-tile.primary{border-color:rgba(215,171,75,.22);background:rgba(215,171,75,.055)} .gold-market-tile small{display:block;color:var(--muted);font-size:7px;margin-bottom:3px} .gold-market-tile strong{display:block;color:var(--text);font-size:11px;line-height:1.15;direction:ltr} .gold-market-tile.primary strong{color:var(--gold)} .gold-market-tile span{display:block;color:var(--muted);font-size:6.5px;margin-top:2px} .gold-radar-signal-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px} .gold-radar-signal{ min-width:0;padding:8px 9px;border-radius:10px; border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.012) } .gold-radar-signal small{display:block;font-size:7px;color:var(--muted);margin-bottom:2px} .gold-radar-signal strong{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gold-radar-signal.action{border-color:rgba(215,171,75,.14)} .gold-radar-event{ display:flex;align-items:center;justify-content:space-between;gap:8px; margin-top:7px;padding:8px 9px;border-radius:10px; border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.012) } .gold-radar-event>span{display:flex;flex-direction:column;gap:2px;min-width:0} .gold-radar-event small{font-size:7px;color:var(--muted)} .gold-radar-event strong{font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gold-radar-event em{flex:0 0 auto;color:var(--gold);font-size:8px;font-style:normal;direction:ltr} .gold-radar-footer{ display:flex;align-items:center;justify-content:space-between;gap:8px; margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.055) } .gold-radar-footer span{font-size:7px;color:var(--muted)} .gold-radar-footer button{ flex:0 0 auto;min-height:30px;padding:5px 9px;border-radius:8px; border:1px solid rgba(215,171,75,.20);background:rgba(215,171,75,.07); color:var(--gold);font-size:8px } /* v2.5.75 — live Gold Radar event calendar */ .gold-radar-events-strip{display:grid;gap:6px;margin-top:7px} .widget-event-mini{ display:flex;align-items:center;justify-content:space-between;gap:8px; padding:7px 8px;border-radius:9px;border:1px solid rgba(255,255,255,.045); background:rgba(255,255,255,.01) } .widget-event-mini>span{display:flex;align-items:center;gap:6px;min-width:0} .widget-event-mini i{ flex:0 0 auto;padding:2px 5px;border-radius:999px;background:rgba(215,171,75,.08); color:var(--gold);font-size:6.5px;font-style:normal } .widget-event-mini strong{font-size:7.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .widget-event-mini b{font-size:6.5px;color:var(--muted);font-weight:500;white-space:nowrap} .widget-event-mini em{flex:0 0 auto;font-size:7px;color:var(--muted);font-style:normal} .widget-events-empty{ padding:8px;border:1px dashed rgba(215,171,75,.12);border-radius:9px; color:var(--muted);font-size:7.5px;text-align:center } /* v2.5.75 — Gold Radar history chart */ .gold-radar-chart{margin-top:8px;padding:8px;border:1px solid rgba(215,171,75,.11);border-radius:11px;background:rgba(255,255,255,.01)} .gold-chart-toolbar{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px} .gold-chart-symbols,.gold-chart-ranges{display:flex;gap:3px} .gold-chart-toolbar button{padding:3px 6px;border:0;border-radius:6px;background:rgba(255,255,255,.035);color:var(--muted);font-size:6.5px} .gold-chart-toolbar button.active{background:rgba(215,171,75,.12);color:var(--gold)} .gold-chart-stage{position:relative;height:92px;overflow:hidden} .gold-chart-stage svg{width:100%;height:92px;display:block} .gold-chart-line{fill:none;stroke:var(--gold);stroke-width:1.6;vector-effect:non-scaling-stroke} .gold-chart-area{fill:rgba(215,171,75,.055);stroke:none} .gold-chart-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:7px} .gold-chart-empty.hidden{display:none!important} .gold-chart-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;color:var(--muted);font-size:6.5px;direction:ltr} .gold-chart-meta strong{color:var(--gold);font-size:7.5px}.gold-chart-meta strong.negative{color:#d98181} /* v2.5.75 — one-year Gold Radar chart range */ .gold-chart-ranges{ flex-wrap:nowrap!important; } .gold-chart-ranges button{ padding-inline:5px!important; white-space:nowrap!important; } @media(max-width:390px){ .gold-chart-toolbar{ align-items:flex-start!important; flex-direction:column!important; gap:5px!important; } .gold-chart-symbols, .gold-chart-ranges{ width:100%!important; justify-content:space-between!important; } .gold-chart-ranges button{ flex:1 1 auto!important; padding:3px 2px!important; } }