/* YSG — formal layout (square cards, top menu, red = action, blue = data).
   Applies only when <body class="ys"> (pages after login). Landing + PIN keep the original look. */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400..600,0..1,0&icon_names=add,add_circle,arrow_back,assessment,chevron_right,description,edit_note,expand_more,fact_check,group,history,home,insights,inventory_2,local_shipping,logout,menu,monitoring,receipt_long,redeem,settings,space_dashboard,stars,storefront,summarize&display=block');

body.ys{
  --r:6px; --blue:#1F4FBF; --blue-soft:#EAF0FC; --bg:#F5F4F2; --line:#E6E2DD; --line-2:#D6D0C9; --ink-3:#8A8580;
  background:var(--bg);font-size:14px
}
body.ys .app{max-width:none;padding:0;min-height:100dvh}
.yn-ms{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;display:inline-block;width:1em;overflow:hidden;vertical-align:middle;flex-shrink:0}

/* ---- top menu ---- */
.yn{background:#fff;border-top:3px solid;border-image:linear-gradient(90deg,var(--red) 0 50%,var(--blue) 50% 100%) 1;border-bottom:1px solid var(--line);height:64px;display:flex;align-items:center;padding:0 24px;gap:24px;position:sticky;top:0;z-index:20}
.yn-brand{display:flex;align-items:center;gap:10px;font:700 14px var(--f-head);letter-spacing:.04em;white-space:nowrap;text-decoration:none;color:var(--ink)}
.yn-brand:hover{color:var(--ink)}
.yn-brand img{width:38px;height:38px;border-radius:var(--r);border:1px solid var(--line);background:#fff;padding:2px}
.yn-brand small{display:block;font:500 11px var(--f-ui);color:var(--ink-3);letter-spacing:0}
.yn-menu{display:flex;gap:2px;margin:0 auto}
.yn-mi{position:relative}
.yn-mi>a{height:36px;padding:0 10px 0 12px;border-radius:var(--r);font:500 14px var(--f-ui);display:flex;align-items:center;gap:4px;cursor:pointer;text-decoration:none;color:var(--ink)}
.yn-mi>a .yn-ms{font-size:18px;color:var(--ink-3)}
.yn-mi>a:hover,.yn-mi.cur>a{background:var(--red-soft);color:var(--red)}
.yn-mi.cur>a .yn-ms{color:var(--red)}
.yn-dd{position:absolute;top:40px;left:0;min-width:220px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 24px rgba(28,26,25,.10);padding:6px;display:none}
.yn-dd::before{content:'';position:absolute;left:0;right:0;top:-8px;height:8px}
.yn-mi:hover .yn-dd,.yn-mi:focus-within .yn-dd{display:block}
.yn-dd a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:4px;text-decoration:none;font-size:14px;color:var(--ink)}
.yn-dd a .yn-ms{color:var(--ink-3)}
.yn-dd a:hover{background:var(--bg);color:var(--ink)}
.yn-dd a.cur{color:var(--red);font-weight:600}.yn-dd a.cur .yn-ms{color:var(--red)}
.yn-who{display:flex;align-items:center;gap:12px;white-space:nowrap}
.yn-who .b{text-align:right;line-height:1.3}.yn-who .b b{display:block;font:600 14px var(--f-head)}.yn-who .b span{font-size:12px;color:var(--ink-3)}
.yn-ib{width:36px;height:36px;border:1px solid var(--line);border-radius:var(--r);background:#fff;display:grid;place-items:center;color:var(--ink-2);cursor:pointer;text-decoration:none;padding:0}
.yn-ib:hover{color:var(--red);border-color:var(--line-2)}
.yn-q{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:4px;background:#FFF4D6;color:#7A5300}
.yn-hamb{display:none}
.yn-draw{display:none}
body.yn-open .yn-draw{display:flex;flex-direction:column;position:fixed;top:67px;left:0;right:0;bottom:0;background:#fff;z-index:19;padding:8px 12px 24px;overflow:auto;border-top:1px solid var(--line)}
.yn-draw a{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px;border-radius:var(--r);text-decoration:none;font:500 15px var(--f-ui);color:var(--ink);border-bottom:1px solid var(--line)}
.yn-draw a.sub{padding-left:24px;font-size:14.5px}.yn-draw a .yn-ms{color:var(--ink-3)}
.yn-draw a.cur{background:var(--red-soft);color:var(--red);font-weight:600;border-color:transparent}.yn-draw a.cur .yn-ms{color:var(--red)}
.yn-draw .g{font:600 12px var(--f-head);color:var(--ink-3);padding:14px 12px 4px;letter-spacing:.04em}
.yn-draw .who{margin-top:auto;padding:12px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.yn-draw .who b{display:block;font:600 15px var(--f-head);color:var(--ink)}

/* ---- page header ---- */
.yn-ph{display:flex;align-items:center;gap:10px;min-height:36px;flex-wrap:wrap}
.yn-ph>.yn-ms{font-size:26px;font-variation-settings:'FILL' 1,'wght' 500;color:var(--red)}
.yn-ph h1{margin:0;font:700 22px/1.3 var(--f-head)}
.yn-ph .sub{font-size:13px;color:var(--ink-3)}
.yn-ph .sp{flex:1}

/* ---- layout ---- */
body.ys .wrap{max-width:760px;width:100%;margin:0 auto;padding:20px 24px 40px;gap:14px;box-sizing:border-box}
body.ys .wrap.wide{max-width:1080px}

/* ---- components (square, thin borders) ---- */
body.ys .card,body.ys .group,body.ys .list,body.ys .htab,body.ys .sum{border-radius:var(--r);border:1px solid var(--line);box-shadow:none}
body.ys .btn{min-height:40px;border-radius:var(--r);border-width:1px;font-size:14.5px;padding:0 16px;gap:8px}
body.ys .btn-lg{min-height:46px;font-size:15.5px;border-radius:var(--r)}
body.ys .btn-sm{min-height:32px;border-radius:var(--r);font-size:13px}
body.ys .btn-o{border-color:var(--blue);color:var(--blue);background:#fff}
body.ys .btn-o:hover{background:var(--blue-soft);color:var(--blue)}
body.ys .input,body.ys .select{border-radius:var(--r);border-width:1px;height:44px;font-size:15px}
body.ys .note{border-radius:var(--r)}
body.ys .pill{border-radius:4px;font-size:12px;font-weight:600;padding:2px 8px}
body.ys .uchip{border-radius:4px}
body.ys .app .chip{min-height:38px;padding:0 14px;border-radius:var(--r);border:1px solid var(--line-2);font-size:14px}
body.ys .app .chip[aria-pressed=true]{background:var(--red-soft);border-color:var(--red);color:var(--red);font-weight:600}
body.ys .app .chip[aria-pressed=true] small{color:var(--red)}
body.ys .icon-btn{border-radius:var(--r);border:1px solid var(--line)}
body.ys .group{padding:0}
body.ys .group>h2{margin:0;padding:12px 16px;border-bottom:1px solid var(--line);font:600 15px var(--f-head);min-height:48px;box-sizing:border-box}
body.ys .group>.fld,body.ys .group>div:not(.chips){padding-left:16px;padding-right:16px}
body.ys .group .fld:first-of-type{border-top:0}
body.ys .fld{padding-top:10px;padding-bottom:10px}
body.ys .sticky{background:linear-gradient(rgba(245,244,242,0),var(--bg) 30%)}
/* hero → plain card with a red edge */
body.ys .hero{background:#fff;color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:var(--r);padding:16px 18px;gap:10px}
body.ys .hero h1{font-size:22px;line-height:30px;color:var(--ink)}
body.ys .hero small{color:var(--ink-2)}
body.ys .hero .btn{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
body.ys .hero .btn:hover{background:#9C0F18;color:#fff}
body.ys .hero svg[stroke="#F1D9A6"]{stroke:var(--ink-2)}
body.ys .hero [style*="gold-on-dark"]{color:var(--ink-2) !important}
body.ys .hero .herostat{background:#F7F6F4;border-radius:var(--r)}
body.ys .hero .stat3 small{color:var(--ink-2)}
body.ys .hero .stat3 b{color:var(--blue)}
body.ys .seg{background:#F1EFEC;border-radius:var(--r)}
body.ys .seg button{color:var(--ink);border-radius:4px}
body.ys .seg button[aria-pressed=true]{background:#fff;color:var(--red);box-shadow:0 0 0 1px var(--line-2)}
/* menu tiles */
body.ys .menucard{border-radius:var(--r);border:1px solid var(--line);box-shadow:none;min-height:84px;padding:16px 18px}
body.ys .menucard:hover{border-color:var(--line-2);background:#FBFAF8}
body.ys .menucard .mi{width:48px;height:48px;border-radius:var(--r)}
body.ys .menucard b{font-size:16.5px;line-height:24px}
/* history table */
body.ys .ht-c b{color:var(--ink)}
body.ys .ht-p.up{color:var(--blue)}
body.ys .htab-h{padding:12px 16px;border-bottom:1px solid var(--line)}
body.ys .ht-head{border-top:0}
body.ys .chg.up{background:var(--blue-soft);color:var(--blue)}
body.ys .okcircle{border-radius:var(--r)}

@media (min-width:861px){
  body.ys .menus2{display:grid !important;grid-template-columns:1fr 1fr;gap:14px !important}
}
@media (max-width:860px){
  .yn{padding:0 12px;gap:10px;justify-content:space-between}
  .yn-menu,.yn-who .b{display:none}
  .yn-hamb{display:grid}
  body.ys .wrap{padding:14px 12px 28px}
  .yn-ph h1{font-size:20px}
  .yn-ph .sub{flex-basis:100%}
}
body.ys .sticky{max-width:760px;width:100%;margin:auto auto 0;box-sizing:border-box;padding:12px 24px 16px}
@media (max-width:860px){body.ys .sticky{padding:12px}}
body.ys .group>h2+div:not(.fld){padding-top:14px}
body.ys .group>div:not(.fld):last-child{padding-bottom:16px}
body.ys #form>.muted{padding:0 !important}
body.ys .wrap .sticky{padding-left:0;padding-right:0}