@import url('/login-preview.css');
:root{
  --navy:#0f2d5c;--navy-2:#153b76;--navy-3:#081f43;--yellow:#ffc400;--yellow-2:#ffd84c;
  --bg:#f4f7fb;--panel:#fff;--ink:#13223b;--muted:#6d7b90;--line:#dce4ef;
  --green:#22a447;--red:#ef4b4b;--blue:#2f86eb;--orange:#f0a70a;--slot-h:86px
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}body{min-height:100vh}
button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.primary{background:linear-gradient(180deg,var(--yellow-2),var(--yellow))!important;border-color:#e8b400!important;color:#102448!important;font-weight:800}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:#a47b00}
.form-error{color:#a71919;min-height:1.4em;font-size:13px;margin-top:7px}.password-hint{font-size:12px;color:var(--muted)}
.auth-screen{position:fixed;inset:0;display:grid;place-items:center;padding:28px;z-index:9999;overflow:auto;background:
  linear-gradient(110deg,#091b33e8,#102e56cc),
  radial-gradient(circle at 75% 40%,#255f8a99,transparent 35%),
  linear-gradient(135deg,#1b3d61,#0b213d 55%,#173d61)}
.auth-backdrop{position:absolute;inset:0;background:
  linear-gradient(90deg,transparent 0 69%,#ffc40018 69% 70%,transparent 70%),
  linear-gradient(0deg,transparent 0 78%,#ffffff0a 78% 79%,transparent 79%);pointer-events:none}
.auth-card{position:relative;width:min(720px,calc(100vw - 40px));background:#fff;border-radius:26px;padding:38px 46px 34px;box-shadow:0 34px 100px #0009;border:1px solid #fff8}
.auth-logo-wrap{width:100%;min-height:220px;display:flex;align-items:center;justify-content:center;overflow:visible;margin:0 0 6px;background:#fff;border-radius:14px}
.auth-logo{display:block;width:min(100%,650px);height:auto;max-width:650px;max-height:none;object-fit:contain;object-position:center}.auth-divider{height:4px;border-radius:999px;background:linear-gradient(90deg,var(--yellow) 0 34%,var(--navy) 34% 100%);margin:2px 0 24px}
.auth-card h1{font-size:38px;line-height:1.08;margin:7px 0 10px;color:#102448}.auth-card p{margin:0 0 24px;color:#637188;line-height:1.55;font-size:16px}
.auth-card label{display:grid;gap:7px;margin:15px 0;font-size:13px;font-weight:800;color:#4b5c73}.auth-card input{height:52px;border:1px solid #ccd7e5;border-radius:11px;padding:0 15px;background:#fffccb;font-size:15px}
.auth-card input:focus{outline:3px solid #ffc4002f;border-color:#e9b300}.auth-submit{width:100%;height:54px;border-radius:11px;border:1px solid #e8b400;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:17px}.auth-note{text-align:center;margin-top:18px;color:#8793a4;font-size:12px}
.app-shell{display:grid;grid-template-columns:196px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,#123469,#0a234a);color:#fff;display:flex;flex-direction:column;min-height:100vh;box-shadow:8px 0 28px #0b244516;position:sticky;top:0;height:100vh}
.sidebar-brand{background:#fff;padding:13px 12px 11px;border-right:1px solid #e8edf5}.sidebar-brand img{display:block;width:100%;height:74px;object-fit:contain;object-position:center;margin:0 auto}
.side-nav{display:grid;gap:6px;padding:14px 10px}.nav-item{border:0;background:transparent;color:#eff5ff;border-radius:10px;display:flex;align-items:center;gap:11px;padding:12px 12px;text-align:left;font-weight:650}.nav-item:hover{background:#ffffff10}.nav-item.active{background:linear-gradient(180deg,#ffd238,#ffc400);color:#102b5a;box-shadow:0 6px 16px #0002}.nav-item:disabled{cursor:not-allowed;opacity:.56}.nav-icon{width:22px;text-align:center;font-size:19px}
.sidebar-footer{margin-top:auto;padding:18px 16px 22px;background:radial-gradient(circle at 70% 10%,#ffffff10,transparent 45%)}.sidebar-slogan{font-style:italic;line-height:1.25;font-size:17px}.slogan-line{display:block;width:86px;height:4px;background:var(--yellow);border-radius:999px;margin-top:10px;transform:rotate(-6deg)}
.workspace{min-width:0}.app-header{height:100px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:12px 22px;border-bottom:1px solid #e7edf5;box-shadow:0 2px 14px #0c2c5a0b;position:sticky;top:0;z-index:30}
.header-logo-wrap{display:flex;align-items:center;gap:28px}.header-logo{display:block;width:min(520px,46vw);height:78px;object-fit:contain;object-position:left center}.header-claim{font-style:italic;color:#12366d;line-height:1.12;font-size:18px;transform:rotate(-2deg)}.header-claim strong{font-weight:700}.header-right{display:flex;align-items:center;gap:14px}
.userbox{display:flex;align-items:center;gap:11px}.userbox>div{display:grid;gap:2px}.userbox small{color:#7a8798}.userbox button{border:1px solid #d5dfeb;background:#fff;border-radius:9px;padding:9px 11px;color:#243955}.sync-dot{width:10px;height:10px;border-radius:50%;background:#23a653;box-shadow:0 0 0 4px #23a6531c}.sync-dot.offline{background:#dc4747;box-shadow:0 0 0 4px #dc47471c}
.content{padding:24px}.page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:18px}.page-head h1{font-size:34px;margin:2px 0 3px;color:#102d5d}.page-head p{margin:0;color:#738198}.date-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.date-actions input,.date-actions button{height:44px;border:1px solid #d3dce8;border-radius:9px;background:#fff;padding:0 13px;color:#18345f}.date-actions input{min-width:156px}.square-btn{width:44px;padding:0!important;font-size:22px}.new-appointment-btn{padding:0 20px!important;border:1px solid #e5b100!important;box-shadow:0 6px 15px #ffc40033}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:18px;align-items:start}.planner-card,.rail-card{background:#fff;border:1px solid #e1e7ef;border-radius:15px;box-shadow:0 8px 26px #153b7610}.planner-card{overflow:hidden}.planner{overflow:auto;min-width:980px}
.timeline-head,.resource-row{display:grid;grid-template-columns:190px minmax(790px,1fr)}.timeline-head{position:sticky;top:0;background:#f8fafc;z-index:10;border-bottom:1px solid var(--line)}.timeline-corner{padding:14px 16px;font-size:12px;font-weight:800;color:#344967}.time-scale{display:grid;grid-template-columns:repeat(11,1fr);min-width:790px}.time-scale span{padding:14px 6px;font-size:12px;font-weight:750;color:#334968;border-left:1px solid #e1e7ef}
.resource-row{min-height:var(--slot-h);border-bottom:1px solid var(--line)}.resource-label{padding:14px 14px;display:flex;align-items:center;gap:12px;background:#fbfcfe;border-right:1px solid var(--line)}.resource-icon{width:42px;height:42px;border-radius:11px;background:#edf3fb;color:#11356d;display:grid;place-items:center;font-size:22px}.resource-copy strong{display:block;font-size:14px;color:#132f5c}.resource-copy small{display:block;color:#7a8798;margin-top:3px;font-size:11px}
.resource-track{position:relative;min-height:var(--slot-h);background:
  repeating-linear-gradient(to right,transparent 0 calc(9.09% - 1px),#e4eaf2 calc(9.09% - 1px) 9.09%),
  linear-gradient(#fff,#fff);overflow:hidden}.resource-track:hover{background:
  repeating-linear-gradient(to right,transparent 0 calc(9.09% - 1px),#dfe7f0 calc(9.09% - 1px) 9.09%),
  linear-gradient(#fbfdff,#fbfdff)}
.appointment{position:absolute;top:9px;height:68px;border-radius:9px;padding:7px 9px;border-left:4px solid #2f86eb;box-shadow:0 2px 7px #173d6818;overflow:hidden;cursor:grab;font-size:11px;z-index:3;background:#dfeeff}.appointment strong{display:block;font-size:12px;color:#15345f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.appointment .jobline{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#52627a;margin-top:2px}.appointment .meta{margin-top:4px;display:flex;justify-content:space-between;gap:6px;align-items:center;color:#425571}.status-chip{border-radius:999px;padding:2px 6px;font-size:9px;font-weight:800;background:#2f86eb;color:#fff;white-space:nowrap}
.appointment[data-status="Termin bestätigt"]{background:#fff2c8;border-left-color:#efb300}.appointment[data-status="Termin bestätigt"] .status-chip{background:#efb300;color:#273046}
.appointment[data-status="Fahrzeug da"]{background:#ffe7d6;border-left-color:#e98018}.appointment[data-status="Fahrzeug da"] .status-chip{background:#e98018}
.appointment[data-status="In Arbeit"]{background:#dcecff;border-left-color:#2f86eb}.appointment[data-status="In Arbeit"] .status-chip{background:#2f86eb}
.appointment[data-status="Wartet auf Teile"],.appointment[data-status="Rückfrage Kunde"]{background:#ffe1e1;border-left-color:#ef4b4b}.appointment[data-status="Wartet auf Teile"] .status-chip,.appointment[data-status="Rückfrage Kunde"] .status-chip{background:#ef4b4b}
.appointment[data-status="Fertig"]{background:#ddf5e3;border-left-color:#22a447}.appointment[data-status="Fertig"] .status-chip{background:#22a447}
.appointment[data-status="Abgeholt"]{background:#edf0f4;border-left-color:#79879b}.appointment[data-status="Abgeholt"] .status-chip{background:#79879b}.appointment.readonly{cursor:default}
.now-line{position:absolute;top:0;bottom:0;width:2px;background:#e34646;z-index:2;pointer-events:none}.now-line::before{content:"";position:absolute;left:-4px;top:0;width:10px;height:10px;border-radius:50%;background:#e34646}
.planner-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid #e5ebf2}.legend{display:flex;gap:10px;flex-wrap:wrap}.legend span{font-size:11px;color:#57657a}.legend span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#8a98aa;margin-right:5px}.legend span[data-status="Termin bestätigt"]::before{background:#efb300}.legend span[data-status="In Arbeit"]::before{background:#2f86eb}.legend span[data-status="Wartet auf Teile"]::before{background:#ef4b4b}.legend span[data-status="Fertig"]::before{background:#22a447}.planner-summary{display:flex;gap:8px;color:#6a788c;font-size:12px}
.right-rail{display:grid;gap:14px}.rail-card{padding:15px}.rail-card-head{display:flex;justify-content:space-between;align-items:center;font-weight:800;color:#163565;margin-bottom:12px}.rail-card-head strong{font-size:11px;color:#748199}.mini-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}.mini-calendar span{font-size:10px;color:#8b97a7}.mini-calendar b{font-size:11px;font-weight:600;padding:5px 0;border-radius:999px}.active-day{background:#2f86eb;color:#fff}.quick-action{width:100%;border:1px solid #d9e1eb;background:#fff;border-radius:9px;text-align:left;padding:10px 11px;margin-top:7px;color:#203d68}.quick-action:disabled{opacity:.55}.status-item{display:flex;gap:9px;margin-top:11px;color:#607087}.status-item>span{color:#f0a70a}.status-item.ok>span{color:#23a653}.status-item div{display:grid}.status-item strong{font-size:12px;color:#1f3c67}.status-item small{font-size:10px}.logo-card{text-align:center}.logo-card img{width:100%;max-height:105px;object-fit:contain}.logo-card div{font-style:italic;color:#183d77;font-size:13px;margin-top:6px}
dialog{border:0;border-radius:16px;padding:0;max-width:760px;width:calc(100% - 24px);box-shadow:0 25px 80px #0006}dialog::backdrop{background:#04142baa}.dialog-panel,#appointmentForm{padding:22px}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.dialog-head h2{margin:3px 0 13px;color:#143461}.icon-btn{border:0;background:transparent;font-size:20px;border-radius:8px;padding:6px 9px}.icon-btn:hover{background:#eef3f7}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid label,.user-create-card label,.user-edit-grid label{font-size:12px;font-weight:800;color:#4a5968}.form-grid input,.form-grid select,.form-grid textarea,.user-create-card input,.user-create-card select,.user-edit-grid input,.user-edit-grid select{display:block;width:100%;margin-top:5px;border:1px solid #cdd7e1;border-radius:8px;padding:9px;background:#fff}.wide{grid-column:1/-1}.dialog-actions{display:flex;gap:8px;margin-top:18px}.dialog-actions button{padding:9px 13px;border-radius:8px;border:1px solid #cbd5df;background:#fff}.danger{background:#fee2e2!important;border-color:#fecaca!important;color:#991b1b}.spacer{flex:1}.audit-note{font-size:.78rem;color:#667;margin-top:7px}
.users-dialog{max-width:1050px}.users-layout{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}.user-create-card{background:#f8fafc;border:1px solid var(--line);padding:16px;border-radius:14px}.user-create-card h3,.users-list-wrap h3{margin:0 0 12px}.user-create-card label{display:block;margin:11px 0}.user-create-card button{width:100%;padding:10px;border-radius:9px;border:1px solid #e5b100}.section-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.section-title-row button{border:1px solid #cbd5df;background:#fff;border-radius:8px;padding:7px 10px}.users-list{display:grid;gap:10px;max-height:62vh;overflow:auto;padding-right:3px}.user-row{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff}.user-row.inactive{opacity:.65;background:#f4f5f6}.user-row-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}.user-row-head>div{display:flex;gap:9px;align-items:center}.user-state,.role-chip{font-size:11px;border-radius:999px;padding:4px 8px;background:#eef3f7;color:#465566}.role-chip{background:#fff4c8;color:#725600;border:1px solid #efd774}.user-edit-grid{display:grid;grid-template-columns:1fr 150px 1fr 130px;gap:10px;align-items:end}.toggle-label{display:flex!important;gap:8px;align-items:center;height:38px}.toggle-label input{width:auto!important;margin:0!important}.row-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:10px}.row-actions button{border:1px solid #e5b100;border-radius:8px;padding:8px 11px}.row-error{color:#a71919;font-size:12px;margin-right:auto}.toast{position:fixed;right:20px;bottom:20px;background:#102f60;color:#fff;padding:12px 16px;border-radius:10px;box-shadow:0 12px 34px #0004;z-index:10000}
@media(max-width:1200px){.dashboard-grid{grid-template-columns:1fr}.right-rail{grid-template-columns:repeat(2,minmax(0,1fr))}.logo-card{display:none}.header-logo{width:310px}.header-claim{display:none}}
@media(max-width:850px){.app-shell{grid-template-columns:1fr}.sidebar{height:auto;min-height:0;position:static}.sidebar-brand,.sidebar-footer{display:none}.side-nav{display:flex;overflow:auto}.nav-item{white-space:nowrap}.app-header{height:auto;position:static}.header-logo{width:230px;max-width:55vw}.content{padding:14px}.page-head{align-items:flex-start;flex-direction:column}.dashboard-grid{display:block}.right-rail{margin-top:14px;grid-template-columns:1fr}.timeline-head,.resource-row{grid-template-columns:150px minmax(790px,1fr)}.users-layout{grid-template-columns:1fr}.user-edit-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.auth-card{padding:22px}.auth-card h1{font-size:28px}.header-right{display:none}.header-logo{width:100%;max-width:100%}.form-grid,.user-edit-grid{grid-template-columns:1fr}.wide{grid-column:auto}.date-actions{width:100%}.date-actions input{flex:1}}


/* ===== Responsive system 1.3 ===== */
:root{--touch-size:44px;--mobile-nav-h:68px}
html,body{max-width:100%;overflow-x:hidden}
.auth-logo-wrap{height:auto!important;min-height:0!important;padding:8px 0 4px!important}
.auth-logo{width:min(100%,520px)!important;height:auto!important;max-height:150px!important;object-fit:contain!important}
#loginScreen .auth-card,#setupScreen .auth-card{width:min(620px,calc(100vw - 32px))!important}
.touch-ui button,.touch-ui input,.touch-ui select{min-height:var(--touch-size)}
.touch-ui .appointment{cursor:pointer}

body.device-tablet .app-shell{grid-template-columns:76px minmax(0,1fr)}
body.device-tablet .sidebar-brand,body.device-tablet .sidebar-footer{display:none}
body.device-tablet .side-nav{padding:12px 8px;gap:8px}
body.device-tablet .nav-item{justify-content:center;padding:12px 8px}
body.device-tablet .nav-item>span:last-child{display:none}
body.device-tablet .nav-icon{width:auto;font-size:22px}
body.device-tablet .app-header{height:82px;padding:10px 16px}
body.device-tablet .header-logo{width:min(350px,44vw);height:62px}
body.device-tablet .header-claim{display:none}
body.device-tablet .content{padding:16px}
body.device-tablet .dashboard-grid{grid-template-columns:1fr}
body.device-tablet .right-rail{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px}
body.device-tablet .logo-card{display:none}
body.device-tablet .planner{min-width:0}
body.device-tablet .timeline-head,body.device-tablet .resource-row{grid-template-columns:150px minmax(720px,1fr)}
body.device-tablet .time-scale{min-width:720px}
body.device-tablet .page-head{align-items:flex-start;flex-direction:column}
body.device-tablet .date-actions{width:100%}

body.device-phone{padding-bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom))}
body.device-phone .app-shell{display:block;min-height:100vh}
body.device-phone .workspace{width:100%;min-width:0}
body.device-phone .sidebar{
  position:fixed;left:0;right:0;bottom:0;top:auto;height:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));min-height:0;
  z-index:80;display:block;background:#0c2a56;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -8px 24px #071a3440
}
body.device-phone .sidebar-brand,body.device-phone .sidebar-footer{display:none}
body.device-phone .side-nav{
  height:var(--mobile-nav-h);display:flex;align-items:stretch;gap:2px;padding:6px;overflow-x:auto;overflow-y:hidden
}
body.device-phone .nav-item{
  flex:1 0 64px;min-width:64px;justify-content:center;flex-direction:column;gap:3px;padding:6px 4px;border-radius:10px;font-size:10px
}
body.device-phone .nav-item.nav-muted{display:none}
body.device-phone .nav-icon{width:auto;font-size:20px;line-height:1}
body.device-phone .app-header{
  position:sticky;top:0;height:66px;padding:8px 12px;z-index:50;gap:8px
}
body.device-phone .header-logo-wrap{min-width:0;gap:0}
body.device-phone .header-logo{width:min(240px,58vw);height:48px;object-fit:contain;object-position:left center}
body.device-phone .header-claim{display:none}
body.device-phone .header-right{display:flex;min-width:0}
body.device-phone .userbox{gap:7px}
body.device-phone .userbox>div{display:none}
body.device-phone .userbox button{min-height:40px;padding:7px 9px;font-size:12px}
body.device-phone .content{padding:12px 10px 18px}
body.device-phone .page-head{display:block;margin-bottom:12px}
body.device-phone .page-head h1{font-size:27px;margin-top:2px}
body.device-phone .page-head p{font-size:13px}
body.device-phone .date-actions{
  width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:7px;margin-top:12px
}
body.device-phone .date-actions input{min-width:0;width:100%;grid-column:2}
body.device-phone #prevBtn{grid-column:1;grid-row:1}
body.device-phone #nextBtn{grid-column:3;grid-row:1}
body.device-phone #todayBtn{grid-column:1/2;grid-row:2}
body.device-phone #newBtn{grid-column:2/4;grid-row:2}
body.device-phone .date-actions input,body.device-phone .date-actions button{height:46px}
body.device-phone .dashboard-grid{display:block}
body.device-phone .right-rail{display:none}
body.device-phone .planner-card{border-radius:12px;overflow:hidden}
body.device-phone .planner{min-width:0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
body.device-phone .timeline-head{display:block;min-width:720px}
body.device-phone .timeline-corner{display:none}
body.device-phone .time-scale{min-width:720px}
body.device-phone .time-scale span{padding:10px 5px;font-size:10px}
body.device-phone .resource-row{display:block;min-width:720px;border-bottom:8px solid #f4f7fb}
body.device-phone .resource-label{
  position:sticky;left:0;z-index:5;width:100vw;max-width:100%;padding:9px 12px;border-right:0;border-bottom:1px solid var(--line);
  background:#f8fbff
}
body.device-phone .resource-icon{width:34px;height:34px;font-size:17px}
body.device-phone .resource-copy strong{font-size:13px}
body.device-phone .resource-copy small{display:none}
body.device-phone .resource-track{min-width:720px;min-height:78px}
body.device-phone .appointment{top:7px;height:64px;padding:6px 7px;font-size:10px}
body.device-phone .appointment strong{font-size:11px}
body.device-phone .appointment .meta{font-size:9px}
body.device-phone .status-chip{font-size:8px}
body.device-phone .planner-footer{display:block;padding:10px 12px}
body.device-phone .legend{gap:7px}
body.device-phone .legend span{font-size:9px}
body.device-phone .planner-summary{margin-top:8px;justify-content:space-between}
body.device-phone dialog{
  margin:0;width:100vw;max-width:none;height:calc(var(--app-vh,1vh)*100);max-height:none;border-radius:0
}
body.device-phone dialog[open]{display:block}
body.device-phone .dialog-panel,body.device-phone #appointmentForm{padding:16px 14px 22px;min-height:100%;overflow:auto}
body.device-phone .form-grid{grid-template-columns:1fr;gap:10px}
body.device-phone .wide{grid-column:auto}
body.device-phone .dialog-actions{
  position:sticky;bottom:0;background:#fff;padding:10px 0 calc(10px + env(safe-area-inset-bottom));z-index:4;border-top:1px solid #e5ebf2
}
body.device-phone .dialog-actions button{flex:1;min-height:46px}
body.device-phone .users-layout{grid-template-columns:1fr}
body.device-phone .user-edit-grid{grid-template-columns:1fr}
body.device-phone .users-list{max-height:none}
body.device-phone .toast{left:12px;right:12px;bottom:calc(var(--mobile-nav-h) + 14px + env(safe-area-inset-bottom));text-align:center}

body.device-phone .auth-screen{
  place-items:start center;padding:calc(18px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom));min-height:calc(var(--app-vh,1vh)*100)
}
body.device-phone .auth-card{
  width:100%!important;max-width:460px!important;border-radius:18px!important;padding:20px 18px 22px!important;margin:auto 0
}
body.device-phone .auth-logo-wrap{padding:0!important;margin:0 0 4px!important}
body.device-phone .auth-logo{width:min(100%,380px)!important;max-height:118px!important}
body.device-phone .auth-divider{margin:3px 0 18px}
body.device-phone .auth-card h1{font-size:30px;line-height:1.05}
body.device-phone .auth-card p{font-size:14px;margin-bottom:18px}
body.device-phone .auth-card label{margin:11px 0}
body.device-phone .auth-card input{height:52px!important;font-size:16px}
body.device-phone .auth-submit{height:54px!important;font-size:17px}
body.device-phone .auth-note{font-size:10px;margin-top:15px}

body.device-tablet .auth-card{
  width:min(620px,calc(100vw - 48px))!important;padding:30px 38px!important
}
body.device-tablet .auth-logo{width:min(100%,500px)!important;max-height:145px!important}

body.orientation-landscape.device-phone .auth-screen{padding-top:10px;padding-bottom:10px}
body.orientation-landscape.device-phone .auth-card{max-width:700px!important;padding:14px 22px 16px!important}
body.orientation-landscape.device-phone .auth-logo{max-height:78px!important;width:min(100%,360px)!important}
body.orientation-landscape.device-phone .auth-divider{margin-bottom:10px}
body.orientation-landscape.device-phone .auth-card .eyebrow{display:none}
body.orientation-landscape.device-phone .auth-card h1{font-size:24px;margin:2px 0 6px}
body.orientation-landscape.device-phone .auth-card p{font-size:12px;margin-bottom:8px}
body.orientation-landscape.device-phone .auth-card label{margin:7px 0}
body.orientation-landscape.device-phone .auth-card input{height:44px!important}
body.orientation-landscape.device-phone .auth-submit{height:46px!important;margin-top:8px}
body.orientation-landscape.device-phone .auth-note{display:none}

@media(max-width:380px){
  body.device-phone .auth-card{padding-left:14px!important;padding-right:14px!important}
  body.device-phone .auth-logo{max-height:104px!important}
  body.device-phone .page-head h1{font-size:24px}
}