/* Teroka Visual: established sculpted emerald / warm-cream design system. */
.visual-page{font-family:'Segoe UI',Arial,sans-serif}.visual-page *{box-sizing:border-box}.visual-page [hidden]{display:none!important}.visual-page button,.visual-page input,.visual-page select,.visual-page textarea{font:inherit}.visual-page button{cursor:pointer}.visual-page button:disabled{cursor:default;opacity:.5}.visual-page :is(button,a,input,textarea,select,summary):focus-visible{outline:3px solid #d4a63c;outline-offset:4px}.visual-page svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.visual-main{max-width:1600px;margin:auto;padding:24px 28px 45px}.visual-skip{position:fixed;left:20px;top:-100px;z-index:100;padding:14px;background:#fffce9;color:#164a37}.visual-skip:focus{top:15px}.visual-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.visual-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px;padding:21px 26px;background:linear-gradient(110deg,#fffef1f2,#f5f7e5ed);border:1px solid #ffffd9;border-radius:18px;box-shadow:var(--ti-panel-shadow)}.visual-heading h1{font:700 42px/1.1 Georgia,serif;letter-spacing:-1.2px;margin:0 0 7px;color:#0c3c2d;text-shadow:0 2px 0 #fff}.visual-heading p{font:18px/1.5 Georgia,serif;margin:0;color:#3e6253}.visual-heading-actions{display:flex;align-items:center;gap:13px;flex-shrink:0}
.visual-price{border:1px solid #e8d597;border-radius:12px;background:linear-gradient(#fff8df,#f5df9e);box-shadow:inset 0 2px 1px #fff,0 4px 0 #bfa96c,0 8px 12px #143c291a;padding:12px 16px;font-size:14px!important;font-weight:700!important;color:#5d4218;min-height:44px}.visual-preview-tag{border:1px solid #c9d2b4;border-radius:10px;padding:10px 13px;background:linear-gradient(#fffff3,#e7eed9);box-shadow:0 3px 0 #adbc97;color:#2d5742;font-size:13px}
.visual-surface{border:2px solid #c8d2af;border-radius:17px;background:var(--ti-sculpted);box-shadow:var(--ti-panel-shadow)}
.visual-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:13px 18px;margin:0 0 23px}.visual-steps button{position:relative;display:flex;align-items:center;gap:13px;border:1px solid #d4d4bd;border-radius:30px;background:linear-gradient(#fffdf1,#edeedb);color:#67796a;padding:6px 13px 6px 6px;font-size:14px;min-height:49px;text-align:left}.visual-steps b{display:grid;place-items:center;border-radius:50%;height:37px;width:37px;background:linear-gradient(#9da7a0,#73867c);color:white;box-shadow:inset 0 2px 1px #fff7;font:400 20px Georgia,serif;flex-shrink:0}.visual-steps button[aria-current=step]{border-color:#209668;background:linear-gradient(#edffea,#d4eed6);color:#104b35;font-weight:700;box-shadow:0 0 0 3px #a6eec555}.visual-steps button[aria-current=step] b{background:linear-gradient(#149c69,#00634b);box-shadow:inset 0 2px 1px #a2ebac,0 3px 0 #166447,0 0 10px #9adf8b}
.visual-layout{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,1fr);gap:23px;align-items:start}.visual-editor{padding:26px 27px;min-width:0}.visual-editor h2,.visual-studio h2{font:700 28px/1.2 Georgia,serif;letter-spacing:-.5px;margin:0 0 12px;color:#153f2e}.visual-intro{font-size:15px;line-height:1.65;margin:0 0 23px;color:#426154}.visual-step>h2:focus{outline:0}.visual-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.visual-category{display:flex;align-items:center;gap:12px;text-align:left;min-height:92px;padding:15px 13px;border:1px solid #c6cdb4;border-radius:13px;background:linear-gradient(125deg,#fffff5,#f4f2e1);box-shadow:inset 0 2px 1px #fff,0 3px 0 #bfc8ab;color:#214b38}.visual-category svg{width:27px;height:27px}.visual-category strong{display:block;font-size:14px;line-height:1.35}.visual-category small{display:block;font-size:11px;line-height:1.5;color:#6e8067;margin-top:5px}.visual-category[aria-pressed=true]{border:2px solid #1f9062;background:linear-gradient(125deg,#eafadf,#d8eecf);box-shadow:inset 0 2px 1px #fff,0 4px 0 #74a56d}.visual-category:hover{transform:translateY(-1px)}
.visual-example{margin-top:22px;padding:16px 18px;background:linear-gradient(100deg,#e1ebcf,#eef3de);border-radius:12px;border:1px solid #d0dabb;display:grid;gap:6px}.visual-example>span{font-size:11px;color:#5c7450}.visual-example>strong{font-size:14px;font-weight:600}.visual-text-button{border:0;background:transparent;color:#236446;display:inline-flex;gap:8px;align-items:center;justify-content:center;padding:8px 0;font-size:13px!important;font-weight:600!important;text-decoration:none;min-height:36px}.visual-text-button svg{width:17px;height:17px}.visual-example .visual-text-button{justify-self:start}
.visual-editor-footer{display:flex;align-items:center;gap:14px;margin-top:23px;padding-top:19px;border-top:1px solid #d7dfc5}.visual-editor-footer>span{font-size:12px;color:#6c7d61;margin-right:auto}.visual-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:47px;padding:12px 18px;border:1px solid #79c7a1;border-radius:12px;color:#fffdeb;background:linear-gradient(135deg,#0b8667,#024c40);box-shadow:inset 0 2px 2px #b9f0bd73,inset 0 -2px 3px #03352d6b,0 4px 0 #083f30,0 8px 12px #123c3030;font-size:14px!important;font-weight:650!important;line-height:1.4}.visual-button.secondary{background:linear-gradient(#fffff5,#e9edcf);border-color:#c0cba2;color:#2b4d35;box-shadow:inset 0 2px 1px #fff,0 4px 0 #9eae82,0 8px 12px #123c301c}
.visual-page :is(.visual-button,.visual-price,.visual-category,.visual-style,.visual-formats button,.visual-variants button,.visual-refine button):active{transform:translateY(3px);box-shadow:inset 0 1px 2px #153c3033,0 1px 0 #57764d}
.visual-studio{position:sticky;top:88px;padding:24px;min-width:0}.visual-studio-title{display:flex;align-items:center;justify-content:space-between;gap:13px;margin-bottom:15px}.visual-studio-title h2{margin:0}.visual-studio-title button{font-size:12px!important;flex-shrink:0}.visual-studio-title button span{display:grid;place-items:center;min-width:21px;height:21px;background:#e4edcc;border-radius:6px;padding:0 3px;font-size:11px}
.visual-preview{margin:0}.visual-preview>img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid #bccbaa;box-shadow:inset 0 2px 2px #5a885c33}.visual-preview figcaption{font-size:11px;line-height:1.6;color:#65785f;margin:9px 2px 13px}.visual-preview-label{display:flex;gap:12px;align-items:center;justify-content:space-between;font-size:12px;margin-bottom:15px}.visual-preview-label strong{font-size:16px}.visual-preview-label span{font-size:11px;color:#6a7c60}
.visual-thumbnails{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.visual-thumbnail{min-width:0;border:2px solid transparent;border-radius:11px;background:transparent;padding:3px;color:#284e39}.visual-thumbnail img{display:block;width:100%;aspect-ratio:1.15;object-fit:cover;border-radius:7px}.visual-thumbnail span{display:block;font-size:11px;margin-top:7px}.visual-thumbnail[aria-pressed=true]{border-color:#188363;background:#e2f0d4;box-shadow:0 3px 0 #98ad83}.visual-studio-note{font-size:12px;line-height:1.65;color:#62775a;margin:18px 0 8px}#visualStartAgain{margin-top:8px;text-decoration:underline;text-underline-offset:4px}
.visual-field{display:grid;gap:8px;margin-bottom:18px;min-width:0}.visual-field label{font-size:13px;font-weight:650;color:#2f503a}.visual-field label>span{color:#987229}.visual-field :is(input,textarea,select){width:100%;max-width:100%;min-width:0;border:1px solid #acc193;border-radius:10px;padding:11px 12px;background:linear-gradient(#f6f9ec,#fffff5);color:#214a35;box-shadow:inset 0 2px 3px #6a874126,0 1px 0 #fff;font-size:14px;min-height:45px}.visual-field textarea{resize:vertical;min-height:110px;line-height:1.65}.visual-field small{font-size:11px;color:#6c7d5e}.visual-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.visual-field[hidden]{display:none}.visual-error{color:#9b4222;font-size:12px;line-height:1.5}.visual-error:empty{display:none}.visual-field [aria-invalid=true]{border-color:#bb5d37;box-shadow:0 0 0 2px #eac9ad}.visual-style-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:22px}.visual-style{padding:5px 5px 9px;border:1px solid #c3d0af;border-radius:11px;background:linear-gradient(#fffff6,#e8edd5);box-shadow:0 3px 0 #adbd96;min-width:0;color:#244b36}.visual-style img{display:block;width:100%;aspect-ratio:1.5;object-fit:cover;border-radius:7px}.visual-style strong{display:block;font-size:12px;margin-top:7px}.visual-style[aria-pressed=true]{border:2px solid #188766;background:#dcefcf;box-shadow:0 3px 0 #5e996d,0 0 0 2px #c7edb8}
.visual-format-field{border:0;margin:0 0 22px;padding:0}.visual-format-field legend{font-size:13px;font-weight:650;margin-bottom:10px}.visual-formats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.visual-formats button{display:grid;justify-items:center;gap:7px;padding:9px 5px;border:1px solid #c1ceab;border-radius:10px;background:#fcfdef;color:#39583e;font-size:12px;box-shadow:0 3px 0 #b6c69f}.visual-formats button[aria-pressed=true]{border-color:#15936f;background:#dcefcf;color:#0b6b4b}.visual-formats i{display:block;border:1.7px solid currentColor;border-radius:2px;width:22px;height:22px}.visual-formats .ratio-portrait{width:18px;height:23px}.visual-formats .ratio-wide{width:28px;height:16px}.visual-formats .ratio-story{width:14px;height:25px}
.visual-advanced{border-top:1px solid #d8e0c6;padding-top:15px}.visual-advanced summary{font-size:13px;font-weight:650;cursor:pointer;padding:5px 0 13px}.visual-advanced .visual-field-grid{margin-top:8px}.visual-check{display:flex;gap:10px;align-items:center;font-size:13px}.visual-check input{width:17px;height:17px;accent-color:#0a8b65}
.visual-variants{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:4px;border:1px solid #d6d9bf;background:linear-gradient(#f7f6e9,#e9ead8);border-radius:12px;margin-bottom:13px}.visual-variants button{min-height:44px;border:1px solid transparent;border-radius:9px;background:transparent;color:#3c5f48;font-size:13px}.visual-variants [aria-pressed=true]{background:linear-gradient(#155f46,#043f32);color:#fffce5;box-shadow:inset 0 2px 1px #addeb56b,0 3px 0 #1d5035;border-color:#2d7757}
#visualOutput{display:block;resize:vertical;width:100%;min-height:294px;max-height:700px;padding:18px 19px;border:2px solid #2b8867;border-radius:12px;box-shadow:inset 0 3px 8px #001b1c99,0 3px 0 #93b389;background:radial-gradient(ellipse at top left,#174e36,transparent 80%),#063b2f;color:#effbe5;font:14px/1.8 'Segoe UI',sans-serif}
.visual-avoid{padding:13px 15px;background:linear-gradient(#fffff7,#ededdc);border:1px solid #d7d9bd;border-radius:10px;margin:16px 0 11px}.visual-avoid summary{font-size:13px;font-weight:650;cursor:pointer}.visual-avoid p{font-size:12px;line-height:1.8;margin:12px 0 0;color:#496449}.visual-output-note,.visual-storage-note{font-size:11px;color:#6a7c60;line-height:1.75;margin:12px 0}.visual-refine{margin-top:20px}.visual-refine h3{font-size:13px;margin:0 0 11px}.visual-refine>div{display:flex;gap:8px;flex-wrap:wrap}.visual-refine button{min-height:40px;border:1px solid #c8d0b5;border-radius:10px;padding:8px 12px;background:linear-gradient(#fffff5,#f0eedc);box-shadow:0 3px 0 #b4c19e;color:#35553c;font-size:12px}.visual-refine [aria-pressed=true]{background:#d8f1d6;border-color:#3b9a6f;box-shadow:0 3px 0 #7fa47a}.visual-result-actions{display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid #d7ddc7}.visual-result-actions .visual-text-button{font-size:12px!important}.visual-feedback{color:#2e7650;font-size:12px;line-height:1.65;margin-top:13px}.visual-feedback:empty{display:none}
.visual-dialog{width:min(550px,calc(100% - 32px));max-height:88dvh;overflow:auto;border:2px solid #a9c195;border-radius:18px;padding:30px;background:var(--ti-sculpted);color:#234735;box-shadow:var(--ti-panel-shadow)}.visual-dialog::backdrop{background:#07392eb8;backdrop-filter:blur(5px)}.visual-dialog h2{font:30px/1.2 Georgia,serif;margin:0 30px 16px 0}.visual-dialog :is(p,li){font-size:14px;line-height:1.8}.visual-close{position:absolute;right:14px;top:13px;width:37px;height:37px;border:1px solid #b4caa1;border-radius:10px;background:#edf2dd;color:#345c3d;font-size:23px!important}.visual-package-price{font-size:45px;font-weight:700;color:#0b7955;margin:18px 0}.visual-package-price small{font-size:14px;font-weight:400}.visual-package-note{padding:13px 15px;background:#e9efd9;border-radius:10px}.visual-dialog-actions{display:flex;justify-content:flex-end;gap:13px;margin-top:23px}.visual-history-item{padding:17px 0;border-top:1px solid #d1ddc0}.visual-history-item h3{font-size:16px;margin:0 0 6px;overflow-wrap:anywhere}.visual-history-item p{font-size:12px;margin:0;color:#638058}.visual-history-item>div{display:flex;gap:18px;margin-top:8px}
@media(max-width:1250px){.visual-main{padding:22px}.visual-layout{grid-template-columns:minmax(0,1.13fr) minmax(0,1fr);gap:19px}.visual-heading{padding:22px}.visual-heading h1{font-size:38px}.visual-heading p{font-size:16px}.visual-heading-actions{gap:9px}.visual-price{padding:11px 13px}.visual-editor{padding:22px}.visual-editor h2,.visual-studio h2{font-size:26px}.visual-studio{padding:20px}.visual-category{padding:13px 10px;gap:9px;min-height:98px}.visual-category strong{font-size:13px}.visual-category small{font-size:10px}.visual-category svg{width:23px;height:23px}.visual-editor-footer{flex-wrap:wrap}.visual-editor-footer .visual-button{margin-left:auto}.visual-studio-title{flex-wrap:wrap;gap:7px}.visual-preview-label{flex-wrap:wrap;gap:5px}.visual-result-actions{gap:10px}}
@media(max-width:1050px) and (min-width:901px){.visual-heading{align-items:start}.visual-heading-actions{flex-direction:column;align-items:end}.visual-layout{grid-template-columns:minmax(0,1fr)}.visual-studio{position:static}.visual-preview>img{max-height:350px}.visual-thumbnails{max-width:500px}.visual-categories{grid-template-columns:repeat(2,minmax(0,1fr))}.visual-category{min-height:88px}.visual-studio-title{flex-wrap:nowrap}}
@media(max-width:700px){.visual-main{padding:18px 14px 34px}.visual-heading{padding:21px 19px;display:block}.visual-heading h1{font-size:35px}.visual-heading p{font-size:17px;line-height:1.55}.visual-heading-actions{margin-top:17px;justify-content:space-between;gap:8px}.visual-price{font-size:13px!important;min-height:42px}.visual-preview-tag{font-size:12px;padding:9px 11px}.visual-layout{grid-template-columns:minmax(0,1fr);gap:22px}.visual-steps{gap:7px;padding:9px;margin-bottom:20px;border-radius:13px}.visual-steps button{flex-direction:column;justify-content:center;gap:7px;padding:8px 2px;border-radius:10px;font-size:11px;min-height:77px}.visual-steps b{width:28px;height:28px;font-size:16px}.visual-editor{padding:23px 18px}.visual-editor h2{font-size:27px;line-height:1.25}.visual-intro{font-size:14px;line-height:1.65}.visual-category{flex-direction:column;align-items:start;min-height:124px;padding:14px 12px;gap:10px}.visual-category strong{font-size:13px}.visual-category small{font-size:11px}.visual-category svg{width:25px;height:25px}.visual-categories{gap:11px}.visual-studio{position:static;padding:22px 19px}.visual-preview>img{aspect-ratio:1.2}.visual-studio-title{flex-wrap:nowrap}.visual-studio h2{font-size:27px}.visual-preview-label{flex-wrap:nowrap}.visual-editor-footer{gap:12px}.visual-editor-footer>span{font-size:11px}.visual-editor-footer>.visual-button{font-size:13px!important;padding:11px 14px}.visual-field-grid{grid-template-columns:minmax(0,1fr);gap:0}.visual-field :is(input,select,textarea){font-size:16px}.visual-style-grid{gap:9px}.visual-style strong{font-size:11px}.visual-formats{gap:7px}.visual-formats button{font-size:11px}.visual-button{padding:12px 16px}.visual-result-actions .visual-button{flex:1}.visual-result-actions .visual-text-button{width:100%;justify-content:center}.visual-refine button{flex:1;font-size:11px;padding:8px 9px}.visual-dialog{padding:28px 22px}.visual-dialog h2{font-size:27px}.visual-preview figcaption{font-size:11px}.visual-output-note,.visual-storage-note{font-size:11px}.visual-page .workspace-session{display:none}.visual-page .workspace-menu-toggle,.visual-page .workspace-menu-close{min-height:44px}}
@media(min-width:701px) and (max-width:850px){.visual-layout{grid-template-columns:minmax(0,1fr)}.visual-studio{position:static}.visual-preview>img{max-height:400px}}
.visual-preview>img,.visual-thumbnail img,.visual-style img{height:auto}
.visual-steps{scroll-margin-top:90px}
@media(min-width:1251px){.visual-editor h2,.visual-studio h2{font-size:32px}.visual-category strong{font-size:15px}}
@media(prefers-reduced-motion:reduce){.visual-page *{scroll-behavior:auto!important;transition:none!important}}
.visual-variants button span{display:block;font-size:10px;line-height:1.3;opacity:.8}.visual-format-help{font-size:12px;line-height:1.7;color:#546e50;margin:0 0 12px}#visualLegacyText{width:100%;min-height:150px;resize:vertical;border:1px solid #b7cba4;border-radius:9px;padding:12px;background:#fcfff3;color:#244c38;font:13px/1.7 'Segoe UI',sans-serif;margin-top:14px}
.visual-template-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 13px;font-size:13px}.visual-template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.visual-template{display:grid;gap:9px;text-align:left;min-width:0;padding:17px;border:1px solid #b9cda5;border-radius:12px;background:linear-gradient(145deg,#fffff6,#e6efd4);box-shadow:inset 0 2px 1px #fff,0 4px 0 #a4b992,0 7px 13px #163c2714;color:#184e38}.visual-template strong{font-size:14px}.visual-template small{font-size:11px;line-height:1.6;color:#61735a}.visual-template span{font-size:12px;font-weight:650;color:#087d5b}.visual-template:active{transform:translateY(3px)}#visualIdeaAdvanced{margin-bottom:18px}#visualCustomizeStyle{font-size:12px;padding:3px;text-decoration:underline}@media(max-width:430px){.visual-template-grid{grid-template-columns:1fr}.visual-template{padding:15px}.visual-template-heading{flex-wrap:wrap}}
.visual-access-panel{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:20px 24px;margin:0 0 23px;border:1px solid #a7d7b2;border-radius:15px;background:linear-gradient(130deg,#075c48,#073a32);box-shadow:inset 0 2px 1px #bcebc74d,0 4px 0 #254f35,0 10px 18px #0c3b2b26;color:#f2ffe4}.visual-access-panel strong{font-size:17px}.visual-access-panel p{font-size:12px;line-height:1.7;margin:6px 0 0;max-width:750px;color:#daedce}.visual-access-panel .visual-button{flex-shrink:0;background:linear-gradient(#fff9d5,#e2d691);border-color:#fff4ba;color:#174b35;box-shadow:inset 0 2px 1px #fff,0 4px 0 #948c55}.visual-access-panel p:empty{display:none}.visual-template[data-locked=true]{background:linear-gradient(145deg,#f7f8ee,#e2e8d5)}.visual-template .visual-template-tag{font-size:10px;width:max-content;max-width:100%;padding:3px 7px;border-radius:6px;background:#d4edb8;color:#165532}.visual-template[data-locked=true] .visual-template-tag{background:#e6dcc0;color:#695128}.visual-page [data-feature-locked=true]::after{content:' · Akses penuh';font-size:10px;opacity:.8}.visual-page .visual-dialog .visual-text-button{margin:15px 0 0}.visual-page a.visual-button{text-decoration:none;text-align:center}@media(max-width:850px){.visual-access-panel{align-items:stretch;flex-direction:column;padding:19px;gap:14px}.visual-access-panel .visual-button{width:100%}}
.visual-studio-title #visualHistory[data-feature-locked=true]::after{content:''}.visual-access-panel #visualRetryAccess{color:#f0e5aa;text-decoration:underline;margin-top:6px}