/* ===== IKSHAR Demos v3 — Matched to HTML ===== */
/* ===== Lucide Icon Defaults ===== */
i[data-lucide] { display: inline-flex; vertical-align: middle; }
.demo-nav-link i[data-lucide],
.mock-sidebar-icon i[data-lucide] { stroke-width: 1.8; }
/* ===== Device Frames ===== */
.device-frame {
position: relative;
border-radius: 16px;
overflow: hidden;
background: #0d0d1a;
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 40px rgba(99,102,241,.05);
transition: all .5s cubic-bezier(.16,1,.3,1);
}
.device-frame:hover {
border-color: rgba(99,102,241,.18);
box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 60px rgba(99,102,241,.1);
transform: translateY(-4px);
}
.device-frame::before {
content: ''; position: absolute; inset: -1px; border-radius: 16px;
background: linear-gradient(135deg, transparent 30%, rgba(99,102,241,.3), transparent 70%);
opacity: 0; transition: opacity .5s; z-index: -1; pointer-events: none;
}
.device-frame:hover::before { opacity: 1; }
.device-desktop { aspect-ratio: 16/10; max-height: 480px; }
.device-mobile { width: 280px; height: 560px; border-radius: 32px; border-width: 2px; margin: 0 auto; }
/* Toolbar (desktop) */
.toolbar {
display: flex; align-items: center; gap: 6px;
padding: 8px 14px;
background: rgba(255,255,255,.03);
border-bottom: 1px solid rgba(255,255,255,.06);
}
.traffic { display: flex; gap: 6px; align-items: center; }
.traffic .dot, .dot { width: 8px; height: 8px; border-radius: 50%; }
.traffic .dot:nth-child(1) { background: #ef4444; }
.traffic .dot:nth-child(2) { background: #eab308; }
.traffic .dot:nth-child(3) { background: #22c55e; }
.toolbar-dot { width: 8px; height: 8px; border-radius: 50%; }
.toolbar-dot.red { background: #ef4444; }
.toolbar-dot.yellow { background: #eab308; }
.toolbar-dot.green { background: #22c55e; }
.toolbar-url, .address-bar {
flex: 1; margin-left: 10px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.06);
border-radius: 6px;
padding: 3px 10px;
font-size: 11px; color: rgba(255,255,255,.4);
font-family: 'JetBrains Mono', 'Fira Code', monospace;
display: flex; align-items: center; gap: 6px;
}
/* Device Toolbar (alternative) */
.device-toolbar {
display: flex; align-items: center; gap: 6px;
padding: 8px 14px;
background: rgba(255,255,255,.03);
border-bottom: 1px solid rgba(255,255,255,.06);
}
/* Mobile */
.mobile-status {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 16px; font-size: 11px; color: rgba(255,255,255,.5);
background: rgba(0,0,0,.3);
}
.mobile-notch {
width: 80px; height: 24px; background: #000;
border-radius: 0 0 14px 14px; margin: 0 auto;
position: relative; z-index: 5;
}
.device-screen { height: calc(100% - 32px); overflow: hidden; position: relative; }
.device-mobile .device-screen { height: calc(100% - 56px); }
/* ===== Demo Section ===== */
.demo-section { scroll-margin-top: 100px; padding: 3.5rem 0; opacity: 0; transform: translateY(30px); transition: all .7s cubic-bezier(.16,1,.3,1); }
.demo-section.visible { opacity: 1; transform: none; }
.demo-section [data-animate] { opacity: 0; transform: translateY(20px); transition: all .6s cubic-bezier(.16,1,.3,1); }
.demo-section [data-animate].visible { opacity: 1; transform: none; }
.demo-section:not(:last-of-type) { border-bottom: 1px solid rgba(255,255,255,.04); }
.demo-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 14px; border-radius: 20px;
font-size: 12px; font-weight: 600; border: 1px solid;
}
/* ===== Sidebar ===== */
.mock-sidebar {
width: 200px;
background: rgba(255,255,255,.02);
border-right: 1px solid rgba(255,255,255,.06);
padding: 12px; flex-shrink: 0;
display: flex; flex-direction: column; gap: 2px;
}
.mock-sidebar-item {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px; border-radius: 8px;
font-size: 11px; color: rgba(255,255,255,.45);
transition: all .2s; cursor: pointer;
}
.mock-sidebar-item:hover, .mock-sidebar-item.active { background: rgba(99,102,241,.1); color: rgba(255,255,255,.9); }
.mock-sidebar-item.active { background: rgba(99,102,241,.15); color: #818cf8; }
.mock-sidebar-icon {
width: 18px; height: 18px; border-radius: 5px;
background: rgba(255,255,255,.06);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.mock-sidebar-icon i[data-lucide] { width: 11px; height: 11px; }
/* ===== Content Area ===== */
.mock-content { flex: 1; padding: 14px; overflow: hidden; }
.mock-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mock-title { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.9); }
.mock-subtitle { font-size: 10px; color: rgba(255,255,255,.35); margin-top: 2px; }
.mock-search {
display: flex; align-items: center; gap: 6px;
padding: 6px 10px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 8px;
font-size: 11px; color: rgba(255,255,255,.3);
}
/* Buttons */
.mock-btn {
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 12px; border-radius: 6px;
font-size: 10px; font-weight: 600;
cursor: pointer; transition: all .2s;
}
.mock-btn-primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }
.mock-btn-primary:hover { opacity: .85; }
/* Stats */
.mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.mock-stat-card {
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.05);
border-radius: 10px; padding: 10px 12px;
transition: all .25s;
}
.mock-stat-card:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); transform: translateY(-2px); }
.mock-stat-value { font-size: 18px; font-weight: 800; color: #fff; line-height: 1; transition: transform .2s; }
.mock-stat-label { font-size: 9px; color: rgba(255,255,255,.35); margin-top: 3px; }
.mock-stat-change { font-size: 9px; font-weight: 600; margin-top: 2px; }
.mock-stat-change.up { color: #22c55e; }
.mock-stat-change.down { color: #ef4444; }
/* ===== Table (div-based) ===== */
.mock-table { font-size: 10px; width: 100%; }
.mock-table-header, .mock-table-row {
display: flex; align-items: center;
gap: 4px; padding: 6px 8px;
}
.mock-table-header {
color: rgba(255,255,255,.35); font-weight: 600; font-size: 9px;
border-bottom: 1px solid rgba(255,255,255,.06);
text-transform: uppercase; letter-spacing: .05em;
}
.mock-table-header > span, .mock-table-row > span { flex: 1; min-width: 0; }
.mock-table-row {
border-bottom: 1px solid rgba(255,255,255,.03);
color: rgba(255,255,255,.65);
transition: background .15s; cursor: pointer;
}
.mock-table-row:hover { background: rgba(99,102,241,.04); }
/* Table (real table element - WishCargo) */
table.mock-table { width: 100%; border-collapse: collapse; font-size: 10px; }
table.mock-table th {
text-align: left; padding: 6px 8px;
color: rgba(255,255,255,.35); font-weight: 600; font-size: 9px;
border-bottom: 1px solid rgba(255,255,255,.06);
text-transform: uppercase; letter-spacing: .05em;
}
table.mock-table td { padding: 8px; border-bottom: 1px solid rgba(255,255,255,.03); color: rgba(255,255,255,.65); }
table.mock-table tr { transition: background .15s; cursor: pointer; }
table.mock-table tbody tr:hover { background: rgba(99,102,241,.04); }
/* Notif pulse */
.notif-pulse { position: relative; }
.notif-pulse::after {
content: ''; position: absolute; top: -2px; right: -2px;
width: 8px; height: 8px; background: #ef4444;
border-radius: 50%; border: 1.5px solid #0d0d1a;
}
/* Tags */
.mock-tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 4px; font-size: 9px; font-weight: 600; border: 1px solid transparent; }
.mock-tag.green { background: rgba(34,197,94,.12); color: #22c55e; }
.mock-tag.blue { background: rgba(59,130,246,.12); color: #60a5fa; }
.mock-tag.orange { background: rgba(249,115,22,.12); color: #fb923c; }
.mock-tag.red { background: rgba(239,68,68,.12); color: #f87171; }
.mock-tag.purple { background: rgba(168,85,247,.12); color: #c084fc; }
.mock-tag.cyan { background: rgba(6,182,212,.12); color: #22d3ee; }
.mock-tag.yellow { background: rgba(234,179,8,.12); color: #fbbf24; }
.mock-tag.pink { background: rgba(236,72,153,.12); color: #f472b6; }
.mock-tag.emerald { background: rgba(16,185,129,.12); color: #34d399; }
.mock-tag.indigo { background: rgba(99,102,241,.12); color: #818cf8; }
.mock-tag.teal { background: rgba(20,184,166,.12); color: #2dd4bf; }
.mock-tag.amber { background: rgba(245,158,11,.12); color: #fbbf24; }
/* Avatar */
.mock-avatar {
width: 24px; height: 24px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0;
background: var(--av-color, rgba(99,102,241,.3));
}
/* Progress bar */
.mock-progress { height: 4px; background: rgba(255,255,255,.05); border-radius: 2px; overflow: hidden; }
.mock-progress-bar { height: 100%; border-radius: 2px; transition: width 1.5s cubic-bezier(.16,1,.3,1); }
/* ===== Chart bars ===== */
.mock-chart-bars {
display: flex; align-items: flex-end; gap: 6px; height: 60px;
}
.mock-bar {
flex: 1; border-radius: 3px 3px 0 0;
background: var(--bar-color, #6366f1);
transition: height 1s cubic-bezier(.16,1,.3,1);
position: relative; min-height: 4px;
cursor: pointer;
}
.mock-bar:hover { opacity: .8; }
.mock-bar-label {
position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);
font-size: 8px; color: rgba(255,255,255,.35); white-space: nowrap;
}
/* ===== Chat ===== */
.mock-chat { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; }
.mock-message {
max-width: 80%; padding: 8px 12px; border-radius: 12px;
font-size: 11px; line-height: 1.4;
}
.mock-message.incoming {
align-self: flex-start;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.06);
color: rgba(255,255,255,.8); border-bottom-left-radius: 4px;
}
.mock-message.outgoing {
align-self: flex-end;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff; border-bottom-right-radius: 4px;
}
/* ===== Typing dots ===== */
.mock-typing { display: inline-flex; gap: 3px; padding: 8px 14px; align-self: flex-start; background: rgba(255,255,255,.04); border-radius: 12px; border: 1px solid rgba(255,255,255,.06); }
.mock-typing span { width: 5px; height: 5px; background: rgba(255,255,255,.3); border-radius: 50%; animation: typingBounce 1.4s ease-in-out infinite; }
.mock-typing span:nth-child(2) { animation-delay: .2s; }
.mock-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce { 0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)} }
/* ===== Funnel ===== */
.mock-funnel { display: flex; flex-direction: column; gap: 6px; }
.mock-funnel-step { position: relative; display: flex; align-items: center; height: 32px; }
.mock-funnel-bar {
height: 100%; border-radius: 6px;
background: var(--step-color, #6366f1);
opacity: .2; transition: width 1s cubic-bezier(.16,1,.3,1);
position: absolute; left: 0; top: 0;
}
.mock-funnel-info {
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: space-between;
width: 100%; padding: 0 12px;
font-size: 10px; color: rgba(255,255,255,.8);
}
.mock-funnel-info span { white-space: nowrap; }
/* Phone bottom nav */
.mock-bottom-nav {
display: flex; align-items: center; justify-content: space-around;
padding: 8px 0;
background: rgba(0,0,0,.5);
border-top: 1px solid rgba(255,255,255,.06);
position: absolute; bottom: 0; left: 0; right: 0;
}
.mock-nav-item {
display: flex; flex-direction: column; align-items: center; gap: 2px;
font-size: 8px; color: rgba(255,255,255,.35);
cursor: pointer; transition: color .2s;
}
.mock-nav-item.active { color: #818cf8; }
.mock-nav-item:hover { color: rgba(255,255,255,.7); }
/* Food card */
.mock-food-card {
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
border-radius: 12px; overflow: hidden; transition: all .3s; cursor: pointer;
}
.mock-food-card:hover { border-color: rgba(249,115,22,.2); transform: translateY(-2px); }
.mock-food-img {
height: 60px; display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(249,115,22,.08), rgba(234,179,8,.05));
}
.mock-food-info { padding: 8px; }
.mock-food-name { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.85); }
.mock-food-price { font-size: 11px; font-weight: 800; color: #f97316; margin-top: 2px; }
/* Product card */
.mock-product-card {
background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06);
border-radius: 10px; overflow: hidden; transition: all .3s; cursor: pointer;
}
.mock-product-card:hover { border-color: rgba(236,72,153,.2); transform: translateY(-2px); }
.mock-product-img {
height: 80px; display: flex; align-items: center; justify-content: center;
font-size: 36px; position: relative;
}
/* AR badge */
.mock-ar-badge {
position: absolute; bottom: 6px; right: 6px;
padding: 2px 8px; border-radius: 8px;
font-size: 8px; font-weight: 700;
background: rgba(244,63,94,.15); color: #fb7185;
display: flex; align-items: center; gap: 3px;
}
/* Alert card */
.mock-alert-card {
display: flex; align-items: center; gap: 10px; padding: 8px 12px;
background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05);
border-radius: 10px; transition: all .25s; cursor: pointer;
border-left: 3px solid;
}
.mock-alert-card:hover { background: rgba(255,255,255,.05); }
/* OCR */
.mock-ocr-zone {
border: 2px dashed rgba(99,102,241,.3); border-radius: 12px;
padding: 16px; text-align: center;
background: rgba(99,102,241,.02); display: flex; flex-direction: column; align-items: center; gap: 4px;
transition: all .3s; cursor: pointer; position: relative; overflow: hidden;
}
.mock-ocr-zone:hover { border-color: rgba(99,102,241,.5); background: rgba(99,102,241,.05); }
/* Schedule grid */
.mock-schedule-grid { font-size: 9px; }
.mock-schedule-header {
display: grid; grid-template-columns: 50px repeat(5, 1fr);
gap: 2px; margin-bottom: 4px;
font-size: 8px; font-weight: 700; color: rgba(255,255,255,.4); text-align: center;
}
.mock-schedule-row {
display: grid; grid-template-columns: 50px repeat(5, 1fr);
gap: 2px; padding: 4px 0; align-items: center; text-align: center;
border-bottom: 1px solid rgba(255,255,255,.03);
}
/* Tabs */
.mock-tabs {
display: flex; gap: 2px; padding: 3px;
background: rgba(255,255,255,.03); border-radius: 8px;
}
.mock-tab {
padding: 5px 10px; border-radius: 6px;
font-size: 10px; font-weight: 500; color: rgba(255,255,255,.4);
text-align: center; cursor: pointer; transition: all .2s;
border: none; background: none;
}
.mock-tab.active { background: rgba(99,102,241,.15); color: #818cf8; }
.mock-tab:hover:not(.active) { color: rgba(255,255,255,.6); }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn .3s ease; }
/* 3D viewer */
.mock-3d-viewer {
position: relative; height: 180px;
display: flex; align-items: center; justify-content: center;
border-radius: 12px; border: 1px solid rgba(255,255,255,.04); overflow: hidden;
background: linear-gradient(135deg, rgba(236,72,153,.03), rgba(168,85,247,.03));
}
.mock-3d-model { font-size: 72px; animation: float3d 4s ease-in-out infinite; cursor: grab; user-select: none; }
@keyframes float3d {
0%,100%{transform:rotateY(0deg) rotateX(5deg)}25%{transform:rotateY(15deg) rotateX(-5deg)}
50%{transform:rotateY(0deg) rotateX(-5deg)}75%{transform:rotateY(-15deg) rotateX(5deg)}
}
.mock-3d-controls {
position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
display: flex; gap: 6px; align-items: center;
}
/* Debt card */
.mock-debt-card {
padding: 10px; border-radius: 8px;
background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.04);
transition: all .2s; cursor: pointer;
}
.mock-debt-card:hover { background: rgba(255,255,255,.04); }
/* Weight converter */
.mock-weight-converter {
background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06);
border-radius: 10px; padding: 16px;
}
/* ===== Kanban ===== */
.mock-kanban-board { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.mock-kanban-column {
min-width: 150px; flex: 1;
background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.04);
border-radius: 10px; padding: 8px;
}
.mock-kanban-header {
display: flex; align-items: center; justify-content: space-between;
font-size: 9px; font-weight: 700; color: rgba(255,255,255,.6);
margin-bottom: 8px; padding-bottom: 6px;
border-bottom: 2px solid;
}
.mock-kanban-card {
padding: 8px; border-radius: 6px; margin-bottom: 6px;
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05);
font-size: 9px; color: rgba(255,255,255,.65);
transition: all .2s; cursor: grab;
}
.mock-kanban-card:hover { background: rgba(255,255,255,.06); transform: translateX(2px); }
/* ===== Calendar grid ===== */
.mock-calendar-grid {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.mock-calendar-day {
aspect-ratio: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center;
border-radius: 6px; font-size: 10px; font-weight: 500;
color: rgba(255,255,255,.5); transition: all .2s; cursor: pointer;
position: relative; gap: 2px;
}
.mock-calendar-day:hover:not(.header) { background: rgba(255,255,255,.05); }
.mock-calendar-day.header { font-size: 8px; font-weight: 700; color: rgba(255,255,255,.25); text-transform: uppercase; cursor: default; }
.mock-calendar-day.today { background: rgba(99,102,241,.15); color: #818cf8; font-weight: 700; }
.mock-calendar-day.booked { position: relative; }
.mock-calendar-day.booked.multi .cal-dot:nth-child(2) { background: #22c55e; }
.mock-calendar-day.booked.multi .cal-dot:nth-child(3) { background: #f59e0b; }
.cal-dot { width: 4px; height: 4px; border-radius: 50%; background: #6366f1; flex-shrink: 0; }
/* ===== Donut chart ===== */
.mock-donut-chart { display: flex; flex-direction: column; align-items: center; }
.donut-segment { transition: stroke-dasharray .8s ease; }
/* ===== Flow canvas / nodes ===== */
.mock-flow-canvas {
position: relative; height: 160px;
background: rgba(255,255,255,.01); border: 1px solid rgba(255,255,255,.04);
border-radius: 12px; overflow: hidden;
}
.mock-flow-node {
position: absolute;
padding: 8px 10px; border-radius: 10px;
background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.08);
display: flex; flex-direction: column; align-items: center; gap: 2px;
cursor: pointer; transition: all .3s; z-index: 2;
min-width: 70px;
}
.mock-flow-node:hover { transform: scale(1.08); border-color: rgba(255,255,255,.2); }
.mock-flow-node.trigger { border-color: rgba(251,191,36,.25); background: rgba(251,191,36,.05); }
.mock-flow-node.action { border-color: rgba(99,102,241,.2); background: rgba(99,102,241,.03); }
.mock-flow-node.condition { border-color: rgba(192,132,252,.25); background: rgba(192,132,252,.05); border-radius: 16px; }
.mock-flow-icon {
width: 28px; height: 28px; border-radius: 8px;
background: rgba(255,255,255,.05);
display: flex; align-items: center; justify-content: center;
}
.mock-flow-connector { position: absolute; z-index: 1; overflow: visible; }
/* ===== Live dot ===== */
.live-dot {
width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
display: inline-block; position: relative;
}
.live-dot::after {
content: ''; position: absolute; inset: -3px;
border-radius: 50%; background: rgba(34,197,94,.35);
animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse { 0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.8);opacity:0} }
/* ===== Card glow ===== */
.card-glow { position: relative; overflow: hidden; }
.card-glow::after {
content: ''; position: absolute; inset: 0;
background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(99,102,241,.06), transparent 60%);
opacity: 0; transition: opacity .3s; pointer-events: none;
}
.card-glow:hover::after { opacity: 1; }
/* Navigation */
.demo-nav-link { transition: all .2s; }
.demo-nav-link.active {
background: rgba(99,102,241,.1); color: #fff !important;
box-shadow: inset 0 -2px 0 #6366f1;
}
.demo-nav-link i[data-lucide] { opacity: .6; }
.demo-nav-link.active i[data-lucide] { opacity: 1; }
/* Interaction hint */
.demo-interact-hint {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; color: rgba(255,255,255,.3); margin-top: 12px;
}
/* Dark scrollbar */
.demo-nav-scroll::-webkit-scrollbar { height: 2px; }
.demo-nav-scroll::-webkit-scrollbar-track { background: transparent; }
.demo-nav-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }
/* ===== Animations ===== */
@keyframes fadeIn { 0%{opacity:0}100%{opacity:1} }
@keyframes slideUp { 0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none} }
@keyframes spin { to { transform: rotate(360deg); } }
/* ===== MOBILE ===== */
@media (max-width: 1024px) {
.demo-section { padding: 2.5rem 0; }
}
@media (max-width: 768px) {
.mock-sidebar { width: 44px; padding: 8px 4px; }
.mock-sidebar-item { padding: 6px; justify-content: center; }
.mock-sidebar-item span:not(.mock-sidebar-icon) { display: none; }
.mock-content { padding: 10px; }
.device-desktop { aspect-ratio: auto; min-height: 300px; }
.device-mobile { width: 240px; height: 480px; }
.mock-stats { grid-template-columns: repeat(2, 1fr) !important; }
.demo-section { padding: 2rem 0; }
.demo-badge { font-size: 11px; padding: 3px 10px; }
.mock-table-header, .mock-table-row { font-size: 8px; gap: 2px; padding: 5px 4px; }
.mock-funnel-step { height: 26px; }
.mock-funnel-info { font-size: 9px; }
.mock-chart-bars { height: 40px; }
.mock-kanban-board { gap: 6px; }
.mock-kanban-column { min-width: 120px; padding: 6px; }
.mock-calendar-grid { gap: 1px; }
.mock-calendar-day { font-size: 8px; }
.mock-flow-canvas { height: 130px; }
.mock-flow-node { padding: 5px 6px; min-width: 55px; }
.mock-flow-node .text-\[8px\] { font-size: 7px; }
.mock-flow-icon { width: 22px; height: 22px; }
}
@media (max-width: 480px) {
.device-mobile { width: 220px; height: 440px; }
.device-frame { border-radius: 12px; }
.device-mobile { border-radius: 24px; }
.mock-sidebar { width: 36px; padding: 6px 2px; }
.mock-sidebar-icon { width: 16px; height: 16px; }
.mock-sidebar-icon i[data-lucide] { width: 9px; height: 9px; }
.mock-content { padding: 8px; }
.mock-stat-value { font-size: 14px; }
.mock-stat-label { font-size: 7px; }
.mock-btn { padding: 4px 8px; font-size: 8px; }
.mock-flow-canvas { height: 100px; }
}