/* Last update: 2025-10-25 */
/* App UI showcase components used on the marketing site. */

/* Utilities (scoped) */
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.muted { opacity: .85; }

.app-showcase { margin: 40px auto; max-width: 1100px; }
.app-frame { position: relative; border-radius: 24px; padding: 22px; background: var(--bg-panel, #0f2535); box-shadow: 0 10px 40px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.04); }
.app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

/* Compact variant to keep slices small on the page */
.app-showcase.compact { max-width: 880px; margin: 28px auto; }
.app-showcase.compact .app-frame { padding: 16px; border-radius: 20px; }
.app-showcase.compact .ui-title { font-size: 20px; }
.app-showcase.compact .tiles { gap: 18px; }
.app-showcase.compact .tile { padding: 18px; border-radius: 20px; }
.app-showcase.compact .tile .title { font-size: 18px; }
.app-showcase.compact .tile .subtitle { font-size: 14px; }
.app-showcase.compact .glyph { width: 32px; height: 32px; }
.app-showcase.compact .jobs-card { padding: 14px; }
.app-showcase.compact .dock { width: 56px; height: 56px; }

/* Header */
.ui-header { display:flex; align-items:center; justify-content: space-between; background: rgba(255,255,255,0.03); border-radius: 18px; padding: 14px 16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); margin-bottom: 16px; }
.ui-title { font-size: 24px; font-weight: 800; color: var(--text-light, #e7f1f7); letter-spacing: 0.2px; }
.ui-title .accent { color: var(--brand-orange, #ff8a2b); }
.ui-controls { display:flex; gap: 12px; align-items:center; }
.chip { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; font-size:13px; color: var(--text-light, #e7f1f7); background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-green, #10b981); box-shadow: 0 0 10px rgba(16,185,129,0.7); }

/* Primary tiles */
.tiles { display:grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.tile { border-radius: 26px; padding: 22px; color: #fff; position:relative; overflow:hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.35); }
.tile .title { font-size: 22px; font-weight: 800; margin-top: 6px; letter-spacing: 0.2px; }
.tile .subtitle { font-size: 16px; opacity: 0.9; }
.tile--backup { background: linear-gradient(135deg, #ff8a2b, #ff6a00); }
.tile--restore { background: linear-gradient(135deg, #7b6cff, #6a49ff); }
.tile .glyph { width: 42px; height: 42px; background: rgba(255,255,255,0.9); color: #1a1a1a; border-radius: 50%; display:grid; place-items:center; font-weight: 900; box-shadow: 0 6px 16px rgba(0,0,0,0.25); }

/* Existing jobs card */
.jobs-card { grid-column: 1 / -1; border-radius: 18px; background: rgba(255,255,255,0.03); padding: 16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.jobs-title { display:flex; align-items:center; gap: 10px; color: var(--text-light); font-weight: 700; font-size: 20px; margin: 6px 0 14px; }
.jobs-title .case { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,0.12); display:grid; place-items:center; }
.setup-banner { display:flex; align-items:center; gap: 12px; border-radius: 999px; background: rgba(255,255,255,0.06); color: var(--text-light); padding: 12px 14px; font-weight: 600; margin: 6px 0 16px; }
.setup-banner .dot { width: 10px; height:10px; border-radius:50%; background: #ffb02e; box-shadow:0 0 10px rgba(255,176,46,0.7); }
.learn-card { border-radius: 16px; padding: 16px; background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); display:flex; align-items:center; justify-content: space-between; gap:16px; }
.learn-card .copy { color: var(--text-light); }
.learn-card .cta { padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,0.12); color: var(--text-light, #e7f1f7); font-weight: 800; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }

/* Floating dock */
.dock { position:absolute; right: 18px; bottom: 18px; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #ff8a2b, #ff6a00); box-shadow: 0 18px 40px rgba(0,0,0,0.45); display:grid; place-items:center; }
.dock .bars { width: 22px; height: 2px; background:#1a1a1a; position:relative; }
.dock .bars::before, .dock .bars::after { content:''; position:absolute; left:0; width:22px; height:2px; background:#1a1a1a; }
.dock .bars::before { top:-7px; }
.dock .bars::after { top:7px; }

@media (max-width: 900px){
  .app-grid, .tiles { grid-template-columns: 1fr; }
  .dock { width: 64px; height: 64px; }
}

/* ========================= Mini Components (Section-embedded) ========================= */

/* Mini frame baseline */
.mini-frame { margin: 14px auto 0; max-width: 860px; background: var(--bg-panel, #0f2535); border-radius: 14px; padding: 12px; box-shadow: 0 10px 24px rgba(0,0,0,0.26), inset 0 0 0 1px rgba(255,255,255,0.05); }
.mini-header { display:flex; align-items:center; justify-content: space-between; margin-bottom: 10px; }
.mini-title { font-weight: 800; color: var(--text-light, #e7f1f7); letter-spacing: .2px; }
.mini-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background: rgba(255,255,255,0.06); color: var(--text-light); font-size: 12px; }
.mini-dot { width:8px; height:8px; border-radius:50%; background: var(--accent-green, #10b981); box-shadow:0 0 8px rgba(16,185,129,.7); }

/* Restore preview */
.restore-preview .file-list { display:grid; grid-template-columns: 22px 1fr 110px 70px; gap: 8px; align-items:center; }
.restore-preview input[type="checkbox"] { accent-color: #7b6cff; width: 14px; height: 14px; }
.restore-preview .file-list .head { opacity:.7; font-size:12px; }
.restore-preview .row { display:contents; }
.restore-preview .name { color: var(--text-light); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.restore-preview .ver { color: var(--text-light); opacity:.9; font-size: 12px; }
.restore-preview .size { color: var(--text-light); opacity:.7; font-size: 12px; }
.restore-preview .cta-bar { margin-top: 10px; display:flex; justify-content:flex-end; }
.restore-preview .btn { padding:8px 12px; border-radius:10px; background: linear-gradient(135deg, #7b6cff, #6a49ff); color:#fff; font-weight:800; text-decoration:none; box-shadow: 0 6px 14px rgba(106,73,255,.35); }

/* Nearby peers */
.lan-peers .peer-list { display:grid; gap:10px; }
.lan-peers .peer { display:flex; align-items:center; justify-content:space-between; background: rgba(255,255,255,0.04); border-radius:12px; padding:10px 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }

/* Section breathing room without extra height */
#design-reliability { margin-top: 18px; margin-bottom: 18px; }
.restore-preview { margin-top: 10px; }
.lan-peers { margin-top: 10px; }
.lan-peers .id { display:flex; align-items:center; gap:10px; color: var(--text-light); font-weight:700; }
.lan-peers .avatar { width:28px; height:28px; border-radius:8px; background: rgba(255,255,255,0.15); display:grid; place-items:center; }
.lan-peers .status { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:12px; color: var(--text-light); background: rgba(255,255,255,0.06); }
.lan-peers .status .ok { width:8px; height:8px; border-radius:50%; background:#10b981; box-shadow:0 0 8px rgba(16,185,129,.7); }
.lan-peers .approve { padding:6px 10px; border-radius:10px; background: rgba(255,255,255,0.12); color: var(--text-light); text-decoration:none; font-weight:700; }

/* ========================= New: Beautiful UI Panels ========================= */

/* Brand bar mimicking app top bar */
.brand-bar { display:flex; align-items:center; justify-content: space-between; padding: 10px 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(20,35,50,0.9), rgba(12,22,32,0.9)); box-shadow: inset 0 -2px 0 rgba(255,138,43,0.45), inset 0 0 0 1px rgba(255,255,255,0.05); margin-bottom: 14px; }
.brand { display:flex; align-items:center; gap: 10px; }
.brand img { width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.brand .name { font-weight: 900; letter-spacing:.3px; color: #eaf4fb; }
.brand .name .em { color: #ff8a2b; font-weight: 900; }
.gear { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,0.08); display:grid; place-items:center; color:#ff9a2e; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }

.pill { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background: rgba(255,255,255,0.08); color: #e7f1f7; font-size: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.pill .dot { width:9px; height:9px; border-radius:50%; background:#10b981; box-shadow:0 0 8px rgba(16,185,129,.7); }

/* Sidebar menu list */
.menu-panel { background: rgba(255,255,255,0.03); border-radius: 18px; padding: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); position:relative; }
.menu-list { display:grid; gap: 10px; }
.menu-item { display:flex; align-items:center; gap:10px; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,0.06); color: #e7f1f7; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.menu-item .ico { width:22px; height:22px; display:grid; place-items:center; border-radius:6px; background: rgba(255,255,255,0.12); }
.menu-footer { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06); display:flex; justify-content:flex-end; }

/* Dashboard panel tweaks (within beautiful-ui) */
#beautiful-ui .tiles { gap: 18px; }
#beautiful-ui .jobs-card { margin-top: 6px; }

@media (max-width: 900px){
  #beautiful-ui .app-grid { grid-template-columns: 1fr; }
}