*{margin:0;padding:0;box-sizing:border-box}:root{--bg:#f6f8fc;--card:#fff;--text:#0f172a;--muted:#64748b;--line:#e2e8f0;--brand:#2563eb;--brand2:#14b8a6;--dark:#07111f;--shadow:0 18px 45px rgba(15,23,42,.1)}body{font-family:Inter,Arial,Helvetica,sans-serif;background:radial-gradient(circle at 12% 0%,rgba(37,99,235,.12),transparent 30%),radial-gradient(circle at 88% 2%,rgba(20,184,166,.1),transparent 32%),linear-gradient(180deg,#fff 0%,var(--bg) 100%);color:var(--text);min-height:100vh}.app{max-width:1320px;margin:auto;padding:18px 16px 48px}.topbar{position:sticky;top:12px;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;background:rgba(255,255,255,.92);border:1px solid rgba(226,232,240,.9);border-radius:26px;padding:12px 16px;box-shadow:0 14px 38px rgba(15,23,42,.08);backdrop-filter:blur(18px)}.brand-shell{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e5edf6;border-radius:18px;padding:10px 16px;box-shadow:0 10px 22px rgba(15,23,42,.07)}.brand-logo{height:72px;width:auto;max-width:390px;display:block;object-fit:contain}.nav-links{display:flex;align-items:center;justify-content:flex-end;gap:6px;background:#f8fafc;border:1px solid var(--line);border-radius:999px;padding:6px}.nav-links button{border:0;background:transparent;color:#334155;border-radius:999px;padding:10px 14px;font-weight:900;cursor:pointer}.nav-links button:hover{background:#fff;color:#1d4ed8;box-shadow:0 8px 20px rgba(37,99,235,.1)}.showcase-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:stretch;margin-bottom:18px}.hero-copy,.hero-preview,.platform-section,.trending-section,.control-panel,.result-panel,.admin-panel,.history-panel,.model-section{background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:32px;box-shadow:var(--shadow)}.hero-copy{padding:56px 48px;display:flex;flex-direction:column;justify-content:center;min-height:470px}.eyebrow{display:inline-flex;width:max-content;border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:8px 14px;font-weight:900;font-size:12px;margin-bottom:18px}.eyebrow.dark{background:#ecfdf5;border-color:#bbf7d0;color:#047857}.hero-copy h1{font-size:64px;line-height:.96;letter-spacing:-2.2px;max-width:720px;margin-bottom:18px}.hero-copy p{font-size:18px;line-height:1.6;color:var(--muted);max-width:680px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.hero-actions button,.prompt-actions button,.small-action{border:0;border-radius:16px;padding:14px 18px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:white;font-weight:900;cursor:pointer;box-shadow:0 14px 26px rgba(37,99,235,.2)}.hero-actions .secondary,.ghost{background:white!important;color:#1e293b!important;border:1px solid var(--line)!important;box-shadow:0 8px 18px rgba(15,23,42,.06)!important}.hero-preview{padding:18px;overflow:hidden}.horizontal-showcase{display:flex;align-items:stretch}.showcase-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}.showcase-card{flex:0 0 255px;min-height:390px;border:1px solid rgba(255,255,255,.14);border-radius:26px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;scroll-snap-align:start;overflow:hidden}.showcase-card span{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#93c5fd}.showcase-card h3{font-size:27px;letter-spacing:-.7px;margin-top:8px}.dark-card{background:linear-gradient(135deg,#07111f,#172033);color:white}.stationery-card{background:linear-gradient(135deg,#fff,#edf4ff);color:#0f172a;border-color:#dbeafe}.mock-card{background:linear-gradient(135deg,#e2e8f0,#f8fafc);color:#0f172a;border-color:#cbd5e1}.ad-card{background:linear-gradient(135deg,#111827,#2563eb);color:white}.example-window{border-radius:20px;min-height:160px;display:flex;align-items:center;justify-content:center;padding:20px;margin-top:18px}.bright-window{background:white}.example-window img{max-width:92%;height:auto;object-fit:contain}.paper-stack{height:190px;position:relative;margin-top:24px}.paper-stack i{position:absolute;inset:20px;border-radius:16px;background:white;border:1px solid #dbeafe;box-shadow:0 18px 30px rgba(15,23,42,.12)}.paper-stack i:nth-child(2){transform:rotate(-6deg) translate(-16px,8px)}.paper-stack i:nth-child(3){transform:rotate(5deg) translate(18px,14px)}.mock-scene,.banner-screen{height:190px;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-top:24px;font-weight:900;letter-spacing:.08em}.mock-scene{background:#0f172a;color:white}.banner-screen{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:white}.platform-section,.trending-section{padding:24px;margin-bottom:18px}.section-head{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:18px}.row-head{flex-direction:row;justify-content:space-between;align-items:flex-end}.section-head h2,.section-line h2{font-size:34px;letter-spacing:-.8px}.section-head p{color:var(--muted);line-height:1.5;margin-top:6px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.service-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 10px}.service-tile{flex:0 0 255px;text-align:left;border:1px solid var(--line);background:white;border-radius:24px;padding:14px;cursor:pointer;box-shadow:0 10px 24px rgba(15,23,42,.06);transition:.18s;scroll-snap-align:start}.service-tile:hover{transform:translateY(-3px);border-color:#bfdbfe;box-shadow:0 18px 32px rgba(37,99,235,.12)}.service-tile b{display:block;font-size:20px;margin:14px 0 7px}.service-tile small{display:block;color:var(--muted);font-size:13px;line-height:1.45}.tile-art{height:150px;border-radius:20px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;font-weight:900}.tile-art span{position:relative;z-index:2}.logo-art{background-image:url('/images/logo-studio.jpg');background-size:cover;background-position:center}.logo-art span{display:none}.stationery-art{background-image:url('/images/stationery1.jpg')!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;border:0!important}.stationery-art span{display:none}.mockup-art{background-image:url('/images/mock1.jpg')!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}.mockup-art span{display:none}.banner-art{background:linear-gradient(135deg,#111827,#2563eb);color:white}.mockup-art{background:linear-gradient(135deg,#f8fafc,#cbd5e1);color:#0f172a}.stationery-art{background:linear-gradient(135deg,#fff,#eef2ff);color:#111827;border:1px solid #dbeafe}.social-art{background:linear-gradient(135deg,#ecfeff,#e0e7ff);color:#1d4ed8}.image-art{background:linear-gradient(135deg,#fff7ed,#fef3c7);color:#92400e}.code-art{background:linear-gradient(135deg,#020617,#0f766e);color:white;font-size:34px}.section-line{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:14px}.section-line span{color:var(--muted);font-weight:800}.trend-row{display:flex;gap:10px;overflow:auto;padding-bottom:4px}.trend-row button{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:999px;padding:12px 16px;font-weight:900;color:#334155;box-shadow:0 6px 16px rgba(15,23,42,.05);cursor:pointer}.trend-row button:hover{border-color:#93c5fd;color:#1d4ed8}.capability-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:18px}.capability-grid.compact{margin-top:2px}.capability-card{text-align:left;background:white;border:1px solid var(--line);border-radius:22px;padding:16px;cursor:pointer;box-shadow:0 10px 24px rgba(15,23,42,.06);transition:.18s}.capability-card b{display:block;font-size:15px;margin-bottom:7px}.capability-card span{display:block;color:var(--muted);font-size:12px;line-height:1.35}.capability-card:hover,.capability-card.active{transform:translateY(-2px);border-color:#93c5fd;box-shadow:0 16px 34px rgba(37,99,235,.13)}.capability-card.active{background:linear-gradient(135deg,#eff6ff,#ecfdf5)}.workbench{display:grid;grid-template-columns:390px 1fr;gap:18px;align-items:start}.control-panel,.result-panel,.admin-panel,.history-panel,.model-section{padding:20px}.panel-head h2,.result-header h2,.model-head h2{font-size:30px;letter-spacing:-.7px}.panel-head p,.result-header p,.model-head p{color:var(--muted);line-height:1.45;margin-top:6px}.mini-badge{display:inline-flex;align-items:center;gap:7px;width:max-content;padding:8px 14px;border-radius:999px;background:#ecfdf5;border:1px solid #bbf7d0;color:#047857;font-size:12px;font-weight:900;margin-bottom:10px}.mini-badge:before{content:"●";font-size:10px;color:#10b981}.mode-select-row{margin:18px 0}.mode-select-row label,.field label,.prompt-card label{display:block;font-size:13px;color:#475569;margin-bottom:7px;font-weight:900}.mode-select-row select,.field input,.field select,textarea{width:100%;background:#fff;color:var(--text);border:1px solid #cfdbeb;border-radius:15px;padding:13px;outline:none;font-size:14px;box-shadow:0 4px 14px rgba(15,23,42,.03)}textarea{min-height:115px;resize:vertical}.mode-select-row select:focus,.field input:focus,.field select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(37,99,235,.12)}.form-section{display:grid;gap:12px}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}.checkbox-row{display:flex;gap:8px;align-items:center;color:#475569;font-size:13px}.small-action{width:100%;margin-top:4px}.prompt-card{margin-top:18px;background:#f8fbff;border:1px solid var(--line);border-radius:22px;padding:14px}.prompt-actions{display:flex;gap:10px;margin-top:12px}.prompt-actions button{flex:1}.hidden{display:none!important}.result-header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:16px}.result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.result-grid.single{grid-template-columns:1fr}.empty-state{display:block}.empty-card,.loading-card,.result-card{background:#f8fbff;border:1px solid var(--line);border-radius:24px;padding:18px}.empty-card{min-height:330px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.empty-card h3,.loading-card h3{font-size:26px;margin-bottom:8px}.empty-card p,.loading-card p{color:var(--muted)}.loading-card{min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.spinner{width:44px;height:44px;border-radius:50%;border:4px solid #dbeafe;border-top-color:var(--brand);animation:spin 1s linear infinite;margin-bottom:14px}@keyframes spin{to{transform:rotate(360deg)}}.result-card{background:white;box-shadow:0 10px 28px rgba(15,23,42,.06)}.result-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:12px}.result-top span{font-weight:900;color:#1d4ed8}.result-top small{color:#0f766e;background:#ecfdf5;border:1px solid #b7f0db;border-radius:999px;padding:5px 9px;font-weight:800;font-size:11px;line-height:1.3}.image-result img{width:100%;border-radius:18px;border:1px solid var(--line);background:white;display:block}.result-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.action-btn{border:1px solid #d4e1f1;border-radius:13px;background:#fff;color:#1f2937;cursor:pointer;font-weight:900;padding:10px 13px;text-decoration:none;box-shadow:0 6px 14px rgba(15,23,42,.04)}.action-btn:hover{background:#f0f7ff;border-color:#bfdbfe}.primary-link{background:linear-gradient(135deg,var(--brand),var(--brand2));color:white;border-color:transparent}.text-output{font-size:16px;line-height:1.65;color:#1f2937;background:#f8fbff;border:1px solid var(--line);border-radius:18px;padding:16px}.model-section{margin-top:18px}.model-head{margin-bottom:14px}.model-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.model-card{background:#f8fbff;border:1px solid var(--line);border-radius:18px;padding:15px}.model-card strong{display:block;color:#0f766e;font-size:16px;margin-bottom:7px}.model-card strong:before{content:"● ";color:#10b981}.model-card span{display:block;color:var(--muted);font-size:13px;line-height:1.35}.admin-panel,.history-panel{margin-top:18px}.history-header{margin-bottom:14px}.history-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.history-item{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;overflow:hidden;box-shadow:0 8px 22px rgba(15,23,42,.05)}.history-title{font-weight:900;color:#1d4ed8;margin-bottom:6px;text-transform:capitalize}.history-time{font-size:12px;color:#64748b;margin-bottom:10px}.history-prompt{font-size:14px;color:#334155;line-height:1.35;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.history-thumb{width:100%;height:145px;object-fit:cover;border-radius:14px;border:1px solid var(--line);background:white;margin-bottom:10px}@media(max-width:980px){.app{padding:10px 8px 24px}.topbar{position:relative;top:0;align-items:stretch;flex-direction:column;border-radius:22px}.brand-shell{width:100%;padding:12px}.brand-logo{height:68px;max-width:330px}.nav-links{width:100%;overflow:auto;flex-wrap:nowrap;justify-content:flex-start;border-radius:18px}.nav-links button{white-space:nowrap;background:#fff}.showcase-hero{grid-template-columns:1fr}.hero-copy{min-height:auto;padding:34px 24px}.hero-copy h1{font-size:40px;letter-spacing:-1.2px}.hero-copy p{font-size:15px}.hero-preview{display:block}.showcase-card{flex-basis:265px;min-height:360px}.service-grid{grid-template-columns:1fr}.service-tile{flex-basis:245px}.capability-grid{display:flex;overflow-x:auto;padding-bottom:4px}.capability-card{min-width:175px}.workbench{grid-template-columns:1fr}.two-cols{grid-template-columns:1fr}.result-header{flex-direction:column}.result-grid{grid-template-columns:1fr}.model-grid{grid-template-columns:1fr}.history-list{grid-template-columns:1fr}.prompt-actions{flex-direction:column}.control-panel,.result-panel,.admin-panel,.history-panel,.model-section,.platform-section,.trending-section{border-radius:24px;padding:16px}}