/* ============================================================================ Data Receiver — styling. The base model's language (soft cards, hairline borders, one accent, RTL, Vazirmatn) taken somewhere richer, because this page has to make a business owner feel that something is genuinely being made for them. Two themes, both first-class. Every colour is a token; nothing is hard-coded outside :root, so the day/night switch is a single attribute on . ========================================================================== */ @font-face{font-family:Vazirmatn;src:url("../fonts/Vazirmatn-Regular.woff2") format("woff2");font-weight:400;font-display:swap} @font-face{font-family:Vazirmatn;src:url("../fonts/Vazirmatn-Medium.woff2") format("woff2");font-weight:500;font-display:swap} @font-face{font-family:Vazirmatn;src:url("../fonts/Vazirmatn-Bold.woff2") format("woff2");font-weight:700;font-display:swap} /* ---- dark (default) ---- */ :root{ --bg:#0b0d11; --card:rgba(255,255,255,.05); --card2:rgba(255,255,255,.03); --line:rgba(255,255,255,.11); --line2:rgba(255,255,255,.065); --fg:#f2f4f7; --dim:#98a0ad; --dim2:#6d7583; --field:rgba(255,255,255,.05); --fieldOn:rgba(255,255,255,.08); --accent:#eef1f6; --accentInk:#0b0d11; --ok:#7ee0a8; --warn:#f2c261; --bad:#f08a8a; --badBg:rgba(240,138,138,.14); --shadow:0 18px 50px rgba(0,0,0,.38); --r:16px; --rs:11px; --maxw:840px; } /* ---- light ---- */ :root[data-theme="light"]{ --bg:#f6f7f9; --card:rgba(255,255,255,.72); --card2:rgba(255,255,255,.5); --line:rgba(16,20,28,.11); --line2:rgba(16,20,28,.06); --fg:#12161c; --dim:#5b6472; --dim2:#8a929d; --field:rgba(255,255,255,.75); --fieldOn:#fff; --accent:#161a20; --accentInk:#fff; --ok:#1d8a55; --warn:#9a6a10; --bad:#c33b3b; --badBg:rgba(195,59,59,.10); --shadow:0 16px 44px rgba(16,20,28,.10); } *{box-sizing:border-box} /* Android paints a blue rectangle over whatever you tap. On a form this size it flashes on every single touch and looks like a rendering fault. */ *{-webkit-tap-highlight-color:transparent} button,.tab,.chip,.segbtn,.catbtn,.jopt,.jfield,label{-webkit-touch-callout:none;user-select:none} input,textarea{user-select:text} html,body{margin:0;padding:0;height:100%} body{ background:var(--bg); color:var(--fg); font-family:Vazirmatn,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:15px; line-height:1.85; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .35s ease,color .35s ease; } #drbg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none} .app{position:relative;z-index:1;min-height:100%;padding:0 16px 80px;max-width:var(--maxw);margin:0 auto} .boot{padding:120px 0;text-align:center;color:var(--dim)} /* --------------------------------- motion --------------------------------- */ @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes fade{from{opacity:0}to{opacity:1}} @keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}} .anim{animation:rise .38s cubic-bezier(.2,.8,.25,1) both} .anim-1{animation-delay:.04s}.anim-2{animation-delay:.08s}.anim-3{animation-delay:.12s} .anim-4{animation-delay:.16s}.anim-5{animation-delay:.20s}.anim-6{animation-delay:.24s} .fade{animation:fade .3s ease both} .pop{animation:pop .22s cubic-bezier(.2,.9,.3,1) both} /* --------------------------------- atoms ---------------------------------- */ h1,h2,h3{margin:0;font-weight:700;line-height:1.5} p{margin:0} button{font:inherit;color:inherit;cursor:pointer;border:0;background:none} input,textarea,select{font:inherit;color:inherit;width:100%;background:var(--field); border:1px solid var(--line);border-radius:var(--rs);padding:10px 12px;outline:none; transition:border-color .18s,background .18s,box-shadow .18s} input:focus,textarea:focus,select:focus{border-color:var(--fg);background:var(--fieldOn); box-shadow:0 0 0 3px color-mix(in srgb,var(--fg) 9%,transparent)} input::placeholder,textarea::placeholder{color:var(--dim2)} textarea{resize:vertical;min-height:88px;line-height:1.9} select{appearance:none;padding-left:30px; background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%); background-position:left 14px top 19px,left 9px top 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat} option{background:var(--bg);color:var(--fg)} a{color:inherit} .ltr{direction:ltr;text-align:left} .plain{unicode-bidi:plaintext;text-align:start} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px; backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25); box-shadow:var(--shadow)} .card.flat{background:var(--card2);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none} .stack{display:flex;flex-direction:column;gap:12px} .stack.s{gap:8px} .stack.l{gap:18px} .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .row.nowrap{flex-wrap:nowrap} .spacer{flex:1} .dim{color:var(--dim)} .dim2{color:var(--dim2)} .sm{font-size:13px;line-height:1.8} .xs{font-size:12px;line-height:1.75} .center{text-align:center} .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 18px; border-radius:12px;background:var(--accent);color:var(--accentInk);font-weight:700;font-size:14px; transition:transform .14s cubic-bezier(.2,.9,.3,1),opacity .15s,box-shadow .18s} .btn:hover{opacity:.92;transform:translateY(-1px)} .btn:active{transform:scale(.98)} .btn[disabled]{opacity:.4;cursor:not-allowed;transform:none} .btn.ghost{background:var(--card2);color:var(--fg);border:1px solid var(--line);font-weight:500} .btn.ghost:hover{background:var(--field)} .btn.sm{padding:7px 13px;font-size:13px;border-radius:10px} .btn.danger{background:var(--badBg);color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 30%,transparent);font-weight:500} .btn.wide{width:100%} .btn.icon{padding:8px;border-radius:10px} .chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px; border:1px solid var(--line);background:var(--card2);font-size:13px;user-select:none; transition:background .16s,border-color .16s,transform .14s} .chip:hover{background:var(--field);transform:translateY(-1px)} .chip.on{background:var(--accent);color:var(--accentInk);border-color:transparent;font-weight:700} .tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:7px; background:var(--field);font-size:11.5px;color:var(--dim)} .tag.ok{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)} .tag.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)} .tag.bad{background:var(--badBg);color:var(--bad)} .label{font-size:13px;font-weight:500} /* a field is a label sitting right on top of its box — not a paragraph of grey text in between. Examples live inside the box as placeholders. */ .field{display:flex;flex-direction:column;gap:5px} .labelrow{display:flex;align-items:center;gap:8px;min-height:22px} /* a field that is really several of the same thing — one box per branch */ .listrow{display:flex;gap:6px;align-items:center} .listrow input{flex:1;min-width:0;width:auto;padding:8px 12px;line-height:1.6} .listdel{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center; width:30px;height:30px;border-radius:8px;color:var(--dim2)} .listdel:hover{background:var(--badBg);color:var(--bad)} .group{display:flex;flex-direction:column;gap:12px;padding-top:6px} .ghead{font-size:11.5px;font-weight:700;color:var(--dim2);letter-spacing:.02em; padding-top:8px;border-top:1px solid var(--line2)} textarea.grow{min-height:0;overflow:hidden;line-height:1.85} .hint{font-size:12px;color:var(--dim2);line-height:1.8} .err{color:var(--bad);font-size:13px} .hr{height:1px;background:var(--line2);margin:4px 0} /* one quiet line — «اشتباه اشکالی ندارد، بعداً ویرایش می‌شود». A bordered panel for this was far too loud for a reassurance nobody asked for. */ .note{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--dim2);margin:-4px 0 0} .note svg{flex-shrink:0;opacity:.75} /* --------------------------------- header --------------------------------- */ .top{position:sticky;top:0;z-index:20;margin:0 -16px 14px;padding:12px 16px 10px; background:linear-gradient(180deg,var(--bg) 55%,transparent); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} .brandline{font-weight:700;font-size:14px} /* the app's own version, on the builders' side only — small enough to ignore, there when someone needs to say which Data Receiver produced a brief */ .vtag{font-size:10.5px;line-height:16px;padding:0 6px;border-radius:7px; background:var(--field);color:var(--dim2);direction:ltr;unicode-bidi:isolate} .dot{width:9px;height:9px;border-radius:50%;background:var(--fg);box-shadow:0 0 0 4px color-mix(in srgb,var(--fg) 9%,transparent)} /* --------------------------------- tabs ----------------------------------- */ .tabs{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px} .tabs::-webkit-scrollbar{display:none} .tab{flex-shrink:0;white-space:nowrap;padding:8px 14px;border-radius:999px;font-size:13px; border:1px solid var(--line2);background:var(--card2);color:var(--dim);transition:all .18s} .tab:hover{color:var(--fg);background:var(--field)} .tab.on{background:var(--accent);color:var(--accentInk);font-weight:700;border-color:transparent} .tab .tick{font-size:11px;opacity:.9} .bar{height:5px;border-radius:99px;background:var(--field);overflow:hidden} .bar > i{display:block;height:100%;background:var(--fg);border-radius:99px; transition:width .55s cubic-bezier(.2,.8,.25,1)} /* ------------------------------- login page ------------------------------- */ .hero{padding:min(13vh,84px) 0 24px;text-align:center} .hero h1{font-size:clamp(24px,6vw,34px);letter-spacing:-.01em} .hero p{color:var(--dim);margin-top:10px;font-size:14.5px} .mark{width:58px;height:58px;margin:0 auto 22px;border-radius:19px;border:1px solid var(--line); background:var(--card);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)} .codebox{letter-spacing:.55em;text-align:center;font-size:23px;font-weight:700;padding:15px 12px;direction:ltr} .footlink{margin-top:30px;text-align:center} .footlink button{font-size:12px;color:var(--dim2);text-decoration:underline;text-underline-offset:4px} .footlink button:hover{color:var(--dim)} .steps{display:flex;gap:6px;justify-content:center;margin-bottom:18px} .steps i{width:22px;height:3px;border-radius:9px;background:var(--line);transition:background .3s,width .3s} .steps i.on{background:var(--fg);width:34px} /* --------------------------------- items ---------------------------------- */ .item{border:1px solid var(--line);border-radius:var(--rs);background:var(--card2);overflow:hidden} .item > .head{display:flex;align-items:center;gap:9px;padding:11px 12px;cursor:pointer;transition:background .16s} .item > .head:hover{background:var(--field)} .item > .body{padding:0 12px 12px;display:flex;flex-direction:column;gap:10px} .caret{transition:transform .22s cubic-bezier(.2,.9,.3,1);color:var(--dim);flex-shrink:0} .caret.open{transform:rotate(180deg)} /* -------------------------------- sub-blocks ------------------------------ */ .block{border:1px solid var(--line);border-radius:var(--r);background:var(--card2); padding:14px;display:flex;flex-direction:column;gap:10px} .block > .bhead{display:flex;align-items:center;gap:8px} .block > .bbody{display:flex;flex-direction:column;gap:10px} .bnum{width:19px;height:19px;border-radius:6px;display:flex;align-items:center;justify-content:center; background:var(--field);color:var(--dim);font-size:11px;font-weight:700;flex-shrink:0} /* --------------------------------- files ---------------------------------- */ .drop{display:flex;flex-direction:column;gap:5px;border:1px dashed var(--line);border-radius:var(--rs); padding:10px 12px;background:var(--card2);transition:border-color .18s,background .18s} .drop:hover{border-color:var(--dim2)} .drop.hot{border-color:var(--fg);background:var(--field)} .drop > .row > svg{color:var(--dim2)} .drop .hint{font-size:11px} .tree{font-size:12.5px;line-height:2} .tree .n{display:flex;align-items:center;gap:7px;padding:2px 0} .tree .kids{padding-inline-start:16px;border-inline-start:1px solid var(--line2);margin-inline-start:6px} .tree .fold,.tree .file{unicode-bidi:plaintext;text-align:start} .tree .fold{color:var(--fg)} .tree .file{color:var(--dim)} .tree .size{color:var(--dim2);font-size:11px;white-space:nowrap} .prog{height:4px;border-radius:9px;background:var(--field);overflow:hidden} .prog > i{display:block;height:100%;background:var(--fg);transition:width .2s linear} .thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .thumb{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--field)} .thumb img,.thumb video{width:100%;height:100%;object-fit:cover;display:block} .thumb .x{position:absolute;top:5px;inset-inline-end:5px;width:22px;height:22px;border-radius:999px; background:rgba(0,0,0,.6);color:#fff;display:flex;align-items:center;justify-content:center} /* ------------------------------ date picker ------------------------------- */ .jdate{display:flex;gap:6px;align-items:center} .jdate select{width:auto;min-width:74px;padding:8px 26px 8px 10px;font-size:13px} .jdate .y{min-width:86px} /* -------------------------------- admin ----------------------------------- */ .codepill{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;letter-spacing:.13em; background:var(--field);padding:4px 10px;border-radius:8px;direction:ltr;display:inline-block} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media (max-width:560px){.grid2{grid-template-columns:1fr}} .logrow{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line2);font-size:12.5px} .logrow:first-child{border-top:0} /* -------------------------------- toast ----------------------------------- */ .toast{position:fixed;inset-inline:0;bottom:22px;z-index:80;display:flex;justify-content:center; pointer-events:none;opacity:0;transform:translateY(12px);transition:opacity .24s,transform .24s} .toast.on{opacity:1;transform:none} .toast > span{background:var(--accent);color:var(--accentInk);font-weight:700;font-size:13.5px; padding:10px 20px;border-radius:999px;box-shadow:0 14px 40px rgba(0,0,0,.35)} .toast.bad > span{background:var(--bad);color:#fff} .saving{font-size:11.5px;color:var(--dim2)} .saving.ok{color:var(--ok)} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ------------------------- segmented mode switch --------------------------- */ /* «ارسالِ یک‌جا» / «ارسالِ تک‌به‌تک» — one at a time, never both on one screen. */ .seg{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--field);border:1px solid var(--line2)} .segbtn{flex:1;padding:9px 12px;border-radius:11px;font-size:13.5px;color:var(--dim); transition:background .2s,color .2s,box-shadow .2s} .segbtn.on{background:var(--accent);color:var(--accentInk);font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.18)} /* --------------------------- category tree -------------------------------- Shaped like the base model's admin category editor: one quiet line per category — fold arrow, folder, name, then the two small buttons — with the «add sub-category» line opening directly under its parent. Depth is an indent plus a hairline guide, so a deep tree still reads on a phone. -------------------------------------------------------------------------- */ .cattree{display:flex;flex-direction:column;gap:8px} .catrows{display:flex;flex-direction:column;gap:1px} .catrows > .hint{padding:2px 2px 6px} /* the indent is PADDING, not margin, so a nested row still spans the full width and its two buttons stay in the same column as every other row's — only the name moves inward. */ .catrow{display:flex;align-items:center;gap:2px;padding:2px 4px;border-radius:9px; padding-inline-start:calc(var(--d, 0) * 15px + 4px);transition:background .16s} .catrow:hover{background:var(--fieldOn)} .cattwist{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px; border-radius:6px;color:var(--dim2);transition:transform .18s,color .16s,background .16s} .cattwist:hover{color:var(--fg);background:var(--field)} .cattwist.shut{transform:rotate(90deg)} .cattwist.empty{pointer-events:none} .catico{flex-shrink:0;display:inline-flex;align-items:center;color:var(--dim2);margin-inline-end:2px} .catname{flex:1;min-width:0;padding:4px 6px;font-size:13.5px;line-height:1.5;border-radius:8px; border:1px solid transparent;background:transparent;transition:border-color .16s,background .16s} .catname:hover{border-color:var(--line2)} .catname:focus{border-color:var(--fg);background:var(--field)} .catnum{flex-shrink:0;min-width:18px;padding:0 5px;font-size:10.5px;line-height:16px;text-align:center; border-radius:8px;background:var(--field);color:var(--dim2)} .catbtn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center; width:26px;height:26px;border-radius:8px;color:var(--dim2);transition:background .16s,color .16s} .catbtn:hover{background:var(--field);color:var(--fg)} /* «open» is a quiet state, not a shout — the row is still just a row */ .catbtn.on{background:var(--field);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line2)} .catbtn.del:hover{background:var(--badBg);color:var(--bad)} .catkid{padding-inline-start:calc((var(--d, 0) + 1) * 15px + 22px);padding-block:4px} .catadd{display:flex;gap:6px;align-items:center} .catadd .btn{flex-shrink:0;padding:6px 12px} .catadd .catnew{flex:1;min-width:0;width:auto} .catnew{padding:7px 11px;font-size:12.5px;border-radius:10px} .catkid .catnew{border-style:dashed} /* the root line: one field and a round + , the way the admin panel does it */ .catroot{padding-top:2px;border-top:1px solid var(--line);margin-top:2px;padding-block-start:8px} .catplus{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px; border-radius:50%;background:var(--accent);color:var(--accentInk);transition:transform .14s,filter .16s} .catplus:hover{filter:brightness(1.06)} .catplus:active{transform:scale(.94)} /* the chooser button, with no decorative dashes around the label */ .jfield.empty{color:var(--dim2)} /* ---------------------------- date field ---------------------------------- */ /* Our own lists — the device calendar and the native select sheet never open. */ .jpick{position:relative;display:inline-block} .jfield{padding:9px 14px;border-radius:var(--rs);border:1px solid var(--line);background:var(--field); font-size:13.5px;white-space:nowrap;transition:border-color .18s,background .18s} .jfield:hover{border-color:var(--fg);background:var(--fieldOn)} .jfield.sm{padding:7px 11px;font-size:12.5px} .jpanel{position:absolute;z-index:60;top:calc(100% + 6px);inset-inline-end:0;width:250px;padding:8px; border-radius:14px;border:1px solid var(--line);background:var(--bg);box-shadow:0 20px 50px rgba(0,0,0,.35); display:flex;flex-direction:column;gap:8px} .jcols{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:6px} .jcol{max-height:190px;overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column;gap:2px} .jopt{padding:6px 4px;border-radius:8px;font-size:13px;color:var(--dim);text-align:center;white-space:nowrap} .jopt:hover{background:var(--field);color:var(--fg)} .jopt.on{background:var(--accent);color:var(--accentInk);font-weight:700} /* --------------------------- admin niceties -------------------------------- */ a.btn{text-decoration:none} /* download buttons had a stray underline */ .plan{display:flex;flex-direction:column;gap:6px} .planrow{display:flex;align-items:center;gap:8px} .planrow .pl{flex:1;min-width:0;font-size:13px} .planrow .pd{font-size:12px;color:var(--dim2);white-space:nowrap} .dayin{width:58px;text-align:center;padding:7px 4px;font-size:13px} .statusseg{display:inline-flex;gap:3px;padding:3px;border-radius:11px;background:var(--field);border:1px solid var(--line2)} .statusseg button{padding:5px 11px;border-radius:9px;font-size:12px;color:var(--dim)} .statusseg button.on{background:var(--accent);color:var(--accentInk);font-weight:700} /* the project header must never let the code sit on top of the phase tag */ .phead{display:flex;align-items:flex-start;gap:9px} .ptitle{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0} .ptitle .label{overflow:hidden;text-overflow:ellipsis} /* ------------------------------ the assistant ------------------------------ Every AI answer lands in one of these: clearly a SUGGESTION, never mistaken for something already saved into the person's answers. */ .aibtn{border:1px dashed var(--line);border-radius:999px} /* icon-only, riding on a label line */ .airow{display:flex;justify-content:flex-start;margin-top:-2px} .aibtn.tiny{padding:2px 0;font-size:11.5px;gap:5px;border:0;background:none; color:var(--dim2);text-decoration:underline;text-underline-offset:3px; text-decoration-color:var(--line);border-radius:0} .aibtn.tiny:hover:not(:disabled){color:var(--fg);text-decoration-color:var(--fg);background:none} .aibtn.tiny:disabled{opacity:.55} .aibtn:hover:not(:disabled){border-color:var(--fg);background:var(--field)} .aibtn:disabled{opacity:.6;cursor:default} .aibtn.busy svg{animation:spin 1.1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .aibox{padding:10px 12px;border-radius:12px;border:1px dashed var(--line);background:var(--field)} .aibox .card.flat{background:var(--bg)} .sm.ok{color:var(--ok)} /* the tone preview: a real little chat, so the voice can be heard */ .chatlog{display:flex;flex-direction:column;gap:8px;height:min(58vh,460px);overflow-y:auto; scrollbar-width:thin;padding:12px;border-radius:12px;background:var(--field); border:1px solid var(--line2)} .chatlog:empty::after{content:'هنوز چیزی نپرسیده‌ای.';color:var(--dim2);font-size:12px;margin:auto} .bub{max-width:86%;padding:8px 12px;border-radius:14px;font-size:13px;line-height:1.85; white-space:pre-wrap;word-break:break-word} .bub.me{align-self:flex-start;background:var(--accent);color:var(--accentInk);border-end-start-radius:5px} .bub.ai{align-self:flex-end;background:var(--card2);border:1px solid var(--line2);border-end-end-radius:5px} .bub.ai.bad{color:var(--bad);border-color:var(--bad)}