/* myfiles.ucagg.de - additions on top of the shared UCA site.css: the phone hero, terminal, archives, admin charts. */

/* ---------- hero: phone ---------- */
.phone-stage { display: grid; place-items: center; position: relative; min-height: 560px; perspective: 1400px; }
.phone { position: relative; width: 300px; height: 610px; border-radius: 44px; padding: 12px; background: linear-gradient(160deg, #2a1d16, #120c09 60%);
  border: 1px solid rgba(var(--ember-rgb), .3); box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 0 80px -20px rgba(var(--ember-rgb), .35);
  transform: rotateY(-14deg) rotateX(6deg); transition: transform .8s var(--ease); animation: float 7s ease-in-out infinite; }
.phone:hover { transform: rotateY(-4deg) rotateX(2deg); }
@keyframes float { 50% { translate: 0 -10px; } }
.ph-notch { position: absolute; top: 20px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #050302; z-index: 2; box-shadow: 0 0 0 2px #1a110c; }
.ph-screen { position: relative; height: 100%; border-radius: 34px; overflow: hidden; background: radial-gradient(120% 60% at 50% 0%, #22150e, #0e0907 70%); padding: 14px 14px 0; display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.ph-bar { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; padding: 2px 8px 0; }
.ph-sig { display: flex; gap: 2px; align-items: flex-end; } .ph-sig i { width: 3px; background: var(--muted); border-radius: 1px; } .ph-sig i:nth-child(1) { height: 5px; } .ph-sig i:nth-child(2) { height: 8px; } .ph-sig i:nth-child(3) { height: 11px; }
.ph-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 0; }
.ph-head b { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.ph-search svg, .phone .g svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ph-search { color: var(--muted); }
.ph-storage { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.ph-ring { position: relative; width: 58px; height: 58px; flex: none; }
.ph-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ph-ring circle { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 3.4; }
.ph-ring .arc { stroke: var(--ember); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1.6s var(--ease); filter: drop-shadow(0 0 4px rgba(var(--ember-rgb), .6)); }
.ph-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1px; font-size: 10px; color: var(--muted); }
.ph-ring b { color: var(--text); font-size: 15px; }
.ph-st-text { display: grid; gap: 3px; flex: 1; } .ph-st-text small { color: var(--muted); font-size: 10.5px; }
.ph-bars { display: flex; gap: 2px; height: 5px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .06); margin-top: 3px; }
.ph-bars i { width: var(--w); background: var(--ember); } .ph-bars i:nth-child(2) { background: var(--ember-2); } .ph-bars i:nth-child(3) { background: var(--gold); } .ph-bars i:nth-child(4) { background: #b8714a; }
.ph-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ph-cat { display: grid; justify-items: center; gap: 2px; padding: 8px 2px 6px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid transparent; transition: border-color .3s, background .3s; }
.ph-cat .g { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--ember-rgb), .14); color: var(--ember-2); }
.ph-cat b { font-size: 10px; font-weight: 600; } .ph-cat small { font-size: 9px; color: var(--faint); }
.ph-cat.k-img .g { color: #ffb26b; } .ph-cat.k-vid .g { color: #ff8f6b; background: rgba(255, 110, 80, .14); } .ph-cat.k-aud .g { color: #ffd27a; background: rgba(255, 210, 122, .12); }
.ph-cat.k-doc .g { color: #f4ece8; background: rgba(255, 255, 255, .08); } .ph-cat.k-apk .g { color: #a8e07d; background: rgba(143, 209, 106, .12); } .ph-cat.k-trash .g { color: var(--muted); background: rgba(255, 255, 255, .05); }
.ph-cat.hot { border-color: rgba(var(--ember-rgb), .45); background: rgba(var(--ember-rgb), .08); }
.ph-sec { color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; padding: 2px 4px 0; }
.ph-conns { display: grid; gap: 6px; }
.ph-conn { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.ph-conn .g { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: var(--ember-2); flex: none; }
.ph-conn .grow { display: grid; } .ph-conn b { font-size: 11.5px; } .ph-conn small { font-size: 9.5px; color: var(--faint); }
.ph-conn .dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .15); }
.ph-conn.on .dot { background: var(--good); box-shadow: 0 0 8px var(--good); }
.ph-toast { position: absolute; left: 12px; right: 12px; bottom: 44px; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(36, 24, 18, .96);
  border: 1px solid rgba(var(--ember-rgb), .35); box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .8); transform: translateY(140%); opacity: 0; transition: transform .6s var(--ease), opacity .4s; }
.ph-toast.on { transform: none; opacity: 1; }
.ph-toast .g { color: var(--ember); } .ph-toast .grow { display: grid; gap: 6px; } .ph-toast b { font-size: 11px; }
.ph-prog { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ph-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ember), var(--gold)); border-radius: 3px; }
.ph-toast.on .ph-prog i { animation: prog 3.2s var(--ease) forwards; }
@keyframes prog { to { width: 100%; } }
.ph-nav { margin-top: auto; display: flex; justify-content: space-around; padding: 12px 20px 16px; border-top: 1px solid var(--line); }
.ph-nav i { width: 18px; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .12); } .ph-nav i.on { background: var(--ember); }
.orbit { position: absolute; inset: 0; pointer-events: none; }
.orbit span { position: absolute; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--ember-2);
  background: rgba(20, 14, 11, .85); border: 1px solid rgba(var(--ember-rgb), .3); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .8); animation: bob 6s ease-in-out infinite; }
.orbit span:nth-child(1) { top: 12%; left: 4%; } .orbit span:nth-child(2) { top: 30%; right: 0; animation-delay: -1s; } .orbit span:nth-child(3) { bottom: 26%; left: 0; animation-delay: -2s; }
.orbit span:nth-child(4) { bottom: 10%; right: 6%; animation-delay: -3s; } .orbit span:nth-child(5) { top: 3%; right: 18%; animation-delay: -4s; } .orbit span:nth-child(6) { top: 55%; left: -2%; animation-delay: -5s; }
@keyframes bob { 50% { translate: 0 -8px; } }

/* ---------- play button ---------- */
.btn.play { display: inline-flex; align-items: center; gap: 10px; }
.btn.play svg { width: 18px; height: 18px; fill: currentColor; }
.btn.play.soon { background: rgba(255, 255, 255, .06); color: var(--muted); border: 1px solid var(--line-2); box-shadow: none; cursor: default; }

/* ---------- cards with stroke icons ---------- */
.card > svg { fill: none; stroke: var(--ember); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- terminal ---------- */
.term { border-radius: 18px; overflow: hidden; background: #0a0705; border: 1px solid rgba(var(--ember-rgb), .25); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 60px -30px rgba(var(--ember-rgb), .5); }
.term-bar { display: flex; gap: 7px; align-items: center; padding: 11px 14px; background: rgba(255, 255, 255, .04); border-bottom: 1px solid var(--line); }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); } .term-bar i:first-child { background: var(--ember); }
.term-bar span { margin-left: 8px; color: var(--muted); font: 12px Consolas, "Cascadia Mono", monospace; }
.term-body { margin: 0; padding: 16px 18px; min-height: 190px; color: #e9dcd3; font: 13px/1.6 Consolas, "Cascadia Mono", monospace; white-space: pre-wrap; }
.term-body .p { color: var(--good); }
.term-body .cur { display: inline-block; width: 8px; height: 15px; vertical-align: -2px; background: var(--ember); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.term-keys { display: flex; gap: 6px; padding: 10px 12px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.term-keys span { padding: 5px 10px; border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--muted); font: 600 12px var(--font); }

/* ---------- archives ---------- */
.arch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.arch-item { padding: 22px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.arch-item b { display: inline-block; font-size: 22px; font-weight: 800; color: var(--ember); letter-spacing: .04em; margin-bottom: 6px; }
.arch-item p { margin: 0; color: var(--muted); }

/* ---------- privacy shield ---------- */
.shield { display: grid; place-items: center; min-height: 260px; }
.shield svg { width: 180px; height: 180px; fill: none; stroke: var(--ember); stroke-width: 1.1; filter: drop-shadow(0 0 30px rgba(var(--ember-rgb), .5)); animation: bob 6s ease-in-out infinite; }

/* ---------- admin ---------- */
.badge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--ember); color: #1a0f08; font-size: 11px; font-weight: 800; text-align: center; }
svg.chart { width: 100%; height: 140px; display: block; margin-top: 8px; }
svg.chart .b1 { fill: rgba(var(--ember-rgb), .35); } svg.chart .b2 { fill: var(--ember); }
.chart-axis { display: flex; justify-content: space-between; color: var(--faint); font-size: 11.5px; margin-top: 4px; }
.shares { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.shares li { display: grid; grid-template-columns: minmax(70px, 34%) 1fr 48px; gap: 10px; align-items: center; font-size: 13.5px; }
.shares .k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.shares .bar { height: 8px; border-radius: 5px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.shares .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ember), var(--ember-2)); border-radius: 5px; }
.shares .n { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.list.chat li.team { border-left: 3px solid var(--ember); } .list.chat li.user { border-left: 3px solid rgba(255, 255, 255, .15); }

@media (max-width: 1080px) { .phone-stage { min-height: 520px; } }
@media (max-width: 860px) { .arch { grid-template-columns: repeat(2, 1fr); } .phone { transform: none; } .orbit { display: none; } }
@media (max-width: 560px) { .arch { grid-template-columns: 1fr; } .phone { width: 270px; height: 560px; } }
@media (prefers-reduced-motion: reduce) { .phone, .orbit span, .shield svg { animation: none; } }