:root{
  --gnfc-bg:#f4f6f9;
  --gnfc-card:#fff;
  --gnfc-text:#182230;
  --gnfc-muted:#697386;
  --gnfc-line:#e7eaf0;
  --gnfc-soft:#f8f9fb;
  --gnfc-primary:#ff6b00;
  --gnfc-primary-dark:#e85e00;
  --gnfc-success:#0f8a54;
  --gnfc-danger:#a72b2b;
  --gnfc-sidebar:#151b26;
  --gnfc-sidebar-soft:#202837;
  --gnfc-radius:18px;
  --gnfc-shadow:0 14px 38px rgba(16,24,40,.07)
}
.gnfc-portal-shell,.gnfc-portal-login-wrap{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--gnfc-text);box-sizing:border-box}
.gnfc-portal-shell *,.gnfc-portal-login-wrap *{box-sizing:border-box}
.gnfc-portal-shell{max-width:1580px;min-height:760px;margin:26px auto;display:grid;grid-template-columns:244px minmax(0,1fr);background:var(--gnfc-bg);border:1px solid var(--gnfc-line);border-radius:24px;overflow:hidden;box-shadow:0 24px 70px rgba(15,23,42,.09)}

/* Sidebar aplikasi */
.gnfc-app-sidebar{background:var(--gnfc-sidebar);color:#fff;padding:22px 16px 18px;display:flex;flex-direction:column;min-height:760px}
.gnfc-app-brand{display:flex;align-items:center;gap:11px;padding:0 8px 24px}.gnfc-app-brand-mark{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--gnfc-primary);font-weight:900;font-size:18px}.gnfc-app-brand strong,.gnfc-app-brand small{display:block}.gnfc-app-brand strong{font-size:15px;letter-spacing:-.1px}.gnfc-app-brand small{font-size:12px;color:#9ca7b8;margin-top:2px}
.gnfc-app-menu{display:flex;flex-direction:column;gap:5px}.gnfc-app-menu a{display:flex;align-items:center;gap:11px;min-height:46px;padding:0 12px;color:#aeb8c7;text-decoration:none!important;border-radius:12px;font-size:13px;font-weight:720;transition:.18s ease}.gnfc-app-menu a:hover{color:#fff;background:#1d2532}.gnfc-app-menu a.is-active{color:#fff;background:var(--gnfc-sidebar-soft);box-shadow:inset 3px 0 0 var(--gnfc-primary)}.gnfc-app-menu-icon{width:24px;height:24px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.06);font-size:15px;font-weight:800}
.gnfc-app-sidebar-bottom{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding-top:14px}.gnfc-app-profile{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:12px;color:#fff!important;text-decoration:none!important}.gnfc-app-profile:hover,.gnfc-app-profile.is-active{background:rgba(255,255,255,.06)}.gnfc-app-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#303a4a;font-weight:850}.gnfc-app-profile strong,.gnfc-app-profile small{display:block;max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gnfc-app-profile strong{font-size:12px}.gnfc-app-profile small{font-size:12px;color:#9da8b8;margin-top:2px}.gnfc-app-logout{display:block;padding:10px 8px 0;color:#ffb1a8!important;text-decoration:none!important;font-size:12px;font-weight:700}

/* Workspace */
.gnfc-portal-workspace{min-width:0;display:flex;flex-direction:column}.gnfc-app-topbar{height:70px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 30px;background:#fff;border-bottom:1px solid var(--gnfc-line)}.gnfc-app-topbar>div:first-child{display:flex;flex-direction:column}.gnfc-app-topbar-label{font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:#99a1ae;font-weight:800}.gnfc-app-topbar strong{font-size:17px;margin-top:2px}.gnfc-app-topbar-actions{display:flex;align-items:center;gap:12px}.gnfc-app-help-button{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--gnfc-line);border-radius:10px;color:#4b5565!important;text-decoration:none!important;font-weight:850;background:#fff}.gnfc-app-user-name{font-size:12px;color:#677184;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gnfc-portal-main{padding:30px;min-width:0}.gnfc-assist-banner{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:13px 15px;margin-bottom:18px;background:#fff8e8;border:1px solid #f3d796;border-radius:13px}.gnfc-assist-banner strong,.gnfc-assist-banner span{display:block}.gnfc-assist-banner strong{font-size:12px}.gnfc-assist-banner span{font-size:12px;color:#806125;margin-top:2px}.gnfc-assist-banner a{font-size:12px;font-weight:800;color:#8b5d00!important;text-decoration:none!important;white-space:nowrap}
.gnfc-portal-eyebrow{text-transform:uppercase;letter-spacing:.11em;font-size:12px;font-weight:850;color:var(--gnfc-primary);margin-bottom:7px}.gnfc-portal-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin-bottom:24px}.gnfc-portal-section-head.is-simple{display:block}.gnfc-portal-section-head h1,.gnfc-editor-topbar h1{margin:0 0 7px;font-size:28px;line-height:1.18;letter-spacing:-.55px}.gnfc-portal-section-head p,.gnfc-editor-topbar p{margin:0;color:var(--gnfc-muted);max-width:720px;font-size:13px;line-height:1.65}.gnfc-portal-count{min-width:82px;text-align:center;padding:12px 16px;border-radius:15px;background:#fff;border:1px solid var(--gnfc-line);font-size:25px;font-weight:850;box-shadow:0 6px 18px rgba(15,23,42,.035)}.gnfc-portal-count small{display:block;font-size:12px;font-weight:650;color:var(--gnfc-muted);margin-top:2px}
.gnfc-portal-alert{padding:12px 15px;border-radius:11px;margin-bottom:18px;font-size:12px;font-weight:700}.gnfc-portal-alert.is-success{background:#eaf8f0;color:#0a6a3c;border:1px solid #c4ead5}.gnfc-portal-alert.is-error{background:#fff0f0;color:#9b1c1c;border:1px solid #f5c8c8}

/* Proyek */
.gnfc-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.gnfc-product-card{background:#fff;border:1px solid var(--gnfc-line);border-radius:17px;padding:15px;display:flex;flex-direction:column;min-height:300px;box-shadow:0 7px 22px rgba(16,24,40,.035);transition:.18s ease}.gnfc-product-card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(16,24,40,.07)}.gnfc-product-visual{height:105px;display:grid;place-items:center;background:linear-gradient(145deg,#fafbfc,#f3f5f8);border:1px solid #eef1f5;border-radius:13px;margin-bottom:14px;overflow:hidden}.gnfc-product-visual img{max-height:72px;max-width:74%;object-fit:contain}.gnfc-product-visual span{font-size:34px;color:#c7ced8}.gnfc-product-body{flex:1}.gnfc-product-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}.gnfc-product-meta span{font-size:12px;padding:4px 7px;border-radius:999px;background:#eef2f7;color:#5d6675;font-weight:800}.gnfc-product-meta span.is-customized{background:#e9f7ef;color:#087442}.gnfc-product-body h3{font-size:16px;margin:0 0 5px;line-height:1.35}.gnfc-product-body p{margin:0 0 8px;color:var(--gnfc-muted);font-size:12px}.gnfc-product-body small{color:#9199a6;font-size:12px}.gnfc-product-actions{display:flex;gap:8px;margin-top:15px}
.gnfc-btn{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:0 14px;border-radius:10px;text-decoration:none!important;border:1px solid transparent;font-weight:780;font-size:12px;cursor:pointer;transition:.16s ease}.gnfc-btn.is-primary{background:var(--gnfc-primary);color:#fff!important}.gnfc-btn.is-primary:hover{background:var(--gnfc-primary-dark)}.gnfc-btn.is-secondary{background:#fff;border-color:#d9dee7;color:#344054!important}.gnfc-btn.is-secondary:hover{background:#f8fafc}.gnfc-product-actions .gnfc-btn{flex:1}
.gnfc-portal-empty{background:#fff;border:1px dashed #cad2dd;border-radius:17px;padding:46px 26px;text-align:center}.gnfc-portal-empty-icon{font-size:42px;color:#adb6c4}.gnfc-portal-empty h3{margin:8px 0;font-size:18px}.gnfc-portal-empty p{color:var(--gnfc-muted);font-size:13px;max-width:560px;margin:0 auto 17px}

/* Template */
.gnfc-template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.gnfc-template-card{background:#fff;border:1px solid var(--gnfc-line);border-radius:17px;overflow:hidden;box-shadow:0 7px 22px rgba(16,24,40,.03)}.gnfc-template-preview{height:150px;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;background:#eceff4}.gnfc-template-preview:before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-45px;top:-55px;background:rgba(255,255,255,.45)}.gnfc-template-preview span{position:relative;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.86);font-weight:900;font-size:18px}.gnfc-template-preview small{position:relative;margin-top:9px;font-size:12px;font-weight:800}.gnfc-template-preview.is-general{background:linear-gradient(145deg,#eceff4,#dfe5ec)}.gnfc-template-preview.is-corporate{background:linear-gradient(145deg,#dde7f2,#cbd8e6)}.gnfc-template-preview.is-celebration{background:linear-gradient(145deg,#fff0dd,#ffe1b7)}.gnfc-template-preview.is-memorial{background:linear-gradient(145deg,#e9e6e2,#d9d4ce)}.gnfc-template-preview.is-fun{background:linear-gradient(145deg,#f5e8ff,#e6d6f6)}.gnfc-template-body{padding:16px}.gnfc-template-body h3{margin:0 0 6px;font-size:16px}.gnfc-template-body p{min-height:55px;margin:0 0 14px;color:var(--gnfc-muted);font-size:12px;line-height:1.55}.gnfc-template-body .gnfc-btn{width:100%}

/* Editor */
.gnfc-editor-topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;margin-bottom:22px}.gnfc-back-link{display:inline-block;margin-bottom:9px;color:#677184!important;text-decoration:none!important;font-size:12px;font-weight:760}.gnfc-editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:22px;align-items:start}.gnfc-editor-form{display:flex;flex-direction:column;gap:14px}.gnfc-editor-card{background:#fff;border:1px solid var(--gnfc-line);border-radius:17px;padding:20px}.gnfc-editor-card-head{display:flex;align-items:flex-start;gap:11px;padding-bottom:16px;margin-bottom:17px;border-bottom:1px solid #edf0f4}.gnfc-editor-card-head>span{display:grid;place-items:center;flex:0 0 31px;width:31px;height:31px;border-radius:10px;background:#fff1e7;color:#bd4e00;font-weight:850;font-size:12px}.gnfc-editor-card-head h2{font-size:16px;margin:1px 0 3px}.gnfc-editor-card-head p{margin:0;color:var(--gnfc-muted);font-size:12px}.gnfc-field{margin:0 0 17px}.gnfc-field:last-child{margin-bottom:0}.gnfc-field label{display:block;font-size:12px;font-weight:780;margin-bottom:6px}.gnfc-field input[type=text],.gnfc-field input[type=url],.gnfc-field input[type=file],.gnfc-field textarea,.gnfc-field select{width:100%;border:1px solid #d7dde7;border-radius:10px;background:#fff;padding:10px 11px;font:inherit;font-size:13px;color:#202939;box-shadow:none}.gnfc-field textarea{resize:vertical;line-height:1.55}.gnfc-field input:focus,.gnfc-field textarea:focus,.gnfc-field select:focus{outline:none;border-color:#ff9a55;box-shadow:0 0 0 3px rgba(255,107,0,.08)}.gnfc-field small,.gnfc-field-intro,.gnfc-background-choice-note{display:block;color:#7b8493;font-size:12px;margin-top:6px;line-height:1.5}.gnfc-field.is-readonly input{background:#f5f7fa;color:#687386}.gnfc-upload-pair{display:grid;grid-template-columns:1fr 1.15fr;gap:9px}.gnfc-current-media{display:flex;align-items:center;gap:9px;margin:0 0 9px;padding:8px;border:1px solid #e2e7ee;background:#fafbfc;border-radius:10px}.gnfc-current-media img{width:58px;height:58px;object-fit:cover;border-radius:8px}.gnfc-current-media.is-logo img{object-fit:contain;background:#fff}.gnfc-current-media span{font-size:12px;color:#6b7280}
.gnfc-existing-media{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:9px 0 11px}.gnfc-existing-media-item{position:relative;display:block;border:1px solid #e0e5ec;border-radius:10px;overflow:hidden;background:#f6f8fa;cursor:pointer}.gnfc-existing-media-item img,.gnfc-existing-media-item video{width:100%;aspect-ratio:1/1;display:block;object-fit:cover}.gnfc-media-type{position:absolute;left:5px;top:5px;background:rgba(17,24,39,.78);color:#fff;border-radius:6px;font-size:12px;padding:3px 5px}.gnfc-remove-media{display:block;padding:6px;background:#fff;font-size:12px}.gnfc-remove-media input{vertical-align:middle;margin-right:3px}.gnfc-editor-card.is-actions{display:flex;justify-content:space-between;align-items:center;gap:16px}.gnfc-save-info strong,.gnfc-save-info span{display:block}.gnfc-save-info span{font-size:12px;color:var(--gnfc-muted);margin-top:3px}.gnfc-editor-actions{display:flex;gap:8px}.gnfc-editor-secondary-actions{display:flex;gap:16px;margin:14px 0 4px}.gnfc-editor-secondary-actions form{margin:0}.gnfc-link-button{border:0;background:transparent;color:#5e6878;text-decoration:underline;cursor:pointer;font-size:12px;padding:4px}

/* Preview */
.gnfc-customer-preview{min-width:0}.gnfc-preview-sticky{position:sticky;top:18px;background:#fff;border:1px solid var(--gnfc-line);border-radius:17px;padding:13px;box-shadow:0 10px 28px rgba(15,23,42,.045)}.gnfc-preview-toolbar{display:flex;justify-content:space-between;align-items:center;padding:3px 3px 11px}.gnfc-preview-toolbar strong{font-size:12px}.gnfc-preview-toolbar span{font-size:12px;color:var(--gnfc-muted)}.gnfc-preview-phone{max-width:380px;margin:0 auto;border:7px solid #111827;border-radius:29px;overflow:hidden;background:#fff;box-shadow:0 12px 28px rgba(15,23,42,.16)}.gnfc-preview-stage{position:relative;min-height:680px;background:#fff;overflow:hidden}.gnfc-preview-bg-video,.gnfc-preview-bg-image{position:absolute;z-index:0;left:0;top:0;width:100%;height:auto;min-height:245px}.gnfc-preview-bg-video{object-fit:contain}.gnfc-preview-bg-image{height:295px;background-size:cover;background-position:center}.gnfc-preview-fade{position:absolute;z-index:1;inset:0 0 auto;height:415px;background:linear-gradient(to bottom,rgba(255,255,255,0) 46%,rgba(255,255,255,.6) 65%,#fff 83%);pointer-events:none}.gnfc-preview-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:25px;padding:32px 23px 36px;font-size:12px;line-height:1.55}.gnfc-preview-logo{max-width:120px;max-height:78px;object-fit:contain;margin-top:7px}.gnfc-preview-content h3{font-size:16px;text-align:center;line-height:1.35;margin:0;font-style:italic}.gnfc-preview-content p{margin:0;text-align:justify}.gnfc-preview-content-image{width:74%;aspect-ratio:1/1;border-radius:50%;object-fit:cover}.gnfc-preview-personal-media{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;width:100%}.gnfc-preview-personal-media img,.gnfc-preview-personal-media video{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px}.gnfc-preview-closing{text-align:center;font-weight:780}.gnfc-preview-note{text-align:center;color:#7c8593;font-size:12px;margin:9px 8px 0}

/* Bantuan dan akun */
.gnfc-help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.gnfc-help-item{background:#fff;border:1px solid var(--gnfc-line);border-radius:13px;padding:0 15px}.gnfc-help-item summary{cursor:pointer;padding:15px 0;font-weight:760;font-size:12px}.gnfc-help-item p{margin:0 0 15px;color:var(--gnfc-muted);font-size:12px;line-height:1.6}.gnfc-help-callout{margin-top:16px;background:#fff7ed;border:1px solid #fed7aa;border-radius:13px;padding:16px}.gnfc-help-callout strong{font-size:12px}.gnfc-help-callout p{margin:5px 0 0;color:#7b5a3f;font-size:12px}
.gnfc-account-layout{display:grid;grid-template-columns:minmax(0,640px) minmax(280px,1fr);gap:16px}.gnfc-account-card,.gnfc-support-card{background:#fff;border:1px solid var(--gnfc-line);border-radius:17px;padding:20px}.gnfc-account-profile{display:flex!important;align-items:center;gap:12px;padding:0 0 16px!important;margin-bottom:3px;border-bottom:1px solid #edf0f4}.gnfc-account-avatar{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:#1d2634;color:#fff;font-size:16px;font-weight:850}.gnfc-account-profile strong,.gnfc-account-profile small{display:block}.gnfc-account-profile small{margin-top:3px;color:var(--gnfc-muted);font-size:12px}.gnfc-account-card>div:not(.gnfc-account-profile){display:grid;grid-template-columns:140px 1fr;padding:12px 0;border-bottom:1px solid #edf0f4;font-size:12px}.gnfc-account-card>div span{color:var(--gnfc-muted)}.gnfc-account-card .gnfc-btn{margin-top:16px}.gnfc-support-card{display:flex;align-items:flex-start;gap:13px;background:linear-gradient(145deg,#fff,#fff9f4)}.gnfc-support-icon{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#fff0e6;color:#bb4d00;font-weight:900}.gnfc-support-card h3{margin:1px 0 5px;font-size:15px}.gnfc-support-card p{margin:0 0 13px;color:var(--gnfc-muted);font-size:12px;line-height:1.6}

/* Login */
.gnfc-portal-login-wrap{max-width:470px;margin:60px auto}.gnfc-portal-login-brand{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:14px}.gnfc-portal-login-brand span{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:var(--gnfc-primary);color:#fff;font-weight:900}.gnfc-portal-login-card{background:#fff;border:1px solid #e5e9ef;border-radius:21px;padding:28px;box-shadow:0 20px 50px rgba(15,23,42,.08)}.gnfc-portal-login-card h2{margin:0 0 7px;font-size:25px}.gnfc-portal-login-card>p{color:#6b7280;margin:0 0 20px;font-size:12px;line-height:1.65}.gnfc-portal-login-card label{display:block;font-weight:720;font-size:12px;margin:0 0 5px}.gnfc-portal-login-card input[type=text],.gnfc-portal-login-card input[type=password]{width:100%;padding:11px;border:1px solid #d8dee7;border-radius:10px}.gnfc-portal-login-card .login-remember label{font-weight:500}.gnfc-portal-login-card input[type=submit]{width:100%;padding:11px;border:0;border-radius:10px;background:var(--gnfc-primary);color:#fff;font-weight:800;cursor:pointer}.gnfc-portal-forgot{display:block;text-align:center;margin-top:13px;font-size:12px}
.gnfc-mobile-nav{display:none}

@media(max-width:1180px){.gnfc-product-grid,.gnfc-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gnfc-editor-layout{grid-template-columns:1fr}.gnfc-preview-sticky{position:static}.gnfc-customer-preview{order:2}.gnfc-account-layout{grid-template-columns:1fr}}
@media(max-width:820px){
  .gnfc-portal-shell{margin:0;min-height:100vh;display:block;border:0;border-radius:0;box-shadow:none;background:#f5f6f8}
  .gnfc-app-sidebar{display:none}.gnfc-portal-workspace{min-height:100vh}.gnfc-app-topbar{height:58px;padding:0 16px;position:sticky;top:0;z-index:20}.gnfc-app-topbar-label{display:none}.gnfc-app-topbar strong{font-size:15px}.gnfc-app-user-name{display:none}.gnfc-app-help-button{width:32px;height:32px}
  .gnfc-portal-main{padding:18px 14px 90px}.gnfc-assist-banner{align-items:flex-start}.gnfc-assist-banner a{white-space:normal;text-align:right}.gnfc-portal-section-head,.gnfc-editor-topbar{display:block;margin-bottom:18px}.gnfc-portal-section-head h1,.gnfc-editor-topbar h1{font-size:23px}.gnfc-portal-section-head p,.gnfc-editor-topbar p{font-size:12px}.gnfc-portal-count{display:inline-block;margin-top:13px}.gnfc-product-grid,.gnfc-template-grid,.gnfc-help-grid{grid-template-columns:1fr}.gnfc-product-card{min-height:0;padding:13px}.gnfc-product-visual{height:92px}.gnfc-editor-topbar>.gnfc-btn{margin-top:12px}.gnfc-upload-pair{grid-template-columns:1fr}.gnfc-existing-media{grid-template-columns:repeat(3,1fr)}.gnfc-editor-card{padding:16px;border-radius:15px}.gnfc-editor-card.is-actions{display:block}.gnfc-editor-actions{margin-top:14px}.gnfc-editor-actions .gnfc-btn{flex:1}.gnfc-editor-secondary-actions{flex-direction:column;gap:3px}.gnfc-editor-secondary-actions form{width:100%}.gnfc-preview-phone{max-width:360px}.gnfc-account-card>div:not(.gnfc-account-profile){grid-template-columns:1fr;gap:3px}
  .gnfc-mobile-nav{position:fixed;z-index:1000;left:0;right:0;bottom:0;height:68px;padding:7px 12px calc(7px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,1fr);background:rgba(255,255,255,.97);border-top:1px solid #e5e8ed;box-shadow:0 -7px 24px rgba(15,23,42,.07);backdrop-filter:blur(12px)}.gnfc-mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#8a93a1!important;text-decoration:none!important;border-radius:11px}.gnfc-mobile-nav a span{font-size:18px;line-height:1}.gnfc-mobile-nav a small{font-size:12px;font-weight:720}.gnfc-mobile-nav a.is-active{color:var(--gnfc-primary)!important;background:#fff7f1}
}
@media(max-width:430px){.gnfc-product-actions{flex-direction:row}.gnfc-existing-media{grid-template-columns:repeat(2,1fr)}.gnfc-preview-phone{border-width:5px;border-radius:22px}.gnfc-preview-stage{min-height:640px}.gnfc-portal-login-wrap{margin:20px 10px}.gnfc-portal-login-card{padding:21px}.gnfc-template-preview{height:126px}.gnfc-assist-banner{display:block}.gnfc-assist-banner a{display:inline-block;margin-top:7px}.gnfc-editor-actions{flex-direction:column}.gnfc-editor-actions .gnfc-btn{width:100%} .gnfc-editor-control-panel {padding: 0px 18px !important;}}
/* Tutorial interaktif */
.gnfc-tour-overlay{position:fixed;inset:0;z-index:99990;background:rgba(8,13,22,.56);backdrop-filter:blur(1px)}.gnfc-tour-popover{position:fixed;z-index:100010;background:#fff;border:1px solid #e4e8ee;border-radius:16px;padding:17px;box-shadow:0 22px 65px rgba(0,0,0,.22);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#182230}.gnfc-tour-popover h3{margin:8px 0 7px;font-size:16px}.gnfc-tour-popover p{margin:0;color:#667085;font-size:12px;line-height:1.65}.gnfc-tour-progress{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:#8a93a1;font-weight:750}.gnfc-tour-progress button{border:0;background:transparent;color:#7b8493;text-decoration:underline;cursor:pointer;font-size:12px}.gnfc-tour-actions{display:flex;justify-content:space-between;gap:8px;margin-top:16px}.gnfc-tour-actions button{min-height:37px;padding:0 13px;border-radius:9px;font-size:12px;font-weight:800;cursor:pointer}.gnfc-tour-back{border:1px solid #d9dee7;background:#fff;color:#4b5563}.gnfc-tour-back:disabled{opacity:.35;cursor:default}.gnfc-tour-next{border:1px solid var(--gnfc-primary);background:var(--gnfc-primary);color:#fff}.gnfc-tour-focus{position:relative!important;z-index:100001!important;outline:4px solid rgba(255,107,0,.7)!important;outline-offset:4px!important;border-radius:12px!important;box-shadow:0 0 0 9999px rgba(0,0,0,0)!important}
.gnfc-tour-highlight{display:none;position:fixed;z-index:100000;border:3px solid #ff7a19;border-radius:13px;box-shadow:0 0 0 4px rgba(255,122,25,.18);pointer-events:none;transition:all .2s ease}.gnfc-tour-focus{outline:none!important;box-shadow:none!important}


/* =========================================================
   v1.6.1 — Visual Story Editor
   Mobile: landing-page canvas + bottom editing tabs.
   Desktop: input panel + sticky live preview.
========================================================= */
.gnfc-hidden-action-form{display:none!important}.gnfc-editor-topbar-actions{display:flex;align-items:center;gap:8px}.gnfc-top-save{min-width:86px;border:0;cursor:pointer}.gnfc-mobile-editor-tabs,.gnfc-mobile-sheet-head,.gnfc-description-switch,.gnfc-mobile-restore-actions{display:none}.gnfc-shape-options{display:flex;gap:8px;flex-wrap:wrap}.gnfc-shape-option{position:relative;cursor:pointer}.gnfc-shape-option input{position:absolute;opacity:0;pointer-events:none}.gnfc-shape-option span{display:inline-flex;align-items:center;justify-content:center;min-width:82px;height:37px;padding:0 12px;border:1px solid #d9dee7;border-radius:10px;background:#fff;font-size:12px;font-weight:760;color:#576071}.gnfc-shape-option input:checked+span{border-color:#ff8a3c;background:#fff4ec;color:#b84d05;box-shadow:0 0 0 2px rgba(255,107,0,.08)}
.gnfc-preview-content-image.shape-circle{border-radius:50%}.gnfc-preview-content-image.shape-rounded{border-radius:20px}.gnfc-preview-content-image.shape-square{border-radius:0}

@media(min-width:1024px){
  .gnfc-editor-layout{grid-template-columns:minmax(0,1fr) minmax(340px,410px);align-items:start}
  .gnfc-preview-sticky{position:sticky;top:18px;max-height:calc(100vh - 36px);overflow:auto;overscroll-behavior:contain}
  .gnfc-editor-control-panel{display:block!important}
  .gnfc-description-part{display:block!important}.gnfc-description-switch{display:none!important}
}

@media(max-width:820px){
  .gnfc-portal-shell.is-editor-mode .gnfc-app-topbar{display:none}
  .gnfc-portal-shell.is-editor-mode .gnfc-portal-main{padding:0 0 calc(92px + env(safe-area-inset-bottom));background:#fff}
  .gnfc-portal-shell.is-editor-mode .gnfc-assist-banner,.gnfc-portal-shell.is-editor-mode .gnfc-portal-alert{margin:10px 12px}
  .gnfc-portal-shell.is-editor-mode>.gnfc-mobile-nav{display:none!important}
  .gnfc-editor-appbar{position:sticky;top:0;z-index:1200;display:flex!important;align-items:center!important;justify-content:space-between;gap:10px;margin:0!important;padding:9px 12px;background:rgba(255,255,255,.96);border-bottom:1px solid #e8ebef;backdrop-filter:blur(14px)}
  .gnfc-editor-topbar-copy{min-width:0;display:flex;align-items:center;gap:8px}.gnfc-editor-topbar-copy .gnfc-back-link{width:32px;height:32px;margin:0;display:grid;place-items:center;overflow:hidden;color:transparent!important;font-size:0;border:1px solid #e1e5ea;border-radius:10px;background:#fff}.gnfc-editor-topbar-copy .gnfc-back-link:before{content:'‹';color:#202938;font-size:26px;line-height:1}.gnfc-editor-topbar-copy h1{margin:0!important;font-size:15px!important;white-space:nowrap}.gnfc-editor-topbar-copy p{display:none}.gnfc-editor-topbar-actions{margin:0!important}.gnfc-view-story{display:none!important}.gnfc-top-save{min-width:72px;min-height:35px;padding:0 13px!important;border-radius:9px!important;font-size:12px!important}
  .gnfc-customer-editor{display:block}.gnfc-editor-layout{display:flex!important;flex-direction:column;gap:0!important}.gnfc-customer-preview{order:1;width:100%}.gnfc-editor-form{order:2;display:block;min-height:0}.gnfc-preview-sticky{position:static!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff}.gnfc-preview-toolbar,.gnfc-preview-note{display:none!important}.gnfc-preview-phone{width:100%!important;max-width:none!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;background:#fff}.gnfc-preview-stage{position:relative;min-height:calc(100vh - 54px)!important;overflow:hidden!important;background:#fff}.gnfc-preview-bg-video{display:block;position:absolute;top:0;left:0;width:100%;height:auto;min-height:0;object-fit:contain;object-position:top center;z-index:0;background:#fff}.gnfc-preview-bg-image{position:absolute;top:0;left:0;width:100%;height:max(240px,56vw);min-height:0;background-size:100% auto;background-position:top center;background-repeat:no-repeat;z-index:0}.gnfc-preview-fade{display:block;position:absolute;z-index:1;left:0;top:0;width:100%;height:var(--gnfc-editor-overlay-end,70vh);background:linear-gradient(to bottom,rgba(255,255,255,.42) 0,rgba(255,255,255,.42) var(--gnfc-editor-fade-start,170px),rgba(255,255,255,1) var(--gnfc-editor-fade-end,240px),rgba(255,255,255,1) 100%);pointer-events:none}.gnfc-preview-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:25px;width:100%;max-width:100%;padding:28px 20px 42px;font-size:15px;line-height:1.65}.gnfc-preview-logo{display:block;margin:0 auto!important;max-width:160px;max-height:92px;object-fit:contain}.gnfc-preview-content h3{width:100%;margin:0!important;font-size:20px;line-height:1.45;text-align:center;font-style:normal;font-weight:600;text-transform:capitalize}.gnfc-preview-content p{width:100%;margin:0!important;font-size:15px;line-height:1.65;text-align:justify;color:#333}.gnfc-preview-content-image{flex:0 0 auto;width:180px!important;height:180px!important;aspect-ratio:1/1;object-fit:cover;border:1px solid #ccc;box-sizing:border-box}.gnfc-preview-content-image.shape-circle{border-radius:50%}.gnfc-preview-content-image.shape-rounded{border-radius:20px}.gnfc-preview-content-image.shape-square{border-radius:0}.gnfc-preview-personal-media{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}.gnfc-preview-personal-media img,.gnfc-preview-personal-media video{width:min(100%,300px);aspect-ratio:1/1;object-fit:cover;border-radius:14px}.gnfc-preview-closing{width:100%;font-size:18px;font-style:italic;text-align:center;font-weight:500}
  .gnfc-editor-card{display:contents!important}.gnfc-editor-card-head,.gnfc-desktop-only-field,.gnfc-desktop-editor-actions{display:none!important}.gnfc-editor-secondary-actions{display:none!important}
  .gnfc-editor-control-panel{display:none;position:fixed;z-index:1450;left:0;right:0;bottom:calc(74px + env(safe-area-inset-bottom));max-height:min(48vh,440px);overflow:auto;padding:0 16px 18px;background:#fff;border-top:1px solid #e4e8ee;border-radius:18px 18px 0 0;box-shadow:0 -18px 48px rgba(15,23,42,.15);overscroll-behavior:contain}.gnfc-editor-control-panel.is-mobile-active{display:block}.gnfc-mobile-sheet-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;margin:0 -16px 14px;padding:12px 16px 9px;background:rgba(255,255,255,.97);border-bottom:1px solid #eef0f3;backdrop-filter:blur(10px)}.gnfc-mobile-sheet-head:before{content:'';position:absolute;top:5px;left:50%;width:34px;height:4px;transform:translateX(-50%);border-radius:99px;background:#d8dde4}.gnfc-mobile-sheet-head strong{padding-top:5px;font-size:13px}.gnfc-mobile-sheet-head button{width:30px;height:40px;border:0;border-radius:9px;background:#f1f3f5;color:#4b5563;font-size:20px;line-height:0;padding-right: 34px;cursor:pointer}.gnfc-editor-control-panel .gnfc-field{margin-bottom:14px}.gnfc-editor-control-panel .gnfc-field label{font-size:12px}.gnfc-editor-control-panel input[type=text],.gnfc-editor-control-panel input[type=url],.gnfc-editor-control-panel input[type=file],.gnfc-editor-control-panel textarea,.gnfc-editor-control-panel select{font-size:14px!important;padding:11px!important;border-radius:11px!important}.gnfc-upload-pair{grid-template-columns:1fr!important}.gnfc-current-media{background:#f8f9fb}.gnfc-existing-media{grid-template-columns:repeat(3,1fr)!important}
  .gnfc-description-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px;padding:4px;background:#f2f4f6;border-radius:10px}.gnfc-description-switch button{height:34px;border:0;border-radius:8px;background:transparent;color:#697386;font-size:12px;font-weight:760;cursor:pointer}.gnfc-description-switch button.is-active{background:#fff;color:#1f2937;box-shadow:0 2px 7px rgba(15,23,42,.08)}.gnfc-description-part{display:none}.gnfc-description-part.is-active{display:block}.gnfc-mobile-restore-actions{display:flex;flex-wrap:wrap;gap:10px;padding-top:4px;border-top:1px solid #edf0f4}.gnfc-mobile-restore-actions .gnfc-link-button{padding:8px 0;font-size:12px}
  .gnfc-mobile-editor-tabs{position:fixed;z-index:1500;left:0;right:0;bottom:0;display:flex;align-items:stretch;gap:2px;height:calc(74px + env(safe-area-inset-bottom));padding:6px 6px calc(6px + env(safe-area-inset-bottom));overflow-x:auto;overflow-y:hidden;background:rgba(255,255,255,.98);border-top:1px solid #e2e6eb;box-shadow:0 -8px 26px rgba(15,23,42,.08);backdrop-filter:blur(14px);scrollbar-width:none}.gnfc-mobile-editor-tabs::-webkit-scrollbar{display:none}.gnfc-mobile-editor-tabs button{flex:0 0 82px;min-width:82px;border:0;border-radius:10px;background:transparent;color:#7b8492;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 5px;cursor:pointer}.gnfc-mobile-editor-tabs button span{height:23px;min-width:23px;display:grid;place-items:center;font-size:17px;font-weight:700;line-height:1}.gnfc-mobile-editor-tabs button small{font-size:12px;line-height:1.2;font-weight:720;white-space:nowrap}.gnfc-mobile-editor-tabs button.is-active{background:#fff;color:#ff6e00}.gnfc-editor-sheet-open body{overflow:hidden}
}
@media(max-width:430px){.gnfc-existing-media{grid-template-columns:repeat(2,1fr)!important}.gnfc-preview-content{padding-left:20px;padding-right:20px}.gnfc-mobile-editor-tabs button{flex-basis:78px;min-width:78px}}


/* =========================================================
   v1.6.1 — Desktop viewport editor & fixed mobile preview
   - dashboard mengikuti tinggi viewport (dibatasi 940px)
   - hanya panel input yang scroll di mode editor desktop
   - preview tidak mempunyai scrollbar sendiri
   - preview desktop memakai komposisi mobile + fade dinamis
========================================================= */
@media (min-width:821px){
  .gnfc-portal-shell{
    height:var(--gnfc-shell-height,min(940px,calc(100dvh - 32px)));
    min-height:0;
    margin:16px auto;
  }
  .gnfc-app-sidebar{
    min-height:0;
    height:100%;
    overflow:hidden;
  }
  .gnfc-portal-workspace{
    min-height:0;
    height:100%;
    overflow:hidden;
  }
  .gnfc-portal-main{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
  }

  .gnfc-portal-shell.is-editor-mode .gnfc-portal-main{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding-bottom:20px;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-appbar,
  .gnfc-portal-shell.is-editor-mode .gnfc-assist-banner,
  .gnfc-portal-shell.is-editor-mode .gnfc-portal-alert,
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-secondary-actions{
    flex:0 0 auto;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-customer-editor{
    flex:1 1 auto;
    min-height:0;
    height:100%;
    display:flex;
    flex-direction:column;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-layout{
    flex:1 1 auto;
    min-height:0;
    height:100%;
    overflow:hidden;
    align-items:stretch;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-form{
    min-height:0;
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    padding-right:8px;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-customer-preview{
    min-height:0;
    height:100%;
    overflow:hidden;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-sticky{
    position:sticky;
    top:0;
    height:100%;
    max-height:none;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-toolbar,
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-note{
    flex:0 0 auto;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-phone{
    flex:0 0 auto;
    width:min(100%,380px);
    height:min(720px,calc(100dvh - 210px));
    max-height:720px;
    min-height:360px;
    margin:0 auto;
    overflow:hidden;
  }

  /* Komposisi preview desktop mengikuti landing page mobile asli. */
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-stage{
    position:relative;
    width:100%;
    min-height:0;
    height:auto;
    overflow:hidden;
    background:#fff;
    transform-origin:top left;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-bg-video{
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:auto;
    min-height:0;
    object-fit:contain;
    object-position:top center;
    z-index:0;
    background:#fff;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-bg-image{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:240px;
    min-height:0;
    background-size:100% auto;
    background-position:top center;
    background-repeat:no-repeat;
    z-index:0;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-fade{
    display:block;
    position:absolute;
    z-index:1;
    left:0;
    top:0;
    width:100%;
    height:var(--gnfc-editor-overlay-end,420px);
    background:linear-gradient(
      to bottom,
      rgba(255,255,255,.42) 0,
      rgba(255,255,255,.42) var(--gnfc-editor-fade-start,170px),
      rgba(255,255,255,1) var(--gnfc-editor-fade-end,240px),
      rgba(255,255,255,1) 100%
    );
    pointer-events:none;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-content{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:25px;
    width:100%;
    max-width:100%;
    padding:28px 20px 42px;
    font-size:15px;
    line-height:1.65;
    height: 550px !important;
    overflow-y: scroll;    
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-logo{
    display:block;
    margin:0 auto!important;
    max-width:160px;
    max-height:92px;
    object-fit:contain;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-content h3{
    width:100%;
    margin:0!important;
    font-size:20px;
    line-height:1.45;
    text-align:center;
    font-style:normal;
    font-weight:600;
    text-transform:capitalize;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-content p{
    width:100%;
    margin:0!important;
    font-size:15px;
    line-height:1.65;
    text-align:justify;
    color:#333;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-content-image{
    flex:0 0 auto;
    width:180px!important;
    height:180px!important;
    aspect-ratio:1/1;
    object-fit:cover;
    border:1px solid #ccc;
    box-sizing:border-box;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-personal-media{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    width:100%;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-personal-media img,
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-personal-media video{
    width:min(100%,300px);
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:14px;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-closing{
    width:100%;
    font-size:18px;
    font-style:italic;
    text-align:center;
    font-weight:500;
  }
}

/* Pada desktop sempit tetap 2 kolom selama masih masuk mode desktop. */
@media (min-width:1000px) and (max-width:1180px){
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(300px,350px);
    gap:16px;
  }
}


/* =========================================================
   v1.6.2 — Desktop customer editor refinements
   - preview shows full mobile page in one frame
   - preview card focuses only on preview
   - topbar carries "Lihat Cerita"
   - editor panels look cleaner and more app-like
   - mobile appbar remains sticky and bottom tabs larger
========================================================= */
.gnfc-app-preview-button{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 12px;border:1px solid var(--gnfc-line);border-radius:10px;background:#fff;color:#394150!important;text-decoration:none!important;font-size:12px;font-weight:760;white-space:nowrap}.gnfc-app-preview-button:hover{background:#f8fafc}
.gnfc-optional{display:inline-flex;align-items:center;justify-content:center;margin-left:7px;padding:1px 7px;border-radius:999px;background:#eef2f7;color:#667085;font-size:12px;font-weight:700;vertical-align:middle}
.gnfc-label-with-help{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.gnfc-help-tip{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#eef2f6;color:#536173;font-size:12px;font-weight:800;cursor:help;outline:none}.gnfc-help-tip-box{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);min-width:220px;max-width:280px;padding:10px 12px;border-radius:12px;background:#101828;color:#fff;font-size:12px;font-weight:500;line-height:1.55;box-shadow:0 14px 34px rgba(15,23,42,.22);opacity:0;visibility:hidden;pointer-events:none;z-index:35}.gnfc-help-tip-box:before{content:'';position:absolute;left:50%;top:-5px;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:#101828}.gnfc-help-tip:hover .gnfc-help-tip-box,.gnfc-help-tip:focus .gnfc-help-tip-box{opacity:1;visibility:visible}
.gnfc-editor-topbar{align-items:flex-start;margin-bottom:16px}.gnfc-editor-topbar-copy p{margin-top:2px}
.gnfc-editor-form{gap:16px}.gnfc-editor-card{padding:0;background:transparent;border:0;box-shadow:none}.gnfc-editor-card-head{padding:0 0 12px;margin-bottom:12px}
.gnfc-editor-control-panel{background:#fff;border:1px solid #e7ebf1;border-radius:18px;padding:10px 18px;margin-bottom: 10px;box-shadow:0 8px 22px rgba(15,23,42,.04)}
.gnfc-editor-control-panel .gnfc-field label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:12px;font-weight:780;color:#344054}.gnfc-editor-control-panel input[type=text],.gnfc-editor-control-panel input[type=url],.gnfc-editor-control-panel input[type=file],.gnfc-editor-control-panel textarea,.gnfc-editor-control-panel select{width:100%;padding:13px 14px;border:1px solid #d8dee8;border-radius:14px;background:#fbfcfe;box-shadow:inset 0 1px 0 rgba(255,255,255,.55);font-size:13px;color:#1f2937;transition:border-color .16s ease, box-shadow .16s ease, background .16s ease}.gnfc-editor-control-panel textarea{min-height:110px;resize:vertical}.gnfc-editor-control-panel input:focus,.gnfc-editor-control-panel textarea:focus,.gnfc-editor-control-panel select:focus{outline:none;border-color:#ff9a57;background:#fff;box-shadow:0 0 0 3px rgba(255,107,0,.12)}
.gnfc-editor-control-panel small,.gnfc-editor-control-panel .gnfc-field-intro,.gnfc-background-choice-note{font-size:12px;line-height:1.6;color:#7a8596}
.gnfc-upload-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gnfc-current-media,.gnfc-existing-media-item{border-radius:14px}.gnfc-current-media{padding:10px;background:#f8fafc}.gnfc-existing-media{gap:10px}.gnfc-existing-media-item{padding:9px;background:#fafbfc;border:1px solid #eef1f5}.gnfc-existing-media-item .gnfc-remove-media{font-size:12px;color:#667085}
.gnfc-save-info{padding:15px 16px;border:1px solid #ffe0ca;background:#fff7f1;border-radius:16px}.gnfc-save-info strong,.gnfc-save-info span{display:block}.gnfc-save-info strong{font-size:12px}.gnfc-save-info span{margin-top:4px;font-size:12px;color:#7d5a3d}
.gnfc-editor-actions{margin-top:12px}
.gnfc-customer-preview{min-width:0;align-self:start}.gnfc-preview-sticky{position:sticky;top:0;padding:0;border:0;background:transparent;box-shadow:none}.gnfc-preview-toolbar,.gnfc-preview-note{display:none}.gnfc-preview-phone{width:min(100%,375px);height:min(760px,calc(var(--gnfc-shell-height,940px) - 160px));max-height:760px;min-height:420px;margin:0 auto;border:8px solid #111827;border-radius:32px;overflow:hidden;background:#fff;box-shadow:0 18px 40px rgba(15,23,42,.17);display:flex;align-items:flex-start;justify-content:center}.gnfc-preview-stage{position:relative;min-height:680px;background:#fff;overflow:hidden;transform-origin:top center}.gnfc-preview-content{padding:28px 20px 42px}.gnfc-preview-content h3{font-style:normal;font-weight:600;text-transform:capitalize}
@media (min-width:821px){
  .gnfc-app-topbar{padding:10px 24px}.gnfc-portal-main{padding:22px 24px 20px}
  .gnfc-portal-shell.is-editor-mode .gnfc-portal-main{overflow:hidden}
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-appbar{margin-bottom:10px}
  .gnfc-portal-shell.is-editor-mode .gnfc-top-save{display:none}
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-layout{grid-template-columns:minmax(0,1fr) 390px;gap:18px;align-items:start;height:100%}
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-form{height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding-right:10px;padding-bottom:8px}
  .gnfc-portal-shell.is-editor-mode .gnfc-customer-preview{height:100%;display:flex;align-items:flex-start;justify-content:center}
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-sticky{top:0;height:100%;display:flex;align-items:flex-start;justify-content:center}
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-phone{height:min(760px,calc(var(--gnfc-shell-height,940px) - 128px));min-height:420px;max-height:760px;margin-top:0}
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-stage{width:100%}
}
@media(max-width:820px){
  .gnfc-editor-appbar{top:0;z-index:1300;padding:10px 14px}.gnfc-editor-topbar-copy h1{font-size:16px!important}.gnfc-top-save{min-width:78px;min-height:37px;font-size:12px!important}
  .gnfc-mobile-editor-tabs button{flex-basis:92px;min-width:92px;padding:6px 6px}.gnfc-mobile-editor-tabs button span{height:24px;min-width:24px;font-size:18px}.gnfc-mobile-editor-tabs button small{font-size:12px;font-weight:760}
  .gnfc-editor-control-panel .gnfc-field label{font-size:13px}.gnfc-label-with-help{justify-content:flex-start}
}
@media(max-width:430px){.gnfc-mobile-editor-tabs button{flex-basis:88px;min-width:88px}}


/* v1.6.3 — preview sizing, tooltip safety, spacing cleanup */
.gnfc-editor-control-panel .gnfc-field{margin-bottom:18px}.gnfc-editor-control-panel .gnfc-field:last-child{margin-bottom:0}.gnfc-editor-control-panel{gap:0}.gnfc-editor-card-head{margin-bottom:14px}.gnfc-help-tip-box{left:auto;right:0;transform:none;min-width:230px;max-width:300px;white-space:normal}.gnfc-help-tip-box:before{left:auto;right:8px;transform:rotate(45deg)}
@media (min-width:821px){
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-layout{grid-template-columns:minmax(0,1fr) 430px;gap:20px}
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-phone{width:min(100%,390px);height:min(840px,calc(var(--gnfc-shell-height,940px) - 96px));max-height:840px;min-height:480px}
  .gnfc-portal-shell.is-editor-mode .gnfc-customer-preview{padding-top:4px}
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-sticky{justify-content:flex-start}
}


/* =========================================================
   v1.6.4 — Desktop phone preview behaves like a real phone
   - use the empty upper-right workspace for preview
   - no auto-shrinking/cropping of long landing pages
   - content scrolls inside the phone frame
========================================================= */
@media (min-width:821px){
  .gnfc-portal-shell.is-editor-mode .gnfc-portal-main{
    position:relative;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-appbar{
    width:calc(100% - 450px);
    max-width:calc(100% - 450px);
    padding:20px;
    margin-bottom:14px;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-layout{
    grid-template-columns:minmax(0,1fr) 430px;
    gap:20px;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-form{
    grid-column:1;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-customer-preview{
    position:absolute;
    top:18px;
    right:24px;
    bottom:18px;
    width:430px;
    height:auto;
    min-height:0;
    overflow:visible;
    padding:0;
    z-index:6;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-sticky{
    position:static;
    width:100%;
    height:100%;
    min-height:0;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    overflow:visible;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-phone{
    width:min(100%,390px);
    height:100%;
    max-height:none;
    min-height:0;
    margin:0 auto;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-width:none;
    -ms-overflow-style:none;
    align-items:flex-start;
    justify-content:flex-start;
    background:#fff;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-phone::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-stage{
    flex:0 0 auto;
    width:100%!important;
    min-height:100%;
    height:auto!important;
    overflow:visible!important;
    transform:none!important;
    transform-origin:top center!important;
  }
}
@media (min-width:821px) and (max-width:1100px){
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-appbar{
    width:calc(100% - 370px);
    max-width:calc(100% - 370px);
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-layout{
    grid-template-columns:minmax(0,1fr) 350px;
    gap:16px;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-customer-preview{
    width:350px;
    right:18px;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-phone{
    width:min(100%,330px);
  }
}


/* =========================================================
   v1.7.0 — Mobile visual editor refinement
   Baseline: user's 30 Sep 2026 custom CSS.
   - preview is the scrollable canvas
   - dark editor sheet for strong contrast
   - sheet reduces visible preview viewport instead of hiding it
   - active preview element gets focus outline/badge
========================================================= */
@media(max-width:820px){
  .gnfc-portal-shell.is-editor-mode{
    height:100dvh;
    min-height:100dvh;
    overflow:hidden;
    background:#fff;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-portal-workspace{
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-portal-main{
    height:100dvh;
    min-height:0;
    padding:0!important;
    overflow:hidden!important;
    display:flex;
    flex-direction:column;
    background:#fff;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-appbar{
    position:relative!important;
    top:auto!important;
    flex:0 0 auto;
    z-index:1550;
    background:rgba(255,255,255,.98);
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-assist-banner,
  .gnfc-portal-shell.is-editor-mode .gnfc-portal-alert{
    flex:0 0 auto;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-customer-editor{
    flex:1 1 auto;
    min-height:0;
    height:auto;
    overflow:hidden;
    display:block;
    position:relative;
    --gnfc-mobile-sheet-height:0px;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-layout{
    height:100%;
    min-height:0;
    overflow:hidden;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-customer-preview,
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-sticky{
    height:100%;
    min-height:0;
    overflow:hidden;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-phone{
    width:100%!important;
    max-width:none!important;
    height:calc(100% - 74px - env(safe-area-inset-bottom) - var(--gnfc-mobile-sheet-height,0px))!important;
    min-height:170px!important;
    max-height:none!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    background:#fff;
    transition:height .24s ease;
    scroll-behavior:smooth;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-phone::-webkit-scrollbar{display:none;width:0;height:0}
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-stage{
    width:100%!important;
    min-height:100%!important;
    height:auto!important;
    overflow:visible!important;
    transform:none!important;
    background:#fff;
  }

  /* Dark editing sheet: clearly separated from the white landing page. */
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-control-panel{
    display:none;
    position:fixed;
    z-index:1450;
    left:0;
    right:0;
    bottom:calc(74px + env(safe-area-inset-bottom));
    max-height:min(46dvh,430px);
    overflow:auto;
    overscroll-behavior:contain;
    padding:0 18px 18px!important;
    margin:0!important;
    background:#171c25!important;
    border:1px solid #2a3240!important;
    border-bottom:0!important;
    border-radius:20px 20px 0 0!important;
    box-shadow:0 -20px 48px rgba(8,12,18,.36)!important;
    color:#f8fafc;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-control-panel.is-mobile-active{display:block}
  .gnfc-portal-shell.is-editor-mode .gnfc-mobile-sheet-head{
    position:sticky;
    top:0;
    z-index:4;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0 -18px 16px;
    padding:17px 18px 11px;
    background:rgba(23,28,37,.98)!important;
    border-bottom:1px solid #2a3240!important;
    backdrop-filter:blur(12px);
    color:#fff;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-mobile-sheet-head:before{background:#596273!important}
  .gnfc-portal-shell.is-editor-mode .gnfc-mobile-sheet-head strong{font-size:14px;color:#fff}
  .gnfc-portal-shell.is-editor-mode .gnfc-mobile-sheet-head button{
    width:32px!important;
    height:32px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid #374151!important;
    border-radius:9px!important;
    background:#252c38!important;
    color:#dbe2ea!important;
    line-height:1!important;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-control-panel .gnfc-field{margin-bottom:18px}
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-control-panel .gnfc-field label,
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-control-panel .gnfc-label-with-help{color:#f5f7fa!important;font-size:13px!important}
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-control-panel small,
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-control-panel .gnfc-field-intro,
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-control-panel .gnfc-background-choice-note{color:#9ca7b7!important}
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-control-panel input[type=text],
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-control-panel input[type=url],
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-control-panel input[type=file],
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-control-panel textarea,
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-control-panel select{
    background:#222936!important;
    border-color:#394354!important;
    color:#f8fafc!important;
    box-shadow:none!important;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-control-panel input::placeholder,
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-control-panel textarea::placeholder{color:#788396!important}
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-control-panel input:focus,
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-control-panel textarea:focus,
  .gnfc-portal-shell.is-editor-mode .gnfc-editor-control-panel select:focus{
    border-color:#ff8a3c!important;
    box-shadow:0 0 0 3px rgba(255,107,0,.18)!important;
    background:#252d3a!important;
  }
  .gnfc-portal-shell.is-editor-mode .gnfc-current-media,
  .gnfc-portal-shell.is-editor-mode .gnfc-existing-media-item{background:#202733!important;border-color:#343d4c!important;color:#d8dee7!important}
  .gnfc-portal-shell.is-editor-mode .gnfc-media-type,
  .gnfc-portal-shell.is-editor-mode .gnfc-remove-media{color:#b8c1cf!important}
  .gnfc-portal-shell.is-editor-mode .gnfc-shape-option span{background:#222936!important;border-color:#3c4656!important;color:#cbd3df!important}
  .gnfc-portal-shell.is-editor-mode .gnfc-shape-option input:checked+span{background:#3b2518!important;border-color:#ff8a3c!important;color:#ffb47e!important}
  .gnfc-portal-shell.is-editor-mode .gnfc-description-switch{background:#222936!important}
  .gnfc-portal-shell.is-editor-mode .gnfc-description-switch button{color:#9da8b8!important}
  .gnfc-portal-shell.is-editor-mode .gnfc-description-switch button.is-active{background:#343d4b!important;color:#fff!important;box-shadow:none!important}
  .gnfc-portal-shell.is-editor-mode .gnfc-mobile-restore-actions{border-top-color:#303846!important}
  .gnfc-portal-shell.is-editor-mode .gnfc-mobile-restore-actions .gnfc-link-button{color:#ffb17b!important}

  /* Active item in preview. */
  .gnfc-preview-edit-focus{
    position:relative!important;
    z-index:8!important;
    outline:2px solid #ff6b00!important;
    outline-offset:6px!important;
    box-shadow:0 0 0 5px rgba(255,107,0,.12)!important;
    animation:gnfcEditorFocusPulse .55s ease-out 1;
  }
  .gnfc-preview-stage.gnfc-preview-edit-focus{
    outline:none!important;
    box-shadow:inset 0 0 0 3px #ff6b00!important;
    border-radius:0!important;
  }
  .gnfc-preview-focus-badge{
    position:absolute;
    z-index:15;
    display:inline-flex;
    align-items:center;
    min-height:24px;
    max-width:180px;
    padding:4px 9px;
    border-radius:999px;
    background:#ff6b00;
    color:#fff;
    font-size:12px;
    line-height:1.2;
    font-weight:800;
    box-shadow:0 5px 15px rgba(255,107,0,.25);
    pointer-events:none;
    white-space:nowrap;
  }
  @keyframes gnfcEditorFocusPulse{
    0%{box-shadow:0 0 0 0 rgba(255,107,0,.42)}
    100%{box-shadow:0 0 0 8px rgba(255,107,0,0)}
  }

  /* Dirty status beside mobile save button. */
  .gnfc-mobile-save-state{font-size:12px;font-weight:700;color:#8a93a1;white-space:nowrap}
  .gnfc-mobile-save-state.is-dirty{color:#d85f0b}
  .gnfc-mobile-save-state.is-saved{color:#168353}

  /* When a sheet is open, prevent the page itself from moving. */
  html.gnfc-editor-sheet-open,
  html.gnfc-editor-sheet-open body{overflow:hidden!important;overscroll-behavior:none}
}


/* v1.7.1 — shape preview fix: focus/highlight must never override selected image shape */
.gnfc-portal-shell.is-editor-mode .gnfc-preview-content-image.shape-circle{border-radius:50%!important}
.gnfc-portal-shell.is-editor-mode .gnfc-preview-content-image.shape-rounded{border-radius:20px!important}
.gnfc-portal-shell.is-editor-mode .gnfc-preview-content-image.shape-square{border-radius:0!important}

/* =========================================================
   v1.8.0 — Project browser, template flow & editor sync
========================================================= */
.gnfc-portal-shell,.gnfc-portal-login-wrap{font-family:Roboto,Arial,sans-serif}
.gnfc-portal-shell h1,.gnfc-portal-shell h2,.gnfc-portal-shell h3,.gnfc-portal-shell .gnfc-app-brand strong,.gnfc-portal-shell .gnfc-app-topbar strong,.gnfc-portal-shell .gnfc-editor-card-head h2,.gnfc-portal-shell .gnfc-product-body h3,.gnfc-portal-shell .gnfc-template-body h3,.gnfc-portal-login-wrap h2{font-family:Montserrat,Arial,sans-serif}
.gnfc-preview-content h3{font-family:Montserrat,Arial,sans-serif!important}.gnfc-preview-content p,.gnfc-preview-closing{font-family:Roboto,Arial,sans-serif!important}

/* Project heading + search/view controls */
.gnfc-projects-head{display:grid;grid-template-columns:minmax(240px,1fr) minmax(340px,520px) auto;align-items:center;gap:18px}
.gnfc-projects-heading-copy{min-width:0}.gnfc-project-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.gnfc-project-search{height:40px;min-width:0;flex:1;display:flex!important;align-items:center;gap:8px;padding:0 11px;border:1px solid #dce2ea;border-radius:12px;background:#fff;box-shadow:0 3px 12px rgba(15,23,42,.025)}
.gnfc-project-search svg{width:17px;height:17px;fill:#7a8595;flex:0 0 auto}.gnfc-project-search input{width:100%;min-width:0!important;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;font-size:12px!important;color:#273142!important}
.gnfc-project-search input::placeholder{color:#9aa3af}
.gnfc-project-view-switch{display:flex;gap:4px;padding:3px;border:1px solid #e0e5ec;border-radius:11px;background:#fff}
.gnfc-project-view-switch button,.gnfc-project-help{width:34px;height:34px;padding:0;border:0;border-radius:8px;background:transparent;display:grid;place-items:center;color:#7b8594;cursor:pointer;text-decoration:none!important}
.gnfc-project-view-switch button svg{width:17px;height:17px;fill:currentColor}.gnfc-project-view-switch button.is-active{background:#fff1e7;color:#d75d0b}.gnfc-project-help{border:1px solid #e0e5ec;background:#fff;font-weight:850;color:#596579!important}
.gnfc-project-help:hover{background:#f8fafc}
.gnfc-template-selection-banner{display:flex;align-items:center;gap:12px;margin:-8px 0 18px;padding:13px 15px;background:#fff8ef;border:1px solid #ffd8bb;border-radius:14px}.gnfc-template-selection-dot{width:10px;height:10px;border-radius:50%;background:var(--gnfc-primary);box-shadow:0 0 0 5px rgba(255,107,0,.1);flex:0 0 auto}.gnfc-template-selection-banner>div{flex:1;min-width:0}.gnfc-template-selection-banner strong,.gnfc-template-selection-banner small{display:block}.gnfc-template-selection-banner strong{font-size:12px}.gnfc-template-selection-banner small{margin-top:3px;font-size:12px;color:#8a603e;line-height:1.5}.gnfc-template-selection-banner a{font-size:12px;font-weight:800;color:#bc5108!important;text-decoration:none!important;white-space:nowrap}
.gnfc-project-empty-search{padding:34px 18px;text-align:center;background:#fff;border:1px dashed #d5dce5;border-radius:16px;color:#5f6978}.gnfc-project-empty-search strong,.gnfc-project-empty-search span{display:block}.gnfc-project-empty-search strong{font-family:Montserrat,Arial,sans-serif;font-size:15px}.gnfc-project-empty-search span{margin-top:5px;font-size:12px;color:#8b94a2}

/* Project list view */
.gnfc-product-grid.is-list{display:flex;flex-direction:column;gap:10px}
.gnfc-product-grid.is-list .gnfc-product-card{display:grid;grid-template-columns:106px minmax(0,1fr) 156px;align-items:center;gap:16px;min-height:0;padding:12px 14px;transform:none!important}
.gnfc-product-grid.is-list .gnfc-product-visual{width:96px;height:96px;margin:0;border-radius:14px;overflow:hidden;background:#f7f9fb}
.gnfc-product-grid.is-list .gnfc-product-visual img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.gnfc-product-grid.is-list .gnfc-product-body{min-width:0}.gnfc-product-grid.is-list .gnfc-product-body h3{margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gnfc-product-grid.is-list .gnfc-product-body p{margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gnfc-product-grid.is-list .gnfc-product-actions{margin:0;display:flex;flex-direction:column;gap:7px}.gnfc-product-grid.is-list .gnfc-product-actions .gnfc-btn{width:100%;min-height:36px}

/* Template apply notice inside editor */
.gnfc-template-preset-notice{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px;padding:12px 14px;background:#fff8ef;border:1px solid #ffd7ba;border-radius:14px}.gnfc-template-preset-notice>div{min-width:0}.gnfc-template-preset-notice strong,.gnfc-template-preset-notice span{display:block}.gnfc-template-preset-notice strong{font-family:Montserrat,Arial,sans-serif;font-size:12px}.gnfc-template-preset-notice span{margin-top:3px;font-size:12px;line-height:1.5;color:#825b3f}.gnfc-template-preset-notice button{border:1px solid #ffc69d;background:#fff;color:#b74d05;border-radius:9px;padding:8px 10px;font-size:12px;font-weight:780;cursor:pointer;white-space:nowrap}

/* Help spacing */
.gnfc-help-callout p{margin:6px 0 15px!important}.gnfc-help-callout .gnfc-btn{margin-top:2px}

/* Preview focus on both desktop and mobile. Never override media shape. */
.gnfc-portal-shell.is-editor-mode .gnfc-preview-edit-focus{position:relative!important;z-index:8!important;outline:2px solid #ff6b00!important;outline-offset:6px!important;box-shadow:0 0 0 5px rgba(255,107,0,.12)!important;animation:gnfcEditorFocusPulse .55s ease-out 1}
.gnfc-portal-shell.is-editor-mode .gnfc-preview-stage.gnfc-preview-edit-focus{outline:none!important;box-shadow:inset 0 0 0 3px #ff6b00!important}
.gnfc-portal-shell.is-editor-mode .gnfc-preview-content strong[data-gnfc-preview-target="institution"].gnfc-preview-edit-focus{display:inline!important;outline:2px solid #ff6b00!important;outline-offset:3px!important;box-shadow:0 0 0 3px rgba(255,107,0,.10)!important;border-radius:4px}
.gnfc-portal-shell.is-editor-mode .gnfc-preview-content-image.shape-circle{border-radius:50%!important}.gnfc-portal-shell.is-editor-mode .gnfc-preview-content-image.shape-rounded{border-radius:20px!important}.gnfc-portal-shell.is-editor-mode .gnfc-preview-content-image.shape-square{border-radius:0!important}
.gnfc-portal-shell.is-editor-mode .gnfc-preview-phone [data-gnfc-preview-target]{cursor:pointer}

/* Mobile "there is more below" cue inside Foto & Tampilan */
.gnfc-mobile-scroll-instruction{display:none}
.gnfc-mobile-user-icon svg{width:20px;height:20px;fill:currentColor;display:block}

@media(max-width:820px){
  /* Requested compact mobile project header: Proyek | search | grid/list | help */
  .gnfc-projects-head{display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;margin-bottom:14px!important}
  .gnfc-projects-heading-copy{display:block}.gnfc-projects-heading-copy .gnfc-portal-eyebrow,.gnfc-projects-heading-copy p{display:none}.gnfc-projects-heading-copy h1{margin:0!important;font-size:18px!important;white-space:nowrap}
  .gnfc-project-toolbar{gap:5px;width:100%}.gnfc-project-search{height:36px;padding:0 9px;border-radius:10px}.gnfc-project-search svg{width:15px;height:15px}.gnfc-project-search input{font-size:12px!important}
  .gnfc-project-view-switch{padding:2px;gap:2px;border-radius:9px}.gnfc-project-view-switch button,.gnfc-project-help{width:31px;height:31px;border-radius:7px}.gnfc-project-view-switch button svg{width:16px;height:16px}.gnfc-portal-count{display:none!important}
  .gnfc-template-selection-banner{margin:0 0 13px;padding:11px 12px;align-items:flex-start}.gnfc-template-selection-banner small{font-size:12px}.gnfc-template-selection-banner a{font-size:12px}
  .gnfc-product-grid.is-list{gap:8px}.gnfc-product-grid.is-list .gnfc-product-card{grid-template-columns:78px minmax(0,1fr) 92px;gap:10px;padding:10px;align-items:center;border-radius:14px}.gnfc-product-grid.is-list .gnfc-product-visual{width:76px;height:76px;border-radius:11px}.gnfc-product-grid.is-list .gnfc-product-body h3{font-size:12px;margin-bottom:3px}.gnfc-product-grid.is-list .gnfc-product-body p{font-size:12px;margin-bottom:3px}.gnfc-product-grid.is-list .gnfc-product-body small{font-size:12px}.gnfc-product-grid.is-list .gnfc-product-meta{gap:3px;margin-bottom:5px}.gnfc-product-grid.is-list .gnfc-product-meta span{font-size:12px;padding:3px 8px}.gnfc-product-grid.is-list .gnfc-product-actions{gap:5px}.gnfc-product-grid.is-list .gnfc-product-actions .gnfc-btn{min-height:32px;padding:0 6px;border-radius:8px;font-size:12px;line-height:1.15;text-align:center}
  .gnfc-mobile-nav a span.gnfc-mobile-user-icon{display:grid;place-items:center}.gnfc-mobile-nav a span.gnfc-mobile-user-icon svg{width:19px;height:19px}
  .gnfc-template-preset-notice{margin:8px 10px 10px;display:block;padding:11px}.gnfc-template-preset-notice button{margin-top:9px;width:100%}
  .gnfc-mobile-scroll-instruction{display:flex;align-items:center;gap:9px;margin:0 0 14px;padding:9px 10px;border-radius:11px;background:#252d39;border:1px solid #384354;color:#dbe3ec;transition:opacity .2s ease,transform .2s ease}.gnfc-mobile-scroll-instruction>span{width:27px;height:27px;display:grid;place-items:center;border-radius:8px;background:#343e4d;color:#ff9b59;font-size:16px;font-weight:900;flex:0 0 auto}.gnfc-mobile-scroll-instruction strong,.gnfc-mobile-scroll-instruction small{display:block}.gnfc-mobile-scroll-instruction strong{font-size:12px;color:#fff}.gnfc-mobile-scroll-instruction small{margin-top:1px;font-size:12px;line-height:1.4;color:#aeb9c7}.gnfc-mobile-scroll-instruction.is-faded{opacity:.28;transform:translateY(-2px)}
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-content strong[data-gnfc-preview-target="institution"]{cursor:pointer}
}

@media(max-width:420px){
  .gnfc-projects-head{grid-template-columns:auto minmax(0,1fr)}.gnfc-project-search{min-width:0}.gnfc-project-search input{width:70px}.gnfc-project-view-switch button,.gnfc-project-help{width:29px;height:29px}
  .gnfc-product-grid.is-list .gnfc-product-card{grid-template-columns:70px minmax(0,1fr) 84px;gap:8px}.gnfc-product-grid.is-list .gnfc-product-visual{width:68px;height:68px}.gnfc-product-grid.is-list .gnfc-product-actions .gnfc-btn{font-size:12px;padding:0 4px}
}

/* Desktop/mobile focus badge styling is shared. */
.gnfc-preview-focus-badge{position:absolute;z-index:15;display:inline-flex;align-items:center;min-height:24px;max-width:190px;padding:4px 9px;border-radius:999px;background:#ff6b00;color:#fff;font-family:Roboto,Arial,sans-serif;font-size:12px;line-height:1.2;font-weight:700;box-shadow:0 5px 15px rgba(255,107,0,.25);pointer-events:none;white-space:nowrap}
@keyframes gnfcEditorFocusPulse{0%{box-shadow:0 0 0 0 rgba(255,107,0,.42)}100%{box-shadow:0 0 0 8px rgba(255,107,0,0)}}

/* =========================================================
   v1.8.1 — Single project header + smooth navigation
========================================================= */
.gnfc-project-topbar{display:grid;grid-template-columns:auto minmax(280px,1fr) auto;align-items:center;gap:18px;padding:12px 24px}
.gnfc-project-topbar-title{font-family:Montserrat,Arial,sans-serif;font-size:18px!important;white-space:nowrap;margin:0!important}
.gnfc-project-topbar .gnfc-project-toolbar{width:100%;justify-content:center}
.gnfc-project-topbar .gnfc-project-search{max-width:620px}
.gnfc-project-topbar-actions{display:flex;align-items:center;gap:14px;justify-content:flex-end}
.gnfc-project-topbar-count{display:flex;align-items:baseline;gap:5px;white-space:nowrap;color:#5f6978}.gnfc-project-topbar-count strong{font-family:Montserrat,Arial,sans-serif;font-size:14px!important;color:#182230}.gnfc-project-topbar-count small{font-size:12px;font-weight:700}
.gnfc-product-grid.is-list .gnfc-product-visual img{object-fit:contain!important;padding:8px;background:#fff}
.gnfc-product-grid.is-grid .gnfc-product-visual img{object-fit:contain!important}

/* Cover navigation while the next portal view is loading. Assets are now
   enqueued in wp_head, so the incoming page is already styled. */
.gnfc-navigation-mask{position:fixed;inset:0;z-index:9999999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(244,246,249,.94);backdrop-filter:blur(7px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s ease,visibility .14s ease;font-family:Roboto,Arial,sans-serif;color:#596579;font-size:12px;font-weight:700}
.gnfc-navigation-mask.is-active{opacity:1;visibility:visible;pointer-events:auto}.gnfc-navigation-spinner{width:34px;height:34px;border:3px solid #e3e8ef;border-top-color:#ff6b00;border-radius:50%;animation:gnfcNavSpin .65s linear infinite}@keyframes gnfcNavSpin{to{transform:rotate(360deg)}}

@media(max-width:820px){
  .gnfc-project-topbar{height:58px!important;display:grid!important;grid-template-columns:auto minmax(0,1fr);gap:8px;padding:0 12px!important}
  .gnfc-project-topbar-title{font-size:15px!important}
  .gnfc-project-topbar .gnfc-project-toolbar{gap:4px;min-width:0}
  .gnfc-project-topbar .gnfc-project-search{height:34px;min-width:0;max-width:none;padding:0 8px}.gnfc-project-topbar .gnfc-project-search input{font-size:12px!important}
  .gnfc-project-topbar .gnfc-project-view-switch button,.gnfc-project-topbar .gnfc-project-help{width:30px;height:30px}
  .gnfc-project-topbar-actions{display:none}
  .gnfc-portal-main:has(.gnfc-product-grid){padding-top:14px}
}
@media(max-width:430px){
  .gnfc-project-topbar{grid-template-columns:auto minmax(0,1fr);gap:6px;padding-left:10px!important;padding-right:10px!important}
  .gnfc-project-topbar-title{font-size:14px!important}.gnfc-project-topbar .gnfc-project-search input{width:auto}
  .gnfc-project-topbar .gnfc-project-view-switch button,.gnfc-project-topbar .gnfc-project-help{width:28px;height:28px}
}

/* =========================================================
   v1.9.0 — portal width, search submit, external embeds
========================================================= */
.gnfc-portal-shell{width:100%;max-width:none;margin-left:0;margin-right:0}
.gnfc-project-search{padding-right:5px}
.gnfc-project-search-submit{flex:0 0 auto;height:30px;padding:0 12px;border:0;border-radius:9px;background:var(--gnfc-primary);color:#fff;font-size:12px;font-weight:800;cursor:pointer}.gnfc-project-search-submit:hover{background:var(--gnfc-primary-dark)}
.gnfc-login-notice{margin:0 0 14px;padding:10px 12px;border:1px solid #f2d28e;border-radius:10px;background:#fff8e8;color:#7a5a18;font-size:12px;line-height:1.5}
.gnfc-existing-media-item iframe,.gnfc-preview-personal-media iframe{display:block;width:100%;border:0;border-radius:12px;background:#000;aspect-ratio:16/9}.gnfc-preview-personal-media iframe[title*="tiktok" i]{aspect-ratio:9/16}.gnfc-preview-external-link{display:flex;align-items:center;justify-content:center;width:min(100%,300px);min-height:140px;padding:18px;border-radius:14px;background:#f3f4f6;color:#344054!important;text-decoration:none!important;font-size:12px;font-weight:800}
@media(max-width:820px){.gnfc-project-search-submit{height:28px;padding:0 9px;font-size:12px}.gnfc-portal-shell{width:100%;max-width:100%;margin-left:0;margin-right:0}}