/* ==========================================================================================
   Walaa design system  —  light, white-surfaced, indigo accent
   Every class name used by the existing Razor views is preserved; only the styling changed.
   ========================================================================================== */

:root{
  /* surfaces */
  --bg:#F6F8FB;
  --card:#FFFFFF;
  --sunken:#FAFBFD;
  --line:#EAEEF3;
  --line-soft:#F2F5F8;

  /* ink */
  --ink:#171A20;
  --ink-2:#4A515E;
  --ink-3:#8A93A2;
  --ink-4:#AEB6C2;

  /* brand */
  --brand:#5B5FE0;
  --brand-600:#4B4FD6;
  --brand-700:#3F43BE;
  --brand-100:#DDDEFA;
  --brand-50:#EFF0FE;

  /* state */
  --ok:#12864B;      --ok-bg:#E8F8EF;   --ok-line:#BCEACF;
  --warn:#9A6206;    --warn-bg:#FFF6E5; --warn-line:#F5DCA8;
  --bad:#C8352A;     --bad-bg:#FDEDEB;  --bad-line:#F6C7C1;
  --info:#3B45C4;    --info-bg:#EEF0FE; --info-line:#CDD1F7;

  --r-sm:8px; --r:10px; --r-lg:14px; --r-xl:18px;
  --sh-1:0 1px 2px rgba(16,24,40,.04);
  --sh-2:0 2px 4px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.05);
  --sh-pop:0 10px 34px rgba(16,24,40,.10);
  --font:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);
  font-size:14px;line-height:1.55;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
body[dir="rtl"]{font-family:"Segoe UI","Dubai",Tahoma,Arial,sans-serif}
a{color:var(--brand-600);text-decoration:none}
a:hover{color:var(--brand-700)}
h1,h2,h3,h4{margin:0 0 .4rem;line-height:1.3;font-weight:640;letter-spacing:-.018em;color:var(--ink)}
h1{font-size:1.4rem} h2{font-size:1.12rem} h3{font-size:.965rem} h4{font-size:.86rem}
p{margin:.35rem 0}
small,.small{font-size:.785rem;line-height:1.5}
.muted{color:var(--ink-3)}
.mono{font-family:"JetBrains Mono","Cascadia Mono",Consolas,"SF Mono",monospace;font-size:.86em;
  letter-spacing:-.01em}
::selection{background:var(--brand-100)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

/* ------------------------------------------------------------------ app shell */
.shell{display:flex;min-height:100vh}

.side{
  width:252px;flex:0 0 252px;background:var(--card);border-right:1px solid var(--line);
  padding:0 0 2rem;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.side::-webkit-scrollbar{width:8px}
.side::-webkit-scrollbar-thumb{background:#E6EAEF;border-radius:8px}

.side .brand{
  display:flex;align-items:center;gap:.6rem;padding:1.15rem 1.25rem 1.05rem;
  font-weight:680;font-size:1.09rem;color:var(--ink);letter-spacing:-.03em;
}
.side .brand span.dot{
  width:26px;height:26px;border-radius:8px;display:inline-flex;flex:0 0 26px;
  background:linear-gradient(140deg,var(--brand) 0%,#8A6BF0 100%);
  box-shadow:0 2px 6px rgba(91,95,224,.32);
}
.side .sect{
  padding:1.05rem 1.25rem .3rem;font-size:.665rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);font-weight:700;
}
.side a{
  display:flex;align-items:center;gap:.55rem;margin:1px .6rem;padding:.5rem .65rem;
  color:var(--ink-2);font-size:.865rem;font-weight:500;border-radius:var(--r-sm);
}
.side a:hover{background:var(--sunken);color:var(--ink)}
.side a.on{background:var(--brand-50);color:var(--brand-700);font-weight:640}

.main{flex:1;min-width:0;display:flex;flex-direction:column}

.top{
  background:var(--card);border-bottom:1px solid var(--line);padding:0 1.6rem;
  min-height:62px;display:flex;align-items:center;gap:.9rem;position:sticky;top:0;z-index:30;
}
.top strong{font-weight:620;font-size:.94rem;letter-spacing:-.015em}
.top .grow{flex:1}
.crumb{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--ink-3)}
.crumb b{color:var(--ink);font-weight:600}
.crumb i{color:var(--ink-4);font-style:normal}
.search{
  display:flex;align-items:center;gap:.45rem;background:var(--sunken);border:1px solid var(--line);
  border-radius:999px;padding:.34rem .8rem;min-width:210px;color:var(--ink-3);font-size:.83rem;
}
.search input{border:0;background:transparent;padding:0;font-size:.83rem;width:100%;color:var(--ink)}
.search input:focus{outline:none;box-shadow:none}
.iconbtn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2);
  font-size:.9rem;
}
.iconbtn:hover{background:var(--sunken);color:var(--ink)}
.who{display:flex;align-items:center;gap:.55rem;padding-left:.9rem;border-left:1px solid var(--line)}
.who .av{
  width:34px;height:34px;border-radius:50%;flex:0 0 34px;display:inline-flex;
  align-items:center;justify-content:center;font-weight:680;font-size:.78rem;color:#fff;
  background:linear-gradient(140deg,var(--brand) 0%,#8A6BF0 100%);letter-spacing:.01em;
}
.who .nm{line-height:1.2}
.who .nm b{display:block;font-size:.83rem;font-weight:620}
.who .nm span{display:block;font-size:.71rem;color:var(--ink-3)}

.wrap{padding:1.6rem;max-width:1560px;width:100%}
.plain{max-width:1560px;margin:0 auto;padding:1.6rem}

/* ------------------------------------------------------------------ cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.card .hd{padding:.95rem 1.15rem;border-bottom:1px solid var(--line-soft);display:flex;
  align-items:center;gap:.75rem}
.card .hd h3{margin:0}
.card .bd{padding:1.15rem}
.card .bd.tight{padding:.35rem}
.pad{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1rem;
  box-shadow:var(--sh-1)}

.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.row{display:flex;gap:.8rem;flex-wrap:wrap;align-items:flex-start}
.between{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.ttl{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  margin-bottom:1.25rem;flex-wrap:wrap}
.ttl h1{margin-bottom:.15rem}
.ttl p{margin:0;color:var(--ink-3);font-size:.85rem}

/* ------------------------------------------------------------------ KPI */
.kpi{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.05rem 1.15rem;box-shadow:var(--sh-1);transition:box-shadow .16s,border-color .16s;
}
.kpi:hover{box-shadow:var(--sh-2);border-color:#E1E6ED}
.kpi .lbl{font-size:.775rem;color:var(--ink-3);font-weight:560;letter-spacing:-.005em;
  text-transform:none}
.kpi .val{font-size:1.72rem;font-weight:680;margin-top:.3rem;letter-spacing:-.032em;
  font-variant-numeric:tabular-nums;line-height:1.15}
.kpi .sub{font-size:.775rem;color:var(--ink-4);margin-top:.3rem}
.kpi.accent{box-shadow:var(--sh-1),inset 3px 0 0 var(--brand)}
.kpi.good .val{color:var(--ok)}
.kpi.bad .val{color:var(--bad)}
.kpi.warn .val{color:var(--warn)}
.delta{display:inline-flex;align-items:center;gap:.18rem;font-size:.735rem;font-weight:680;
  padding:.08rem .38rem;border-radius:6px;margin-left:.45rem;vertical-align:middle}
.delta.up{background:var(--ok-bg);color:var(--ok)}
.delta.down{background:var(--bad-bg);color:var(--bad)}

/* ------------------------------------------------------------------ tables */
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:.855rem}
table.tbl th{
  text-align:left;padding:.6rem .8rem;background:var(--sunken);color:var(--ink-3);
  font-weight:640;font-size:.7rem;text-transform:uppercase;letter-spacing:.055em;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
table.tbl th:first-child{border-top-left-radius:var(--r-sm)}
table.tbl th:last-child{border-top-right-radius:var(--r-sm)}
table.tbl td{padding:.68rem .8rem;border-bottom:1px solid var(--line-soft);vertical-align:middle;
  color:var(--ink-2)}
table.tbl td strong{color:var(--ink);font-weight:600}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover td{background:#FBFCFE}
table.tbl td.num,table.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
table.tbl tfoot td{font-weight:660;background:var(--sunken);color:var(--ink);
  border-top:1px solid var(--line)}

/* ------------------------------------------------------------------ buttons + forms */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.48rem .9rem;border-radius:var(--r);border:1px solid #E1E6ED;background:var(--card);
  color:var(--ink);font-size:.845rem;font-weight:600;font-family:inherit;cursor:pointer;
  transition:background .14s,border-color .14s,box-shadow .14s;line-height:1.3;text-decoration:none;
}
.btn:hover{background:var(--sunken);border-color:#D6DCE5;color:var(--ink);text-decoration:none}
.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:0 1px 2px rgba(75,79,214,.24)}
.btn.pri:hover{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.btn.dan{background:var(--card);border-color:var(--bad-line);color:var(--bad)}
.btn.dan:hover{background:var(--bad-bg);border-color:#EBAEA6}
.btn.sm{padding:.28rem .6rem;font-size:.775rem;border-radius:var(--r-sm)}
.btn.lg{padding:.68rem 1.25rem;font-size:.92rem}
.btn.blk{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}

label{display:block;font-size:.755rem;font-weight:620;color:var(--ink-2);margin-bottom:.28rem}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
input[type=tel],select,textarea{
  width:100%;padding:.52rem .7rem;border:1px solid #DFE4EB;border-radius:var(--r);
  font-size:.875rem;font-family:inherit;background:var(--card);color:var(--ink);
  transition:border-color .14s,box-shadow .14s;
}
input::placeholder,textarea::placeholder{color:var(--ink-4)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)}
input[readonly]{background:var(--sunken);color:var(--ink-3)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
  linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:1.9rem}
.fld{margin-bottom:.85rem}
.chk{display:flex;align-items:center;gap:.5rem;font-size:.855rem;margin-bottom:.35rem}
.chk input{width:auto;accent-color:var(--brand)}
.chk label{margin:0;font-weight:500;font-size:.855rem;color:var(--ink-2)}

/* ------------------------------------------------------------------ pills + alerts */
.pill{display:inline-flex;align-items:center;gap:.28rem;padding:.16rem .5rem;border-radius:999px;
  font-size:.715rem;font-weight:660;background:#F0F3F7;color:var(--ink-2);white-space:nowrap;
  letter-spacing:.005em}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.tier{color:#fff}

.alert{padding:.75rem .95rem;border-radius:var(--r);font-size:.865rem;margin-bottom:1rem;
  border:1px solid;line-height:1.55}
.alert.ok{background:var(--ok-bg);border-color:var(--ok-line);color:#0D6B3D}
.alert.bad{background:var(--bad-bg);border-color:var(--bad-line);color:#9E2A20}
.alert.info{background:var(--info-bg);border-color:var(--info-line);color:#2F38A6}
.alert.warn{background:var(--warn-bg);border-color:var(--warn-line);color:#7C4E05}

/* ------------------------------------------------------------------ tabs */
.tabs{display:flex;gap:.15rem;border-bottom:1px solid var(--line);margin-bottom:1.25rem;
  flex-wrap:wrap}
.tabs a{padding:.6rem .9rem;font-size:.875rem;font-weight:580;color:var(--ink-3);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--brand-700);border-bottom-color:var(--brand);font-weight:640}

/* ------------------------------------------------------------------ bars + charts */
.bar{height:6px;background:#EDF0F5;border-radius:999px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--brand);border-radius:999px;
  transition:width .3s ease}
.spark{display:flex;align-items:flex-end;gap:2px;height:60px}
.spark>i{flex:1;background:var(--brand);border-radius:3px 3px 0 0;min-height:2px;opacity:.9}
.spark>i.alt{background:var(--brand-100)}
.chart{
  display:flex;align-items:flex-end;gap:5px;height:180px;padding-top:.5rem;
  background:repeating-linear-gradient(to top,transparent,transparent 35px,var(--line-soft) 35px,
    var(--line-soft) 36px);
}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;
  position:relative}
.chart .col .b1{background:var(--brand);border-radius:4px 4px 0 0}
.chart .col .b2{background:var(--brand-100);border-radius:4px 4px 0 0}
.chart .col:hover .b1{background:var(--brand-700)}
.chart .col .cap{font-size:.63rem;color:var(--ink-4);text-align:center;margin-top:.35rem;
  white-space:nowrap}

/* ------------------------------------------------------------------ counter / POS */
.pos{display:grid;grid-template-columns:1fr 392px;gap:1rem;align-items:start}
.menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:.55rem;
  max-height:440px;overflow-y:auto;padding:2px}
.item{
  border:1px solid var(--line);border-radius:var(--r);padding:.6rem;cursor:pointer;
  background:var(--card);text-align:left;min-height:70px;display:flex;flex-direction:column;
  justify-content:space-between;font-family:inherit;transition:.13s;
}
.item:hover{border-color:var(--brand);background:var(--brand-50);
  box-shadow:0 4px 12px rgba(91,95,224,.10)}
.item .n{font-weight:600;font-size:.8rem;line-height:1.28;color:var(--ink)}
.item .p{font-size:.79rem;color:var(--brand-700);font-weight:680;margin-top:.3rem}
.item .c{font-size:.62rem;color:var(--ink-4);text-transform:uppercase;letter-spacing:.06em;
  font-weight:600}
.catbar{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.7rem}
.catbar button,.catbar .btn{padding:.3rem .7rem;font-size:.775rem;border:1px solid var(--line);
  border-radius:999px;background:var(--card);cursor:pointer;font-weight:600;color:var(--ink-2);
  font-family:inherit}
.catbar button:hover{background:var(--sunken)}
.catbar button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.cart{max-height:258px;overflow-y:auto;border-top:1px solid var(--line);margin-top:.6rem}
.cart .ln{display:flex;gap:.5rem;align-items:center;padding:.45rem 0;
  border-bottom:1px solid var(--line-soft);font-size:.845rem}
.cart .ln .nm{flex:1;min-width:0}
.cart .ln .nm b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--ink)}
.cart .ln .qty{display:flex;align-items:center;gap:.2rem}
.cart .ln .qty button{width:23px;height:23px;border:1px solid var(--line);background:var(--card);
  border-radius:6px;cursor:pointer;font-weight:700;line-height:1;color:var(--ink-2)}
.cart .ln .qty button:hover{background:var(--sunken);border-color:var(--brand);color:var(--brand)}
.totals{border-top:1px solid var(--line);margin-top:.6rem;padding-top:.6rem;font-size:.875rem}
.totals .t{display:flex;justify-content:space-between;padding:.16rem 0;color:var(--ink-2)}
.totals .t b{color:var(--ink);font-variant-numeric:tabular-nums}
.totals .t.big{font-size:1.14rem;font-weight:700;border-top:1px solid var(--line);
  margin-top:.35rem;padding-top:.5rem;color:var(--ink)}
.ptsbox{
  background:linear-gradient(135deg,var(--brand) 0%,#7C6BEE 100%);color:#fff;
  border-radius:var(--r-lg);padding:.85rem 1rem;margin:.7rem 0;
  box-shadow:0 6px 18px rgba(91,95,224,.22);
}
.ptsbox .n{font-size:1.68rem;font-weight:720;letter-spacing:-.032em;line-height:1.15;
  font-variant-numeric:tabular-nums}
.ptsbox .l{font-size:.71rem;text-transform:uppercase;letter-spacing:.08em;opacity:.85;
  font-weight:660}
.memberbar{border:1px solid var(--line);border-radius:var(--r);padding:.75rem .85rem;
  background:var(--sunken)}
.memberbar.found{background:var(--brand-50);border-color:var(--brand-100)}
.bd-tbl{width:100%;font-size:.785rem;border-collapse:collapse}
.bd-tbl td{padding:.26rem 0;border-bottom:1px dashed var(--line);color:var(--ink-2)}
.bd-tbl td:last-child{text-align:right;font-weight:680;color:var(--ink);
  font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ presenter phone */
.presenter{display:flex;gap:1.3rem;align-items:flex-start}
.presenter .left{flex:1;min-width:0}
.phone{width:348px;background:#12141B;border-radius:38px;padding:11px;flex:0 0 348px;
  box-shadow:var(--sh-pop)}
.phone .scr{background:var(--bg);border-radius:28px;overflow:hidden;height:648px;position:relative}
.phone .notch{height:22px;display:flex;align-items:center;justify-content:center}
.phone .notch i{width:78px;height:5px;background:#2A2E39;border-radius:99px;display:block}
.phone iframe{width:100%;height:100%;border:0}

/* ------------------------------------------------------------------ customer wallet */
.wcard{border-radius:var(--r-xl);padding:1.15rem 1.2rem;color:#fff;position:relative;
  overflow:hidden;box-shadow:var(--sh-2)}
.wcard:after{content:"";position:absolute;right:-48px;top:-48px;width:168px;height:168px;
  border-radius:50%;background:rgba(255,255,255,.10)}
.wcard .co{font-size:.78rem;opacity:.92;font-weight:600;letter-spacing:.01em}
.wcard .bal{font-size:2.15rem;font-weight:720;letter-spacing:-.038em;line-height:1.1;
  margin-top:.15rem;font-variant-numeric:tabular-nums}
.wcard .cur{font-size:.815rem;opacity:.9}
.wcard .ft{display:flex;justify-content:space-between;align-items:flex-end;margin-top:.9rem;
  font-size:.765rem}
.wtier{background:rgba(255,255,255,.22);padding:.16rem .58rem;border-radius:999px;
  font-weight:680;font-size:.705rem}
.vch{border:2px dashed var(--brand);border-radius:var(--r-xl);padding:1.4rem;text-align:center;
  background:var(--brand-50)}
.vch .code{font-family:"JetBrains Mono","Cascadia Mono",Consolas,monospace;font-size:1.8rem;
  font-weight:720;letter-spacing:.16em;margin:.6rem 0;color:var(--brand-700)}

/* ------------------------------------------------------------------ customer PWA shell */
.pshell{max-width:468px;margin:0 auto;padding:0 0 4.6rem;min-height:100vh;background:var(--card);
  box-shadow:0 0 0 1px var(--line)}
.phead{padding:.95rem 1.05rem;border-bottom:1px solid var(--line);display:flex;align-items:center;
  gap:.6rem;position:sticky;top:0;background:var(--card);z-index:10}
.pbody{padding:1.05rem}
.ptabs{position:fixed;bottom:0;left:0;right:0;max-width:468px;margin:0 auto;background:var(--card);
  border-top:1px solid var(--line);display:flex}
.ptabs a{flex:1;text-align:center;padding:.68rem .2rem;font-size:.695rem;color:var(--ink-3);
  font-weight:620}
.ptabs a.on{color:var(--brand-700)}
.ptabs a b{display:block;font-size:1.02rem;line-height:1.15}

/* ------------------------------------------------------------------ misc */
.demo-strip{
  background:var(--warn-bg);color:#7C4E05;border-bottom:1px solid var(--warn-line);
  padding:.38rem 1.6rem;font-size:.775rem;display:flex;gap:1rem;align-items:center;
  justify-content:space-between;
}
.demo-strip a{color:#7C4E05;font-weight:700;text-decoration:underline}
.empty{padding:2.6rem 1.4rem;text-align:center;color:var(--ink-3)}
.empty h3{color:var(--ink-2);margin-bottom:.25rem}
.hero{
  background:linear-gradient(150deg,#FFFFFF 0%,var(--brand-50) 58%,#EDE9FE 100%);
  border:1px solid var(--line);color:var(--ink);padding:2.7rem 2rem;border-radius:var(--r-xl);
  box-shadow:var(--sh-1);
}
.hero h1{font-size:1.95rem;color:var(--ink);letter-spacing:-.032em}
.hero p{color:var(--ink-2);max-width:660px;font-size:.95rem}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.05rem;
  box-shadow:var(--sh-1);display:block;color:inherit;transition:.15s}
.tile:hover{border-color:var(--brand-100);box-shadow:var(--sh-2);text-decoration:none}
.tile .ic{width:34px;height:34px;border-radius:9px;background:var(--brand-50);
  color:var(--brand-700);display:flex;align-items:center;justify-content:center;font-weight:700;
  margin-bottom:.55rem}
.dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.1rem;font-size:.855rem}
.dl dt{color:var(--ink-3);font-weight:560}
.dl dd{margin:0;font-weight:600;color:var(--ink)}
hr{border:0;border-top:1px solid var(--line);margin:1.1rem 0}

/* ------------------------------------------------------------------ responsive */
@media (max-width:1280px){
  .g5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pos{grid-template-columns:1fr 340px}
}
@media (max-width:1024px){
  .g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pos{grid-template-columns:1fr}
  .presenter{flex-direction:column}
  .phone{width:100%;max-width:348px}
  .search{display:none}
}
@media (max-width:760px){
  .shell{flex-direction:column}
  .side{width:100%;flex:none;height:auto;position:static;border-right:0;
    border-bottom:1px solid var(--line)}
  .side a{display:inline-flex;margin:2px .35rem}
  .side .sect{padding:.7rem 1rem .2rem}
  .g2,.g3,.g4,.g5{grid-template-columns:minmax(0,1fr)}
  .wrap,.plain{padding:1rem}
  .top{padding:0 1rem}
  .who .nm{display:none}
}