/* Design system: docs/16-ui-ux-standard.md. Navy #172B4D, off-white #F7F8FA, white, teal #087E8B, gold #B38B52. */
:root{
  --navy:#172B4D; --navy-2:#22396A; --bg:#F7F8FA; --surface:#FFFFFF; --sunken:#F0F2F5; --line:#E3E6EC; --line-2:#D3D8E2;
  --ink:#172B4D; --muted:#5E6C84; --faint:#6B778C;
  --teal:#087E8B; --teal-ink:#FFFFFF; --teal-soft:#E6F4F5; --gold:#B38B52; --gold-soft:#F7F0E6;
  --danger:#B03224; --danger-soft:#FBECEA; --warn:#8A5A00; --warn-soft:#FDF4E3; --ok:#17734A; --ok-soft:#E7F5EE; --info:#2F6FB2; --info-soft:#EAF2FB;
  --side:#172B4D; --side-ink:#C9D2E3; --side-active:#FFFFFF;
  --shadow:0 1px 2px rgba(23,43,77,.06),0 4px 16px rgba(23,43,77,.06); --shadow-lg:0 12px 40px rgba(23,43,77,.18);
  --r:10px; --r-sm:8px; --bar:60px; --sidew:248px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0F1623; --surface:#172033; --sunken:#121A2A; --line:#26324A; --line-2:#33415E; --ink:#E6EAF2; --muted:#A3AEC2; --faint:#7A869C;
  --navy:#E6EAF2; --teal:#2BB3C0; --teal-ink:#0B1420; --teal-soft:#123138; --gold:#D2AE6A; --gold-soft:#2A2418;
  --danger:#F07A6E; --danger-soft:#3A1E1E; --warn:#E6A84B; --warn-soft:#352816; --ok:#4FC18B; --ok-soft:#14301F; --info:#7FB2EA; --info-soft:#152A42;
  --side:#0B1220; --side-ink:#A3AEC2; --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25); color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14.5px/1.5 var(--font);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1,"cv11" 1}
a{color:var(--teal);text-decoration:none} a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:var(--sidew) 1fr;min-height:100vh}
.side{background:var(--side);color:var(--side-ink);position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;padding:16px 12px}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px;color:#fff;font-weight:700;letter-spacing:.2px}
.brand .mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--gold),#8C6A3A);display:grid;place-items:center;color:#fff;font-size:14px}
.brand small{display:block;font-weight:500;color:var(--side-ink);font-size:11.5px;letter-spacing:.3px}
.navgroup{margin:10px 0 2px;padding:0 10px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#7F8DA8}
.navlink{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--side-ink);font-weight:500;min-height:40px}
.navlink:hover{background:rgba(255,255,255,.06);text-decoration:none;color:#fff}
.navlink[aria-current="page"]{background:rgba(8,126,139,.22);color:var(--side-active);box-shadow:inset 3px 0 0 var(--gold)}
.navlink .count{margin-left:auto;background:var(--danger);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px}
.side .foot{margin-top:auto;padding:12px 10px 0;font-size:11.5px;color:#7F8DA8;border-top:1px solid rgba(255,255,255,.08)}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:30;height:var(--bar);background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 20px}
.top .title{font-weight:650;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .grow{flex:1}
.search{position:relative;width:min(420px,40vw)}
.search input{width:100%;height:38px;border:1px solid var(--line);background:var(--sunken);border-radius:999px;padding:0 64px 0 38px}
.search input:focus{background:var(--surface);border-color:var(--teal);outline:none;box-shadow:0 0 0 3px var(--teal-soft)}
.search .i{position:absolute;left:12px;top:10px;color:var(--faint)}
.search kbd{position:absolute;right:10px;top:9px;font:600 11px/1 var(--font);color:var(--faint);border:1px solid var(--line-2);border-radius:5px;padding:3px 5px}
.iconbtn{appearance:none;border:1px solid transparent;background:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;cursor:pointer;color:var(--muted);position:relative}
.iconbtn:hover{background:var(--sunken);color:var(--ink)}
.iconbtn .badge{position:absolute;top:4px;right:4px;background:var(--danger);color:#fff;font-size:10.5px;font-weight:700;border-radius:999px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 4px;border:2px solid var(--surface)}
.avatar{display:flex;align-items:center;gap:10px;border:0;background:none;cursor:pointer;padding:4px 6px;border-radius:10px}
.avatar:hover{background:var(--sunken)}
.avatar .ini{width:34px;height:34px;border-radius:50%;background:var(--navy);color:var(--surface);display:grid;place-items:center;font-weight:700;font-size:13px}
:root[data-theme="dark"] .avatar .ini{background:var(--teal);color:var(--teal-ink)}
.avatar .who{text-align:left;line-height:1.2}.avatar .who b{display:block;font-size:13px}.avatar .who span{font-size:11.5px;color:var(--muted)}
.content{padding:24px;max-width:1320px;width:100%;margin:0 auto}
.menu-btn{display:none}
@media (max-width:1000px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:var(--sidew);z-index:60;transform:translateX(-100%);transition:transform .2s,visibility .2s;visibility:hidden}
  .app.nav-open .side{transform:none;box-shadow:var(--shadow-lg);visibility:visible}
  .menu-btn{display:grid}
  .search{width:auto;flex:1}.top .title{display:none}.avatar .who{display:none}
  .content{padding:16px}
}
@media (max-width:560px){.search kbd{display:none}.top{gap:4px;padding:0 10px}}

/* ---------- dropdowns, panels, dialogs, toasts ---------- */
.pop{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);min-width:300px;max-width:min(420px,92vw);z-index:50;overflow:hidden}
.pop.left{left:0;right:auto}
.pop h4{margin:0;padding:12px 14px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.pop .list{max-height:60vh;overflow-y:auto}
.pop a,.pop button.item{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;color:var(--ink);border:0;background:none;width:100%;text-align:left;cursor:pointer;border-bottom:1px solid var(--line)}
.pop a:hover,.pop button.item:hover,.pop .sel{background:var(--sunken);text-decoration:none}
.pop .sub{display:block;font-size:12px;color:var(--muted)}
.pop .tag{font-size:11px;font-weight:600;color:var(--teal);min-width:60px}
.dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;background:var(--info)}
.dot.danger{background:var(--danger)}.dot.warn{background:var(--warn)}.dot.ok{background:var(--ok)}
.scrim{position:fixed;inset:0;background:rgba(15,22,35,.42);z-index:70}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100vw);background:var(--surface);z-index:80;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:slide .18s ease-out}
@keyframes slide{from{transform:translateX(30px);opacity:.6}}
.drawer header,.dialog header{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.drawer header h2,.dialog header h2{margin:0;font-size:17px;flex:1}
.drawer .body{padding:18px 20px;overflow-y:auto;flex:1}
.drawer footer,.dialog footer{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;background:var(--sunken)}
.dialog{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,94vw);max-height:90vh;overflow:auto;background:var(--surface);border-radius:14px;z-index:90;box-shadow:var(--shadow-lg)}
.dialog .body{padding:18px 20px}
.toasts{position:fixed;right:16px;bottom:16px;display:grid;gap:8px;z-index:100}
.toast{background:var(--navy);color:var(--surface);padding:11px 14px;border-radius:10px;box-shadow:var(--shadow-lg);display:flex;gap:10px;align-items:center;max-width:380px;font-weight:500;animation:slide .18s}
:root[data-theme="dark"] .toast{background:#E6EAF2;color:#0F1623}
.toast.error{background:var(--danger);color:#fff}

/* ---------- page parts ---------- */
.ph{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.ph h1{margin:0;font-size:24px;line-height:1.2;letter-spacing:-.2px}
.ph p{margin:4px 0 0;color:var(--muted)}
.ph .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.crumb{font-size:12.5px;color:var(--muted);margin-bottom:4px}.crumb a{color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card.pad{padding:18px}
.card h3{margin:0 0 12px;font-size:15px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-side{grid-template-columns:minmax(0,2fr) minmax(280px,1fr)}
@media (max-width:1000px){.g2,.g3,.g-side{grid-template-columns:minmax(0,1fr)}}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:20px}
.tile{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;color:var(--ink);box-shadow:var(--shadow);border-top:3px solid var(--line-2);transition:transform .12s,box-shadow .12s}
.tile:hover{text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.tile .v{font-size:30px;font-weight:700;letter-spacing:-.5px;line-height:1.1}
.tile .l{font-weight:600;margin-top:4px}.tile .h{font-size:12.5px;color:var(--muted);margin-top:2px}
.tile.danger{border-top-color:var(--danger)}.tile.danger .v{color:var(--danger)}
.tile.warn{border-top-color:var(--warn)}.tile.warn .v{color:var(--warn)}
.tile.ok{border-top-color:var(--ok)}.tile.ok .v{color:var(--ok)}
.tile.info{border-top-color:var(--teal)}.tile.info .v{color:var(--teal)}
.tile.zero .v{color:var(--faint)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);margin-bottom:20px}
.kpis div{background:var(--surface);padding:14px 16px}.kpis b{display:block;font-size:20px}.kpis span{font-size:12.5px;color:var(--muted)}
@media (max-width:700px){.kpis{grid-template-columns:1fr 1fr}}
.tasks{list-style:none;margin:0;padding:0}
.tasks li a{display:flex;gap:10px;padding:11px 4px;border-bottom:1px solid var(--line);color:var(--ink);align-items:flex-start}
.tasks li:last-child a{border-bottom:0}
.tasks li a:hover{background:var(--sunken);text-decoration:none}
.tasks .go{margin-left:auto;color:var(--faint)}
.tasks .sub{display:block}
.muted{color:var(--muted)}.small{font-size:12.5px}.right{text-align:right}.num{text-align:right;white-space:nowrap}
.stack{display:grid;gap:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ---------- buttons, pills, forms ---------- */
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--sunken);text-decoration:none}
.btn.primary{background:var(--teal);border-color:var(--teal);color:var(--teal-ink)}
.btn.primary:hover{filter:brightness(.95)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.ghost{border-color:transparent;background:none;color:var(--teal)}
.btn.sm{height:32px;padding:0 10px;font-size:13px}
.btn.lg{height:46px;padding:0 20px;font-size:15px}
.btn[disabled]{opacity:.5;cursor:not-allowed;filter:none}
.btn.block{width:100%}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap;background:var(--sunken);color:var(--muted)}
.pill.danger{background:var(--danger-soft);color:var(--danger)}.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.info{background:var(--info-soft);color:var(--info)}.pill.teal{background:var(--teal-soft);color:var(--teal)}
.pill.gold{background:var(--gold-soft);color:#7A5A2E}
.pill.teal{color:#066A75}
:root[data-theme="dark"] .pill.teal{color:var(--teal)}
:root[data-theme="dark"] .pill.gold{color:var(--gold)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{appearance:none;border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:6px 12px;font-weight:600;font-size:13px;cursor:pointer;color:var(--muted);min-height:34px}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--surface)}
:root[data-theme="dark"] .chip[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--teal-ink)}
.chip .n{opacity:.7;margin-left:4px}
.field{display:grid;gap:5px;margin-bottom:12px}
.field label,.lbl{font-size:12.5px;font-weight:600;color:var(--muted)}
.field .hint{font-size:12px;color:var(--faint)}
.input,select.input,textarea.input{height:40px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);padding:0 11px;width:100%}
textarea.input{height:auto;min-height:80px;padding:9px 11px}
.input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
.input.err{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
.input.sm{height:34px;width:96px}
.ferr{color:var(--danger);font-size:12.5px;font-weight:500}
.check{display:flex;gap:10px;align-items:center;min-height:36px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--teal)}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden}
.seg button{appearance:none;border:0;background:var(--surface);padding:0 16px;height:40px;font-weight:600;cursor:pointer;color:var(--muted)}
.seg button+button{border-left:1px solid var(--line-2)}
.seg button[aria-pressed="true"].ok{background:var(--ok);color:#fff}
.seg button[aria-pressed="true"].danger{background:var(--danger);color:#fff}
.alert{display:flex;gap:10px;padding:11px 14px;border-radius:var(--r-sm);border:1px solid;align-items:flex-start}
.alert.danger{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 35%,transparent)}
.alert.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.alert.ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.alert.info{background:var(--info-soft);border-color:color-mix(in srgb,var(--info) 30%,transparent)}
.alert ul{margin:4px 0 0;padding-left:18px}

/* ---------- tables ---------- */
.tbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}
.tbar .tsearch{position:relative;flex:1;min-width:180px;max-width:320px}
.tbar .tsearch input{padding-left:34px}.tbar .tsearch .i{position:absolute;left:10px;top:11px;color:var(--faint)}
.twrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:13.5px}
table.t th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);background:var(--sunken);white-space:nowrap;position:sticky;top:0}
table.t th button{appearance:none;border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;gap:4px;align-items:center}
table.t th button:hover{color:var(--ink)}
table.t th[aria-sort] button{color:var(--ink)}
table.t td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr.click{cursor:pointer}
table.t tbody tr.click:hover{background:var(--sunken)}
table.t td.num,table.t th.num{text-align:right}
td .sub{display:block;font-size:12px;color:var(--muted)}
.cellok{color:var(--ok);font-weight:600}.cellbad{color:var(--danger);font-weight:700}
.tfoot{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.tfoot .sp{flex:1}
.empty{text-align:center;padding:38px 20px;color:var(--muted)}
.empty .i{width:34px;height:34px;color:var(--faint);margin-bottom:6px}
.empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.skel{background:linear-gradient(90deg,var(--sunken),var(--line),var(--sunken));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:8px;height:14px}
@keyframes sk{to{background-position:-200% 0}}

/* ---------- workflow stepper ---------- */
.steps{display:flex;gap:0;list-style:none;margin:0;padding:0;counter-reset:s;flex-wrap:wrap}
.steps li{flex:1;min-width:140px;position:relative;padding:0 10px 0 0;counter-increment:s}
.steps li .b{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px}
.steps li .b::before{content:counter(s);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--sunken);color:var(--muted);border:1px solid var(--line-2);font-size:12px;flex:none}
.steps li.done .b::before{content:"✓";background:var(--ok);border-color:var(--ok);color:#fff}
.steps li.now .b::before{background:var(--teal);border-color:var(--teal);color:#fff}
.steps li .w{font-size:12px;color:var(--muted);margin:2px 0 0 34px}
.nextbox{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-radius:var(--r);background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);margin:14px 0}
.nextbox b{color:#7A5A2E}
:root[data-theme="dark"] .nextbox b{color:var(--gold)}

/* ---------- receiving lines ---------- */
.line{display:grid;grid-template-columns:minmax(160px,1.3fr) 2fr auto;gap:14px;align-items:start;padding:14px 16px;border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line .inputs{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.line.bad{background:var(--danger-soft)}
.line .state{justify-self:end}
@media (max-width:800px){.line{grid-template-columns:1fr}.line .state{justify-self:start}}
.photo{display:inline-flex;align-items:center;gap:8px;border:1px dashed var(--line-2);border-radius:var(--r-sm);padding:0 12px;height:40px;cursor:pointer;color:var(--muted);font-weight:600;background:var(--surface)}
.photo.done{border-style:solid;color:var(--ok);border-color:var(--ok)}
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0}
dl.kv dt{color:var(--muted)}dl.kv dd{margin:0;font-weight:500}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login .hero{background:var(--side);color:#E6EAF2;padding:48px;display:flex;flex-direction:column;justify-content:space-between}
.login .hero h1{font-size:34px;line-height:1.15;margin:0 0 12px;color:#fff;letter-spacing:-.4px}
.login .hero p{color:#A9B6CC;max-width:46ch}
.login .hero .gold{color:var(--gold)}
.login .form{display:grid;place-items:center;padding:32px 20px}
.login .box{width:min(440px,100%)}
.users{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 16px}
.ubtn{appearance:none;text-align:left;border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-sm);padding:10px 12px;cursor:pointer;min-height:56px}
.ubtn b{display:block;font-size:13.5px}.ubtn span{font-size:12px;color:var(--muted)}
.ubtn[aria-pressed="true"]{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
@media (max-width:860px){.login{grid-template-columns:1fr}.login .hero{padding:28px 20px}.login .hero h1{font-size:26px}}

@media print{
  .side,.top,.no-print,.tbar,.tfoot{display:none!important}
  .app{display:block}.content{padding:0;max-width:none}
  body{background:#fff}.card{box-shadow:none;border-color:#ccc}
}

/* U-06: on phones the quick actions, notifications and account menus span the screen instead of running off its edge */
@media (max-width:560px){.pop{position:fixed;left:8px!important;right:8px!important;top:calc(var(--bar) + 6px);min-width:0;max-width:none;width:auto!important}}
/* U-26: heading only on the printed receiving report */
.print-only{display:none}
@media print{.print-only{display:block}}

/* U-19 / U-20: on phones, inputs are 16 px (iPhones then do not zoom) and every control is at least 44 px tall */
@media (max-width:760px){
  .input,select.input,textarea.input,.search input{font-size:16px}
  .search input{height:44px}
  table.t th button{min-height:44px}
  .btn,.btn.sm,.seg button,.photo,.input,.input.sm{min-height:44px;height:auto}
  .input.sm{width:112px}
  .check{min-height:44px}.check input{width:24px;height:24px}
  .chip{min-height:40px}
  .iconbtn{width:44px;height:44px}
}

/* U-32: on phones the stepper shows only the current step ("Step 2 of 5") and the header is tighter, so the first item to check is near the top */
@media (max-width:760px){
  .steps li:not(.cur){display:none}
  .steps li.cur{min-width:0}
  .steps li.cur::after{content:attr(data-of);display:block;font-size:12px;color:var(--muted);margin:2px 0 0 34px}
  .ph{margin-bottom:10px}.ph h1{font-size:20px}.ph p{font-size:13px}
  .nextbox{margin:10px 0;padding:10px 12px}
}