/* Rezervace vozidel – jednotný vzhled: jedna akcentní barva (indigo), neutrální šedé, SVG ikony */
*{box-sizing:border-box}
:root{
  --bg:#f5f6fa; --card:#fff; --tx:#111827; --tx2:#374151; --mu:#6b7280; --bd:#e5e7eb; --bd2:#f0f1f5;
  --ac:#4f46e5; --ac-d:#4338ca; --ac-l:#eef2ff; --ac-t:#3730a3;
  --ok:#059669; --ok-l:#ecfdf5; --er:#dc2626; --er-l:#fef2f2;
  --r:14px; --sh:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.45 "Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;background:var(--bg);color:var(--tx);
  padding-bottom:calc(76px + env(safe-area-inset-bottom));-webkit-tap-highlight-color:transparent}
body.guest{padding-bottom:0}
a{color:var(--ac)}
.i{flex-shrink:0;vertical-align:-.2em}
h1{font-size:1.35rem;font-weight:700;letter-spacing:-.01em;margin:0 0 1rem}
h2{font-size:1.05rem;font-weight:650;margin:1.4rem 0 .7rem}
.card h2{margin-top:0}
.muted{color:var(--mu)} .small{font-size:.85rem} .center{text-align:center;margin:1rem 0} .center.tight{margin:-.4rem 0 .9rem}

/* horní lišta */
.top{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;
  background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--bd);padding:.6rem 1rem;padding-top:calc(.6rem + env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:.55rem;color:var(--tx);text-decoration:none;font-weight:700;letter-spacing:-.01em}
.logo{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--ac);color:#fff}
.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ac-l);color:var(--ac-t);
  font-weight:700;font-size:.8rem;text-decoration:none}
main{max-width:640px;margin:0 auto;padding:1rem}

/* karty */
.card{display:block;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:1rem;margin-bottom:.75rem;
  box-shadow:var(--sh);color:inherit;text-decoration:none}
a.card.link{transition:border-color .15s}
a.card.link:hover{border-color:#c7d2fe}
a.card.link:active{background:#fafafa}
.card.past{opacity:.55}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--vc,var(--ac));flex-shrink:0}
.card.vehicle > strong:first-child::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;
  background:var(--vc,var(--ac));margin-right:.5rem;vertical-align:.05em}
.vhead{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.vname{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;min-width:0}
.plate{display:inline-block;font:600 .72rem/1.5 ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.03em;color:var(--tx2);
  background:var(--bd2);border:1px solid var(--bd);border-radius:6px;padding:0 .35rem;margin-left:.3rem;vertical-align:.1em}
.vname .plate{margin-left:0}
.tag{display:inline-block;font-size:.72rem;font-weight:600;background:var(--ac-l);color:var(--ac-t);border-radius:99px;padding:.1rem .55rem;margin-left:.35rem}
.free{color:var(--ok);margin:.5rem 0 0;font-size:.88rem;font-weight:500}
.res{position:relative;border-top:1px solid var(--bd2);padding:.65rem 2.2rem .1rem 0;margin-top:.55rem}
.res.mine .when{color:var(--ac-t)}
.res .edit{position:absolute;right:0;top:.55rem;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;color:var(--mu)}
.res .edit:hover{background:var(--bd2);color:var(--ac)}
.when{display:flex;align-items:center;gap:.35rem;font-weight:650;font-size:.95rem;margin-top:.1rem}
.when .i{color:var(--mu)}
.whom{font-size:.88rem;color:var(--tx2);margin-top:.15rem}
.whom a{text-decoration:none;font-weight:500}
.purpose{font-size:.85rem;color:var(--mu);margin-top:.1rem}
.bar{position:relative;height:6px;background:var(--bd2);border-radius:99px;margin:.8rem 0 .2rem;overflow:hidden}
.bar i{position:absolute;top:0;bottom:0;background:var(--ac);border-radius:99px}
.ticks{display:flex;justify-content:space-between;font-size:.65rem;color:#9ca3af}

/* tlačítka */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;font:inherit;font-weight:600;min-height:44px;padding:.5rem 1.1rem;
  border-radius:10px;border:1px solid var(--bd);background:#fff;color:var(--tx);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s}
.btn:hover{background:#fafafa;border-color:#d1d5db}
.btn.primary{background:var(--ac);border-color:var(--ac);color:#fff}
.btn.primary:hover{background:var(--ac-d)}
.btn.danger{color:var(--er);border-color:#fecaca}
.btn.danger:hover{background:var(--er-l)}
.btn.small{min-height:36px;padding:.3rem .8rem;font-size:.9rem}
.btn.wide{width:100%;margin-top:.5rem}
.icon-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--ac-l);color:var(--ac);flex-shrink:0}
.icon-btn:hover{background:var(--ac);color:#fff}
.pill{display:inline-block;font-size:.8rem;font-weight:600;padding:.25rem .8rem;border-radius:99px;background:var(--ac-l);color:var(--ac-t);text-decoration:none}
.back{display:inline-flex;align-items:center;gap:.3rem;margin-bottom:.7rem;text-decoration:none;font-weight:600;font-size:.9rem;color:var(--mu)}
.back:hover{color:var(--ac)}

/* formuláře */
label{display:block;font-size:.82rem;font-weight:600;color:var(--tx2);margin-bottom:.8rem}
input,select{display:block;width:100%;margin-top:.3rem;font:inherit;font-size:16px;font-weight:400;padding:.6rem .75rem;border:1px solid #d1d5db;
  border-radius:10px;background:#fff;color:var(--tx);min-height:44px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px rgba(79,70,229,.15)}
input[type=color]{padding:.2rem;height:44px}
label.check{display:flex;align-items:center;gap:.55rem;padding-top:1.5rem;font-size:.95rem;font-weight:500}
label.check input{width:20px;height:20px;min-height:0;margin:0;accent-color:var(--ac);box-shadow:none}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.row2:has(input[type=datetime-local]){grid-template-columns:1fr}

/* hlášky */
.flash{padding:.7rem 1rem;border-radius:10px;margin-bottom:.8rem;background:var(--ok-l);color:#065f46;border:1px solid #a7f3d0;font-size:.92rem}
.flash.err{background:var(--er-l);color:#991b1b;border-color:#fecaca}

/* přihlášení */
.login{max-width:380px;margin:12vh auto 0;padding:1.6rem}
.login h1{text-align:center;margin:.6rem 0 .2rem}
.login .muted{margin:0 0 1.2rem}
.login-logo{display:grid;place-items:center;width:56px;height:56px;margin:0 auto;border-radius:16px;background:var(--ac);color:#fff}

/* přepínač období – týden / den */
.period{display:flex;align-items:center;gap:.5rem;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);
  padding:.35rem;margin-bottom:.9rem;box-shadow:var(--sh)}
.nav-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;color:var(--tx2);flex-shrink:0}
.nav-btn:hover,.nav-btn:active{background:var(--ac-l);color:var(--ac)}
.period-label{position:relative;flex:1;text-align:center;line-height:1.25;border-radius:10px;padding:.25rem 0;cursor:pointer;min-width:0}
.period-label:hover{background:var(--bd2)}
.period-label strong{display:block;font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.period-label span{display:inline-flex;align-items:center;gap:.3rem;font-size:.82rem;color:var(--mu)}
.period-label input[type=date]{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;min-height:0;border:0;opacity:0;cursor:pointer}
.period-label input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;cursor:pointer}

/* týdenní kalendář – sloupce vozidla, řádky dny */
.cal-wrap{width:min(1100px,calc(100vw - 1.5rem));position:relative;left:50%;transform:translateX(-50%);
  overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh)}
.cal{border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed;font-size:.8rem;min-width:calc(84px + var(--cols,3) * 140px)}
.cal th,.cal td{border-bottom:1px solid var(--bd2);border-left:1px solid var(--bd2);vertical-align:top;padding:.35rem}
.cal tbody tr:last-child th,.cal tbody tr:last-child td{border-bottom:0}
.cal thead th{background:#fff;border-bottom:1px solid var(--bd);padding:.6rem .5rem;text-align:left;vertical-align:bottom}
.vhead-col .vname{gap:.4rem;flex-wrap:nowrap;align-items:center}
.vhead-col strong{font-size:.85rem;font-weight:650;line-height:1.2}
.vhead-col .plate{display:inline-block;margin:.3rem 0 0;font-size:.66rem}
.cal .dcol{position:sticky;left:0;z-index:2;width:84px;background:#fff;border-left:0;text-align:center;padding:.4rem .2rem}
.cal thead .dcol{z-index:3}
.cal .dcol a{display:flex;flex-direction:column;align-items:center;gap:.1rem;color:var(--tx);text-decoration:none}
.cal .dcol span{font-size:.66rem;color:var(--mu);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.cal .dcol b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:.95rem;font-weight:650}
.cal .dcol small{font-size:.66rem;color:var(--mu)}
.cal tr.today .dcol b{background:var(--ac);color:#fff}
.cal tr.today .dcol span{color:var(--ac)}
.cal td{height:76px;position:relative;padding-bottom:1.8rem}
.cal tr.we td,.cal tr.we .dcol{background:#fafafb}
.cal tr.today td,.cal tr.today .dcol{background:#f7f7ff}
.chip{display:block;margin-bottom:.25rem;padding:.3rem .45rem;border-radius:7px;line-height:1.25;text-decoration:none;
  color:#4b5563;background:#f1f2f5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem}
.chip b{font-weight:650;margin-right:.35rem}
.chip .who{opacity:.85}
.chip.mine{background:var(--ac);color:#fff}
.chip:hover{filter:brightness(.97)}
.cal .add{position:absolute;left:.35rem;right:.35rem;bottom:.3rem;display:grid;place-items:center;height:22px;color:#c4c8d0;
  border-radius:6px;text-decoration:none;transition:background .15s,color .15s}
.cal .add:hover,.cal .add:active{background:var(--ac-l);color:var(--ac)}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.8rem 0;font-size:.8rem;color:var(--mu)}
.legend .chip{display:inline-block;margin:0;padding:.1rem .5rem}
.legend .chip b{margin:0}

/* spodní navigace */
nav.bottom{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--bd);padding:.3rem .25rem calc(.3rem + env(safe-area-inset-bottom))}
nav.bottom a{flex:1;min-width:0;white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.2rem 0;
  font-size:.68rem;font-weight:500;color:var(--mu);text-decoration:none}
nav.bottom a span{display:grid;place-items:center;width:52px;height:30px;border-radius:99px;transition:background .15s}
nav.bottom a.on{color:var(--ac);font-weight:650}
nav.bottom a.on span{background:var(--ac-l)}
nav.bottom{max-width:480px;margin:0 auto}
@media (min-width:481px){nav.bottom{border-left:1px solid var(--bd);border-right:1px solid var(--bd)}}

/* mobilní rozložení platí všude – i na PC se aplikace zobrazuje jako na telefonu (úzký sloupec uprostřed) */
main{max-width:480px;padding:.75rem}
.cal-wrap{width:auto;left:auto;transform:none}
.cal{font-size:.72rem;min-width:calc(48px + var(--cols,3) * 76px)}
.cal .dcol{width:48px;padding:.3rem .1rem}
.cal .dcol b{width:26px;height:26px;font-size:.85rem}
.cal .dcol span,.cal .dcol small{font-size:.6rem}
.cal thead th{padding:.45rem .3rem}
.vhead-col .vname{align-items:flex-start;gap:.3rem}
.vhead-col .dot{width:8px;height:8px;margin-top:.25rem}
.vhead-col strong{font-size:.72rem}
.vhead-col .plate{font-size:.56rem;padding:0 .2rem}
.cal th,.cal td{padding:.2rem}
.cal td{height:64px;padding-bottom:1.5rem}
.chip{white-space:normal;padding:.2rem .3rem;font-size:.68rem;border-radius:5px}
.chip b{display:block;margin:0}
.cal .add{left:.2rem;right:.2rem;bottom:.2rem;height:20px}
.top{max-width:480px;margin:0 auto}
@media (min-width:481px){
  body{background:#e9ebf2}
  .top,main{background:var(--bg)}
  main{min-height:calc(100vh - 57px);box-shadow:0 0 0 1px var(--bd)}
  .top{box-shadow:0 0 0 1px var(--bd)}
}

/* moje = akcentní barva, ostatní = šedé */
.bar i{background:#c4c8d0}
.bar i.mine{background:var(--ac)}
.res .when{color:var(--tx2)}
.res.mine .when{color:var(--ac)}
.res.mine{box-shadow:inset 3px 0 0 var(--ac);padding-left:.6rem;margin-left:-.1rem}

/* vozidla – dlaždice */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;margin-bottom:1rem}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;padding:.8rem;background:var(--card);border:1px solid var(--bd);
  border-radius:var(--r);box-shadow:var(--sh);text-decoration:none;color:var(--tx);min-height:120px;transition:border-color .15s,box-shadow .15s}
.tile:hover{border-color:#c7d2fe}
.tile.on{border-color:var(--ac);box-shadow:0 0 0 3px rgba(79,70,229,.15)}
.tile.past{opacity:.55}
.tile-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;margin-bottom:.3rem;
  background:color-mix(in srgb,var(--vc,var(--ac)) 14%,#fff);color:var(--vc,var(--ac))}
.tile strong{font-size:.92rem;line-height:1.25}
.tile .plate{margin:.15rem 0 0}
.tile .meta,.tile .note{font-size:.75rem;color:var(--mu)}
.tile .note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.add-tile{justify-content:center;align-items:center;border-style:dashed;box-shadow:none;background:transparent;color:var(--ac)}
.add-tile .tile-ico{background:var(--ac-l);color:var(--ac)}
.tiles{grid-template-columns:1fr 1fr}

/* seznam (uživatelé) */
.page-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.8rem}
.page-head h1{margin:0}
.count{font-size:.8rem;font-weight:600;color:var(--mu);background:var(--bd2);border-radius:99px;padding:.1rem .5rem;vertical-align:.2em}
.card.list{padding:0;overflow:hidden}
.card.list .row{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-top:1px solid var(--bd2);text-decoration:none;color:var(--tx)}
.card.list .row:first-child{border-top:0}
.card.list .row:hover{background:#fafafb}
.card.list .row.past{opacity:.55}
.row-main{flex:1;min-width:0;display:flex;flex-direction:column}
.row-main strong{font-weight:600}
.row-main .small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .avatar{flex-shrink:0}
.badge{min-width:22px;height:22px;display:grid;place-items:center;padding:0 .4rem;border-radius:99px;background:var(--ac);color:#fff;font-size:.72rem;font-weight:700}
.chev{color:#c4c8d0;display:grid}
.tag.grey{background:var(--bd2);color:var(--mu)}

/* náznak dalších vozidel při posunu do strany */
.cal-outer{position:relative}
.cal-outer::after,.cal-outer::before{content:"";position:absolute;top:1px;bottom:1px;width:36px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:4}
.cal-outer::after{right:1px;border-radius:0 var(--r) var(--r) 0;background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.95))}
.cal-outer::before{left:49px;background:linear-gradient(to left,rgba(255,255,255,0),rgba(255,255,255,.9))}
.cal-outer.has-r::after,.cal-outer.has-l::before{opacity:1}
/* vodorovný posuvník nad kalendářem */
.hscroll{display:none;padding:.35rem 0 .45rem 48px;touch-action:none;user-select:none}
.hscroll.on{display:block}
.hs-track{position:relative;height:10px;border-radius:99px;background:#e2e5ee;cursor:pointer}
.hs-track::before{content:"";position:absolute;inset:-10px 0}
.hs-thumb{position:absolute;top:0;left:0;height:10px;border-radius:99px;background:var(--ac);box-shadow:0 1px 4px rgba(79,70,229,.35);transition:height .15s,top .15s}
.hscroll.drag .hs-thumb,.hs-track:hover .hs-thumb{top:-2px;height:14px}
.cal-wrap{scrollbar-width:none}
.cal-wrap::-webkit-scrollbar{display:none}
/* zamčené vozidlo ve formuláři (otevřeno přes „+“) */
.field-label{font-size:.82rem;font-weight:600;color:var(--tx2);margin-bottom:.3rem}
.locked{display:flex;align-items:center;gap:.5rem;min-height:44px;padding:.55rem .75rem;margin-bottom:.8rem;border:1px solid var(--bd);
  border-radius:10px;background:var(--bd2);color:var(--mu);cursor:not-allowed}
.locked strong{color:var(--tx2);font-weight:600}
.locked .plate{margin-left:auto}
/* detail rezervace */
.detail .when.big{font-size:1.1rem;margin:.2rem 0 .3rem}
.detail .purpose{margin-bottom:.4rem}
.person{display:flex;align-items:center;gap:.7rem;margin:1rem 0 .4rem;padding-top:.9rem;border-top:1px solid var(--bd2)}
.person strong{font-weight:650}
.person .avatar{width:40px;height:40px}
.person a{text-decoration:none;font-weight:600}
/* datum dne na jednom řádku */
.cal .dcol b{width:auto;height:auto;padding:.15rem .3rem;border-radius:99px;font-size:.78rem;white-space:nowrap}
.cal tr.today .dcol b{background:var(--ac);color:#fff}

/* vyšší posuvník – lépe se chytá prstem */
.hscroll{padding:.4rem 0 .55rem 48px}
.hs-track{height:20px;background:#e2e5ee}
.hs-track::before{inset:-8px 0}
.hs-thumb{height:20px;display:grid;place-items:center;background:var(--ac)}
.hs-thumb::after{content:"";width:14px;height:8px;border-left:2px solid rgba(255,255,255,.7);border-right:2px solid rgba(255,255,255,.7);box-shadow:inset 2px 0 0 -0px transparent;
  background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.7)) center/2px 100% no-repeat}
.hscroll.drag .hs-thumb,.hs-track:hover .hs-thumb{top:0;height:20px;background:var(--ac-t)}

/* místo plusů: klepnutí na volné místo v buňce = nová rezervace */
.cal td{height:46px;padding:.2rem .2rem .55rem}
.cal td .chip{position:relative;z-index:1}
.cal .add{inset:0;left:0;right:0;bottom:0;height:auto;border-radius:0;background:transparent;display:grid;place-items:center;color:transparent;z-index:0}
.cal .add:only-child{color:#d5d8e0}
.cal .add svg{width:12px;height:12px}
.cal .add:hover,.cal .add:active{background:var(--ac-l);color:var(--ac)}

/* lišta posuvníku s ikonou vozidla a šipkami */
.hscroll.on{display:flex}
.hscroll{align-items:center;gap:.3rem;padding:.4rem 0 .55rem}
.hs-ico{width:44px;flex:none;display:grid;place-items:center;color:var(--ac)}
.hs-track{flex:1}
.hs-btn{flex:none;width:30px;height:30px;display:grid;place-items:center;padding:0;border:1px solid var(--bd);border-radius:99px;background:#fff;color:var(--ac);cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.hs-btn:active{background:var(--ac-l)}
.hscroll.at-l .hs-prev,.hscroll.at-r .hs-next{color:#c4c8d0;cursor:default}
.hs-thumb{display:flex;align-items:center;justify-content:center;gap:1px;color:#fff;overflow:hidden}
.hs-thumb::after{content:none}
.hs-thumb svg{flex:none}
.hs-thumb svg:first-child,.hs-thumb svg:last-child{opacity:.75}

/* posuvník přes celou šířku, bez ikony a šipek */
.hscroll{padding:.4rem 0 .55rem}

/* celé jméno přihlášeného vpravo nahoře */
.top .me{display:flex;align-items:center;gap:.5rem;min-width:0;text-decoration:none;color:var(--tx)}
.me-name{font-size:.86rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.top .me .avatar{flex:none}
.top .me{padding:.35rem .75rem;border-radius:99px;background:var(--ac-l);color:var(--ac-t)}
.me-name{max-width:200px}

/* odhlášení vedle jména v horní liště */
.top-r{display:flex;align-items:center;gap:.4rem;min-width:0}
.top-r form{margin:0}
.top .logout{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--bd);border-radius:50%;background:#fff;color:var(--mu);cursor:pointer}
.top .logout:hover,.top .logout:active{color:var(--er);border-color:#fecaca;background:var(--er-l)}
.me-name{max-width:160px}

/* „+“ pro novou rezervaci – ve všech buňkách stejné malé kolečko dole uprostřed */
.cal td:has(.chip){padding-bottom:22px}
.cal .add,.cal .add:only-child{place-items:end center;padding-bottom:3px;color:#a5abba}
.cal .add svg{width:14px;height:14px;padding:1px;border-radius:99px;background:#eef0f4;box-sizing:content-box}
.cal .add:hover,.cal .add:active{background:transparent;color:#fff}
.cal .add:hover svg,.cal .add:active svg{background:var(--ac)}

/* název aplikace: poslední slovo vždy na druhém řádku */
.app-name{display:flex;flex-direction:column;line-height:1.15}
.app-name span{white-space:nowrap}
.login h1 .app-name{align-items:center}
