:root{
  --bg:#06131f; --bg2:#081a29; --panel:#0d2638; --panel2:#123349; --line:#22465e;
  --text:#f5fbff; --muted:#9db3c2; --green:#08be73; --green2:#1fe394; --yellow:#ffd12c;
  --blue:#36aaf5; --red:#ff6670; --shadow:0 18px 50px rgba(0,0,0,.25); --radius:18px;
}
*{box-sizing:border-box} html{background:var(--bg)} body{margin:0;font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;background:radial-gradient(circle at 70% -10%,#113650 0,transparent 35%),var(--bg);color:var(--text)}
button,input,select{font:inherit} button{cursor:pointer}.hidden{display:none!important}.muted{color:var(--muted)} code{color:#bce8ff}
.app-shell{min-height:100vh;display:grid;grid-template-columns:250px 1fr}.sidebar{position:sticky;top:0;height:100vh;padding:22px 16px;background:#061827;border-right:1px solid #17374b;display:flex;flex-direction:column;z-index:4}.brand{display:flex;align-items:center;gap:12px;padding:4px 8px 24px}.brand strong{font-size:17px}.brand span{display:block;color:var(--muted);font-size:12px;margin-top:2px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,var(--green),#087c57);box-shadow:0 0 24px rgba(8,190,115,.28);font-weight:900;color:white}
nav{display:flex;flex-direction:column;gap:6px}.nav-item{width:100%;border:0;background:transparent;color:#b8c8d4;padding:12px 13px;text-align:left;border-radius:12px;display:flex;gap:12px;align-items:center;transition:.18s}.nav-item:hover{background:#0d293b;color:white}.nav-item.active{background:linear-gradient(90deg,#153d50,#0d2d3f);color:white;box-shadow:inset 3px 0 var(--green)}.sidebar-bottom{margin-top:auto;padding:14px 8px;color:var(--muted);font-size:12px}.status-line{display:flex;align-items:center;gap:8px}.status-line i{width:8px;height:8px;border-radius:50%;background:#f4b942}.status-line i.online{background:var(--green2);box-shadow:0 0 10px var(--green2)}.link-btn{border:0;background:none;color:#c8dae6;padding:10px 0}
.main{padding:0 28px 48px;min-width:0}.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #153447;margin-bottom:24px}.topbar h1{font-size:22px;margin:0 0 5px}.topbar p{margin:0;color:var(--muted);font-size:13px}.topbar-right{display:flex;gap:8px}.pill,.tag,.live-badge{border:1px solid #28516a;background:#0e2b3e;color:#c9d9e5;border-radius:999px;padding:7px 10px;font-size:11px}.pill.subtle{opacity:.85}.live-badge{color:#87f6b8;border-color:#196a4a}.tag.warn{color:#ffd971;border-color:#6e5c20}
.page{display:none;animation:fade .18s ease}.page.active{display:block}@keyframes fade{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:none}}
.panel{background:linear-gradient(180deg,rgba(17,48,68,.97),rgba(10,34,50,.97));border:1px solid #21465e;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:20px}.hero-panel{background:linear-gradient(120deg,#123047,#0a2334 55%,#0e342d)}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.section-title h2{font-size:16px;margin:0}.eyebrow{font-size:10px;color:#72ddae;letter-spacing:.14em;font-weight:800}.grid{display:grid;gap:20px}.grid.half{grid-template-columns:1fr 1fr}.grid.two-thirds{grid-template-columns:1.65fr 1fr}.align-start{align-items:start}.spacer{height:8px}
.control-grid,.form-grid{display:grid;gap:12px}.control-grid.five{grid-template-columns:1.15fr 1.15fr 1.2fr .8fr auto}.control-grid.four{grid-template-columns:repeat(4,1fr)}.control-grid.three{grid-template-columns:repeat(3,1fr)}.form-grid.two{grid-template-columns:1fr 1fr}.span-2{grid-column:span 2}label{display:flex;flex-direction:column;gap:7px;color:#a9bdcb;font-size:11px;font-weight:700}input,select{width:100%;border:1px solid #2b5268;background:#0a1f2e;color:white;border-radius:10px;padding:11px 12px;outline:none;transition:.15s}input:focus,select:focus{border-color:#25bd7c;box-shadow:0 0 0 3px rgba(37,189,124,.12)}option{background:#0b2131}.compact-select,.search{max-width:250px;padding:8px 10px}.search{font-size:12px}
.btn{border-radius:11px;padding:11px 16px;border:1px solid #31546a;font-weight:800;color:white;background:#123249}.btn.primary{border-color:#14a66b;background:linear-gradient(180deg,#11bd77,#078f5a);box-shadow:0 9px 22px rgba(6,151,92,.19)}.btn.ghost:hover,.btn.primary:hover{filter:brightness(1.08)}.btn.tall{align-self:end;height:42px}.form-actions{display:flex;align-items:center;gap:12px;margin-top:15px}.callout{padding:12px 14px;border-left:3px solid var(--yellow);background:#162d39;color:#d8e5ec;border-radius:8px;font-size:12px;margin:14px 0}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.kpi-grid.three{grid-template-columns:repeat(3,1fr)}.kpi{background:linear-gradient(180deg,#102b3e,#0b2232);border:1px solid #22495f;border-radius:15px;padding:17px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}.kpi:after{content:"";position:absolute;right:-20px;top:-34px;width:90px;height:90px;border-radius:50%;background:rgba(45,168,255,.05)}.kpi span,.kpi small{display:block;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.kpi strong{display:block;color:var(--yellow);font-size:24px;margin:8px 0 4px}.kpi strong.green{color:var(--green2)}.kpi strong.blue{color:var(--blue)}
.table-wrap{width:100%;overflow:auto}.table-wrap.max-h{max-height:540px}table{width:100%;border-collapse:collapse;min-width:660px}th{font-size:10px;color:#b1c4d0;text-transform:uppercase;text-align:left;letter-spacing:.04em;padding:10px;border-bottom:1px solid #2c5268;background:#0a2130;position:sticky;top:0;z-index:1}td{padding:11px 10px;border-bottom:1px solid #17394c;font-size:12px;color:#e8f1f6}tr:hover td{background:#0d293b}.money{font-variant-numeric:tabular-nums}.up{color:var(--green2)}.down{color:var(--red)}
.chart-panel{min-height:340px}.chart-panel canvas{max-height:285px!important}.tall-chart{min-height:390px}.tall-chart canvas{max-height:320px!important}.component-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.component-card{border:1px solid #244b61;background:#0a2232;border-radius:14px;padding:14px;min-width:0}.component-card .icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#15364b;margin-bottom:10px;font-weight:900;color:#7bdcb4}.component-card strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.component-card .price{font-size:17px;color:var(--yellow);margin:7px 0}.component-card small{color:var(--muted)}
.recipe-editor{display:grid;gap:8px;margin-top:16px}.recipe-line{display:grid;grid-template-columns:130px 1fr 120px;gap:10px;align-items:center;padding:10px;border:1px solid #1f455b;border-radius:12px;background:#0b2231}.recipe-line span{font-size:11px;color:var(--muted);font-weight:800}.recipe-line strong{font-size:12px}.recipe-line.fixed strong{color:#7ce6b7}.form-panel label+label{margin-top:11px}.action-card{text-align:center;padding:34px}.big-icon{display:grid;place-items:center;width:60px;height:60px;margin:0 auto 15px;border-radius:16px;background:#14364b;color:#6af0b1;font-size:30px}.action-card p{color:var(--muted);min-height:45px}.action-card input{margin:10px 0 15px}.code-box{display:grid;gap:8px;margin-top:16px}.code-box>div{display:flex;justify-content:space-between;gap:16px;padding:12px;border-radius:10px;background:#081e2c;border:1px solid #23475c}.code-box span{color:var(--muted);font-size:11px}.code-box strong{font-size:11px;max-width:60%;overflow:hidden;text-overflow:ellipsis}.rules{color:#c2d1dc;line-height:1.8;font-size:13px;padding-left:18px}
.auth-gate{position:fixed;inset:0;background:rgba(3,12,19,.92);backdrop-filter:blur(12px);z-index:20;display:grid;place-items:center;padding:20px}.auth-card{width:min(410px,100%);background:#0b2232;border:1px solid #2a536a;border-radius:22px;padding:30px;box-shadow:0 30px 100px #0008}.auth-card .brand-mark{margin:0 auto}.auth-card h1{text-align:center;margin:12px 0 0}.auth-card p{text-align:center;color:var(--muted);margin:5px 0 24px}.auth-card label{margin-top:12px}.auth-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.auth-card small{display:block;text-align:center;color:var(--muted);margin-top:15px}.toast{position:fixed;right:22px;bottom:22px;z-index:30;background:#102c3e;border:1px solid #2a536a;color:white;border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;max-width:360px}.toast.show{opacity:1;transform:none}.toast.error{border-color:#75434a;color:#ffd7db}.toast.success{border-color:#2b7958;color:#bcffda}
@media(max-width:1100px){.app-shell{grid-template-columns:78px 1fr}.sidebar{padding:18px 10px}.brand>div:last-child,.nav-item span{display:none}.brand{justify-content:center}.nav-item{justify-content:center;font-size:18px}.sidebar-bottom span,.link-btn{display:none}.control-grid.five{grid-template-columns:1fr 1fr 1fr}.control-grid.five .btn{grid-column:span 3}.kpi-grid{grid-template-columns:1fr 1fr}.component-cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.app-shell{display:block}.sidebar{position:fixed;bottom:0;top:auto;width:100%;height:70px;display:block;padding:8px;background:#061827eF;border-top:1px solid #24495d;border-right:0}.brand,.sidebar-bottom{display:none}nav{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;overflow-x:auto}.nav-item{padding:11px 6px;font-size:17px}.nav-item.active{box-shadow:inset 0 -3px var(--green)}.main{padding:0 14px 90px}.topbar{height:78px}.topbar-right{display:none}.grid.half,.grid.two-thirds,.kpi-grid,.kpi-grid.three,.component-cards,.control-grid.four,.control-grid.three,.form-grid.two{grid-template-columns:1fr}.span-2{grid-column:auto}.control-grid.five{grid-template-columns:1fr 1fr}.control-grid.five .btn{grid-column:span 2}.recipe-line{grid-template-columns:90px 1fr}.recipe-line input{grid-column:2}.chart-panel{min-height:310px}}


/* ===== V1.1 — ELEMENTOS + MODO PÚBLICO/EDITOR ===== */
:root{--selected-element:#f1df13}
.editor-only{display:none!important}
body.editor-mode .nav-item.editor-only{display:flex!important}
body.editor-mode section.page.editor-only.active{display:block!important}
.access-note{display:block;margin-top:10px;color:#7f98a8;font-size:11px}

.hero-panel{
  position:relative;
  overflow:hidden;
  border-color:color-mix(in srgb,var(--selected-element) 50%,#21465e);
  box-shadow:0 18px 50px rgba(0,0,0,.25),inset 0 2px 0 color-mix(in srgb,var(--selected-element) 18%,transparent)
}
.hero-panel:after{
  content:"";position:absolute;inset:auto -100px -130px auto;width:310px;height:310px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--selected-element) 22%,transparent),transparent 66%);
  pointer-events:none
}

.element-select-wrap{
  --element-color:#2c5268;--element-text:#fff;
  display:flex;align-items:center;gap:8px;min-height:42px;padding-left:8px;
  border:1px solid color-mix(in srgb,var(--element-color) 72%,#2b5268);
  background:linear-gradient(90deg,color-mix(in srgb,var(--element-color) 24%,#0a1f2e),#0a1f2e 45%);
  border-radius:11px;box-shadow:inset 3px 0 var(--element-color);transition:.18s
}
.element-select-wrap:focus-within{
  border-color:var(--element-color);
  box-shadow:inset 3px 0 var(--element-color),0 0 0 3px color-mix(in srgb,var(--element-color) 18%,transparent)
}
.element-select-wrap select{border:0;background:transparent;box-shadow:none!important;padding-left:2px}
.element-select-icon{width:27px;height:27px;object-fit:contain;flex:0 0 27px;image-rendering:auto}

.element-badge{
  --element-color:#2c5268;--element-text:#fff;
  display:inline-flex;align-items:center;gap:6px;vertical-align:middle;
  padding:4px 9px 4px 5px;margin-left:7px;border-radius:999px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--element-color) 94%,white 5%),var(--element-color));
  color:var(--element-text);border:1px solid color-mix(in srgb,var(--element-color) 70%,white 30%);
  text-shadow:0 1px 1px #0009;font-size:11px;font-weight:900;line-height:1;
  box-shadow:inset 0 1px 0 #ffffff35,0 3px 10px #0003
}
.element-badge img{width:22px;height:22px;object-fit:contain}
.element-badge.compact{margin-left:0;padding:3px 8px 3px 4px;font-size:10px}
.element-badge.compact img{width:18px;height:18px}
.element-badge.empty{background:#263e4d;color:#a9bdcb;border-color:#35576a;text-shadow:none}

.item-with-element{display:inline-flex;align-items:center;gap:7px;min-width:0}
.item-with-element img{width:21px;height:21px;object-fit:contain;flex:0 0 21px}
.item-with-element span{min-width:0}

.component-card{
  border-top:2px solid var(--element-color,#244b61);
  background:linear-gradient(180deg,color-mix(in srgb,var(--element-color,#244b61) 9%,#0a2232),#0a2232)
}
.component-card .element-icon{
  background:color-mix(in srgb,var(--element-color,#15364b) 22%,#15364b);
  border:1px solid color-mix(in srgb,var(--element-color,#244b61) 45%,#244b61)
}
.component-card .element-icon img{width:28px;height:28px;object-fit:contain}
.component-card .element-badge{margin:8px 0 0}

.recipe-line.fixed strong .item-with-element{color:#7ce6b7}

@media(max-width:780px){
  nav{grid-template-columns:repeat(6,1fr)}
  body.editor-mode nav{grid-template-columns:repeat(8,1fr)}
  .element-badge:not(.compact){margin:6px 0 0}
}


/* ===== V1.2 — visual remodelado estilo dashboard game ===== */

:root{
  --bg:#04111d;--bg2:#081c2d;--panel:#0b2335;--panel2:#113149;--line:#1f4660;
  --gold:#f6ca2f;--gold2:#f59a23;--lime:#0cc56e;--lime2:#078f55;--cyan:#27bff0;--cyan2:#1189c4;
  --purple:#9d5be8;--purple2:#6737bc;--navy:#10263c;--teal:#1fb8b7;--teal2:#0c7379;
}
body{
  background:
    radial-gradient(circle at 82% 12%, rgba(37,170,255,.12), transparent 22%),
    radial-gradient(circle at 18% -2%, rgba(255,215,64,.08), transparent 16%),
    linear-gradient(180deg, #07131f 0%, #06121e 20%, #05101b 100%);
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    linear-gradient(120deg, rgba(255,255,255,.015), transparent 30%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.01) 0 1px, transparent 1px 140px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.008) 0 1px, transparent 1px 120px);
}
.app-shell{grid-template-columns:260px 1fr}
.sidebar{
  background:
    linear-gradient(180deg, rgba(7,24,39,.98), rgba(5,16,27,.98)),
    radial-gradient(circle at 20% 10%, rgba(45,168,255,.08), transparent 22%);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.04);
}
.brand{padding:2px 8px 20px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:14px}
.brand-mark{
  width:46px;height:46px;border-radius:15px;
  background:linear-gradient(180deg,#12b96a,#09784a);
  box-shadow:0 12px 30px rgba(8,190,115,.22), inset 0 1px 0 rgba(255,255,255,.25);
}
.nav-item{
  position:relative;gap:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.05);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.nav-item:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.12)}
.nav-item.active{box-shadow:inset 4px 0 var(--nav-accent,#0cc56e), 0 10px 24px rgba(0,0,0,.18);border-color:color-mix(in srgb,var(--nav-accent,#0cc56e) 45%, #17374b);background:linear-gradient(90deg, color-mix(in srgb,var(--nav-accent,#0cc56e) 20%, #17394d), rgba(13,45,63,.92));}
.nav-item .nav-ico{
  width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:0 0 28px;
  font-size:15px;font-weight:900;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  background:linear-gradient(180deg, color-mix(in srgb,var(--nav-accent,#2da8ff) 95%, white 5%), color-mix(in srgb,var(--nav-accent,#2da8ff) 72%, black 28%));
}
.nav-home{--nav-accent:#08be73}.nav-calc{--nav-accent:#11c56f}.nav-items{--nav-accent:#f5c22b}.nav-recipes{--nav-accent:#a860f0}.nav-history{--nav-accent:#2db8ff}.nav-excel{--nav-accent:#5c7cff}.nav-settings{--nav-accent:#64748b}
.topbar{
  height:84px;margin:14px 0 24px;padding:0 18px;border:1px solid rgba(255,255,255,.06);
  border-radius:18px;background:
    linear-gradient(90deg, rgba(8,24,37,.94), rgba(11,31,46,.94)),
    radial-gradient(circle at 90% 30%, rgba(45,168,255,.10), transparent 25%);
  box-shadow:0 16px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
}
.topbar h1{font-size:28px}
.pill{background:#0f2840;border-color:#1f5374}
.pill.subtle{background:#0b2133}
.panel{
  position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(11,35,53,.98),rgba(8,27,40,.98));
  border:1px solid rgba(83,129,160,.28); border-radius:18px; box-shadow:0 18px 40px rgba(0,0,0,.22);
}
.glow-card:before{
  content:"";position:absolute;inset:auto -60px -70px auto;width:180px;height:180px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--accent-glow, rgba(255,255,255,.12)), transparent 68%);
}
.panel-green{--accent:#11c56f;--accent2:#087f4c;--accent-glow:rgba(17,197,111,.16)}
.panel-gold{--accent:#f5c22b;--accent2:#d8931c;--accent-glow:rgba(245,194,43,.16)}
.panel-blue{--accent:#1aa0f3;--accent2:#1269c4;--accent-glow:rgba(26,160,243,.16)}
.panel-cyan{--accent:#14c4d9;--accent2:#0b879a;--accent-glow:rgba(20,196,217,.16)}
.panel-purple{--accent:#ac62f5;--accent2:#6b3fcb;--accent-glow:rgba(172,98,245,.16)}
.panel-teal{--accent:#1cb7a3;--accent2:#0d7b6f;--accent-glow:rgba(28,183,163,.16)}
.panel-dark{--accent:#607284;--accent2:#36485a;--accent-glow:rgba(96,114,132,.14)}
.section-chip{
  margin:-6px -6px 16px -6px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(90deg, color-mix(in srgb,var(--accent,#2da8ff) 18%, #123149), rgba(17,49,73,.55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.section-chip h2{font-size:16px;letter-spacing:.01em}
.section-chip-green{--accent:#11c56f}.section-chip-gold{--accent:#f5c22b}.section-chip-blue{--accent:#1aa0f3}.section-chip-cyan{--accent:#14c4d9}.section-chip-purple{--accent:#ac62f5}.section-chip-teal{--accent:#1cb7a3}
.hero-panel .section-title{margin-bottom:14px}
.eyebrow{color:#bfe5ff}
.btn.primary{background:linear-gradient(180deg,#0ec96f,#068d53);border-color:#0cb968;box-shadow:0 12px 28px rgba(5,155,90,.26), inset 0 1px 0 rgba(255,255,255,.18)}
.btn{border-radius:12px}
.control-grid label,.form-grid label{font-size:10px;text-transform:uppercase;letter-spacing:.06em}
input,select{background:#081c2a;border-color:#24465d;border-radius:11px}
.callout{border-left:4px solid var(--gold);background:linear-gradient(180deg, rgba(245,194,43,.08), rgba(255,255,255,.02))}
.kpi-grid{gap:16px}
.kpi{padding:18px 18px 16px;border-radius:17px;border:1px solid rgba(83,129,160,.24);background:linear-gradient(180deg,#0e2739,#0a1f2e)}
.kpi:after{right:-16px;top:-28px;width:96px;height:96px;background:rgba(255,255,255,.05)}
.kpi strong{font-size:28px}
.kpi.kpi-gold{border-color:rgba(245,194,43,.28);background:linear-gradient(180deg, rgba(245,194,43,.10), rgba(10,31,46,.98))}
.kpi.kpi-green{border-color:rgba(17,197,111,.28);background:linear-gradient(180deg, rgba(17,197,111,.10), rgba(10,31,46,.98))}
.kpi.kpi-cyan{border-color:rgba(20,196,217,.28);background:linear-gradient(180deg, rgba(20,196,217,.10), rgba(10,31,46,.98))}
.kpi.kpi-blue{border-color:rgba(26,160,243,.28);background:linear-gradient(180deg, rgba(26,160,243,.10), rgba(10,31,46,.98))}
.kpi.kpi-green strong{color:#52eca3}.kpi.kpi-cyan strong{color:#75dfff}.kpi.kpi-blue strong{color:#64c4ff}
.table-wrap{border-radius:12px;border:1px solid rgba(255,255,255,.05);background:rgba(5,17,27,.24)}
th{background:#0b1f2f}
.component-cards{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.component-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 22px rgba(0,0,0,.14)}
.component-card .price{font-size:20px;font-weight:800}
.recipe-line{background:#081e2d}
.big-icon{box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 8px 16px rgba(0,0,0,.18)}
.chart-panel canvas{padding-top:8px}
@media(max-width:1100px){
  .app-shell{grid-template-columns:88px 1fr}
  .nav-item .nav-ico{margin:0 auto}
}
@media(max-width:780px){
  nav{grid-template-columns:repeat(5,1fr)}
  body.editor-mode nav{grid-template-columns:repeat(7,1fr)}
  .nav-item .nav-ico{width:26px;height:26px}
  .topbar h1{font-size:22px}
  .component-cards{grid-template-columns:1fr 1fr}
}


/* V1.2.1 placeholder fix */
.component-card.placeholder .icon{background:linear-gradient(180deg,#17384d,#0f2a3b);border-color:#2c536b;}
.component-card.placeholder strong{opacity:.9}
.component-card.placeholder .price{opacity:.85}
.component-card.placeholder small.muted{color:#9cb6c7}