:root{
   --bg: #0b0f17;
   --panel: rgba(255,255,255,.06);
   --panel2: rgba(255,255,255,.09);
   --text: rgba(255,255,255,.92);
   --muted: rgba(255,255,255,.65);
   --border: rgba(255,255,255,.12);
   --primary: #5ef0c2;
   --primary2: #2dbbff;
   --danger: #ff5b7a;
   --shadow: 0 12px 40px rgba(0,0,0,.35);
 }

 *{ box-sizing: border-box; }
 body{
   margin:0;
   font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
   background: radial-gradient(1200px 600px at 20% -10%, rgba(45,187,255,.35), transparent 55%),
               radial-gradient(900px 500px at 90% 10%, rgba(94,240,194,.25), transparent 60%),
               var(--bg);
   color: var(--text);
 }

 .page{ min-height: 100vh; }
 .page--center{ display:flex; align-items:center; justify-content:center; padding: 32px 16px; }

 .topbar{
   position: sticky;
   top: 0;
   z-index: 10;
   display:flex;
   justify-content:space-between;
   align-items:center;
   gap: 16px;
   padding: 14px 18px;
   background: rgba(10,14,22,.78);
   border-bottom: 1px solid var(--border);
   backdrop-filter: blur(10px);
 }
 .brand{ font-weight: 800; letter-spacing: .2px; }
 .topbar__left{ display:flex; gap: 12px; align-items:center; }
 .pill{
   padding: 6px 10px;
   border: 1px solid var(--border);
   border-radius: 999px;
   background: var(--panel);
   color: var(--muted);
 }

 .container{ max-width: 1100px; margin: 0 auto; padding: 22px 16px 44px; display:flex; flex-direction:column; gap: 16px;}

 .card{
   width: 100%;
   max-width: 420px;
   border: 1px solid var(--border);
   border-radius: 16px;
   background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
   box-shadow: var(--shadow);
   padding: 18px;
 }
 .title{ margin: 0 0 4px; font-size: 22px; }
 .subtitle{ margin: 0; color: var(--muted); }
 .muted{ margin-top: 14px; color: var(--muted); font-size: 13px; }

 .panel{
   border: 1px solid var(--border);
   border-radius: 14px;
   background: var(--panel);
   padding: 14px;
   box-shadow: 0 10px 30px rgba(0,0,0,.18);
 }
 .panel--inner{ background: var(--panel2); }
 .panel__header{ display:flex; align-items:center; justify-content:space-between; gap: 12px; }
 .panel__title{ margin: 0 0 10px; font-size: 16px; }
 .panel__subtitle{ margin: 0 0 10px; font-size: 13px; color: var(--muted); }

 .form{ display:flex; flex-direction:column; gap: 12px; }
 .form--row{ flex-direction: row; align-items:center; flex-wrap: wrap; }
 .field{ display:flex; flex-direction:column; gap: 6px; }
 .field__label{ font-size: 13px; color: var(--muted); }
 .field__input{
   padding: 10px 12px;
   border-radius: 12px;
   border: 1px solid var(--border);
   background: rgba(0,0,0,.20);
   color: var(--text);
   outline: none;
 }
 .field__input:focus{ border-color: rgba(94,240,194,.55); box-shadow: 0 0 0 3px rgba(94,240,194,.14); }

 .file{
   padding: 10px 12px;
   border-radius: 12px;
   border: 1px dashed rgba(255,255,255,.22);
   background: rgba(0,0,0,.12);
   color: var(--muted);
 }

 .btn{
   cursor:pointer;
   padding: 10px 14px;
   border-radius: 12px;
   border: 1px solid var(--border);
   background: rgba(255,255,255,.08);
   color: var(--text);
   font-weight: 700;
 }
 .btn:hover{ background: rgba(255,255,255,.12); }
 .btn:disabled{ opacity: .65; cursor: not-allowed; }
 .btn--primary{
   border-color: rgba(94,240,194,.35);
   background: linear-gradient(90deg, rgba(94,240,194,.22), rgba(45,187,255,.14));
 }

 .alert{
   padding: 10px 12px;
   border-radius: 12px;
   border: 1px solid rgba(94,240,194,.28);
   background: rgba(94,240,194,.08);
   color: rgba(255,255,255,.86);
   margin-bottom: 12px;
 }

 .link{ color: var(--text); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); }
 .link:hover{ border-bottom-color: rgba(94,240,194,.65); }

 .grid{
   display:grid;
   grid-template-columns: 1.25fr .75fr;
   gap: 12px;
 }
 .grid > * {
   min-width: 0;
 }
 @media (max-width: 920px){
   .grid{ grid-template-columns: 1fr; }
 }

 .code{
   margin:0;
   padding: 12px;
   min-height: 220px;
   max-height: 520px;
   overflow-x: auto;
   overflow-y: auto;
   max-width: 100%;
   white-space: pre-wrap;
   word-break: break-word;
   border-radius: 12px;
   border: 1px solid rgba(255,255,255,.14);
   background: rgba(0,0,0,.22);
   color: rgba(255,255,255,.82);
   font-size: 12.5px;
   line-height: 1.35;
 }

 .mermaid{
   max-width: 100%;
   overflow-x: auto;
 }
 .mermaid svg{
   max-width: 100%;
   height: auto;
 }