/* ============================================================
   AurionWorks · monochrome UI mockups
   CSS-built "screenshots" for case-study imagery.
   Drop inside a `.ph.mk` container (fills parent, no stripes).
   ============================================================ */

.ph.mk{
  background:#0b0c0d; padding:0; align-items:stretch; overflow:hidden; position:relative;
  --s0:#0b0c0d; --s1:#15171a; --s2:#1d2024; --s3:#2b2f34; --ln:rgba(255,255,255,0.10);
  --bar:#3a3f45; --hi:#e9eaeb; --t1:#c4c7cb; --t2:#7c8085; --t3:#54585c;
}
.ph.mk > span{ display:none; }
.mk-fill{ position:absolute; inset:0; display:flex; flex-direction:column; }
.mk-pad{ position:absolute; inset:0; padding:14px; display:flex; }

/* generic bars / dots */
.b{ height:5px; border-radius:2px; background:var(--bar); display:block; }
.b.lt{ background:var(--t3); }
.b.w{ background:var(--hi); }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--s3); display:inline-block; }
.dot.w{ background:var(--hi); }
.av{ width:14px; height:14px; border-radius:50%; background:var(--s3); }

/* ---------------- DASHBOARD ---------------- */
.mk-dash{ position:absolute; inset:0; display:grid; grid-template-columns:52px 1fr; background:var(--s0); }
.mk-dash .rail{ border-right:1px solid var(--ln); padding:12px 0; display:flex; flex-direction:column; align-items:center; gap:12px; background:var(--s1); }
.mk-dash .rail .logo{ width:14px; height:14px; background:var(--hi); border-radius:3px; }
.mk-dash .rail .ni{ width:18px; height:6px; border-radius:2px; background:var(--s3); }
.mk-dash .rail .ni.on{ background:var(--t1); }
.mk-dash .main{ display:flex; flex-direction:column; min-width:0; }
.mk-dash .top{ height:30px; border-bottom:1px solid var(--ln); display:flex; align-items:center; gap:8px; padding:0 12px; }
.mk-dash .top .pill{ width:84px; height:8px; border-radius:3px; background:var(--s3); }
.mk-dash .top .sp{ flex:1; }
.mk-dash .top .av{ margin-left:auto; }
.mk-dash .body{ padding:12px; display:flex; flex-direction:column; gap:10px; flex:1; min-height:0; }
.mk-dash .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.mk-dash .card{ border:1px solid var(--ln); border-radius:5px; background:var(--s1); padding:8px; display:flex; flex-direction:column; gap:6px; }
.mk-dash .card .n{ height:11px; width:60%; border-radius:2px; background:var(--hi); }
.mk-dash .card .s{ height:4px; width:80%; border-radius:2px; background:var(--t3); }
.mk-dash .chart{ flex:1; border:1px solid var(--ln); border-radius:5px; background:var(--s1); padding:10px; display:flex; align-items:flex-end; gap:6px; min-height:46px; }
.mk-dash .chart i{ flex:1; background:var(--bar); border-radius:2px 2px 0 0; }
.mk-dash .chart i.hi{ background:var(--hi); }

/* table variant block */
.mk-rows{ display:flex; flex-direction:column; gap:7px; }
.mk-rows .r{ display:flex; align-items:center; gap:8px; }
.mk-rows .r .b{ flex:1; }

/* ---------------- PHONE ---------------- */
.mk-stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:14px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.04), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 22px),
    var(--s0);
}
.phone{ width:66px; aspect-ratio:9/19; background:var(--s1); border:1px solid var(--ln); border-radius:12px; padding:4px; box-shadow:0 16px 30px -16px rgba(0,0,0,0.8); position:relative; flex:none; }
.phone.sm{ width:58px; }
.phone .scr{ position:absolute; inset:4px; border-radius:9px; background:var(--s0); overflow:hidden; display:flex; flex-direction:column; }
.phone .notch{ position:absolute; top:6px; left:50%; transform:translateX(-50%); width:20px; height:3px; border-radius:3px; background:var(--s3); z-index:2; }
.phone .sb{ height:12px; display:flex; align-items:center; justify-content:space-between; padding:0 7px; }
.phone .sb .t{ width:14px; height:3px; border-radius:2px; background:var(--t2); }
.phone .sb .r{ width:12px; height:3px; border-radius:2px; background:var(--t2); }
.phone .ph-h{ padding:5px 7px; display:flex; flex-direction:column; gap:4px; border-bottom:1px solid var(--ln); }
.phone .ph-h .ttl{ height:7px; width:64%; border-radius:2px; background:var(--hi); }
.phone .ph-h .sub{ height:4px; width:40%; border-radius:2px; background:var(--t3); }
.phone .ph-c{ padding:6px 7px; display:flex; flex-direction:column; gap:6px; flex:1; }
.phone .fld{ height:11px; border:1px solid var(--ln); border-radius:3px; background:var(--s1); }
.phone .cta{ height:13px; border-radius:3px; background:var(--hi); margin-top:auto; }
.phone .tabbar{ height:15px; border-top:1px solid var(--ln); display:flex; align-items:center; justify-content:space-around; }
.phone .tabbar .dot{ width:5px; height:5px; }
/* finance phone chart */
.phone .fchart{ height:38px; display:flex; align-items:flex-end; gap:3px; padding:0 2px; }
.phone .fchart i{ flex:1; background:var(--bar); border-radius:1px; }
.phone .fchart i.hi{ background:var(--hi); }
.phone .line{ height:30px; position:relative; overflow:hidden; }
.phone .line svg{ position:absolute; inset:0; width:100%; height:100%; }
/* list rows */
.phone .li{ display:flex; align-items:center; gap:7px; }
.phone .li .av{ width:16px; height:16px; }
.phone .li .col{ flex:1; display:flex; flex-direction:column; gap:3px; }
.phone .li .col .b{ height:4px; }

/* ---------------- WEB / COMMERCE ---------------- */
.mk-web{ position:absolute; inset:0; display:flex; flex-direction:column; background:var(--s0); }
.mk-web .bar{ height:22px; border-bottom:1px solid var(--ln); display:flex; align-items:center; gap:5px; padding:0 9px; background:var(--s1); }
.mk-web .bar .d{ width:6px; height:6px; border-radius:50%; background:var(--s3); }
.mk-web .bar .url{ flex:1; height:8px; border-radius:4px; background:var(--s2); margin-left:6px; max-width:60%; }
.mk-web .hero{ padding:11px; display:flex; flex-direction:column; gap:7px; border-bottom:1px solid var(--ln); }
.mk-web .hero .h{ height:12px; width:55%; border-radius:3px; background:var(--hi); }
.mk-web .hero .p{ height:5px; width:75%; border-radius:2px; background:var(--t3); }
.mk-web .grid{ flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:11px; }
.mk-web .grid .tile{ border:1px solid var(--ln); border-radius:5px; background:var(--s1); display:flex; flex-direction:column; }
.mk-web .grid .tile .im{ flex:1; background:repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 5px, transparent 5px 10px); border-bottom:1px solid var(--ln); min-height:26px; }
.mk-web .grid .tile .ft{ padding:5px; display:flex; flex-direction:column; gap:3px; }
.mk-web .grid .tile .ft .b{ height:4px; }

/* ---------------- BRAND BOARD ---------------- */
.mk-brand{ position:absolute; inset:0; display:grid; grid-template-columns:1.3fr 1fr; background:var(--s0); }
.mk-brand .left{ border-right:1px solid var(--ln); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:10px; }
.mk-brand .mark{ width:34px; height:34px; border:1.5px solid var(--hi); transform:rotate(45deg); position:relative; }
.mk-brand .mark::after{ content:""; position:absolute; inset:7px; background:var(--hi); }
.mk-brand .wm{ font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.12em; color:var(--hi); font-weight:700; }
.mk-brand .right{ display:flex; flex-direction:column; }
.mk-brand .spec{ flex:1; border-bottom:1px solid var(--ln); display:flex; align-items:center; justify-content:center; }
.mk-brand .spec .Aa{ font-family:'Archivo',sans-serif; font-weight:600; font-size:30px; color:var(--t1); letter-spacing:-0.03em; }
.mk-brand .swatch{ display:grid; grid-template-columns:repeat(4,1fr); height:22px; }
.mk-brand .swatch i{ display:block; }
.mk-brand .swatch i:nth-child(1){ background:#0e0f10; }
.mk-brand .swatch i:nth-child(2){ background:#3a3f45; }
.mk-brand .swatch i:nth-child(3){ background:#8b9095; }
.mk-brand .swatch i:nth-child(4){ background:#e9eaeb; }

/* ---------------- HERO COMPOSITE ---------------- */
.mk-hero{ position:absolute; inset:0; background:var(--s0); overflow:hidden; }
.mk-hero .panel{ position:absolute; inset:18px; border:1px solid var(--ln); border-radius:7px; overflow:hidden; background:var(--s0); }
.mk-hero .float{ position:absolute; right:20px; bottom:18px; width:96px; }
.mk-hero .float .phone{ width:96px; }

/* ---------------- MAP ---------------- */
.mk-map{ position:absolute; inset:0; background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 26px),
    var(--s0); overflow:hidden; }
.mk-map .road{ position:absolute; background:rgba(255,255,255,0.09); }
.mk-map .r1{ left:0; right:0; top:46%; height:3px; }
.mk-map .r2{ top:0; bottom:0; left:38%; width:3px; }
.mk-map .r3{ left:0; right:0; top:72%; height:2px; background:rgba(255,255,255,0.06); }
.mk-map .r4{ top:0; bottom:0; left:68%; width:2px; background:rgba(255,255,255,0.06); }
.mk-map .pin{ position:absolute; left:38%; top:46%; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; }
.mk-map .pin .head{ width:14px; height:14px; border-radius:50% 50% 50% 0; background:var(--hi); transform:rotate(45deg); box-shadow:0 6px 14px -4px rgba(0,0,0,0.7); }
.mk-map .pin .lbl{ margin-top:9px; font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:0.06em; color:var(--t1); background:var(--s1); border:1px solid var(--ln); padding:3px 6px; border-radius:3px; white-space:nowrap; }