/*
 * Anwen AI frontend glassmorphism theme.
 * Pure CSS: no SVG, remote image, icon font, or external asset.
 */
:root{
  --g-bg-0:#050912;
  --g-bg-1:#091426;
  --g-bg-2:#0a1a2d;
  --g-panel:rgba(14,28,49,.64);
  --g-panel-strong:rgba(11,24,43,.82);
  --g-soft:rgba(255,255,255,.055);
  --g-line:rgba(255,255,255,.13);
  --g-line-strong:rgba(151,197,255,.3);
  --g-text:#f3f8ff;
  --g-muted:#91a5bf;
  --g-blue:#62a6ff;
  --g-violet:#8173ff;
  --g-cyan:#72e4d6;
  --g-danger:#ff9aab;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--g-bg-0)}
body{
  min-height:100vh;margin:0;color:var(--g-text);
  background:
    radial-gradient(circle at 12% 12%,rgba(47,118,255,.28),transparent 29%),
    radial-gradient(circle at 87% 17%,rgba(50,216,193,.18),transparent 26%),
    radial-gradient(circle at 76% 80%,rgba(125,81,255,.22),transparent 31%),
    linear-gradient(138deg,var(--g-bg-0),var(--g-bg-1) 48%,var(--g-bg-2));
  background-attachment:fixed;
  font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;
}
body:before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.021) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.021) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 92%);
  mask-image:linear-gradient(to bottom,#000,transparent 92%);
}
a{color:inherit}
main{position:relative}

/* Navigation */
.topbar{
  height:76px;border-bottom:1px solid var(--g-line);
  background:rgba(4,10,20,.64);box-shadow:0 16px 48px rgba(0,0,0,.22);
  backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);
}
.brand>b{
  width:41px;height:41px;border:1px solid rgba(255,255,255,.25);border-radius:13px;
  background:linear-gradient(145deg,var(--g-blue),var(--g-violet));color:#fff;
  box-shadow:0 12px 30px rgba(61,115,244,.35),inset 0 1px rgba(255,255,255,.22);
}
.brand strong{color:#f8fbff}.brand small{color:#7288a3}
.topbar nav a{color:#a3b5ca;transition:color .18s,border-color .18s,background .18s}
.topbar nav a:hover{color:#fff}
.topbar nav .balance,.topbar nav .dark-btn{
  border:1px solid var(--g-line);border-radius:12px;background:var(--g-soft);color:#edf5ff;
  box-shadow:inset 0 1px rgba(255,255,255,.07);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.topbar nav .dark-btn{border-color:rgba(160,195,255,.32);background:linear-gradient(135deg,#478ef6,#7062ef)}

/* Shared glass elements */
.badge{
  padding:8px 13px;border:1px solid rgba(114,228,214,.25);border-radius:999px;
  background:rgba(58,199,182,.09);box-shadow:inset 0 1px rgba(255,255,255,.08);
  color:#97eee4;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.primary{
  border:1px solid rgba(158,194,255,.35);border-radius:14px;
  background:linear-gradient(135deg,#4b94ff,#7262f1);color:#fff;font-weight:700;
  box-shadow:0 15px 34px rgba(48,104,228,.3),inset 0 1px rgba(255,255,255,.2);
  transition:filter .18s,box-shadow .18s;
}
.primary:hover{background:linear-gradient(135deg,#5ba0ff,#7b6bf7);filter:saturate(1.08);box-shadow:0 19px 42px rgba(48,104,228,.4)}
.flash{
  border:1px solid rgba(101,227,179,.24);border-radius:14px;background:rgba(26,89,65,.48);
  box-shadow:0 16px 44px rgba(0,0,0,.22);color:#c1f8dd;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.flash.error,.alert.error{border:1px solid rgba(255,137,155,.25);border-radius:13px;background:rgba(112,38,51,.52);color:#ffd0d6}

/* Creator */
.creator-hero{padding:72px 24px 112px;background:none}
.creator-heading{max-width:870px;margin-bottom:40px}
.creator-heading h1{
  max-width:800px;margin:18px auto 0;color:transparent;
  background:linear-gradient(105deg,#fff 18%,#c5ddff 55%,#a5f5e9);
  -webkit-background-clip:text;background-clip:text;
  font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;font-weight:800;letter-spacing:-.055em;
  text-shadow:none;
}
.creator-heading p{color:var(--g-muted);font-size:14px}
.creator-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:20px}
.creator-meta span{padding:7px 11px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.045);color:#9fb3cb;font-size:10px}
.creator-shell{
  grid-template-columns:minmax(430px,490px) minmax(0,1fr);overflow:hidden;
  border:1px solid var(--g-line);border-radius:30px;
  background:linear-gradient(135deg,rgba(18,34,58,.8),rgba(8,20,37,.58));
  box-shadow:0 44px 116px rgba(0,0,0,.44),inset 0 1px rgba(255,255,255,.1);
  backdrop-filter:blur(32px) saturate(145%);-webkit-backdrop-filter:blur(32px) saturate(145%);
}
.creator-form{padding:36px;border-right:1px solid rgba(255,255,255,.1)}
.block-title span{color:var(--g-cyan)}.block-title h2{color:#eaf3ff;font-size:14px}
.creator-form textarea{
  height:166px;border:1px solid rgba(255,255,255,.12);border-radius:17px;
  background:rgba(1,8,19,.4);box-shadow:inset 0 1px rgba(255,255,255,.045);
  color:#f1f7ff;caret-color:var(--g-cyan);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.creator-form textarea::placeholder{color:#61758e}
.creator-form textarea:focus{border-color:rgba(98,166,255,.75);box-shadow:0 0 0 4px rgba(70,138,255,.13),inset 0 1px rgba(255,255,255,.055)}
.resolution-title{margin-top:26px}

/* Tier and size selection */
.tier-selector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:13px}
.tier-option{
  position:relative;overflow:hidden;min-height:150px;padding:15px 14px;text-align:left;
  border:1px solid rgba(255,255,255,.1);border-radius:17px;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
  box-shadow:inset 0 1px rgba(255,255,255,.055);color:#dce9f8;cursor:pointer;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.tier-option:before{content:"";position:absolute;right:-28px;bottom:-42px;width:92px;height:92px;border-radius:50%;background:rgba(98,166,255,.16);filter:blur(19px)}
.tier-option>span,.tier-option>b,.tier-option>strong,.tier-option>em{position:relative;z-index:1;display:block}
.tier-option>span{color:#72879f;font-size:9px;letter-spacing:.08em}
.tier-option>b{margin-top:8px;color:#eaf3ff;font-size:22px}
.tier-option>strong{margin-top:10px;color:#fff;font:700 18px/1 Arial,sans-serif}
.tier-option>strong small{margin-left:3px;color:#7c91aa;font-size:9px;font-weight:500}
.tier-option>em{margin-top:9px;color:#71869e;font-size:9px;font-style:normal}
.tier-option:hover{border-color:rgba(98,166,255,.38);background:rgba(98,166,255,.085)}
.tier-option.active{
  border-color:rgba(114,228,214,.64);
  background:linear-gradient(145deg,rgba(67,151,255,.24),rgba(48,211,188,.11));
  box-shadow:0 13px 30px rgba(29,112,209,.2),inset 0 0 0 1px rgba(114,228,214,.14);
}
.tier-option.active:after{content:"当前";position:absolute;right:10px;top:10px;padding:4px 7px;border-radius:999px;background:rgba(114,228,214,.14);color:#acf5ec;font-size:8px}
.tier-option.active>strong{color:#aef7ed}.tier-option.active>span,.tier-option.active>em{color:#9ec9d5}
.size-stage{padding:15px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(1,8,18,.29);box-shadow:inset 0 1px rgba(255,255,255,.04)}
.size-stage-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.size-stage-head span{color:#deebfa;font-size:11px;font-weight:700}
.size-stage-head small{padding:5px 8px;border-radius:999px;background:rgba(98,166,255,.11);color:#91c3ff;font-size:9px}
.size-option-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.size-option-grid[hidden]{display:none}
.size-option-grid label{display:block;position:relative}
.size-option-grid input{position:absolute;opacity:0;pointer-events:none}
.size-option-grid label>span{
  min-height:104px;padding:11px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.085);border-radius:13px;background:rgba(255,255,255,.036);
  color:#cbd9e9;cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s;
}
.size-option-grid label>span>i{
  width:29px;max-height:33px;aspect-ratio:var(--ratio-w)/var(--ratio-h);
  border:1px solid rgba(158,195,238,.58);border-radius:3px;
  background:linear-gradient(145deg,rgba(98,166,255,.26),rgba(114,228,214,.1));
  box-shadow:inset 0 0 0 2px rgba(3,11,23,.4);
}
.size-option-grid b{margin-top:8px;font-size:10px;text-align:center}
.size-option-grid small{margin-top:4px;color:#70859e;font-size:8px;white-space:nowrap}
.size-option-grid label:hover>span{border-color:rgba(98,166,255,.36);background:rgba(98,166,255,.07)}
.size-option-grid input:checked+span{
  border-color:rgba(114,228,214,.6);background:linear-gradient(145deg,rgba(69,151,255,.18),rgba(56,215,191,.09));
  box-shadow:0 8px 22px rgba(33,125,221,.13),inset 0 0 0 1px rgba(114,228,214,.11);
}
.size-option-grid input:checked+span>i{border-color:#91f1e6;background:linear-gradient(145deg,rgba(98,166,255,.62),rgba(114,228,214,.36));box-shadow:0 0 16px rgba(114,228,214,.22)}
.size-option-grid input:checked+span b{color:#fff}
.resolution-note,.fine{color:#72869f}
.generate-btn{min-height:50px}

/* Preview */
.preview-panel{grid-template-rows:59px 1fr;background:rgba(1,8,18,.2)}
.preview-panel>small{
  display:flex;align-items:center;gap:8px;padding:0 22px;border-bottom:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.028);color:#a0b2c8;
}
.preview-panel>small>i{width:7px;height:7px;border-radius:50%;background:var(--g-cyan);box-shadow:0 0 15px rgba(114,228,214,.95)}
.preview-panel>small>em{margin-left:auto;color:#6d829c;font-size:8px;font-style:normal;letter-spacing:.16em}
.preview-art{
  min-height:600px;margin:35px;border:1px solid rgba(255,255,255,.13);border-radius:25px;
  background:
    radial-gradient(circle at 28% 28%,rgba(86,162,255,.55),transparent 28%),
    radial-gradient(circle at 70% 34%,rgba(80,226,201,.34),transparent 24%),
    radial-gradient(circle at 58% 78%,rgba(124,87,255,.38),transparent 29%),
    linear-gradient(145deg,rgba(25,45,75,.9),rgba(6,15,29,.92));
  box-shadow:0 30px 76px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.12);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
}
.preview-art:before{
  content:"";position:absolute;inset:13%;border:1px solid rgba(255,255,255,.12);border-radius:21px;
  background:linear-gradient(135deg,rgba(255,255,255,.067),rgba(255,255,255,.014));
  backdrop-filter:blur(19px);-webkit-backdrop-filter:blur(19px);
}
.preview-art:after{inset:8%;border-color:rgba(255,255,255,.1);border-radius:22px}
.preview-art i:first-child{background:radial-gradient(circle at 32% 30%,#e1f3ff,rgba(70,143,255,.82) 45%,rgba(45,67,191,.26) 72%,transparent 74%);box-shadow:0 30px 72px rgba(56,120,255,.32);filter:blur(3px)}
.preview-art i:nth-child(2){background:radial-gradient(circle at 35% 30%,#ddfff8,rgba(55,213,189,.74) 46%,rgba(35,112,119,.18) 72%,transparent 74%);filter:blur(2px)}
.preview-art b{margin-bottom:72px;color:#9cb7d8}.preview-art strong{color:#f5f9ff;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;font-weight:700}.preview-art span{color:#91a5bd}

/* Inner pages */
.page h1,.auth-card h1,.install-card h1{color:#f6faff;text-shadow:0 12px 48px rgba(59,137,255,.18)}
.page>p,.auth-card p,.install-card>p{color:var(--g-muted)}
.price-grid article,.auth-card,.install-card,.user-panel,.work-card,.settings-form,.data-table{
  border:1px solid var(--g-line);border-radius:21px;background:var(--g-panel);
  box-shadow:0 26px 68px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.075);
  backdrop-filter:blur(25px) saturate(140%);-webkit-backdrop-filter:blur(25px) saturate(140%);
}
.price-grid article.featured{border-color:rgba(114,228,214,.46);background:linear-gradient(145deg,rgba(51,126,174,.36),rgba(10,24,43,.7))}
.price-grid article>span,.price-grid small,.price-grid p{color:#92a6bd}.price-grid strong{color:#fff}
.auth-card label,.install-card label,.settings-form label{color:#aabbd0}
.auth-card input,.install-card input,.settings-form input,.settings-form select,.settings-form textarea{
  border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(1,8,18,.38);color:#eef6ff;
}
.auth-card input:focus,.install-card input:focus,.settings-form input:focus{border-color:var(--g-blue);box-shadow:0 0 0 4px rgba(98,166,255,.11)}
.work-card{overflow:hidden}.work-card p{color:#d6e2f0}.work-card time,.work-card small{color:#8195ac}
.failed-work{background:rgba(80,31,48,.45);color:#ffd0d8}
.avatar{border-radius:13px;background:linear-gradient(145deg,var(--g-blue),var(--g-violet))}
.user-panel a:not(.primary){border-bottom-color:rgba(255,255,255,.08);color:#a8bacf}.balance-large{color:#fff}
.data-table th{background:rgba(255,255,255,.055);color:#aec0d5}.data-table td{border-bottom-color:rgba(255,255,255,.07);color:#dce8f5}
footer{border-top:1px solid rgba(255,255,255,.08);background:rgba(2,7,15,.63);color:#687e98;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}

/* Responsive */
@media(max-width:900px){
  .creator-shell{grid-template-columns:1fr}
  .creator-form{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}
}
@media(max-width:540px){
  .topbar{height:64px}.brand>b{width:36px;height:36px;border-radius:11px}
  .creator-hero{padding:46px 13px 70px}.creator-heading h1{font-size:36px;line-height:1.15}
  .creator-shell{border-radius:22px}.creator-form{padding:23px 16px}
  .tier-selector{gap:6px}.tier-option{min-height:130px;padding:13px 10px;border-radius:13px}
  .tier-option>b{font-size:18px}.tier-option>strong{font-size:15px}.tier-option.active:after{display:none}
  .size-stage{padding:12px;border-radius:14px}.size-option-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .price-grid article,.auth-card,.install-card,.user-panel,.work-card,.settings-form,.data-table{border-radius:17px}
}
@media(max-width:380px){
  .tier-selector{grid-template-columns:1fr}.tier-option{min-height:100px}
}