/* Premium RELOOP Account. Official CI: cyan #19C5F4, blue #168BFF, navy #0F1F3D. */
@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@400..700&display=swap');
html{
 --account-canvas-bg:#030910;
 --account-canvas:radial-gradient(ellipse at 77% 33%,#145a9e20,transparent 58%),linear-gradient(112deg,#030b17 12%,#061426 73%,#091d35);
 --account-arc-glass:#5badef;--account-arc-shade:#102c4c;--account-arc-rim:#6bbdff;--account-arc-light:#e1f6ff;
 --account-welcome-bg:radial-gradient(ellipse at 18% 18%,#167bce20,transparent 54%),linear-gradient(145deg,#081a2f,#092440 65%,#10365b);
 --account-welcome-ink:#edf6ff;--account-welcome-copy:#b3cbdf;--account-welcome-kicker:#8bcfff;
 --account-welcome-pill:#ffffff06;--account-welcome-line:#9ccaff38;--account-footer:#9db4cc;
 --account-orb-high:#5bd1ff;--account-orb-mid:#208edd;--account-orb-deep:#074d8d;--account-orb-shadow:#011a384d;
 --account-orbit-line:#8bd4ff26;--account-orbit-dot:#9de6ff;
 --account-frame-shadow:0 28px 90px #00000040,0 2px 5px #00000020;
 font-family:'Anuphan',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;font-synthesis:none;background:var(--account-canvas-bg);
}
html[data-account-canvas-theme="light"]{
 --account-canvas-bg:#f0f6fc;
 --account-canvas:radial-gradient(ellipse at 78% 36%,#b6dcff50,transparent 58%),linear-gradient(112deg,#f5f9ff 12%,#edf5ff 73%,#e1effe);
 --account-arc-glass:#8bc4ef;--account-arc-shade:#c4dff7;--account-arc-rim:#4d9cdd;--account-arc-light:#fff;
 --account-welcome-bg:radial-gradient(ellipse at 12% 10%,#ffffffa3,transparent 55%),linear-gradient(145deg,#eaf5ff,#d9edff 65%,#cae3fc);
 --account-welcome-ink:#173b55;--account-welcome-copy:#52728e;--account-welcome-kicker:#1677c4;
 --account-welcome-pill:#ffffff55;--account-welcome-line:#80b6df59;--account-footer:#627b92;
 --account-orb-high:#a1e6ff;--account-orb-mid:#3da9ef;--account-orb-deep:#1372c9;--account-orb-shadow:#276da324;
 --account-orbit-line:#4c9ed835;--account-orbit-dot:#328fd5;
 --account-frame-shadow:0 28px 90px #2a608b16,0 2px 5px #2a608b0b;
}
body,input,button,select,textarea{font-family:inherit}
body[data-account-view]{position:relative;isolation:isolate;background:var(--account-canvas);color:#0f1f3d;min-height:100dvh}
.account-canvas{position:fixed;z-index:-1;inset:0;overflow:hidden;pointer-events:none}
.account-glass-arc{display:block;position:absolute;top:50%;right:-210px;width:760px;height:1282.5px;transform:translateY(-50%);max-width:none;overflow:visible}
.account-glass-volume{fill:url(#account-glass-volume)}
.account-glass-glow,.account-glass-edge,.account-glass-rim{fill:none;stroke:url(#account-glass-rim)}
.account-glass-glow{stroke-width:24;opacity:.17;filter:blur(11px)}
.account-glass-edge{stroke-width:7;opacity:.54;filter:blur(2.5px)}
.account-glass-rim{stroke-width:1.8;opacity:.92}
.account-glass-color{stop-color:var(--account-arc-glass)}
.account-glass-shade{stop-color:var(--account-arc-shade)}
.account-glass-rim-color{stop-color:var(--account-arc-rim)}
.account-glass-light{stop-color:var(--account-arc-light)}
body:not([data-account-view="accountContent"])>header{display:none}
body[data-account-view]>main{min-height:calc(100dvh - 62px);width:100%;max-width:1240px;margin-inline:auto;display:flex;align-items:center;justify-content:center;padding:32px 40px}
body[data-account-view]>footer{padding:20px 20px 22px;text-align:center;color:var(--account-footer);max-width:none;font-size:11px;letter-spacing:.01em}
 #loadingState,#errorState{margin:auto;border:0;text-align:center;padding:36px 16px;box-shadow:none}
#accountFrame.auth-shell{position:relative;display:grid;grid-template-columns:43% minmax(0,1fr);gap:28px;padding:14px;width:100%;max-width:1096px;margin:0;height:748px;min-height:682px;overflow:hidden;border-radius:28px;background:#fff;box-shadow:var(--account-frame-shadow);border:1px solid #ffffff38}
.auth-welcome{isolation:isolate;position:relative;display:flex;flex-direction:column;justify-content:center;color:var(--account-welcome-ink);padding:70px 32px 55px 40px;overflow:hidden;min-width:0;border-radius:22px}
.auth-welcome:before{content:'';position:absolute;z-index:-2;inset:0;border-radius:22px;background:var(--account-welcome-bg)}
.auth-welcome-art{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none}
.auth-orbit-ring{position:absolute;left:-116px;bottom:-126px;width:430px;height:430px;border:1px solid var(--account-orbit-line);border-radius:50%}
.auth-orbit-ring:before{content:'';position:absolute;inset:24px;border:1px solid var(--account-orbit-line);border-radius:50%;opacity:.35}
.auth-orbit-ring:after{content:'';position:absolute;left:50%;top:-3px;width:5px;height:5px;border-radius:50%;background:var(--account-orbit-dot);box-shadow:0 0 0 4px #69bfff10,0 0 13px #69bfff38}
.auth-orb{position:absolute;display:block;border-radius:50%;background:radial-gradient(circle at 28% 23%,var(--account-orb-high),var(--account-orb-mid) 46%,var(--account-orb-deep) 92%);border:1px solid #b5e9ff20;box-shadow:inset 0 1px 1px #e4f8ff45,inset -8px -12px 25px #073c742b,0 18px 35px var(--account-orb-shadow);transition:scale .8s ease}
.auth-orb:before{content:'';position:absolute;inset:10%;border-radius:50%;background:radial-gradient(ellipse at 27% 18%,#ffffff45,transparent 37%);opacity:.5}
.auth-orb-large{right:28px;bottom:52px;width:136px;height:136px}
.auth-orb-small{left:-58px;bottom:-40px;width:110px;height:110px}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
 .auth-orb-large{animation:auth-orb-drift-large 10s ease-in-out infinite}
 .auth-orb-small{animation:auth-orb-drift-small 13s ease-in-out -4s infinite}
 .auth-orbit-ring{animation:auth-orbit-turn 42s linear infinite}
 @keyframes auth-orb-drift-large{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-9px,-16px,0)}}
 @keyframes auth-orb-drift-small{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(12px,-18px,0)}}
 @keyframes auth-orbit-turn{to{transform:rotate(360deg)}}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.auth-welcome:hover .auth-orb-large{scale:1.055}.auth-welcome:hover .auth-orb-small{scale:1.035}}
@media(prefers-reduced-motion:reduce){.auth-orb{transition:none}}
.auth-welcome-content{position:relative;z-index:3;margin-top:-80px}
.auth-kicker{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.16em;font-weight:600;color:var(--account-welcome-kicker);margin-bottom:25px}
.auth-kicker>span{width:5px;height:5px;border-radius:50%;background:#89e1ff;box-shadow:0 0 0 4px #99e8ff15}
.auth-welcome h2{font-size:37px;line-height:1.52;letter-spacing:-.025em;color:var(--account-welcome-ink);margin:0 0 17px;font-weight:600;white-space:nowrap}
.auth-welcome h2 strong{font-weight:700;letter-spacing:.005em}
.auth-welcome-content>p{font-size:14px;line-height:1.95;color:var(--account-welcome-copy);max-width:310px;margin:0}
.auth-product-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:25px}
.auth-product-pills span{display:inline-block;font-size:10px;letter-spacing:.02em;font-weight:500;border:1px solid var(--account-welcome-line);border-radius:999px;padding:7px 12px;color:var(--account-welcome-ink);background:var(--account-welcome-pill)}
.auth-welcome-bottom{position:absolute;left:40px;bottom:42px;display:flex;align-items:center;gap:12px;z-index:3;font-size:11px;line-height:1.8;color:var(--account-welcome-copy)}
.auth-welcome-bottom b{font-weight:500;color:var(--account-welcome-ink)}
.auth-small-mark{font-family:system-ui;font-size:36px;color:var(--account-welcome-ink);line-height:1}
.auth-form-panel{position:relative;z-index:4;display:flex;flex-direction:column;padding:32px 30px 28px 8px;align-self:stretch;background:#fff;min-width:0;min-height:0}
.auth-brand-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:27px}
.auth-brand-row img{display:block;width:139px;height:42px;object-fit:contain;object-position:left center}
.auth-back{font-size:10px;color:#7d91a6;white-space:nowrap;font-weight:400}
.auth-back:hover{color:#067ddc}
.auth-back span{margin-left:3px}
.auth-heading{margin-bottom:24px}
.auth-overline{display:block;font-size:9px;font-weight:600;letter-spacing:.16em;color:#8298ae;margin-bottom:9px}
#signedOutState .auth-heading h1{font-size:30px;line-height:1.4;letter-spacing:-.025em;color:#0f1f3d;font-weight:700;margin:0 0 7px}
.auth-heading p{font-size:12px;line-height:1.8;color:#7d8ea0;margin:0}
.auth-google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:49px;border:1px solid #d9e3eb;border-radius:11px;background:#fff;color:#243d56;font-size:13px;font-weight:500;cursor:pointer;box-shadow:0 2px 3px #18385903}
.auth-google:hover{background:#f7fbff;border-color:#afcee9}
.auth-google:disabled{opacity:.65;cursor:wait}
.auth-divider{display:flex;align-items:center;gap:13px;color:#9baaba;font-size:10px;margin:21px 0}
.auth-divider:before,.auth-divider:after{content:'';height:1px;flex:1;background:#eaf0f5}
#accountLoginForm{display:grid;gap:16px}
#accountLoginForm label{font-size:12px;color:#304961;font-weight:500;margin:0 0 8px;display:block}
#accountLoginForm .auth-input{height:47px;box-sizing:border-box;border-radius:10px;border:1px solid #dde6ee;background:#f9fbfd;font-size:13px;color:#183754;width:100%;padding:12px 15px;outline:none;transition:border-color .15s,box-shadow .15s}
#accountLoginForm .auth-input::placeholder{color:#a1aebc;font-weight:400}
#accountLoginForm .auth-input:focus{border-color:#168bff;background:#fff;box-shadow:0 0 0 3px #168bff10}
.auth-label-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.auth-label-row>span{font-size:10px;color:#8b9eb1}
.auth-password{position:relative}
#accountLoginForm .auth-password>.auth-input{padding-right:48px}
.auth-show-password{position:absolute;right:5px;top:4px;width:39px;height:39px;border:0;background:none;color:#8ba0b2;display:grid;place-items:center;border-radius:7px;cursor:pointer}
.auth-show-password:hover{color:#087edb;background:#edf6ff}
.auth-show-password[aria-pressed="true"]{color:#0b80e0}
.auth-password-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:-3px}
.auth-secure-label{display:flex;gap:5px;align-items:center;color:#98a9b9;font-size:9px}
.auth-password-meta>a{font-size:11px;color:#1584df;font-weight:500}
#accountLoginForm .auth-submit{width:100%;min-height:48px;margin-top:1px;border-radius:10px;background:linear-gradient(105deg,#168bff,#0574d5);font-size:13px;display:flex;align-items:center;justify-content:center;gap:11px;font-weight:600;box-shadow:0 7px 18px #168bff26;letter-spacing:.01em}
#accountLoginForm .auth-submit:hover{background:linear-gradient(105deg,#057df0,#0267c3)}
#accountLoginForm .auth-submit:disabled{cursor:wait;opacity:.65}
.auth-switch{text-align:center;color:#879bad;font-size:11px;margin-top:22px;line-height:1.8}
.auth-switch>a{color:#1584df;font-weight:600;margin-left:5px}
.auth-legal{font-size:9px!important;text-align:center;line-height:1.9!important;color:#a4b0bd!important;margin:22px 0 0!important}
.auth-legal a{color:#8297aa;text-decoration:underline;text-decoration-color:#ced9e2;text-underline-offset:3px}
#accountLoginMessage{font-size:11px;padding:11px 13px;border-radius:10px;line-height:1.7}
.auth-verify{text-align:center;border:1px solid #dcecf9;border-radius:16px;padding:25px 18px;background:#f7fbff}
.auth-envelope{font-size:28px;color:#168bff;display:block;margin-bottom:10px}
.auth-verify h2{font-size:20px;line-height:1.5;color:#183754;margin:0 0 9px}
.auth-verify p{font-size:12px;line-height:1.9;overflow-wrap:anywhere;margin-bottom:18px}
.auth-verify .action{font-size:11px;min-height:40px;padding:10px 15px}
button:focus-visible,a:focus-visible{outline:3px solid #76c5ff;outline-offset:4px}
@media(max-width:1000px){body[data-account-view]>main{padding:28px}.auth-form-panel{padding:32px 25px 32px 12px}.auth-welcome{padding-left:32px;padding-right:24px}.auth-welcome h2{font-size:29px}.auth-welcome-bottom{left:32px;font-size:10px}.auth-orb-large{width:116px;height:116px;right:22px;bottom:60px}.auth-brand-row img{width:126px}.auth-back{font-size:9px}.account-glass-arc{right:-330px;width:640px;height:1080px}}
@media(max-width:900px){body[data-account-view]>main{padding:24px 18px;min-height:calc(100dvh - 53px)}#accountFrame.auth-shell{display:block;max-width:600px;height:auto;min-height:0;border-radius:23px;padding:0}.auth-welcome{display:none}.auth-form-panel{padding:29px 29px 27px}.auth-brand-row{margin-bottom:29px}.auth-brand-row img{width:140px}.auth-back{font-size:10px}#signedOutState .auth-heading h1{font-size:28px}.auth-heading p{font-size:12px}.auth-google{height:50px}.auth-divider{margin:21px 0}#accountLoginForm .auth-input{height:50px;font-size:14px}#accountLoginForm .auth-submit{min-height:49px}.auth-show-password{top:6px}.auth-switch{font-size:12px}body[data-account-view]>footer{padding:18px 12px;font-size:10px}.auth-legal{font-size:10px!important;margin-top:24px!important}}
@media(max-width:380px){.auth-form-panel{padding:25px 23px}.auth-brand-row img{width:127px}.auth-back{font-size:9px}#signedOutState .auth-heading h1{font-size:26px}.auth-heading p{font-size:11px}.auth-password-meta{gap:6px}}
/* Keep touch form text at 16px so iOS does not zoom the page on focus. */
@media(max-width:900px),(any-pointer:coarse){#accountLoginForm .auth-input{font-size:16px}}
@media(prefers-reduced-motion:no-preference){.auth-shell{animation:auth-enter .45s ease-out}.auth-google,.auth-submit,.auth-show-password{transition:background .16s,border-color .16s,box-shadow .16s}@keyframes auth-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}}

/* Original user-provided RELOOP PNG, preserved byte for byte. Display framing
   removes its transparent export margins without redrawing the mark. */
.reloop-logo-frame{display:block;position:relative;overflow:hidden;width:170px;aspect-ratio:1563/360;flex-shrink:0}
.reloop-logo-frame>img{position:absolute;display:block;left:0;top:0;width:calc(100% * 2048 / 1563);height:auto;max-width:none;object-fit:initial;transform:translate(-10.9375%,-25.659824%)}
.auth-brand-row .reloop-logo-frame{width:152px}
@media(max-width:1000px){.auth-brand-row .reloop-logo-frame{width:140px}}
@media(max-width:900px){.auth-brand-row .reloop-logo-frame{width:156px}}
@media(max-width:380px){.auth-brand-row .reloop-logo-frame{width:140px}}

/* One permanent frame and logo across loading, authentication and workspace. */
.auth-brand-row{flex-shrink:0;min-height:36px}
.auth-view{min-height:0;overflow-y:auto;scrollbar-width:thin;padding:0 4px 4px}
.account-panel>#loadingState,.account-panel>#errorState{width:100%;background:transparent}
#loadingState::before{content:'';display:block;width:28px;height:28px;margin:0 auto 24px;border:3px solid #e5f1fb;border-top-color:#168bff;border-radius:50%}
.account-panel>#loadingState h2,.account-panel>#errorState h2{font-size:20px}
body:not([data-account-view="accountContent"]) .account-actions{display:none}
body[data-account-view="accountContent"] .auth-back{display:none}
@media(max-width:900px){.auth-view{overflow:visible;padding:0}.auth-brand-row{margin-bottom:25px}.auth-form-panel{padding:28px}.account-panel>#loadingState,.account-panel>#errorState{min-height:350px;display:flex;flex-direction:column;justify-content:center}}
@media(max-width:480px){body[data-account-view]>main{padding:18px 12px;align-items:flex-start}.auth-form-panel{padding:25px 20px}#accountFrame.auth-shell{border-radius:24px}.auth-brand-row .reloop-logo-frame{width:138px}}
@media(prefers-reduced-motion:no-preference){#loadingState::before{animation:account-spin .85s linear infinite}@keyframes account-spin{to{transform:rotate(360deg)}}}


/* Shared auth palette. The workspace keeps its existing dashboard appearance. */
body:not([data-account-view="accountContent"]){
 --account-panel:#15243a;--account-ink:#eff7ff;--account-copy:#adc5d9;--account-input:#1d314c;
 --account-input-line:#3a5673;--account-link:#67b8ff;--account-rule:#35516e;
 --account-success:#153d34;--account-success-ink:#b3f0d8;--account-success-line:#2c6653;
 --account-error:#3d2331;--account-error-ink:#ffcad4;--account-error-line:#704052;
}
html[data-account-canvas-theme="light"] body:not([data-account-view="accountContent"]){
 --account-panel:#fff;--account-ink:#193b58;--account-copy:#536e87;--account-input:#f7faff;
 --account-input-line:#dbe5ef;--account-link:#167bd4;--account-rule:#dce8f4;
 --account-success:#eefbf7;--account-success-ink:#12644d;--account-success-line:#b9e6d7;
 --account-error:#fff2f4;--account-error-ink:#a52f45;--account-error-line:#f2c9d1;
}
body:not([data-account-view="accountContent"]) #accountFrame.auth-shell{background:var(--account-panel);border-color:var(--account-rule)}
body:not([data-account-view="accountContent"]) .auth-form-panel{background:var(--account-panel);color:var(--account-ink)}
body:not([data-account-view="accountContent"]) :is(#signedOutState .auth-heading h1,#productChoiceState .picker-heading h1,.state-card h2,#accountLoginForm label){color:var(--account-ink)}
body:not([data-account-view="accountContent"]) :is(.auth-heading p,.picker-heading p,.auth-switch,.auth-legal,.auth-secure-label,.auth-label-row>span,.picker-footnote,.state-card p){color:var(--account-copy)!important}
body:not([data-account-view="accountContent"]) :is(.auth-overline,.auth-password-meta>a,.auth-switch>a,.auth-legal a){color:var(--account-link)}
body:not([data-account-view="accountContent"]) #accountLoginForm .auth-input{background:var(--account-input);border-color:var(--account-input-line);color:var(--account-ink)}
body:not([data-account-view="accountContent"]) #accountLoginForm .auth-input:focus{border-color:#168bff}
body:not([data-account-view="accountContent"]) .auth-google{background:var(--account-input);border-color:var(--account-input-line);color:var(--account-ink)}
body:not([data-account-view="accountContent"]) .auth-divider{color:var(--account-copy)}
body:not([data-account-view="accountContent"]) .auth-divider:before,body:not([data-account-view="accountContent"]) .auth-divider:after{background:var(--account-rule)}
body:not([data-account-view="accountContent"]) :is(.auth-show-password,.auth-show-password:hover){color:var(--account-link)}
body:not([data-account-view="accountContent"]) #accountLoginMessage{background:var(--account-error);border-color:var(--account-error-line);color:var(--account-error-ink)}
body:not([data-account-view="accountContent"]) .auth-verify{background:var(--account-success);border-color:var(--account-success-line)}
body:not([data-account-view="accountContent"]) .auth-verify :is(h2,p){color:var(--account-success-ink)}
body:not([data-account-view="accountContent"]) #errorState,body:not([data-account-view="accountContent"]) #loadingState{background:transparent;border-color:var(--account-rule)}
.auth-header-actions{display:flex;align-items:center;gap:8px;min-width:0}
.auth-header-actions .auth-theme-toggle{display:grid;place-items:center;flex:0 0 35px;width:35px;height:35px;border:1px solid var(--account-input-line,#dbe5ef);border-radius:50%;padding:7px;background:var(--account-input,#f7faff);color:var(--account-link,#167bd4);cursor:pointer}
.auth-theme-toggle svg{width:18px;height:18px}
.auth-theme-toggle .account-theme-moon{display:none}
html[data-account-canvas-theme="light"] .auth-theme-toggle .account-theme-moon{display:block}
html[data-account-canvas-theme="light"] .auth-theme-toggle .account-theme-sun{display:none}
body[data-account-view="accountContent"] .auth-theme-toggle{display:none}
html:not([data-account-canvas-theme="light"]) body:not([data-account-view="accountContent"]) .reloop-logo-frame>img{filter:brightness(0) invert(1)}
html:not([data-account-canvas-theme="light"]) body:not([data-account-view="accountContent"]) :is(.reloop-site-back,.reloop-product-back){background:linear-gradient(115deg,#1a3857,#1e4261);color:#d0eaff;border-color:#365f83}
html:not([data-account-canvas-theme="light"]) body:not([data-account-view="accountContent"]) .reloop-site-back-icon{background:#285376;color:#cdeaff}
@media(max-width:480px){
 .auth-brand-row{gap:8px}
 body:not([data-account-view="accountContent"]) .auth-brand-row .reloop-logo-frame{width:clamp(96px,29vw,138px)}
 .auth-header-actions{gap:6px;flex-shrink:0}
 .auth-header-actions .auth-theme-toggle{flex-basis:32px;width:32px;height:32px}
}