:root{--brand:#0abcae;--brand2:#077b82;--ink:#173a44;--muted:#728c93;--surface:#fff;--soft:#eaf9f6;--line:#dbeae8;--shadow:0 14px 45px #0b3f480c}body{background:#f4f8f8}body[data-theme=teal]{--brand:#0cbaa8;--brand2:#08757d;--soft:#e9f9f5;--line:#d8eae7}body[data-theme=blue]{--brand:#387ed2;--brand2:#164e9a}body[data-theme=violet]{--brand:#8d65c4;--brand2:#56338b}body[data-theme=dark]{--brand:#14c7b4;--brand2:#079b9e;--surface:#19333a;--soft:#1c4245;--line:#34535a;--ink:#eef8f8;--muted:#a5c4c8;background:#071c25;color:var(--ink)}.app-shell{align-items:stretch}.sidebar{width:270px;background:#082b34;background-image:radial-gradient(ellipse at 40% -15%,#0b74765a,transparent 45%);border-right:1px solid #0d5960;padding:24px 14px 19px;gap:0;overflow:auto}.sidebar .brand{display:flex;align-items:center;gap:12px;background:transparent;border-radius:15px;padding:9px 10px;margin-bottom:36px;text-align:left;color:#fff;text-decoration:none}.brand-symbol{height:49px;width:50px;border-radius:13px;border:1px solid #187c80;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:950;letter-spacing:-5px;background:linear-gradient(145deg,#11636c,#03232d);box-shadow:0 8px 25px #00181b60;color:#fff;padding-right:6px}.brand-symbol span{color:#1ce4cd}.brand-word strong{display:block;font-size:20px;letter-spacing:1.2px}.brand-word small{display:block;font-size:8px;letter-spacing:1.65px;color:#7fb8bd;margin-top:3px;font-weight:850}.sidebar-caption{font-size:9px;letter-spacing:2.1px;font-weight:850;color:#629ba2;padding:2px 14px 11px}.nav{gap:4px}.nav button{border:1px solid transparent;padding:10px 14px;min-height:47px;font-size:13px;font-weight:720;color:#b8d0d1;transition:background .15s,transform .15s}.nav button:hover{background:#ffffff12;color:#fff}.nav button.active{background:#0dbda9;color:#082e37;font-weight:900;box-shadow:0 6px 18px #0ab9a524}.nav button .ico{font-size:19px;color:#5bafae;font-weight:900}.nav button.active .ico{color:#073640}.nav button.trialled::after{display:none}.nav-trial{margin-left:auto;font-size:9px;letter-spacing:1px;color:#82c9bf;font-weight:900}.nav button.active .nav-trial{color:#0d5657}.sidebar-foot{display:grid;grid-template-columns:38px 1fr;column-gap:10px;align-items:center;font-size:12px;line-height:1.5;color:#bcd5d7;margin-top:auto;padding:17px 6px 0;border-top:1px solid #26515a}.sidebar-user-avatar{grid-row:span 3;height:38px;width:38px;border-radius:11px;display:grid;place-items:center;font-weight:900;background:#0c756f;color:#fff}.sidebar-foot strong{font-size:12px;grid-column:2}.sidebar-foot span{font-size:11px;color:#9ebdc0;overflow-wrap:anywhere;grid-column:2}.sidebar-foot small{color:#5dc7ba;font-size:10px;grid-column:2}.main{padding:27px 38px 50px;max-width:1700px}.topbar{padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--line)}.top-heading{display:flex;align-items:center;gap:15px}.topbar h2{font-size:24px;letter-spacing:-.8px;margin:5px 0 2px}.kicker{color:var(--brand);letter-spacing:1.9px;font-size:10px}.topbar .user{font-size:11px}.live-status{font-size:11px;font-weight:850;color:#0eaf98;background:#e4f7f2;border-radius:99px;padding:9px 13px}.top-actions .btn{background:var(--surface)}.btn{border-radius:12px;transition:transform .13s,box-shadow .13s}.btn:hover{transform:translateY(-1px)}.btn.primary{background:linear-gradient(125deg,var(--brand),var(--brand2));box-shadow:0 9px 19px #047a7420}.hero{position:relative;overflow:hidden;background:linear-gradient(115deg,#08313b,#075965);border:1px solid #195c63;border-radius:22px;padding:31px 36px;box-shadow:0 20px 35px #07515a1b}.hero:after{content:'W.';position:absolute;right:-10px;top:-75px;font-size:230px;letter-spacing:-32px;font-weight:950;color:#ffffff08;pointer-events:none}.hero .eyebrow{color:#4ce4d1;letter-spacing:2px}.hero h1{font-size:clamp(28px,3.3vw,45px);letter-spacing:-1.7px;font-weight:920;margin:9px 0}.hero p{color:#bce3df;max-width:690px;font-size:13px;line-height:1.7}.stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.stat{padding:22px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);border-radius:19px}.stat small{letter-spacing:.3px}.stat strong{margin-top:12px;font-size:28px;letter-spacing:-1px}.stat-unit{font-size:12px;color:var(--muted)}.stat strong.connected{font-size:21px;color:#0bb899}.card{box-shadow:var(--shadow);border-radius:21px;padding:25px}.card h3{letter-spacing:-.5px}.item{border-radius:18px;box-shadow:0 7px 26px #0c52500a}.item .actions .btn{font-size:12px}.badge{border-radius:30px}.notice{border-radius:14px}.note{box-shadow:0 12px 28px #0d4e5820}.fast-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.fast-tile{border:1px solid var(--line);background:var(--soft);border-radius:16px;text-align:left;min-height:135px;padding:17px;display:flex;flex-direction:column;align-items:start;gap:6px;color:var(--ink)}.fast-tile span{font-size:28px;font-weight:850;color:var(--brand)}.fast-tile b{margin-top:auto;font-size:13px}.fast-tile small{font-size:10px;color:var(--muted)}.trial-banner{display:flex;justify-content:space-between;align-items:center;gap:20px;border:1px solid #bee7df;background:#e9f9f4;border-radius:17px;padding:16px 20px;margin-bottom:18px;color:#19474b}.trial-banner>div{display:grid;gap:3px}.trial-banner b{font-size:13px}.trial-banner span{font-size:12px;color:#5a8584}.subscription-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:13px;margin:20px 0}.sub-card{display:flex;flex-direction:column;min-height:260px;gap:10px;border-radius:21px;background:var(--surface);border:1px solid var(--line);padding:21px;box-shadow:var(--shadow)}.sub-icon{font-size:29px;color:var(--brand);display:grid;place-items:center;background:var(--soft);border-radius:14px;height:53px;width:53px}.sub-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:3px 0}.sub-heading h3{margin:0;font-size:17px}.sub-card p{color:var(--muted);font-size:12px;line-height:1.6;flex:1}.sub-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:13px}.sub-footer strong{font-size:20px}.sub-footer small{font-size:10px;font-weight:600;color:var(--muted)}.is-active{background:#e4f8ee;color:#11996b}.payment-notice{line-height:1.7}.request-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 3px;border-bottom:1px solid var(--line);font-size:12px}.request-row span{color:var(--muted)}.muted{color:var(--muted);font-size:12px;line-height:1.7}.admin-user{display:flex;flex-direction:column;gap:13px;padding:16px 0;border-bottom:1px solid var(--line)}.admin-user small{display:block;font-size:11px;color:var(--muted);margin-top:3px}.admin-modules{display:flex;flex-wrap:wrap;gap:8px}.admin-modules label{padding:7px 10px;background:var(--soft);border-radius:9px;font-size:11px;display:flex;gap:5px;align-items:center}.editor-shell{background:#e9f1ef}.editor-top{background:#071e29;color:#e8f8f6;border-bottom:1px solid #166668}.editor-top button{background:#0b756f!important;border:1px solid #238d8a!important;color:#fff!important;border-radius:11px!important}.editor-top small{color:#c7e8e6!important;font-size:12px;font-weight:800}.editor-top #editorSaveStatus{color:#42d4b5;font-weight:800}.login-screen{background:#071c25}.login-art{background:radial-gradient(circle at 45% 25%,#0a5960a1,transparent 50%),#071c25}.login-art img{max-width:470px;box-shadow:0 35px 90px #0006;border:1px solid #1b525b}.login-art h1{letter-spacing:3px;font-size:clamp(38px,4vw,57px)}.login-art p{letter-spacing:1px;font-size:15px}.login-panel{background:#eff7f5}.login{box-shadow:0 25px 80px #0c414122;border-radius:22px;padding:35px}.login h2{letter-spacing:-1px}.login .btn{min-height:47px}.login:before{content:'WORK · PLAN · ORGANIZE';color:#08aaa0;font-size:10px;font-weight:950;letter-spacing:2px}.modal-veil{background:#041c23b8}.modal{border-radius:21px;box-shadow:0 30px 85px #0005}.toast{z-index:9000}
@media(max-width:1140px){.sidebar{width:235px}.main{padding:24px}.fast-grid{grid-template-columns:repeat(2,1fr)}.live-status{display:none}}@media(max-width:850px){.sidebar{position:fixed;transform:translateX(-110%);z-index:150;width:285px}.sidebar.open{transform:translateX(0);box-shadow:15px 0 60px #001d2466}.mobile-toggle{display:inline-flex}.main{padding:17px}.topbar{align-items:center}.topbar h2{font-size:20px}.hero{padding:25px}.trial-banner{flex-wrap:wrap}.subscription-grid{grid-template-columns:repeat(auto-fit,minmax(235px,1fr))}.login-screen{grid-template-columns:1fr}.login-art{min-height:220px;padding:30px}.login-art img{max-width:290px}.login-art h1{margin:14px 0 0}.login-panel{padding:20px}.login{max-width:520px}}@media(max-width:510px){.main{padding:13px}.stats{grid-template-columns:1fr}.card{padding:17px}.fast-grid{grid-template-columns:repeat(2,1fr)}.sub-card{min-height:235px}.top-actions .btn{padding:8px 9px}.hero:after{font-size:150px;top:-30px}.trial-banner .btn{width:100%}.editor-top{gap:6px}.editor-top small{max-width:110px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}

/* WORPLIO approved brand card and back links */
.login-art img{display:block;width:min(640px,100%)!important;max-width:100%;height:auto!important;max-height:none!important;object-fit:contain!important;border-radius:20px!important}
.login-art .login-art-caption{font-weight:800;font-size:15px;letter-spacing:1.2px;color:#c2eae5;margin:23px 0 0}
.auth-back{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:#07666b;font-size:12px;font-weight:850;border:1px solid #c9e6e1;background:#effaf8;padding:10px 14px;border-radius:12px;margin:0 0 22px;transition:.15s}
.auth-back:hover,.auth-back:focus-visible{background:#daf5ef;border-color:#81cec2}
.auth-back span{font-size:18px;line-height:1}
.brand-symbol.worplio-mini-brand{width:66px!important;height:45px!important;min-width:66px!important;object-fit:contain!important;display:block!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important}
@media(max-width:950px){.login-art{padding:25px 18px!important}.login-art img{width:min(510px,100%)!important;max-height:none!important;object-fit:contain!important}.login-art .login-art-caption{font-size:12px;margin-top:9px}.login{padding:23px!important}}
@media(max-width:420px){.login-panel{padding:14px!important}.auth-back{margin-bottom:16px}}
/* Login forms: one clear back navigation at the top, no duplicate small brand heading. */
.login:before{display:none!important}
.login .auth-back{display:flex!important;width:max-content!important;max-width:100%!important;margin:0 0 22px!important}