/* لوگوی بارگذاری‌شده در سربرگ (جای حرف نشان) */
.brand-logo{display:block;width:2.5rem;height:2.5rem;object-fit:contain;flex:none}
.brand-logo.is-lg{width:3rem;height:3rem}

.org-avatar{width:1.25rem;height:1.25rem;border-radius:9999px;object-fit:cover;flex:none;background:#e7e5e4}
.more-sentinel{display:flex;justify-content:center;padding:.25rem 0;font-size:.875rem;color:#78716c;min-height:1px}
.more-link{padding:.5rem 1.25rem;border:1px solid #d6d3d1;border-radius:9999px;background:#fff;color:#0f766e;font-weight:600}
.more-link:hover{background:#f0fdfa}
.more-link[hidden],.more-loading[hidden]{display:none}
.cat-ic-row{display:flex;align-items:center;gap:.75rem;min-width:0}
.cat-ic{display:grid;place-items:center;width:2.5rem;height:2.5rem;flex:none;border-radius:.75rem;background:#eef6f4;color:#1f7a66;transition:background .2s,color .2s}
a:hover .cat-ic{background:#1f7a66;color:#fff}
.view-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 12px;border-radius:999px;border:1px solid #9fd9c6;background:#f3fbf8;color:#17604f;font-size:12.5px;font-weight:600;line-height:1.8;vertical-align:middle;transition:background .15s}
.view-pill:hover{background:#dff3ec;color:#17604f}

/* صفحه‌های فرود تأمین‌کنندگان */
.lp-sellers{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.lp-seller{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:12px 14px;border:1px solid #e7e5e4;border-radius:14px;background:#fff}
.lp-seller:hover{border-color:#1f7a66}
.lp-seller b{font-size:.9rem;color:#292524}
.lp-seller small{flex-basis:100%;font-size:.75rem;color:#78716c}
.lp-ok{padding:1px 8px;border-radius:999px;background:#e7f3ef;color:#186353;font-size:.68rem}
.lp-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.lp-chip{padding:4px 12px;border:1px solid #d6d3d1;border-radius:999px;background:#fff;font-size:.82rem;color:#44403c}
.lp-chip:hover{border-color:#1f7a66;color:#1f7a66}
.lp-chip-main{border-color:#1f7a66;color:#186353;font-weight:600}

/* پیشنهاد جست‌وجو */
.ss-host{position:relative}
.ss-box{position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:40;overflow:hidden;border:1px solid #e7e5e4;border-radius:14px;background:#fff;box-shadow:0 12px 32px rgba(0,0,0,.12);text-align:start}
.ss-box[hidden]{display:none}
.ss-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;font-size:.875rem;color:#292524}
.ss-item:hover,.ss-item.is-on{background:#f5f5f4}
.ss-item span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ss-item small{flex:none;font-size:.7rem;color:#78716c}
/* فیلتر کالاها */
.pf{border:1px solid #e7e5e4;border-radius:14px;background:#fff}
.pf-sum{display:flex;align-items:center;gap:6px;padding:10px 14px;font-size:.875rem;font-weight:600;cursor:pointer}
.pf-on{padding:0 8px;border-radius:999px;background:#e7f3ef;color:#186353;font-size:.7rem;font-weight:500}
.pf-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;align-items:end;padding:0 14px 14px}
.pf-check{display:flex;align-items:center;gap:6px;min-height:40px;font-size:.85rem}
.pf-act{display:flex;gap:8px}
/* مقایسه */
.pc-wrap{position:relative}
.pc-cmp{position:absolute;top:8px;inset-inline-start:8px;z-index:2;display:none;padding:3px 9px;border:1px solid #d6d3d1;border-radius:999px;background:rgba(255,255,255,.94);font-size:.7rem;color:#44403c;cursor:pointer}
.pc-cmp.is-ready{display:block}
.pc-cmp.is-on{border-color:#1f7a66;background:#1f7a66;color:#fff}
.pd-cmp{display:none;margin-top:8px;padding:6px 12px;border:1px solid #d6d3d1;border-radius:10px;background:#fff;font-size:.8rem;color:#44403c;cursor:pointer}
.pd-cmp.is-ready{display:inline-block}
.pd-cmp.is-on{border-color:#1f7a66;color:#186353;font-weight:600}
.cmp-bar{position:fixed;bottom:16px;inset-inline-start:16px;z-index:30;padding:9px 16px;border-radius:999px;background:#186353;color:#fff;font-size:.85rem;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.cmp-bar[hidden]{display:none}
.cmp{width:100%;min-width:560px;border-collapse:collapse;font-size:.85rem}
.cmp th{position:sticky;inset-inline-start:0;width:110px;padding:10px 14px;background:#fafaf9;color:#78716c;font-weight:500;text-align:start;white-space:nowrap}
.cmp td{min-width:160px;padding:10px 14px;border-top:1px solid #f5f5f4;border-inline-start:1px solid #f5f5f4;vertical-align:top}
.cmp-img{width:120px;height:120px;margin-bottom:8px;border-radius:12px;object-fit:cover}
.cmp-title{display:block;font-weight:600;color:#292524}
.cmp-del{margin-top:6px;font-size:.72rem;color:#78716c;cursor:pointer}
.cmp-del:hover{color:#b91c1c}
/* هشدار قیمت و سرعت پاسخ */
.pa-form{margin-top:8px}
.pa-btn{padding:6px 12px;border:1px solid #d6d3d1;border-radius:10px;background:#fff;font-size:.8rem;color:#44403c;cursor:pointer}
.pa-btn.is-on{border-color:#1f7a66;color:#186353;font-weight:600}
.resp{display:block;margin-top:2px;font-size:.75rem;color:#186353}
/* نوار پایین موبایل */
.mbar{display:none}
@media(max-width:767px){
    body{padding-bottom:58px}
    .mbar{position:fixed;inset-inline:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid #e7e5e4;background:rgba(255,255,255,.97);padding-bottom:env(safe-area-inset-bottom)}
    .mbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0;font-size:.66rem;color:#57534e}
    .mbar a.is-on{color:#186353;font-weight:600}
    .cmp-bar{bottom:70px}
}
.pwa{position:fixed;inset-inline:12px;bottom:70px;z-index:31;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;border:1px solid #e7e5e4;border-radius:14px;background:#fff;font-size:.8rem;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.pwa[hidden]{display:none}
.pwa span{flex:1;min-width:150px}
@media(min-width:768px){.pwa{display:none}}

/* Cards of one row are one height, whatever the length of the title. */
.pc-wrap { height: 100%; }
.pc-wrap > a { height: 100%; }
.pc-wrap h3 { min-height: 2.8em; min-height: 2lh; }

.g-btn{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;margin-bottom:24px}
.probe-out{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;overflow-x:auto}

.av{display:inline-flex;flex:none;border-radius:9999px;padding:0;border:0;background:none;cursor:default}
button.av{cursor:pointer}
.av-sm{width:44px;height:44px}.av-lg{width:84px;height:84px}
.av-in{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:9999px;overflow:hidden;background:#e7e5e4;color:#57534e;font-weight:700}
.av-in img{width:100%;height:100%;object-fit:cover}
.av-ring{padding:2.5px;background:linear-gradient(135deg,#f59e0b,#ef4444,#c026d3)}
.av-ring .av-in{border:2px solid #fff;width:100%;height:100%}
.hl-row{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 10px;margin-bottom:14px;scrollbar-width:none}
.hl{display:flex;flex-direction:column;align-items:center;gap:6px;width:72px;flex:none;background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:12px;color:#44403c}
.hl-c{display:block;width:64px;height:64px;border-radius:9999px;overflow:hidden;border:2px solid #d6d3d1;padding:2px;background:#fff}
.hl-c>*{display:block;width:100%;height:100%;border-radius:9999px;object-fit:cover}
.hl b{font-weight:500;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-t1{background:linear-gradient(135deg,#f59e0b,#ef4444)}.st-t2{background:linear-gradient(135deg,#0ea5e9,#6366f1)}
.st-t3{background:linear-gradient(135deg,#10b981,#0f766e)}.st-t4{background:linear-gradient(135deg,#ec4899,#8b5cf6)}
.st-t5{background:linear-gradient(135deg,#1c1917,#57534e)}.st-t6{background:linear-gradient(135deg,#f97316,#be123c)}
.st-t7{background:linear-gradient(135deg,#84cc16,#15803d)}.st-t8{background:linear-gradient(135deg,#312e81,#be185d)}
.sv{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center}
.sv-lock{overflow:hidden}
.sv-box{position:relative;width:100%;height:100%;max-width:440px;max-height:100dvh;background:#000;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none}
@media(min-width:600px){.sv-box{height:min(100dvh,780px);border-radius:14px}}
.sv-bars{position:absolute;top:8px;left:8px;right:8px;display:flex;gap:4px;z-index:3;direction:ltr}
.sv-bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.sv-bar i{display:block;height:100%;width:0;background:#fff}
.sv-head{position:absolute;top:18px;left:10px;right:10px;display:flex;align-items:center;gap:8px;color:#fff;z-index:3;font-size:13px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.sv-av{width:34px;height:34px;border-radius:9999px;object-fit:cover;background:#57534e}
.sv-ago{opacity:.75;font-size:12px}
.sv-x{margin-inline-start:auto;background:none;border:0;color:#fff;font-size:22px;line-height:1;padding:6px 8px;cursor:pointer}
.sv-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.sv-stage img{width:100%;height:100%;object-fit:contain}
.sv-text{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:56px 28px;text-align:center;color:#fff;font-size:24px;font-weight:700;line-height:2;white-space:pre-line;overflow-wrap:anywhere}
.sv-prev,.sv-next{position:absolute;top:70px;bottom:0;width:38%;background:none;border:0;z-index:2;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sv-prev{left:0}.sv-next{right:0} /* like Instagram: the right side goes on, the left side goes back */
.sv-prev:focus:not(:focus-visible),.sv-next:focus:not(:focus-visible){outline:none} /* no line left across the story after a tap */
.tpl-row{display:flex;flex-wrap:wrap;gap:8px}
.tpl{position:relative;cursor:pointer}
.tpl input{position:absolute;opacity:0;inset:0;cursor:pointer}
.tpl span{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;color:#fff;font-size:11px;border:2px solid transparent}
.tpl .rnd{background:#e7e5e4;color:#44403c}
.tpl input:checked+span{outline:3px solid #0f766e;outline-offset:2px}
.sx{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.sx-i{flex:none;width:130px;font-size:12px}
.sx-p{display:flex;align-items:center;justify-content:center;width:130px;height:200px;border-radius:10px;overflow:hidden;color:#fff;padding:10px;text-align:center;font-weight:700;overflow-wrap:anywhere}
.sx-p img{width:100%;height:100%;object-fit:cover}
/* شرکت بدون عکس: لوگوی سایت یا حرف نشان سایت */
.av-site{background:#fff;border:1px solid #e7e5e4}
.av-site img{object-fit:contain;padding:14%}
.av-brand{background:#1f7a66;color:#fff;font-weight:900}

/* Highlights like Instagram: pick them for a new story, edit each one (name and stories, old ones too). */
.hl-pick{display:flex;flex-wrap:wrap;gap:8px}.hl-pick label{cursor:pointer}.hl-pick input{position:absolute;opacity:0}
.hl-pick span,.hl-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:999px;border:1px solid #d6d3d1;font-size:12.5px;color:#57534e;background:#fff}
.hl-pick input:checked+span,.hl-chip.is-on{border-color:#0f766e;background:#ecfdf5;color:#065f46;font-weight:700}
.hl-pick input:focus-visible+span{outline:2px solid #0f766e;outline-offset:2px}
.hl-chip{margin-top:4px;padding:2px 10px;font-size:11.5px}
.hl-list{display:grid;gap:10px}
.hl-item{border:1px solid #e7e5e4;border-radius:14px;padding:10px 12px}
.hl-item summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}.hl-item summary::-webkit-details-marker{display:none}
.hl-cover{display:block;width:44px;height:44px;border-radius:999px;overflow:hidden;background:#f5f5f4;box-shadow:0 0 0 2px #fff,0 0 0 3px #d6d3d1;flex:none}
.hl-cover img,.hl-cover span{display:block;width:100%;height:100%;object-fit:cover}
.hl-edit{margin-inline-start:auto;font-size:12px;color:#0f766e;font-weight:600}
.hl-item[open] .hl-edit{color:#78716c}
.hl-form{margin-top:12px;border-top:1px solid #f5f5f4;padding-top:12px}
.hl-grid{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px}
.hl-s{position:relative;flex:none;cursor:pointer}.hl-s input{position:absolute;top:8px;inset-inline-start:8px;z-index:1;width:18px;height:18px;accent-color:#0f766e}
.hl-s .sx-p{width:96px;height:150px;font-size:11px;opacity:.55;outline:3px solid transparent;outline-offset:2px;transition:opacity .15s}
.hl-s input:checked+.sx-p{opacity:1;outline-color:#0f766e}
.hl-top{flex-basis:100%;margin:8px 0 0}@media (min-width:1024px){.hl-top{flex-basis:auto;margin:0 auto 0 0;margin-inline-start:auto;margin-inline-end:0;padding-bottom:4px}.ms-auto~.hl-top{margin-inline-start:24px}}

/* Links are never underlined, on hover or otherwise (overrides the hover:underline utilities everywhere). */
a, a:hover, a:focus, a:active, .hover\:underline:hover { text-decoration: none !important; }
a:hover *, a:focus * { text-decoration: none !important; }
.staff-edit{position:fixed;bottom:20px;inset-inline-start:20px;z-index:60;display:inline-flex;align-items:center;gap:6px;padding:11px 20px;border-radius:999px;background:#1f7a66;color:#fff;font-size:14px;font-weight:700;box-shadow:0 10px 24px rgba(31,122,102,.35);transition:background .15s,transform .15s,box-shadow .15s}
.staff-edit:hover{background:#17604f;color:#fff;transform:translateY(-2px);box-shadow:0 14px 28px rgba(31,122,102,.42)}
@media print{.staff-edit{display:none}}
/* Rich text (articles, product descriptions, the editor): styled tables, headings and tip boxes. */
.rich h2{position:relative;margin-top:1.8em;padding-inline-start:.8em;font-size:1.2em;color:#14532d}
.rich h2::before{content:"";position:absolute;inset-inline-start:0;top:.2em;bottom:.2em;width:4px;border-radius:4px;background:linear-gradient(#1f7a66,#5cc3a3)}
.rich h3{color:#17604f}
.rich ul li::marker{color:#1f7a66}
.rich ol li::marker{color:#1f7a66;font-weight:700}
.rich table{display:table;width:100%;table-layout:auto;margin:1.4em 0;border-collapse:separate;border-spacing:0;border:1px solid #d7e9e2;border-radius:14px;overflow:hidden;font-size:.9em;line-height:1.75}
.rich th,.rich td{text-wrap:pretty;text-align:start!important;hyphens:none}
.rich tbody td:first-child,.rich thead th:first-child{width:1%;min-width:7.5em;white-space:nowrap}
@media (max-width:640px){.rich table{display:block;overflow-x:auto;font-size:.85em}.rich th,.rich td{min-width:9em}.rich tbody td:first-child,.rich thead th:first-child{white-space:normal}}
.rich thead th{background:linear-gradient(135deg,#1f7a66,#2a9d7f);color:#fff;font-weight:700;border:0;white-space:nowrap}
.rich th,.rich td{padding:.7em 1.1em;border:0;border-bottom:1px solid #e8f2ee;vertical-align:middle}
.rich tbody tr:nth-child(even) td{background:#f6fbf9}
.rich tbody tr:hover td{background:#eaf6f1}
.rich tbody tr:last-child td{border-bottom:0}
.rich tbody td:first-child{font-weight:700;color:#17604f}
.rich .box-tip,.rich .box-note,.rich .box-warn,.rich .box-source,.rich blockquote{position:relative;margin:1.2em 0;padding:.9em 1.1em .9em 1.1em;padding-inline-start:3em;border-radius:14px;text-align:justify;text-justify:inter-word}
.rich .box-tip{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.rich .box-note{background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a}
.rich .box-warn{background:#fffbeb;border:1px solid #fde68a;color:#78350f}
.rich .box-source{background:#fafaf9;border:1px dashed #d6d3d1;color:#57534e;font-size:.85em}
.rich blockquote{background:#f5f5f4;border-inline-start:4px solid #1f7a66;color:#44403c}
.rich .box-tip::before,.rich .box-note::before,.rich .box-warn::before,.rich .box-source::before,.rich blockquote::before{position:absolute;inset-inline-start:.9em;top:.85em;font-size:1.15em}
.rich .box-tip::before{content:"💡"}.rich .box-note::before{content:"📌"}.rich .box-warn::before{content:"⚠️"}.rich .box-source::before{content:"🔎"}.rich blockquote::before{content:"❝";color:#1f7a66}

/* «ساخت عکس صنعتی» in the product form, and the «تصویر نمایشی» badge on AI pictures. */
.ai-photo{margin-top:12px;padding:14px;border:1px dashed #9fd9c6;border-radius:14px;background:#f3fbf8;display:grid;gap:8px}
.ai-photo-btn{justify-self:start;padding:9px 16px;border-radius:999px;background:#1f7a66;color:#fff;font-size:14px;font-weight:600;transition:background .15s,transform .15s}
.ai-photo-btn:hover{background:#17604f;transform:translateY(-1px)}
.ai-photo-btn:disabled{opacity:.7;cursor:wait;transform:none}
.ai-photo-msg{font-size:13px;color:#17604f}.ai-photo-msg.is-bad{color:#b91c1c}
.ai-photo-list{display:flex;flex-wrap:wrap;gap:10px}
.ai-photo-item{display:grid;gap:4px;justify-items:center;font-size:12px}
.ai-photo-item img{width:110px;height:110px;object-fit:cover;border-radius:10px;border:1px solid #e7e5e4}
.ai-photo-item button{color:#b91c1c}
.ai-badge{position:absolute;top:8px;inset-inline-start:8px;z-index:1;padding:3px 9px;border-radius:999px;background:rgba(28,25,23,.62);color:#fff;font-size:11px;font-weight:600;line-height:1.6;pointer-events:none}
label .ai-badge{top:4px;inset-inline-start:4px;font-size:10px;padding:1px 6px}
img[data-zoom]{cursor:zoom-in}
.ai-photo-item img{transition:transform .15s,box-shadow .15s}.ai-photo-item img:hover{transform:scale(1.04);box-shadow:0 6px 16px rgba(0,0,0,.15)}
.zoom-open{overflow:hidden}
.zoom-lb{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;background:rgba(12,10,9,.86);backdrop-filter:blur(3px)}
.zoom-lb[hidden]{display:none}
.zoom-lb figure{margin:0;display:grid;gap:10px;justify-items:center;max-width:min(92vw,1100px)}
.zoom-lb img{max-width:100%;max-height:80vh;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.4);background:#fff}
.zoom-lb figcaption{color:#e7e5e4;font-size:14px}
.zoom-x,.zoom-nav{display:grid;place-items:center;border-radius:999px;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);transition:background .15s}
.zoom-x:hover,.zoom-nav:hover{background:rgba(255,255,255,.25)}
.zoom-x{position:absolute;top:16px;inset-inline-end:16px;width:44px;height:44px;font-size:18px}
.zoom-nav{flex:none;width:52px;height:52px;font-size:30px;line-height:1}
.zoom-lb.is-single .zoom-nav{visibility:hidden}
@media (max-width:640px){.zoom-nav{position:absolute;bottom:22px;width:46px;height:46px}.zoom-prev{inset-inline-start:22%}.zoom-next{inset-inline-end:22%}.zoom-lb img{max-height:72vh}}
.view-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px 14px;border-radius:12px;border:1px solid #9fd9c6;background:#f3fbf8;color:#17604f;font-size:14px;font-weight:700;transition:background .15s,transform .15s}
.view-btn:hover{background:#dff3ec;color:#17604f;transform:translateY(-1px)}
.art-pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.art-pic{position:relative;display:grid;gap:4px;font-size:12px;color:#57534e}
.art-pic img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;border:1px solid #e7e5e4}
.art-pic img{border:2px solid transparent;transition:border-color .15s}.art-pic.is-main img{border-color:#1f7a66;box-shadow:0 6px 16px rgba(31,122,102,.25)}
.art-pic .pic-main{justify-self:center}.art-pic.is-main .pic-main{background:#1f7a66;border-color:#1f7a66;color:#fff;font-weight:700}
.art-pic-tag{position:absolute;top:6px;inset-inline-start:6px;padding:1px 8px;border-radius:999px;background:#1f7a66;color:#fff;font-size:10.5px;font-weight:700;pointer-events:none}
.art-pic-del{display:flex;align-items:center;justify-content:center;gap:4px;cursor:pointer}
.ai-photo-list .ai-photo-item img{width:150px;height:auto;aspect-ratio:auto}
/* «نوشتن با هوش مصنوعی» in the product and article forms. */
.ai-text{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px;padding:10px 12px;border:1px dashed #c4b5fd;border-radius:14px;background:#f8f6ff}
.ai-text-btn{padding:8px 16px;border-radius:999px;background:#6d28d9;color:#fff;font-size:13.5px;font-weight:700;transition:background .15s,transform .15s}
.ai-text-btn:hover{background:#5b21b6;transform:translateY(-1px)}
.ai-text-btn:disabled{opacity:.75;cursor:wait;transform:none}
.ai-text small{flex:1 1 220px;font-size:12px;line-height:1.8;color:#6b7280}
.ai-text-msg{flex-basis:100%;font-size:13px;color:#5b21b6}.ai-text-msg.is-bad{color:#b91c1c}
/* Product form: saved pictures with «شاخص» (main picture) and «حذف». */
.pic-item{position:relative;display:grid;gap:5px;justify-items:center;width:104px;font-size:12px;color:#57534e}
.pic-item img{width:104px;height:104px;object-fit:cover;border-radius:12px;border:2px solid transparent;transition:border-color .15s,box-shadow .15s}
.pic-item.is-main img{border-color:#1f7a66;box-shadow:0 6px 16px rgba(31,122,102,.25)}
.pic-main{display:flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;border:1px solid #d6d3d1;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.pic-main:hover{border-color:#1f7a66;color:#17604f}
.pic-item.is-main .pic-main{background:#1f7a66;border-color:#1f7a66;color:#fff;font-weight:700}
.pic-main input{accent-color:#1f7a66}
.pic-del{display:flex;align-items:center;gap:4px;cursor:pointer;color:#a8a29e}.pic-del:hover{color:#b91c1c}
.ai-photo-item img{border:2px solid transparent}
.ai-photo-item.is-main img{border-color:#1f7a66;box-shadow:0 6px 16px rgba(31,122,102,.25)}
.ai-photo-item.is-main .pic-main{background:#1f7a66;border-color:#1f7a66;color:#fff;font-weight:700}

.ai-hint{text-align:justify;text-justify:inter-word}

/* A supplier without their own AI keys: where to connect them. */
.ai-need { font-size: .8rem; line-height: 1.8; color: #57534e; }
.ai-need a { color: #047857; text-decoration: underline; }
.ai-text-progress{flex-basis:100%;display:grid;gap:4px}.ai-text-progress[hidden]{display:none}
.ai-text-progress span{display:block;height:8px;width:0;border-radius:999px;background:linear-gradient(90deg,#8b5cf6,#6d28d9);transition:width 1s linear}
.ai-text-progress{background:none}.ai-text-progress::before{content:"";grid-area:1/1;height:8px;border-radius:999px;background:#ede9fe}.ai-text-progress span{grid-area:1/1;position:relative}
.ai-text-progress small{font-size:12px;color:#5b21b6}
/* Article editor extras (js/rich-extra.js): HTML view and the browser backup. */
.re-code[hidden],.re-ed[hidden]{display:none!important}
.re-code{display:block;width:100%;min-height:24rem;padding:1rem;border:0;font:13px/1.7 ui-monospace,Menlo,monospace;color:#1c1917;background:#fafaf9;resize:vertical;outline:none;text-align:left}
.re-bar button.is-on{background:#065f46;color:#fff}.re-bar button:disabled{opacity:.4;cursor:not-allowed}
.re-restore{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.5rem;padding:.6rem .8rem;border-radius:.75rem;background:#fef3c7;color:#78350f;font-size:.85rem;line-height:1.8}
.re-restore span{flex:1 1 16rem}.re-restore button{padding:.3rem .8rem;border-radius:999px;background:#fff;border:1px solid #f59e0b;font-weight:600}
.re-restore button:first-of-type{background:#065f46;border-color:#065f46;color:#fff}
/* Progress of a picture being made: thin bar with the percentage beside it. */
.ai-prog{display:flex;align-items:center;gap:10px;margin-top:8px}
.ai-prog[hidden]{display:none}
.ai-prog-bar{position:relative;flex:1;height:8px;border-radius:999px;background:#dcefe8;overflow:hidden}
.ai-prog-bar i{position:absolute;inset:0 0 0 auto;width:0;border-radius:inherit;background:linear-gradient(270deg,var(--color-brand-600),#3fb393);transition:width .5s ease}
.ai-prog-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:ai-prog-shine 1.4s linear infinite}
.ai-prog.is-done .ai-prog-bar i::after{animation:none}
.ai-prog b{min-width:3em;font-size:.8rem;font-weight:700;color:var(--color-brand-700);text-align:start}
@keyframes ai-prog-shine{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.ai-prog-bar i{transition:none}.ai-prog-bar i::after{animation:none}}