@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap";:root{color:#1e2b27;font-synthesis:none;--ink:#1e2b27;--muted:#6d756f;--line:#ddd6cc;--paper:#fffdf9;--green:#147d64;--green-dark:#0b5948;--green-soft:#dceee7;--coral:#ed6e4c;--shadow:0 16px 40px #2b312c14;background:#f6f2eb;font-family:DM Sans,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 70% -20%,#fff9e8 0,#0000 38%),#f6f2eb;min-width:1180px;min-height:100vh;margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}.shell{grid-template-columns:254px minmax(0,1fr);min-height:100vh;display:grid}.sidebar{color:#fff;z-index:4;background:#17251f;flex-direction:column;height:100vh;padding:28px 20px 22px;display:flex;position:sticky;top:0;box-shadow:8px 0 36px #121f1a1f}.brand{align-items:center;gap:12px;padding:0 8px 34px;display:flex}.brand-mark{color:#17251f;text-align:center;background:linear-gradient(145deg,#f8c15d,#ef6e4b);border-radius:14px 14px 14px 4px;width:42px;height:42px;font:800 22px/42px Manrope;display:inline-block;box-shadow:0 8px 18px #ee6e4b40}.brand strong,.identity strong{font:700 14px Manrope;display:block}.brand small,.identity small{color:#9daaa5;text-overflow:ellipsis;max-width:150px;margin-top:3px;font-size:10px;display:block;overflow:hidden}.sidebar nav{gap:6px;display:grid}.sidebar nav button{color:#bdc8c3;text-align:left;background:0 0;border:0;border-radius:13px;align-items:center;gap:13px;height:48px;padding:0 14px;font-weight:600;display:flex}.sidebar nav button span{color:#8fa49b;place-items:center;width:24px;font-size:19px;display:grid}.sidebar nav button:hover{color:#fff;background:#21342d}.sidebar nav button.active{color:#173c31;background:#ecf4ed;box-shadow:inset 3px 0 #f0a04c}.sidebar nav button.active span{color:#147d64}.identity{border-top:1px solid #30413a;align-items:center;gap:10px;min-width:0;margin-top:auto;padding:17px 9px 0;display:flex}.avatar{color:#cfe8dd;background:#2c4c40;border-radius:50%;place-items:center;min-width:36px;height:36px;font-size:11px;font-weight:700;display:grid}.content{width:100%;max-width:1780px;margin:0 auto;padding:44px 48px 64px}.environment{z-index:8;color:#fff;background:#2d4138;border-radius:999px;padding:7px 12px;font-size:11px;position:fixed;bottom:18px;right:18px}.page-header{justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:30px;display:flex}.page-header h1{letter-spacing:-.9px;margin:6px 0 8px;font:800 34px/1.1 Manrope}.page-header p{color:var(--muted);max-width:700px;margin:0;line-height:1.55}.eyebrow{color:var(--green);letter-spacing:.15em;text-transform:uppercase;font:800 10px Manrope}.header-actions,.inline-actions{align-items:center;gap:9px;display:flex}.button{border:1px solid #0000;border-radius:12px;min-height:42px;padding:0 17px;font-weight:700;transition:all .18s}.button:hover:not(:disabled){transform:translateY(-1px)}.button:disabled{opacity:.45;cursor:not-allowed}.button.primary{background:var(--green);color:#fff;box-shadow:0 8px 18px #147d642b}.button.primary:hover:not(:disabled){background:var(--green-dark)}.button.secondary{background:var(--paper);color:var(--green);border-color:#a9c9bd}.button.ghost{color:var(--green);border-color:var(--line);background:0 0}.button.full{width:100%}.panel{box-shadow:var(--shadow);background:#fffdf9f0;border:1px solid #d9d0c5db;border-radius:22px;padding:24px}.panel h2{margin:4px 0;font:750 20px Manrope}.panel h3{margin:19px 0 10px;font:700 14px Manrope}.panel-title{justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px;display:flex}.metric-grid{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px;display:grid}.metric-card{border:1px solid var(--line);background:var(--paper);text-align:left;border-radius:20px;padding:21px;transition:all .18s;box-shadow:0 9px 30px #2e2f2a0d}.metric-card:hover{box-shadow:var(--shadow);border-color:#9cbfb2;transform:translateY(-2px)}.metric-card span{color:var(--muted);font-size:12px;font-weight:700;display:block}.metric-card strong{margin:10px 0 4px;font:800 34px Manrope;display:block}.metric-card small{color:#899089}.notice{color:#315a78;background:#e7f0f8;border:1px solid #c6dceb;border-radius:13px;margin:-12px 0 22px;padding:13px 16px}.notice.error{color:#8c3826;background:#fce7e2;border-color:#f1c2b8}.notice.success{background:var(--green-soft);color:var(--green-dark);border-color:#b9dacf}label{color:#59655f;text-transform:uppercase;letter-spacing:.04em;gap:7px;margin-bottom:14px;font-size:11px;font-weight:700;display:grid}label small{text-transform:none;letter-spacing:0;color:#8a918d;font-weight:400}input,select,textarea{min-height:42px;color:var(--ink);text-transform:none;letter-spacing:0;background:#fff;border:1px solid #d8d0c5;border-radius:11px;outline:none;width:100%;padding:9px 11px}input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px #147d641a}textarea{resize:vertical;min-height:78px}label.check{text-transform:none;letter-spacing:0;flex-direction:row;align-items:center;font-size:12px;display:flex}.check input{width:17px;min-height:17px;accent-color:var(--green)}label output{float:right;color:var(--green)}.input-button{gap:8px;display:flex}.input-button button,.inline-actions button,.canvas-toolbar button{border:1px solid var(--line);color:var(--green);background:#fff;border-radius:10px;padding:9px 11px;font-weight:700}hr{border:0;border-top:1px solid var(--line);margin:23px 0}.table-wrap{overflow:auto}.table-wrap table{border-collapse:collapse;width:100%}.table-wrap th{color:#89908b;text-transform:uppercase;letter-spacing:.08em;text-align:left;border-bottom:1px solid var(--line);padding:10px 12px;font-size:10px}.table-wrap td{border-bottom:1px solid #ece7df;padding:14px 12px;font-size:13px}.table-wrap td small,.table-wrap td strong{display:block}.table-wrap td small{color:#8b918e;margin-top:4px;font-size:10px}.table-wrap tr:last-child td{border-bottom:0}.status{color:#635f59;text-transform:capitalize;white-space:nowrap;background:#f0ece5;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:800;display:inline-flex}.status.menunggu_pembayaran{color:#805e11;background:#fff0c9}.status.siap_produksi{color:#12684f;background:#dff0e9}.status.diproses{color:#315d91;background:#e1ecfa}.status.selesai{color:#176044;background:#d9eee3}.empty{text-align:center;color:#8a918c;place-content:center;gap:5px;min-height:180px;display:grid}.empty strong{color:#5b655f}.empty.compact{min-height:100px}.studio-grid{grid-template-columns:250px minmax(610px,1fr) 270px;align-items:start;gap:16px;display:grid}.studio-list,.inspector{max-height:calc(100vh - 164px);padding:19px;position:sticky;top:24px;overflow-y:auto}.group-list{gap:7px;margin:12px 0 20px;display:grid}.group-list button{border:1px solid var(--line);text-align:left;background:#fff;border-radius:11px;padding:11px}.group-list button.selected{border-color:var(--green);background:#edf6f2}.group-list span,.group-list small{display:block}.group-list span{font-weight:700}.group-list small{color:#86908b;margin-top:4px;font-size:10px}.canvas-panel{padding:0;overflow:hidden}.canvas-toolbar{border-bottom:1px solid var(--line);color:#7f8883;justify-content:space-between;align-items:center;height:58px;padding:0 15px;font-size:11px;display:flex}.canvas-toolbar>div{gap:6px;display:flex}.canvas-toolbar button:disabled{opacity:.35}.canvas-stage{background:#e9e4dc;place-items:center;min-height:610px;padding:34px;display:grid;overflow:auto}.canvas-stage svg{filter:drop-shadow(0 14px 24px #2c2b2726);touch-action:none;max-width:100%;max-height:600px}.layout-tabs{border-top:1px solid var(--line);gap:7px;padding:12px;display:flex;overflow-x:auto}.layout-tabs button{border:1px solid var(--line);background:#fff;border-radius:10px;min-width:104px;padding:8px 12px;font-size:11px;font-weight:700}.layout-tabs button.active{border-color:var(--green);color:var(--green-dark);background:#e4f1ec}.layout-tabs small{color:#89918d;margin-top:2px;font-weight:400;display:block}.layout-tabs .add-tab{color:var(--green);border-style:dashed}.chip{color:var(--green);background:#e4f0eb;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:800}.two-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.four-grid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.four-grid label{min-width:0}.four-grid input{padding-inline:7px}.split-grid{grid-template-columns:360px minmax(0,1fr);align-items:start;gap:20px;display:grid}.form-panel{position:sticky;top:24px}.file-rule{background:#edf4f1;border-radius:12px;margin:-4px 0 16px;padding:12px}.file-rule strong,.file-rule span{display:block}.file-rule strong{font-size:11px}.file-rule span{color:#68746e;margin-top:3px;font-size:10px}.file-rule.warning{color:#715817;background:#fff1d1}.asset-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;display:grid}.asset-card{border:1px solid var(--line);background:#fff;border-radius:15px;padding:10px}.asset-preview{background-color:#f0ece6;background-image:linear-gradient(45deg,#e0dcd4 25%,#0000 25%),linear-gradient(-45deg,#e0dcd4 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e0dcd4 75%),linear-gradient(-45deg,#0000 75%,#e0dcd4 75%);background-position:0 0,0 9px,9px -9px,-9px 0;background-repeat:repeat;background-size:18px 18px;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;border-radius:10px;place-items:center;height:120px;display:grid;position:relative;overflow:hidden}.asset-preview img{z-index:1;max-width:90%;max-height:90%;position:relative}.asset-preview span{color:#fff;background:#20352d;border-radius:5px;padding:3px 5px;font-size:8px;position:absolute;bottom:6px;right:6px}.asset-card>div:nth-child(2){padding:10px 2px}.asset-card strong,.asset-card span,.asset-card small{display:block}.asset-card span,.asset-card small{color:#8a918d;margin-top:3px;font-size:10px}.asset-card button{width:100%}.profile-grid{grid-template-columns:minmax(600px,1fr) 350px;align-items:start;gap:20px;display:grid}.profile-preview{position:sticky;top:24px}.book-diagram{filter:drop-shadow(0 13px 18px #212f2929);height:190px;margin:24px 0;display:flex}.book-diagram .back,.book-diagram .front{color:#dff0e9;background:#2c7563;flex:1;place-items:center;font:700 10px Manrope;display:grid}.book-diagram .back{border-radius:8px 0 0 8px}.book-diagram .front{background:#24604f;border-radius:0 8px 8px 0}.book-diagram .spine{background:#173f34}.profile-preview dl>div{border-bottom:1px solid var(--line);justify-content:space-between;padding:11px 0;display:flex}.profile-preview dt{color:#7f8882}.profile-preview dd{margin:0;font-weight:700}.filters{grid-template-columns:1fr 230px;gap:10px;margin-bottom:15px;display:grid}.modal-backdrop{z-index:20;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#141f1a94;place-items:center;padding:30px;display:grid;position:fixed;inset:0}.modal{background:var(--paper);border-radius:24px;width:min(760px,95vw);max-height:90vh;padding:30px;position:relative;overflow:auto;box-shadow:0 30px 90px #0000004d}.modal-close{color:#7d847f;background:0 0;border:0;font-size:28px;position:absolute;top:16px;right:18px}.modal h2{margin:6px 0;font:800 26px Manrope}.modal>p{color:var(--muted);margin-top:0}.detail-grid{grid-template-columns:repeat(4,1fr);gap:9px;margin:21px 0;display:grid}.detail-grid>div{background:#f2eee7;border-radius:12px;padding:12px}.detail-grid span,.detail-grid strong{display:block}.detail-grid span{color:#7d867f;text-transform:uppercase;font-size:9px}.detail-grid strong{margin-top:4px;font-size:11px}.json-preview{color:#d6e8e0;background:#1b2924;border-radius:12px;max-height:150px;padding:15px;font-size:10px;overflow:auto}.timeline>div{gap:10px;margin:10px 0;display:flex}.timeline i{background:var(--green);width:9px;height:9px;box-shadow:0 0 0 4px var(--green-soft);border-radius:50%;margin-top:4px}.timeline span strong,.timeline span small{display:block}.timeline span strong{text-transform:capitalize;font-size:11px}.timeline span small{color:#858c88;margin-top:2px;font-size:9px}.modal-actions{justify-content:flex-end;gap:10px;margin-top:24px;display:flex}.modal-actions select{width:220px}.gate{place-items:center;min-height:100vh;display:grid}.gate-card{text-align:center;border:1px solid var(--line);background:var(--paper);width:420px;box-shadow:var(--shadow);border-radius:28px;padding:46px}.gate-card h1{font:800 25px Manrope}.gate-card p{color:var(--muted);line-height:1.5}.skeleton-row{background:linear-gradient(100deg,#eee8df 20%,#faf7f0 40%,#eee8df 60%) 0 0/200% 100%;border-radius:14px;height:120px;animation:1.4s infinite shimmer}@keyframes shimmer{to{background-position-x:-200%}}@media (max-width:1250px){.content{padding-inline:28px}.studio-grid{grid-template-columns:230px minmax(580px,1fr)}.studio-grid .inspector{grid-column:1/-1;grid-template-columns:repeat(3,1fr);gap:14px;max-height:none;display:grid;position:static}.asset-grid{grid-template-columns:repeat(2,1fr)}}