.ai-page { position: relative; min-height: 100vh; padding: 150px 0 90px; } 

.ai-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } 
.ai-bg::before { content: ""; position: absolute; inset: -40% -20%; background:
radial-gradient(600px 360px at 15% 25%, rgba(0, 255, 255, .22), transparent 70%),
radial-gradient(520px 320px at 85% 20%, rgba(0, 160, 255, .18), transparent 70%),
radial-gradient(640px 420px at 70% 80%, rgba(0, 255, 170, .14), transparent 70%),
radial-gradient(540px 340px at 25% 85%, rgba(80, 110, 255, .12), transparent 70%),
linear-gradient(180deg, rgba(2, 10, 28, 1) 0%, rgba(5, 12, 30, 1) 60%, rgba(0,0,0,1) 100%); filter: saturate(1.2) contrast(1.05); transform: rotate(-6deg); } 
.ai-bg::after { content: ""; position: absolute; left: 50%; top: 120px; width: 980px; height: 460px; transform: translateX(-50%); background:
linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent),
radial-gradient(closest-side at 50% 50%, rgba(0, 255, 255, .10), transparent 70%); border-radius: 28px; filter: blur(0px); opacity: .9; mask-image: radial-gradient(circle at 50% 30%, rgba(0,0,0,1), rgba(0,0,0,0) 75%); } 

.ai-page .container { width: 1180px; max-width: calc(100% - 36px); margin: 0 auto; position: relative; z-index: 2; } 


/* 샘플사이트 미리보기 영역 */

.ai-page .ai-preview { margin-top: 18px; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 22px 70px rgba(0,0,0,.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } 

.ai-page .ai-preview-head { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; } 

.ai-page .ai-preview-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 900; letter-spacing: .08em; color: rgba(103,255,241,.95); } 

.ai-page .ai-preview-h2 { margin: 0 0 8px; font-size: 20px; letter-spacing: -0.03em; color: rgba(255,255,255,.92); } 

.ai-page .ai-preview-desc { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.70); } 

.ai-page .ai-preview-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; } 

.ai-page .ai-tab { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: rgba(255,255,255,.82); border-radius: 999px; padding: 9px 12px; font-size: 12px; font-weight: 900; cursor: pointer; transition: transform .12s ease, border-color .2s ease, background .2s ease, color .2s ease; } 

.ai-page .ai-tab:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.20); } 
.ai-page .ai-tab.is-active { background: linear-gradient(135deg,#00eaff,#00ffb3); color: #07121f; border-color: rgba(0,255,255,.25); box-shadow: 0 12px 22px rgba(0,255,255,.14); } 

.ai-page .ai-preview-body { position: relative; } 

.ai-page .ai-preview-rail { display: flex; gap: 12px; overflow-x: auto; padding: 8px 6px 12px; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; outline: none; } 

.ai-page .ai-preview-rail::-webkit-scrollbar { height: 8px; } 
.ai-page .ai-preview-rail::-webkit-scrollbar-thumb { background: rgba(0,255,255,.25); border-radius: 999px; } 
.ai-page .ai-preview-rail::-webkit-scrollbar-track { background: transparent; } 

.ai-page .ai-sample { scroll-snap-align: start; flex: 0 0 360px; border-radius: 16px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.10); overflow: hidden; box-shadow: 0 18px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; } 

.ai-page .ai-sample-top { padding: 12px 12px 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.08); } 

.ai-page .ai-badge { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; background: rgba(0,255,255,.10); border: 1px solid rgba(0,255,255,.22); color: rgba(255,255,255,.88); font-size: 12px; font-weight: 900; } 

.ai-page .ai-meta { color: rgba(255,255,255,.55); font-size: 12px; font-weight: 800; } 

.ai-page .ai-mock { position: relative; padding: 14px 12px 18px; min-height: 200px; background:
radial-gradient(420px 220px at 30% 30%, rgba(0,255,255,.12), transparent 70%),
radial-gradient(420px 220px at 80% 70%, rgba(0,160,255,.10), transparent 70%); border-bottom: 1px solid rgba(255,255,255,.08); } 

.ai-page .ai-mock-pc { height: 148px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background:
linear-gradient(135deg, rgba(0,255,255,.18), rgba(0,100,255,.10)),
linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.15)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); } 

.ai-page .ai-mock-m { position: absolute; right: 14px; bottom: 16px; width: 92px; height: 146px; border-radius: 18px; border: 1px solid rgba(255,255,255,.14); background:
linear-gradient(135deg, rgba(0,255,179,.22), rgba(0,234,255,.08)),
linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.20)); box-shadow: 0 18px 40px rgba(0,0,0,.35); } 

.ai-page .ai-mock-pc.mock2 { background: linear-gradient(135deg, rgba(0,255,179,.18), rgba(0,234,255,.10)); } 
.ai-page .ai-mock-m.mock2 { background: linear-gradient(135deg, rgba(0,234,255,.18), rgba(60,255,0,.08)); } 
.ai-page .ai-mock-pc.mock3 { background: linear-gradient(135deg, rgba(0,160,255,.18), rgba(0,255,255,.10)); } 
.ai-page .ai-mock-m.mock3 { background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(0,255,255,.10)); } 
.ai-page .ai-mock-pc.mock4 { background: linear-gradient(135deg, rgba(0,234,255,.12), rgba(140,120,255,.10)); } 
.ai-page .ai-mock-m.mock4 { background: linear-gradient(135deg, rgba(0,255,179,.14), rgba(140,120,255,.10)); } 
.ai-page .ai-mock-pc.mock5 { background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(0,234,255,.10)); } 
.ai-page .ai-mock-m.mock5 { background: linear-gradient(135deg, rgba(0,160,255,.12), rgba(0,255,179,.12)); } 

.ai-page .ai-sample-info { padding: 12px 12px 14px; display: grid; gap: 8px; } 

.ai-page .ai-sample-title { margin: 0; font-size: 14px; font-weight: 900; letter-spacing: -0.02em; color: rgba(255,255,255,.92); } 

.ai-page .ai-sample-copy { margin: 0; font-size: 12px; line-height: 1.55; color: rgba(255,255,255,.68); } 

.ai-page .ai-sample-tags { display: flex; flex-wrap: wrap; gap: 6px; } 

.ai-page .ai-tag { display: inline-flex; padding: 6px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); font-size: 11px; font-weight: 900; color: rgba(255,255,255,.78); } 

.ai-page .ai-sample-cta { margin-top: 2px; display: grid; grid-template-columns: 1fr; gap: 8px; } 

.ai-page .ai-btn { border: 0; border-radius: 12px; padding: 10px 10px; font-size: 17px; font-weight: 900; cursor: pointer; transition: transform .12s ease, opacity .2s ease, box-shadow .2s ease; } 
.ai-page .ai-btn:active { transform: translateY(1px); } 

.ai-page .ai-btn-primary { background: linear-gradient(135deg,#00eaff,#00ffb3); color: #07121f; box-shadow: 0 14px 28px rgba(0,255,255,.14); } 
.ai-page .ai-btn-ghost { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.86); } 

/* 좌/우 버튼 */
.ai-page .ai-preview-nav { position: absolute; right: 6px; top: -44px; display: flex; gap: 8px; } 

.ai-page .ai-nav-btn { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.22); color: rgba(255,255,255,.86); font-size: 22px; font-weight: 900; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } 
.ai-page .ai-nav-btn:active { transform: translateY(1px); } 

/* ===============================
Modal
=============================== */
.ai-page .ai-modal { position: fixed; inset: 0; display: none; z-index: 9999; } 
.ai-page .ai-modal.is-open { display: block; } 

.ai-page .ai-modal-dim { position: absolute; inset: 0; background: rgba(0,0,0,.55); } 

.ai-page .ai-modal-card { position: absolute; left: 50%; top: 50%; width: 920px; max-width: calc(100% - 28px); transform: translate(-50%,-50%); border-radius: 16px; background: rgba(10,18,35,.92); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 90px rgba(0,0,0,.6); overflow: hidden; } 

.ai-page .ai-modal-head { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.92); } 

.ai-page .ai-modal-x { width: 36px; height: 36px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(255,255,255,.90); cursor: pointer; } 

.ai-page .ai-modal-body { padding: 14px; } 
.ai-page .ai-modal-preview { height: 460px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background:
radial-gradient(520px 260px at 30% 25%, rgba(0,255,255,.18), transparent 70%),
radial-gradient(520px 260px at 70% 75%, rgba(0,160,255,.14), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.20)); } 
.ai-page .ai-modal-tip { margin: 10px 0 0; font-size: 12px; color: rgba(255,255,255,.65); } 


@media screen and (max-width: 980px){
.ai-page .ai-sample { flex-basis: 320px; } 
.ai-page .ai-preview-nav { top: -46px; } 
.ai-page .ai-modal-preview { height: 380px; } 
}

@media screen and (max-width: 680px){
.ai-page .ai-preview { padding: 14px; } 
.ai-page .ai-preview-h2 { font-size: 18px; } 
.ai-page .ai-preview-tabs { gap: 6px; } 
.ai-page .ai-tab { padding: 8px 10px; font-size: 12px; } 
.ai-page .ai-preview-nav { display: none; } /* 모바일은 스와이프가 자연스러움 */
.ai-page .ai-sample { flex-basis: 86%; } 
.ai-page .ai-modal-preview { height: 280px; } 
}


/* TABS */
.ai-page .topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; } 
.ai-page .brand { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.92); font-weight: 800; letter-spacing: -0.02em; } 
.ai-page .brand .dot { width: 10px; height: 10px; border-radius: 999px; background: linear-gradient(135deg, #00eaff, #00ffb3); box-shadow: 0 0 18px rgba(0,255,255,.25); } 
.ai-page .brand small { display: inline-block; font-weight: 600; opacity: .75; margin-left: 6px; font-size: 16px; } 

.ai-page .tabs { display: inline-flex; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 6px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 16px 44px rgba(0,0,0,.35); overflow: hidden; } 
.ai-page .tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 140px; padding: 10px 14px; border-radius: 10px; font-size: 20px; font-weight: 800; color: rgba(255,255,255,.82); position: relative; border: 0; cursor: pointer; background: transparent; transition: transform .15s ease, background .2s ease, color .2s ease; user-select: none; } 
.ai-page .tab i { width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); } 
.ai-page .tab.is-active { color: #07121f; background: linear-gradient(135deg, #00eaff, #00ffb3); box-shadow: 0 10px 22px rgba(0,255,255,.18); transform: translateY(-1px); } 
.ai-page .tab.is-active i { background: rgba(0,0,0,.18); } 

.ai-page .hero { padding: 28px 0 12px; color: #fff; } 
.ai-page .hero .kicker { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12px; opacity: .92; } 
.ai-page .hero h1 { margin: 14px 0 10px; font-size: 42px; letter-spacing: -0.04em; line-height: 1.1; } 
.ai-page .hero p { margin: 0; max-width: 760px; color: rgba(255,255,255,.80); font-size: 18px; line-height: 1.6; } 


.ai-page .form-shell { margin-top: 18px; display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: start; } 

.ai-page .card { border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 22px 70px rgba(0,0,0,.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; } 
.ai-page .card .card-hd { padding: 18px 18px 12px; border-bottom: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; gap: 10px; } 
.ai-page .card .card-hd h2 { margin: 0; font-size: 16px; color: rgba(255,255,255,.92); letter-spacing: -0.02em; } 
.ai-page .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 800; color: rgba(255,255,255,.86); padding: 7px 10px; border-radius: 999px; background: rgba(0,255,255,.10); border: 1px solid rgba(0,255,255,.20); } 

.card .card-bd { padding: 18px; } 

.section { padding: 16px; border-radius: 16px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.08); margin-bottom: 14px; } 
.section:last-child { margin-bottom: 0; } 

.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } 
.section-title h3 { margin: 0; font-size: 22px; color: rgba(255,255,255,.92); letter-spacing: -0.02em; } 
.section-title span { font-size: 14px; color: rgba(255,255,255,.62); } 

.ai-page .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; } 
.ai-page .col-12 { grid-column: span 12; } 
.ai-page .col-8 { grid-column: span 8; } 
.ai-page .col-6 { grid-column: span 6; } 
.ai-page .col-4 { grid-column: span 4; } 
.ai-page .col-3 { grid-column: span 3; } 

.ai-page label.lbl { display: block; margin-bottom: 7px; font-size: 16px; font-weight: 800; color: rgba(255,255,255,.88); letter-spacing: -0.01em; } 
.ai-page .req::after { content: " *"; color: #67fff1; } 
.ai-page .help { position: relative; padding-left: 18px; margin-top: 7px; font-size: 14px; color: rgba(255,255,255,.60); line-height: 1.45; } 
.ai-page .help::before { content: "✓"; position: absolute; left: 0; top: 0px; font-size: 14px; font-weight: 900; color: #667085; /* 민트 포인트 */ } 
.ai-page .help2 { margin-top: 7px; font-size: 14px; color: rgba(255,255,255,.60); line-height: 1.45; } 
.ai-page .field { position: relative; display: flex; gap: 10px; align-items: center; } 
.ai-page .input, .select, .textarea, .file { width: 100%; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); padding: 12px 12px; outline: none; font-size: 13px; transition: border-color .2s ease, box-shadow .2s ease, transform .1s ease; } 
.ai-page .select { padding: 12px 38px 12px 10px; } 
.ai-page option { color: #000; } 
.ai-page .textarea { min-height: 110px; resize: vertical; line-height: 1.6; } 
.ai-page .input::placeholder, .textarea::placeholder { color: rgba(255,255,255,.45); } 
.ai-page .input:focus, .select:focus, .textarea:focus { border-color: rgba(0,255,255,.45); box-shadow: 0 0 0 4px rgba(0,255,255,.14); } 
.row-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } 

.select-wrap { width: 100%; position: relative; } 

.select-wrap::after { content: ""; position: absolute; right: 14px; top: 50%; width: 4px; height: 4px; border-right: 2px solid rgba(255,255,255,.85); border-bottom: 2px solid rgba(255,255,255,.85); transform: translateY(-50%) rotate(45deg); pointer-events: none; } 


/* Chips */
.ai-page .chips { display: flex; flex-wrap: wrap; gap: 8px; } 
.ai-page .chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(255,255,255,.86); font-size: 14px; font-weight: 800; cursor: pointer; transition: transform .12s ease, border-color .2s ease, background .2s ease; user-select: none; } 
.ai-page .chip:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.20); } 
.ai-page .chip input { display: none; } 
.ai-page .chip .dot { width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); } 
.ai-page .chip.is-on { border-color: rgba(0,255,255,.42); background: rgba(0,255,255,.10); } 
.ai-page .chip.is-on .dot { background: linear-gradient(135deg,#00eaff,#00ffb3); } 

/* Toggle */
.ai-page .toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); } 
.ai-page .toggle .tleft { display: flex; flex-direction: column; gap: 4px; } 
.ai-page .toggle .tleft strong { font-size: 16px; color: rgba(255,255,255,.92); letter-spacing: -0.02em; } 
.ai-page .toggle .tleft span { font-size: 14px; color: rgba(255,255,255,.60); line-height: 1.4; } 
.ai-page .switch { width: 46px; height: 26px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.12); position: relative; cursor: pointer; flex: 0 0 auto; transition: background .2s ease, border-color .2s ease; } 
.ai-page .switch::after { content: ""; width: 20px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.92); position: absolute; top: 2px; left: 2px; transition: transform .2s ease; box-shadow: 0 6px 14px rgba(0,0,0,.25); } 
.ai-page .switch.is-on { background: rgba(0,255,255,.26); border-color: rgba(0,255,255,.38); } 
.ai-page .switch.is-on::after { transform: translateX(20px); background: #0a1426; } 

/* File */
.ai-page .file-wrap { display: grid; grid-template-columns: 1fr 120px; gap: 10px; align-items: start; } 
.ai-page .file-preview { width: 120px; height: 90px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); display: grid; place-items: center; overflow: hidden; position: relative; } 
.ai-page .file-preview img { width: 100%; height: 100%; object-fit: contain; display: none; background: rgba(0,0,0,.2); } 
.ai-page .file-preview .ph { font-size: 16px; color: rgba(255,255,255,.55); padding: 10px; text-align: center; line-height: 1.3; } 

/* Side summary */
.ai-page .side { position: sticky; top: 100px; } 
.ai-page .side .card-bd { padding: 16px; } 
.ai-page .summary { color: rgba(255,255,255,.85); font-size: 16px; line-height: 1.6; } 
.ai-page .summary .row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); } 
.ai-page .summary .row:last-child { border-bottom: 0; } 
.ai-page .summary .k { color: rgba(255,255,255,.62); } 
.ai-page .summary .v { font-weight: 800; text-align: right; } 

.ai-page .cta { display: grid; gap: 10px; margin-top: 14px; } 
.ai-page .btn { border: 0; border-radius: 14px; padding: 12px 14px; font-size: 16px; font-weight: 900; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, opacity .2s ease; } 
.ai-page .btn:active { transform: translateY(1px); } 
.ai-page .btn-primary { background: linear-gradient(135deg, #00eaff, #00ffb3); color: #07121f; box-shadow: 0 18px 36px rgba(0,255,255,.16); } 
.ai-page .btn-ghost { background: rgba(255,255,255,.06); color: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.12); } 
.ai-page .muted { font-size: 16px; color: rgba(255,255,255,.58); line-height: 1.55; margin-top: 10px; } 

.ai-page .agree { padding: 14px; border-radius: 14px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.08); margin-top: 14px; color: rgba(255,255,255,.78); font-size: 12px; line-height: 1.5; } 
.ai-page .agree input { margin-top: 4px; } 
.ai-page .agree label { font-weight: 800; color: rgba(255,255,255,.92); } 
.ai-page .agree-box { max-height: 140px; overflow-y: auto; padding: 10px 12px; margin-top: 6px; margin-bottom: 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-size: 12px; line-height: 1.55; } 
.ai-page .agree-box p { margin: 0 0 8px; } 
.ai-page .agree-box ul { margin: 0 0 8px; padding-left: 16px; } 
.ai-page .agree-box li { margin-bottom: 6px; } 

/* 스크롤바 스타일 (Webkit) */
.ai-page .agree-box::-webkit-scrollbar { width: 6px; } 
.ai-page .agree-box::-webkit-scrollbar-thumb { background: rgba(0,255,255,.35); border-radius: 6px; } 
.ai-page .agree-box::-webkit-scrollbar-track { background: transparent; } 
.ai-page .toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: rgba(0,0,0,.72); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.92); padding: 12px 14px; border-radius: 14px; font-size: 13px; display: none; z-index: 9999; width: min(560px, calc(100% - 24px)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 50px rgba(0,0,0,.5); } 
.ai-page .toast b { color: #67fff1; } 


/* 안내사항 */
.ai-page .form-notice { margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(90deg,rgba(0,255,255,.10),rgba(0,255,255,.02)); border: 1px solid rgba(0,255,255,.25); } 
.ai-page .notice-item { margin: 0; display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.92); } 
.ai-page .notice-ico { color: #67fff1; font-weight: 900; font-size: 13px; line-height: 1.4; } 
.ai-page .notice-text b { color: #67fff1; font-weight: 600; } 


@media screen and (max-width: 980px){
.ai-page .form-shell { grid-template-columns: 1fr; } 
.ai-page .side { position: relative; top: 0; } 
.ai-page .hero h1 { font-size: 34px; } 
.ai-page .tab { min-width: 120px; } 
}
@media screen and (max-width: 680px){
.ai-page .topbar { flex-direction: column; align-items: flex-start; } 
.ai-page .hero { padding-top: 16px; } 
.ai-page .hero h1 { font-size: 28px; } 
.ai-page .grid { gap: 10px; } 
.ai-page .col-6, .col-4, .col-3, .col-8 { grid-column: span 12; } 
.ai-page .row-inline { grid-template-columns: 1fr; } 
.ai-page .file-wrap { grid-template-columns: 1fr; } 
.ai-page .file-preview { width: 100%; height: 120px; } 
.ai-page .tabs { width: 100%; } 
.ai-page .tab { flex: 1 1 auto; min-width: 0; } 
}