:root{color-scheme:light;--ink:#152442;--muted:#66758d;--line:#e0e8f0;--accent:#146aef;--mint:#18c8aa;--paper:#f5f8fc;--danger:#a53045}
*{box-sizing:border-box}body{font:15px/1.55 system-ui,"Yu Gothic UI",sans-serif;background:var(--paper);color:var(--ink);margin:0;min-height:100vh}
button,input,select,textarea{font:inherit}button{border:0;border-radius:11px;padding:11px 19px;font-weight:730;cursor:pointer;transition:background .15s ease}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #68b4f9;outline-offset:2px}
.primary{background:linear-gradient(110deg,#1668e9,#1554cb);color:white}.primary:hover{filter:brightness(1.12)}
.secondary{background:#edf3ff;color:#23456c;border:1px solid #d8e5fb}.ghost{background:transparent;color:#d9fbff;border:1px solid #466178;padding:7px 12px}
button:disabled{opacity:.55;cursor:not-allowed}
.brand{background:#071225;border-bottom:2px solid var(--mint);height:79px}
.brand-inner{max-width:1200px;margin:auto;display:flex;align-items:center;gap:11px;padding:4px 22px;height:100%}
.brand img{width:150px;height:68px;object-fit:contain}
.product-name{padding:4px 8px;color:#b3e9fa;font-size:12px;font-weight:750;border:1px solid #31536a;border-radius:999px}
.brand-end{display:flex;align-items:center;gap:15px;margin-left:auto;color:#dae9fb;font-size:12px}
main{max-width:1170px;margin:0 auto;padding:42px 24px 72px;min-height:calc(100vh - 141px)}
h1{font-size:clamp(28px,3vw,39px);letter-spacing:-.04em;margin:7px 0}h2{font-size:22px;margin:0 0 12px}
p{color:var(--muted);margin:0 0 16px}label{display:grid;gap:6px;font-size:13px;font-weight:700}
input,select,textarea{border:1px solid #cedbeb;border-radius:9px;padding:11px;background:#fff;color:var(--ink);width:100%}
input:focus,select:focus{border-color:#49b5c2}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px;flex-wrap:wrap}
.eyebrow{font-size:11px;letter-spacing:.18em;color:#16877d;font-weight:850}
.head-actions{display:flex;gap:9px}
.panel{background:white;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 10px 36px #1933570d;margin-bottom:20px}
.login{max-width:430px;margin:5vh auto}.login form{display:grid;gap:18px}.login button{margin-top:7px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:15px}
.choice{min-height:185px;text-align:left;background:white;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 25px #1730520b;color:var(--ink);padding:23px;display:grid;align-content:start;gap:7px}
.choice:hover{border-color:#49c8b5;background:#fbfffe}
.choice strong{font-size:19px}.choice small{color:var(--muted);font-size:12px;font-weight:500}
.choice .symbol{font-size:24px;background:#e7faf5;color:#178f80;border-radius:12px;width:45px;height:45px;display:grid;place-items:center;margin-bottom:8px}
.choice .action-label{color:#06786c;font-size:12px;margin-top:16px}
.hero{background:linear-gradient(105deg,#08132b,#172c57);padding:30px;border-radius:19px;color:#fff;display:flex;justify-content:space-between;gap:20px;margin-bottom:23px}
.hero p{color:#c9dceb}.hero .eyebrow{color:#65e6cb}.hero h1{font-size:27px}.hero img{max-width:200px;width:30%;object-fit:contain}
.app-list{display:grid;gap:10px}.app-button{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;text-align:left;font-weight:750}
.app-button:hover{border-color:#64cabb}.muted{font-size:12px;color:var(--muted)}
.form-grid{display:grid;gap:13px}.form-grid label{max-width:620px}
.setting-row{padding:16px;border:1px solid var(--line);border-radius:12px;display:grid;grid-template-columns:minmax(150px,1fr) 145px auto;gap:12px;align-items:end}
.setting-row input{font-size:14px}.setting-row button{height:42px}
.row-buttons{display:flex;gap:8px;align-items:center;margin-top:15px;flex-wrap:wrap}
table{width:100%;border-collapse:collapse;font-size:13px}td,th{border-bottom:1px solid #e9eff5;padding:12px;text-align:left}th{background:#f4f8fc}
.table-scroll{overflow:auto}
.status{padding:5px 10px;border-radius:20px;background:#eff6ff;font-size:11px}
.quota-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:13px}
.quota{border:1px solid var(--line);border-radius:12px;padding:15px}
.quota .amount{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:12px}
meter{width:100%;height:12px;margin-top:7px}
.warn{border:1px solid #e3cfaa;background:#fff8eb;color:#795018;border-radius:12px;padding:14px}
#alert{position:fixed;bottom:23px;right:22px;max-width:390px;padding:14px 20px;background:#153c63;color:white;border-radius:12px;box-shadow:0 14px 44px #0e254335}
#alert[data-error="true"]{background:#a42c42}footer{padding:20px;text-align:center;font-size:11px;color:#76889b}
[hidden]{display:none!important}
@media(max-width:670px){main{padding:22px 15px}.brand-end #org-name{display:none}.hero img{display:none}.setting-row{grid-template-columns:1fr;gap:9px}.page-head{align-items:start}.panel{padding:17px}}

/* Cloud Studio: compact configuration with live, read-only preview */
.designer-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);align-items:start;gap:24px}
.designer-layout .setting-row{grid-template-columns:minmax(0,1fr) minmax(130px,.6fr);gap:9px;cursor:grab}
.designer-layout .setting-row:active{cursor:grabbing}
.designer-layout .setting-row>label:has(textarea),.designer-layout .setting-row .field-actions{grid-column:1/-1}
.designer-layout .field-actions{display:flex;gap:6px;flex-wrap:wrap}
.designer-layout .field-actions button{font-size:12px;padding:8px 12px;height:auto}
.designer-layout .required-option{display:flex;align-items:center;gap:9px;justify-content:start;grid-column:1/-1}
.designer-layout .required-option input,input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent)}
.designer-preview{padding:19px;border:1px solid #d8e5f2;border-radius:16px;background:#f8fbff;position:sticky;top:22px}
.designer-preview h2{font-size:19px}
.designer-preview :disabled{opacity:.86;cursor:not-allowed}
.designer-preview label{max-width:100%;font-weight:650}
@media(max-width:840px){.designer-layout{grid-template-columns:1fr}.designer-preview{position:static}.designer-layout .setting-row{grid-template-columns:minmax(0,1fr) 135px}}
@media(max-width:520px){.designer-layout .setting-row{grid-template-columns:1fr}}