/* Paramis TV price board: one 1920×1080 stage scaled to fit any screen; charcoal with champagne gold only for emphasis. */
@font-face{font-family:Yekan;src:url('/src/fonts/woff/iranyekanwebregularfanum.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:Yekan;src:url('/src/fonts/woff/iranyekanwebmediumfanum.woff') format('woff');font-weight:500;font-display:swap}
@font-face{font-family:Yekan;src:url('/src/fonts/woff/iranyekanwebboldfanum.woff') format('woff');font-weight:700;font-display:swap}
@font-face{font-family:Yekan;src:url('/src/fonts/woff/iranyekanwebblackfanum.woff') format('woff');font-weight:900;font-display:swap}
:root{--bg:#0f0f0e;--panel:#191917;--raised:#22221f;--line:#2f2f29;--text:#f5f1e8;--muted:#a9a59b;--gold:#c8ad76;--up:#39b88a;--down:#e16d73;--amber:#e0b04f}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#0a0a09}
body{color:var(--text);font-family:Yekan,Tahoma,sans-serif;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}
body.idle,body.idle *{cursor:none}
b{font-weight:700}
.n{font-feature-settings:"tnum";direction:ltr;unicode-bidi:isolate}

.stage{position:absolute;top:0;left:0;width:1920px;height:1080px;display:grid;grid-template-rows:112px 1fr 66px;padding:0 34px;background:var(--bg);transform-origin:0 0;overflow:hidden}
.stage::before{content:'';position:absolute;top:-300px;left:50%;width:1400px;height:600px;margin-left:-700px;background:radial-gradient(closest-side,#c8ad7612,transparent);pointer-events:none;animation:drift 46s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-420px)}to{transform:translateX(420px)}}

/* Header */
.top{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line)}
.top::after{content:'';position:absolute;right:0;bottom:-1px;left:0;height:1px;background:linear-gradient(90deg,transparent,#c8ad7680 30%,#c8ad7680 70%,transparent)}
.brand{justify-self:start;display:grid;grid-gap:6px}
.brand img{display:block;height:38px;width:auto}
.brand span{color:var(--muted);font-size:15px}
.head{display:flex;align-items:center}
.head h1{font-size:46px;font-weight:900;letter-spacing:0}
.live{display:inline-flex;align-items:center;margin-right:22px;padding:6px 16px 6px 18px;border:1px solid #3a3a33;border-radius:40px;color:var(--muted);font-size:17px;transition:color .4s,border-color .4s}
.live i{position:relative;width:11px;height:11px;margin-left:10px;border-radius:50%;background:var(--amber)}
.live i::after{content:'';position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border-radius:50%;border:2px solid currentColor;opacity:0}
.live b{font-weight:500}
.live.ok{color:var(--up);border-color:#39b88a55}.live.ok i{background:var(--up)}.live.ok i::after{animation:ring 1.8s ease-out infinite}
.live.wait{color:var(--amber);border-color:#e0b04f55}.live.wait i{background:var(--amber);animation:blink 1s infinite}
.live.off{color:var(--down);border-color:#e16d7355}.live.off i{background:var(--down)}
@keyframes ring{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes blink{50%{opacity:.25}}
.when{justify-self:end;display:flex;align-items:center}
.date{display:grid;grid-gap:4px;text-align:left;padding-left:26px;margin-left:26px;border-left:1px solid var(--line)}
.date b{font-size:20px;font-weight:500}
.date small{color:var(--muted);font-size:15px}
.date small span{color:var(--text)}
.clock{font-size:60px;font-weight:900;line-height:1;direction:ltr;letter-spacing:1px}
.clock i{font-style:normal;animation:blink 1s steps(1) infinite}
.clock small{margin-left:6px;color:var(--muted);font-size:26px;font-weight:500}

/* Body */
.body{display:grid;grid-template-columns:1fr 860px;grid-gap:26px;padding:24px 0;min-height:0}
.board,.chart,.bubble{position:relative;border:1px solid var(--line);border-radius:18px;background:var(--panel);overflow:hidden}
.board{display:grid;grid-template-rows:60px 1fr;min-height:0}
.th,.row{display:grid;grid-template-columns:1fr 112px 190px 190px 120px;align-items:center;padding:0 28px}
.th{background:var(--raised);border-bottom:1px solid var(--line);color:var(--muted);font-size:19px;font-weight:500}
.th span+span,.row>*+*{text-align:center}
.th span:nth-child(3)::before,.th span:nth-child(4)::before{content:"";display:inline-block;width:9px;height:9px;margin-left:10px;border-radius:50%;background:var(--up);vertical-align:middle}.th span:nth-child(4)::before{background:var(--down)}
.rows{display:grid;grid-template-rows:repeat(12,1fr);min-height:0}
.row{position:relative;border-top:1px solid #ffffff08;transition:background .5s}
.row:first-child{border-top:0}
.row:nth-child(even){background:#ffffff03}
.row.g1{border-top:1px solid #c8ad7638}
.row::before{content:'';position:absolute;top:0;right:0;bottom:0;width:4px;background:var(--gold);transform:scaleY(0);transition:transform .5s}
.row.on{background:#c8ad7612}.row.on::before{transform:none}
.nm b{display:block;color:var(--gold);font-size:25px;font-weight:700;line-height:1.35;white-space:nowrap}
.nm small{color:var(--muted);font-size:14px}
.cell{position:relative;border-radius:10px;line-height:1.25}
.cell b{display:block;font-size:29px;font-weight:700;white-space:nowrap}
.cell small{display:block;color:var(--muted);font-size:14px}
.cell.flash-up{animation:fu 1.8s ease-out}.cell.flash-up b{animation:tu 1.8s ease-out}
.cell.flash-down{animation:fd 1.8s ease-out}.cell.flash-down b{animation:td 1.8s ease-out}
@keyframes fu{0%{background:#39b88a40}100%{background:transparent}}
@keyframes fd{0%{background:#e16d7340}100%{background:transparent}}
@keyframes tu{0%,40%{color:#6fe0b6}100%{color:var(--text)}}
@keyframes td{0%,40%{color:#ff9aa0}100%{color:var(--text)}}
.ch b{display:block;font-size:22px;font-weight:700}
.ch small{display:block;font-size:14px;opacity:.85}
.up{color:var(--up)}.down{color:var(--down)}.flat{color:var(--muted)}

/* Chart */
.side{display:grid;grid-template-rows:1fr 352px;grid-gap:26px;min-height:0}
.chart{display:grid;grid-template-rows:auto auto 1fr auto;padding:24px 28px 22px;min-height:0}
.c-prog{position:absolute;top:0;right:0;height:3px;width:0;background:linear-gradient(270deg,var(--gold),#c8ad7640)}
.c-top{display:flex;align-items:flex-start;justify-content:space-between}
.c-name h2{font-size:30px;font-weight:700}
.c-name small{color:var(--muted);font-size:15px}
.c-dots{display:flex;padding-top:12px}
.c-dots i{display:block;width:9px;height:9px;margin-right:8px;border-radius:9px;background:#45453d;transition:width .5s,background .5s}
.c-dots i.on{width:30px;background:var(--gold)}
.c-price{display:flex;align-items:baseline;margin-top:6px}
.c-price b{font-size:66px;font-weight:900;line-height:1.15;direction:ltr;unicode-bidi:isolate}
.c-chg{margin-right:22px;font-size:25px;font-weight:700}
.c-chg small{margin-left:10px;font-size:17px;font-weight:500;opacity:.85}
.c-plot .day{stroke:#ffffff1a;stroke-dasharray:2 4}.c-plot .dl{fill:#6f6b62;font-size:13px;direction:rtl;unicode-bidi:embed}
.c-plot{position:relative;min-height:0;margin:10px 0 16px;direction:ltr}
.c-plot svg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible}
.c-plot text{fill:#8e8a80;font:14px Yekan,Tahoma,sans-serif}
.c-plot .g{stroke:#ffffff0d}
.c-plot .u{stroke:var(--up);fill:var(--up)}.c-plot .d{stroke:var(--down);fill:var(--down)}
.c-plot .now{stroke-dasharray:5 5;stroke-width:1}
.c-plot .area{fill:url(#cg)}
.c-plot .pill text{fill:#0f0f0e;font-weight:700}
.c-plot .pulse{animation:pulse 1.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(3.2);opacity:0}}
.swap .c-plot,.swap .c-price,.swap .c-name,.swap .c-stats b{opacity:0}
.c-plot,.c-price,.c-name,.c-stats b{transition:opacity .45s}

.c-stats{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:16px}
.c-stats div{padding:12px 18px;border:1px solid var(--line);border-radius:14px;background:#ffffff04}
.c-stats small{display:block;padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid var(--line);color:var(--muted);font-size:15px}
.c-stats b{display:block;font-size:27px}

/* Bubble */
.bubble{display:grid;grid-template-rows:auto 1fr auto;padding:20px 28px 22px;min-height:0}
.b-head{display:flex;align-items:baseline}
.b-head h2{font-size:26px;font-weight:700}
.b-head small{margin-right:14px;color:var(--muted);font-size:14px}
.b-note{margin-right:auto;padding:3px 12px;border:1px solid #e0b04f55;border-radius:30px;color:var(--amber);font-size:13px;opacity:0;transition:opacity .6s}.b-note.on{opacity:1}
.b-main{display:grid;grid-template-columns:286px 1fr;grid-gap:24px;margin:16px 0;min-height:0}
.b-plot{position:relative;min-height:0;direction:ltr}
.b-plot svg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible}
.b-plot text{fill:#8e8a80;font:13px Yekan,Tahoma,sans-serif}
.b-plot .z{stroke:#ffffff38;stroke-dasharray:4 5}.b-plot text.up{fill:var(--up)}.b-plot text.down{fill:var(--down)}
.b-plot .ln{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.b-plot .dot{fill:var(--gold)}.b-plot .pulse{fill:var(--gold);animation:pulse 1.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
.b-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:12px}
.b-grid div{padding:8px 14px;border-radius:12px;background:#ffffff05}
.b-grid small{display:block;color:var(--muted);font-size:13px}
.b-grid b{display:block;font-size:23px}
.cell b,.b-grid b,.b-val b,.c-stats b{transition:color .4s}
.b-gauge{display:grid;align-content:center;grid-gap:18px;padding:14px 20px;border:1px solid var(--line);border-radius:14px}
.b-val b{display:block;font-size:40px;font-weight:900;line-height:1.2}
.b-val small{display:block;margin-top:6px;color:var(--muted);font-size:16px}.b-val em{display:block;color:var(--muted);font-size:14px;font-style:normal}.b-plot .dl{direction:rtl;unicode-bidi:embed}
.b-scale{position:relative;display:flex;justify-content:space-between;height:12px;border-radius:12px;background:linear-gradient(90deg,#e16d7399,#2f2f29 46%,#2f2f29 54%,#39b88a99);direction:ltr}
.b-scale::after{content:'';position:absolute;top:-4px;left:50%;width:1px;height:20px;background:#ffffff40}
.b-scale span{position:relative;top:18px;color:var(--muted);font-size:12px}
.b-scale i{position:absolute;top:-7px;left:50%;width:6px;height:26px;margin-left:-3px;border-radius:4px;background:var(--gold);box-shadow:0 0 0 3px #0f0f0e;transition:left 1.4s cubic-bezier(.2,.8,.2,1)}

/* Footer */
.foot{display:grid;grid-template-columns:auto 1fr auto;grid-gap:30px;align-items:center;border-top:1px solid var(--line);color:var(--muted);font-size:17px}
.site{color:var(--gold);font-size:19px;letter-spacing:2px;direction:ltr}
.ticker{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ticker>div{display:flex;width:max-content;white-space:nowrap;animation:tick 70s linear infinite}
.ticker span{margin-left:56px;color:var(--text);font-size:18px}
.ticker span em{margin-left:10px;color:var(--muted);font-style:normal}
.ticker span i{margin-right:8px;font-style:normal;font-size:15px}
@keyframes tick{to{transform:translateX(50%)}}

/* Entrance and hint */
.row,.chart,.bubble,.top>*{opacity:0}
.ready .row{animation:rin .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 55ms + .2s)}
.ready .chart,.ready .bubble,.ready .top>*{animation:fin .8s cubic-bezier(.2,.8,.2,1) both}
.ready .bubble{animation-delay:.25s}.ready .top>*:nth-child(2){animation-delay:.1s}.ready .top>*:nth-child(3){animation-delay:.2s}
@keyframes rin{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes fin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hint{position:absolute;bottom:12px;left:50%;padding:12px 26px;border:1px solid var(--line);border-radius:40px;background:#191917f2;color:var(--muted);font-size:17px;transform:translateX(-50%);transition:opacity .8s;pointer-events:none}
.hint.gone{opacity:0}
.stale .cell b{color:#8a867d}

@media(prefers-reduced-motion:reduce){.ticker>div,.live i::after,.c-plot .pulse,.clock i{animation:none}.row,.chart,.bubble,.top>*{opacity:1;animation:none!important}}
.sp{display:block;width:104px;height:40px;margin:0 auto;overflow:visible}
.sp polyline{fill:none;stroke:#6f6b62;stroke-width:1.8;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sp.up polyline{stroke:var(--up)}.sp.down polyline{stroke:var(--down)}
.th .tr{font-size:15px}
.cell b i,.c-price b i{display:inline-block;width:.63em;font-style:normal;text-align:center}.cell b s,.c-price b s{display:inline-block;text-decoration:none}

/* Life: the product that last moved in the header, a light sweeping a row that just changed and a dot while it is fresh */
.last{display:inline-block;color:var(--text)}.last.up{color:var(--up)}.last.down{color:var(--down)}.last.in{animation:lin .6s cubic-bezier(.2,.8,.2,1)}
@keyframes lin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.row::after{content:'';position:absolute;top:0;right:0;bottom:0;width:34%;background:linear-gradient(270deg,transparent,#c8ad761f,transparent);opacity:0;pointer-events:none}
.row.sweep::after{animation:sweep 1.3s cubic-bezier(.3,.6,.3,1)}
@keyframes sweep{0%{opacity:1;transform:translateX(100%)}100%{opacity:0;transform:translateX(-300%)}}
.nm{position:relative}.nm b::before{content:'';position:absolute;top:13px;right:-19px;width:8px;height:8px;border-radius:50%;background:var(--gold);opacity:0;transition:opacity .8s}
.row.hot .nm b::before{opacity:1;animation:blink 1.4s infinite}
@media(prefers-reduced-motion:reduce){.stage::before,.row.sweep::after,.row.hot .nm b::before,.b-plot .pulse,.last.in{animation:none}}

/* Phones and portrait screens: no scaled stage; the board flows down the page at readable sizes. */
.flow,.flow body{height:auto;overflow:auto}
.flow .stage{position:relative;width:auto;height:auto;display:block;padding:0 14px 6px;transform:none}
.flow .stage::before{width:700px;height:400px;margin-left:-350px}
.flow .top{grid-template-columns:1fr auto;grid-template-areas:"b c" "h h" "d d";grid-gap:10px;padding:16px 0 14px}
.flow .brand{grid-area:b}.flow .brand img{height:24px}.flow .brand span{font-size:11px}
.flow .head{grid-area:h}.flow .head h1{font-size:24px}.flow .live{margin-right:12px;padding:3px 10px 3px 12px;font-size:13px}.flow .live i{width:8px;height:8px;margin-left:7px}
.flow .when{display:contents}.flow .clock{grid-area:c;font-size:32px}.flow .clock small{font-size:15px}
.flow .date{grid-area:d;padding:0;margin:0;border:0;text-align:right}.flow .date b{font-size:13px}.flow .date small{font-size:12px}
.flow .body{display:block;padding:14px 0}
.flow .board{display:block}.flow .th{display:none}.flow .rows{display:block}
.flow .row{grid-template-columns:1fr 1fr;grid-template-areas:"nm ch" "buy sell";grid-gap:8px 12px;padding:12px 14px 12px 12px}
.flow .row .nm{grid-area:nm}.flow .row .sp{display:none}.flow .row .ch{grid-area:ch;text-align:left}
.flow .row [data-k=buy]{grid-area:buy}.flow .row [data-k=sell]{grid-area:sell}
.flow .row>*+*{text-align:right}.flow .row .ch{text-align:left}
.flow .nm b{font-size:17px}.flow .nm small{font-size:11px}.flow .nm b::before{top:8px;right:-13px;width:6px;height:6px}
.flow .cell b{font-size:19px}.flow .cell small{font-size:11px}
.flow .cell::before{display:block;color:var(--up);font-size:11px}.flow [data-k=buy]::before{content:"خرید"}.flow [data-k=sell]::before{content:"فروش";color:var(--down)}
.flow .ch b{font-size:15px}.flow .ch small{font-size:11px}
.flow .side{display:block}
.flow .chart{display:block;margin-top:14px;padding:16px}
.flow .c-name h2{font-size:20px}.flow .c-name small{font-size:12px}.flow .c-price b{font-size:34px}.flow .c-chg{margin-right:12px;font-size:15px}.flow .c-chg small{font-size:12px}
.flow .c-plot{height:230px;margin:8px 0 12px}
.flow .c-stats{grid-gap:8px}.flow .c-stats div{padding:8px 10px}.flow .c-stats small{font-size:11px}.flow .c-stats b{font-size:15px}
.flow .bubble{display:block;margin-top:14px;padding:16px}
.flow .b-head{display:block}.flow .b-head h2{font-size:20px}.flow .b-head small{display:block;margin:2px 0 0;font-size:12px}.flow .b-note{display:inline-block;margin:8px 0 0}
.flow .b-main{grid-template-columns:1fr;grid-gap:14px;margin:14px 0}.flow .b-val b{font-size:32px}
.flow .b-plot{height:170px}
.flow .b-grid{grid-template-columns:1fr 1fr;grid-gap:8px}.flow .b-grid b{font-size:17px}.flow .b-grid small{font-size:11px}
.flow .foot{grid-template-columns:auto 1fr;grid-gap:16px;padding:12px 0;font-size:13px}.flow .unit{display:none}.flow .site{font-size:14px}.flow .ticker span{font-size:14px}
.flow .hint{display:none}
.c-price b{white-space:nowrap}.flow .c-price{flex-wrap:wrap;column-gap:12px}.flow .c-chg{margin-right:0}