:root{color-scheme:dark;--bg:#111411;--sidebar:#171a17;--panel:#1a1e1a;--panel-hover:#202620;--line:#2b302b;--text:#f2f4ef;--muted:#929b90;--soft:#697368;--green:#a7e5b7;--green-deep:#75c98d;--purple:#c7b2ff;--amber:#f2c77f;--shadow:0 18px 55px #0005;font-family:'DM Sans','Segoe UI',sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}
:root[data-theme=light]{color-scheme:light;--bg:#f4f6f2;--sidebar:#fff;--panel:#fff;--panel-hover:#f2f6f1;--line:#e1e7df;--text:#192119;--muted:#667365;--soft:#899587;--green:#267745;--green-deep:#1c6136;--purple:#7352b4;--amber:#a16a08;--shadow:0 18px 55px #21331b0c}
*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:var(--bg);color:var(--text);font-size:14px}button,input,select{font:inherit}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:3px}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:248px;display:flex;flex-direction:column;padding:27px 17px 18px;background:var(--sidebar);border-right:1px solid var(--line);z-index:2}.brand{display:flex;align-items:center;gap:12px;padding:0 10px 38px;color:var(--text);font-family:Manrope,sans-serif;font-size:15px;font-weight:800;text-decoration:none;letter-spacing:-.4px}.brand>span:last-child{display:flex;flex-direction:column;gap:3px}.brand small{color:var(--soft);font-family:'DM Sans',sans-serif;font-size:8px;letter-spacing:1.55px}.brand-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--green);color:#18221a;font-size:21px;font-weight:800}.brand-icon span,.about-logo span{color:#408957}.navigation{display:grid;gap:5px}.nav-label{margin:0 10px 7px;color:var(--soft);font-size:9px;font-weight:700;letter-spacing:1.55px}.nav-label-spaced{margin-top:27px}.nav-item{display:flex;align-items:center;gap:13px;width:100%;padding:11px 12px;border:0;border-radius:8px;background:transparent;color:var(--muted);text-align:left;cursor:pointer;transition:background .16s,color .16s}.nav-item>span{width:18px;color:var(--soft);font-size:17px;text-align:center}.nav-item:hover,.nav-item.active{background:var(--panel-hover);color:var(--text)}.nav-item.active{box-shadow:inset 2px 0 var(--green)}.nav-item.active>span{color:var(--green)}.nav-item b{margin-left:auto;padding:2px 7px;border-radius:10px;background:var(--panel);color:var(--muted);font-size:10px}.sidebar-bottom{margin-top:auto}.local-card{display:flex;gap:11px;align-items:center;margin:0 3px 14px;padding:13px 10px;border:1px solid var(--line);border-radius:8px}.local-indicator,.system-status i{width:7px;height:7px;border-radius:50%;background:#75d996;box-shadow:0 0 12px #75d99680}.local-card>div{display:grid;gap:4px}.local-card strong{font-size:11px;font-weight:600}.local-card small{color:var(--soft);font-size:10px}.sidebar-foot{display:flex;justify-content:space-between;margin:19px 9px 0;color:var(--soft);font-size:9px;letter-spacing:1px}.sidebar-foot span{letter-spacing:0}
.main-content{min-height:100vh;margin-left:248px;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;min-height:72px;padding:0 45px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 91%,transparent);backdrop-filter:blur(16px)}.breadcrumb{display:flex;gap:11px;align-items:center;color:var(--soft);font-size:12px}.breadcrumb strong{color:var(--text);font-weight:600}.crumb-separator{color:var(--line)}.topbar-actions{display:flex;align-items:center;gap:18px}.search-box{display:flex;align-items:center;gap:9px;width:235px;height:35px;padding:0 10px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--soft)}.search-box>span{font-size:19px}.search-box input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:11px}.search-box input::placeholder{color:var(--soft)}kbd{flex-shrink:0;padding:3px 5px;border:1px solid var(--line);border-radius:4px;font-size:9px}.system-status{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:10px;white-space:nowrap}.system-status i{width:6px;height:6px}.settings-button,.theme-button{width:34px;height:34px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--muted);cursor:pointer}.settings-button:hover,.theme-button:hover{border-color:var(--green);color:var(--green)}
.page-wrap{width:min(1280px,100%);flex:1;margin:0 auto;padding:39px 45px 56px}.page{display:none}.page.active{display:block;animation:fade-in .2s ease both}@keyframes fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.welcome-row{display:flex;justify-content:space-between;align-items:center;min-height:207px;padding:4px 5px 30px}.eyebrow{margin:0 0 11px;color:var(--green);font-size:9px;font-weight:700;letter-spacing:1.55px}.welcome-row h1,.page-intro h1,.about-panel h1{margin:0;font-family:Manrope,sans-serif;font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:-1.6px;line-height:1.19}.welcome-row h1 span{color:var(--green)}.welcome-copy,.page-intro>p:last-child{margin:12px 0 0;color:var(--muted);font-size:12px}.welcome-mark{position:relative;display:grid;place-items:center;width:142px;height:142px;margin-right:56px;border:1px solid #a7e5b724;border-radius:50%;color:#a7e5b7;font-family:Manrope,sans-serif;font-size:38px;font-weight:800;letter-spacing:-4px;transform:rotate(-8deg)}.welcome-mark:before,.welcome-mark:after{position:absolute;inset:12px;border:1px solid #a7e5b71a;border-radius:50%;content:""}.welcome-mark:after{inset:-14px;border-color:#a7e5b710}.welcome-mark i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--green)}.welcome-mark i:nth-of-type(1){top:9px;right:30px}.welcome-mark i:nth-of-type(2){bottom:12px;left:25px}.welcome-mark i:nth-of-type(3){right:-7px;bottom:40px}
.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.stat-card{display:flex;align-items:center;gap:15px;min-height:106px;padding:17px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}.stat-icon{display:grid;place-items:center;flex:0 0 39px;height:39px;border-radius:10px;background:#c7b2ff15;color:var(--purple);font-size:18px}.stat-icon.mint{background:#a7e5b715;color:var(--green)}.stat-icon.amber{background:#f2c77f15;color:var(--amber)}.stat-card>div{display:grid;gap:4px}.stat-card small{color:var(--soft);font-size:8px;font-weight:700;letter-spacing:1px}.stat-card strong{font-family:Manrope,sans-serif;font-size:22px;line-height:1.1}.stat-card span:last-child{color:var(--muted);font-size:10px}
.content-section{margin-top:37px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:14px}.section-heading .eyebrow{margin-bottom:5px}.section-heading h2{margin:0;font-family:Manrope,sans-serif;font-size:18px;letter-spacing:-.5px}.text-link{padding:5px;border:0;background:none;color:var(--muted);font-size:10px;cursor:pointer}.text-link:hover{color:var(--green)}.text-link span{margin-left:5px}.app-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.compact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.app-card{position:relative;min-width:0;padding:17px;border:1px solid var(--line);border-radius:9px;background:var(--panel);transition:transform .16s,border-color .16s,background .16s}.app-card:hover{transform:translateY(-2px);border-color:#a7e5b74d;background:var(--panel-hover)}.card-head{display:flex;justify-content:space-between;align-items:flex-start}.app-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid #a7e5b720;border-radius:11px;background:#a7e5b710;color:var(--green);font-family:Manrope,sans-serif;font-size:15px;font-weight:800}.app-icon.ruangnada{background:#e8bc7812;color:var(--amber);border-color:#e8bc7825}.app-icon.hanacaraka{background:#c7b2ff12;color:var(--purple);border-color:#c7b2ff25}.card-tools{display:flex;gap:4px}.mini-button{display:grid;place-items:center;width:28px;height:28px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--soft);font-size:15px;cursor:pointer}.mini-button:hover{border-color:var(--line);color:var(--text)}.mini-button.favorite{color:var(--amber)}.app-card h3{margin:15px 0 6px;font-size:14px;font-weight:600}.app-card p{display:-webkit-box;min-height:32px;margin:0;color:var(--muted);font-size:10px;line-height:1.55;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}.app-tags{display:flex;gap:6px;align-items:center;margin-top:12px}.tag{padding:4px 7px;border:1px solid var(--line);border-radius:5px;color:var(--muted);font-size:8px}.status-tag{display:inline-flex;gap:5px;align-items:center;color:var(--soft);font-size:9px}.status-tag:before{width:5px;height:5px;border-radius:50%;background:#697368;content:""}.status-tag.running{color:var(--green)}.status-tag.running:before{background:var(--green)}.status-tag.unconfigured{color:var(--amber)}.status-tag.unconfigured:before{background:var(--amber)}.card-actions{display:flex;align-items:center;gap:8px;margin-top:15px}.launch-button,.stop-button{min-height:32px;padding:0 12px;border:1px solid var(--green);border-radius:6px;background:var(--green);color:#152019;font-size:10px;font-weight:700;cursor:pointer}.launch-button:hover{background:var(--green-deep);border-color:var(--green-deep)}.launch-button:disabled{border-color:var(--line);background:var(--line);color:var(--soft);cursor:not-allowed}.stop-button{border-color:var(--line);background:transparent;color:var(--muted)}.stop-button:hover{border-color:#e47f76;color:#e47f76}.card-hint{margin-left:auto;color:var(--soft);font-size:8px}.empty-state{grid-column:1/-1;padding:26px;border:1px dashed var(--line);border-radius:8px;color:var(--muted);font-size:11px;text-align:center}.page-intro{margin:5px 0 25px}.page-intro .eyebrow{margin-bottom:10px}.page-intro h1{font-size:30px}.page-intro code,.settings-panel code{padding:2px 5px;border-radius:4px;background:var(--panel);color:var(--green);font-size:10px}.catalog-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 15px}.category-filters{display:flex;flex-wrap:wrap;gap:6px}.category-button,.view-switch button{padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--muted);font-size:9px;cursor:pointer}.category-button.active,.view-switch button.active{border-color:#a7e5b750;background:#a7e5b712;color:var(--green)}.view-switch{display:flex;gap:5px}.view-switch button{width:32px;padding:6px;font-size:14px}.app-grid.list-view{grid-template-columns:1fr}.list-view .app-card{display:grid;grid-template-columns:45px minmax(100px,1fr) minmax(130px,1.7fr) auto;gap:13px;align-items:center;padding:11px 14px}.list-view .card-head{display:contents}.list-view .card-tools{position:absolute;top:9px;right:9px}.list-view .app-card h3{margin:0}.list-view .app-card p{grid-column:3;grid-row:1}.list-view .app-tags{grid-column:2;grid-row:2;margin:0}.list-view .card-actions{grid-column:4;grid-row:1 / span 2;margin:0}
.material-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.material-card,.settings-panel,.about-panel{padding:20px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}.material-card{display:flex;gap:13px;align-items:center}.material-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#c7b2ff12;color:var(--purple);font-size:17px}.material-card h3{margin:0 0 5px;font-size:12px}.material-card p{margin:0;color:var(--muted);font-size:9px}.settings-panel{max-width:760px;padding:0 20px}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:19px 0;border-bottom:1px solid var(--line)}.setting-row:last-child{border-bottom:0}.setting-row>span{display:grid;gap:6px}.setting-row strong{font-size:11px}.setting-row small{max-width:450px;color:var(--muted);font-size:10px;line-height:1.6}.setting-row select{min-width:110px;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--text);font-size:10px}.inline-link{padding:0;border:0;background:transparent;color:var(--green);font-size:10px;text-decoration:none;cursor:pointer}.inline-link:hover{text-decoration:underline}.about-panel{max-width:730px;padding:35px}.about-logo{display:grid;place-items:center;width:60px;height:60px;margin-bottom:28px;border-radius:16px;background:var(--green);color:#18221a;font-family:Manrope,sans-serif;font-size:33px;font-weight:800}.about-panel h1{font-size:30px}.about-panel>p:not(.eyebrow){max-width:560px;color:var(--muted);font-size:12px;line-height:1.8}.about-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}.about-meta span{padding:8px 10px;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:9px}.about-meta strong{margin-left:5px;color:var(--text)}
.main-footer{display:flex;justify-content:space-between;padding:15px 45px;border-top:1px solid var(--line);color:var(--soft);font-size:9px}.details-dialog{width:min(480px,calc(100% - 32px));padding:25px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);box-shadow:var(--shadow)}.details-dialog::backdrop{background:#0009;backdrop-filter:blur(4px)}.dialog-close{float:right;border:0;background:transparent;color:var(--muted);font-size:23px;cursor:pointer}.details-dialog h2{margin:10px 0 8px;font-family:Manrope,sans-serif}.details-dialog p{color:var(--muted);font-size:11px;line-height:1.7}.details-dialog code{overflow-wrap:anywhere;color:var(--green);font-size:10px}.toast{position:fixed;right:25px;bottom:24px;z-index:5;max-width:min(420px,calc(100% - 32px));padding:12px 16px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);box-shadow:var(--shadow);font-size:11px;opacity:0;pointer-events:none;transform:translateY(8px);transition:.2s}.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1100px){.sidebar{width:215px}.main-content{margin-left:215px}.topbar{padding:0 25px}.page-wrap{padding:32px 25px 45px}.app-grid,.compact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.welcome-mark{margin-right:25px}.main-footer{padding-right:25px;padding-left:25px}}
@media(max-width:760px){.sidebar{position:sticky;inset:0 0 auto;width:auto;height:auto;display:block;padding:12px 15px;border-right:0;border-bottom:1px solid var(--line)}.brand{padding:0 2px 12px}.brand-icon{width:31px;height:31px}.navigation{display:flex;gap:4px;overflow-x:auto}.nav-label,.sidebar-bottom{display:none}.nav-item{width:auto;flex:0 0 auto;padding:9px}.nav-item>span{width:auto}.nav-item b{margin-left:0}.main-content{margin-left:0}.topbar{position:static;min-height:60px;padding:0 16px}.topbar-actions{gap:9px}.search-box{width:min(40vw,200px)}.system-status{display:none}.page-wrap{padding:26px 16px 38px}.welcome-row{min-height:0;padding:5px 0 25px}.welcome-row h1{font-size:30px}.welcome-mark{width:86px;height:86px;margin-right:8px;font-size:24px}.welcome-mark:before{inset:8px}.welcome-mark:after{inset:-8px}.stats-grid{gap:8px}.stat-card{min-height:91px;gap:8px;padding:11px}.stat-icon{flex-basis:30px;height:30px;font-size:14px}.stat-card small{font-size:7px;letter-spacing:.5px}.stat-card strong{font-size:18px}.stat-card span:last-child{font-size:8px}.app-grid,.compact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.app-card{padding:12px}.app-card p{font-size:9px}.card-hint{display:none}.material-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.main-footer{padding:13px 16px;font-size:8px}.list-view .app-card{grid-template-columns:38px minmax(80px,1fr) auto}.list-view .app-card p{display:none}.list-view .app-card h3{grid-column:2;grid-row:1}.list-view .app-tags{grid-column:2;grid-row:2}.list-view .card-actions{grid-column:3}.list-view .card-head{grid-column:1}.list-view .card-tools{top:3px;right:3px}}
@media(max-width:470px){.navigation .nav-item{font-size:10px;gap:6px}.topbar .breadcrumb{font-size:10px}.search-box{width:36vw}.search-box kbd{display:none}.settings-button,.theme-button{width:30px;height:30px}.welcome-mark{display:none}.stats-grid{grid-template-columns:1fr}.stat-card{min-height:70px}.stat-card strong{font-size:17px}.stat-card>div{grid-template-columns:1fr auto;align-items:center;width:100%}.stat-card small,.stat-card span:last-child{grid-column:1}.stat-card strong{grid-column:2;grid-row:1 / span 2}.app-grid,.compact-grid,.material-grid{grid-template-columns:1fr}.section-heading h2{font-size:16px}.main-footer span:last-child{display:none}.setting-row{align-items:flex-start;flex-direction:column}.setting-row select{width:100%}}
