.m2guild{
      --bg-main: #120806;
      --bg-panel: #1c110c;
      --bg-elevated: #25140d;
      --bg-soft: #2d1a10;
      --border-soft: #3a2515;
      --border-strong: #7c4a23;
      --accent: #f97316;
      --accent-strong: #f59e0b;
      --accent-soft: rgba(249, 115, 22, 0.16);
      --accent-glow: rgba(249, 115, 22, 0.45);
      --text-main: #f9fafb;
      --text-muted: #c6a48a;
      --text-soft: #9b7d66;
    }

    .m2guild *{
      box-sizing: border-box;
    }

    .m2guild{
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at top left, #3b2414 0, transparent 45%),
        radial-gradient(circle at bottom right, #5b3214 0, transparent 45%),
        #0b0503;
      color: var(--text-main);
      margin: 0;
      padding: 0;
      min-height: 100vh;
    }

    .m2guild .wrapper{
      max-width: 1200px;
      margin: 40px auto 48px;
      padding: 0 16px;
    }

    .m2guild h1{
      font-size: 26px;
      margin-bottom: 6px;
      letter-spacing: .01em;
    }

    .m2guild h1::after{
      content: "";
      display: block;
      width: 56px;
      height: 3px;
      border-radius: 999px;
      margin-top: 8px;
      background: linear-gradient(90deg, #f97316, #f59e0b);
      box-shadow: 0 0 18px var(--accent-glow);
    }

    .m2guild .subtitle{
      color: var(--text-soft);
      margin-bottom: 26px;
      font-size: 14px;
      max-width: 640px;
    }

    .m2guild .layout{
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
      gap: 22px;
    }

    @media (max-width: 960px) {
      .m2guild .layout{
        grid-template-columns: minmax(0, 1fr);
      }
    }

    .m2guild .panel{
      background: radial-gradient(circle at top left, #341d11 0, #1b100a 45%, #120806 100%);
      border-radius: 18px;
      border: 1px solid rgba(96, 57, 29, 0.85);
      padding: 18px 18px 20px;
      box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(0, 0, 0, 0.85);
      position: relative;
      overflow: hidden;
    }

    .m2guild .panel::before{
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 0% 0%, rgba(249, 115, 22, 0.1), transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(234, 179, 8, 0.08), transparent 45%);
      opacity: 0.7;
      pointer-events: none;
    }

    .m2guild .panel > *{
      position: relative;
      z-index: 1;
    }

    .m2guild .panel h2{
      font-size: 15px;
      margin: 0 0 12px;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: #fbbf24;
    }

    .m2guild .panel h3{
      font-size: 14px;
      margin: 16px 0 8px;
      color: #fde68a;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    /* Tabs */
    .m2guild .tabs{
      display: inline-flex;
      background: rgba(12, 6, 3, 0.85);
      border-radius: 999px;
      border: 1px solid rgba(124, 74, 35, 0.9);
      padding: 4px;
      margin-bottom: 12px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
    }

    .m2guild .tab-btn{
      border: none;
      border-radius: 999px;
      padding: 7px 16px;
      font-size: 12px;
      cursor: pointer;
      background: transparent;
      color: var(--text-soft);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.14s ease, color 0.14s ease,
                  transform 0.1s ease, box-shadow 0.16s ease;
      position: relative;
    }

    .m2guild .tab-btn span{
      font-size: 13px;
      width: 18px;
      height: 18px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(15, 7, 3, 0.9);
      border: 1px solid rgba(120, 53, 15, 0.8);
      color: #f97316;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
    }

    .m2guild .tab-btn.active{
      background: linear-gradient(135deg, #f97316, #f59e0b);
      color: #1b0b05;
      transform: translateY(-1px);
      box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.9),
        0 0 22px rgba(249, 115, 22, 0.65);
    }

    .m2guild .tab-btn.active span{
      background: #1b0b05;
      color: #fde68a;
      border-color: rgba(248, 250, 252, 0.25);
    }

    .m2guild .tab-pane{
      display: none;
      margin-bottom: 10px;
    }

    .m2guild .tab-pane.active{
      display: block;
    }

    .m2guild .tab-desc{
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 8px;
    }

    .m2guild .select-hint{
      font-size: 12px;
      color: var(--text-soft);
      margin-bottom: 8px;
    }

    /* Toolbar & buttons */
    .m2guild .toolbar{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      font-size: 13px;
      color: var(--text-muted);
    }

    .m2guild .toolbar label{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(15, 7, 3, 0.85);
      border: 1px solid rgba(75, 36, 15, 0.95);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.9);
    }

    .m2guild .toolbar input[type="file"]{
      font-size: 11px;
      border: none;
      background: transparent;
      color: var(--text-muted);
    }

    .m2guild .toolbar select{
      border-radius: 999px;
      border: 1px solid rgba(75, 36, 15, 0.95);
      background: rgba(15, 7, 3, 0.9);
      color: var(--text-muted);
      font-size: 12px;
      padding: 4px 8px;
    }

    .m2guild .palette{
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 4px;
    }

    .m2guild .color-swatch{
      width: 18px;
      height: 18px;
      border-radius: 4px;
      border: 1px solid #1a0a04;
      cursor: pointer;
      box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.7),
        0 0 7px rgba(0, 0, 0, 0.9);
      transition: transform .12s ease, box-shadow .12s ease;
    }

    .m2guild .color-swatch:hover{
      transform: translateY(-1px) scale(1.03);
      box-shadow:
        0 0 0 1px rgba(249, 115, 22, 0.5),
        0 0 12px rgba(0, 0, 0, 1);
    }

    .m2guild .color-swatch.active{
      box-shadow:
        0 0 0 2px #facc15,
        0 0 14px rgba(250, 204, 21, 0.65);
    }

    .m2guild .btn-row{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
      align-items: center;
    }

    .m2guild button{
      border: none;
      border-radius: 999px;
      padding: 8px 15px;
      font-size: 13px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      position: relative;
      overflow: hidden;
      transition:
        transform 0.08s ease,
        box-shadow 0.12s ease,
        background 0.14s ease;
      isolation: isolate;
    }

    .m2guild .btn-primary{
      background: radial-gradient(circle at 0 0, #fbbf24 0, #f97316 35%, #b45309 100%);
      color: #1b0b05;
      box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.85),
        0 0 18px var(--accent-glow);
      font-weight: 600;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .m2guild .btn-secondary{
      background: linear-gradient(135deg, #1f1009, #28150d);
      color: var(--text-muted);
      border: 1px solid rgba(75, 36, 15, 0.95);
      box-shadow: 0 10px 23px rgba(0, 0, 0, 0.85);
    }

    .m2guild .btn-tool-active{
      border-color: #f97316;
      box-shadow:
        0 0 0 1px rgba(249, 115, 22, 0.6),
        0 10px 26px rgba(0, 0, 0, 0.95);
      color: #fbbf24;
    }

    .m2guild button:hover{
      transform: translateY(-1px);
      box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.95),
        0 0 22px rgba(249, 115, 22, 0.4);
    }

    .m2guild button:active{
      transform: translateY(0);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.9);
    }

    /* Ripple efekt */
    .m2guild button .ripple{
      position: absolute;
      border-radius: 50%;
      transform: scale(0);
      animation: ripple 350ms ease-out;
      background: rgba(255, 255, 255, 0.35);
      opacity: 0.8;
      pointer-events: none;
      inset: 0;
      margin: auto;
      width: 200%;
      height: 200%;
      z-index: -1;
    }

    @keyframes ripple {
      to {
        transform: scale(1);
        opacity: 0;
      }
    }

    /* Yüklenen resim + crop alanı */
    .m2guild .source-wrapper{
      background: radial-gradient(circle at 20% 0%, #46301f 0, #150a06 40%) no-repeat;
      border-radius: 14px;
      padding: 10px;
      border: 1px solid rgba(97, 61, 34, 0.95);
      margin-top: 8px;
      box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.75),
        0 18px 36px rgba(0, 0, 0, 0.95);
    }

    .m2guild #m2g-sourceCanvas{
      width: 100%;
      max-width: 420px;
      background: #120806;
      border-radius: 8px;
      border: 1px solid rgba(120, 73, 45, 0.85);
      image-rendering: auto;
      cursor: crosshair;
      display: block;
      margin: 0 auto;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.95);
    }

    .m2guild .source-hint{
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 6px;
      text-align: center;
    }

    /* Çizim alanı */
    .m2guild .canvas-wrapper{
      background: radial-gradient(circle at 20% 0%, #4b3020 0, #140906 40%) no-repeat;
      border-radius: 14px;
      padding: 14px;
      border: 1px solid rgba(97, 61, 34, 0.95);
      margin-top: 10px;
      box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.75),
        0 22px 46px rgba(0, 0, 0, 0.95);
    }

    .m2guild #m2g-gridCanvas{
      background: #120806;
      border-radius: 8px;
      border: 1px solid rgba(120, 73, 45, 0.9);
      image-rendering: pixelated;
      cursor: crosshair;
      display: block;
      margin: 0 auto;
      box-shadow:
        0 22px 50px rgba(0, 0, 0, 1),
        0 0 28px rgba(248, 153, 56, 0.2);
      transition: box-shadow 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
    }

    .m2guild #m2g-gridCanvas.drawing{
      transform: translateY(-1px);
      border-color: #f97316;
      box-shadow:
        0 26px 55px rgba(0, 0, 0, 1),
        0 0 36px rgba(249, 115, 22, 0.55);
    }

    .m2guild .canvas-hint{
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 8px;
      text-align: center;
    }

    /* Bayrak Önizleme */
    .m2guild .preview-flag{
      margin-top: 14px;
      background: linear-gradient(135deg, #23140c, #130805);
      border-radius: 12px;
      border: 1px solid rgba(120, 73, 45, 0.95);
      padding: 12px;
      display: flex;
      gap: 14px;
      align-items: center;
      box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.75),
        0 20px 40px rgba(0, 0, 0, 0.95);
    }

    .m2guild .flag-pole{
      width: 6px;
      align-self: stretch;
      background: linear-gradient(#7c6f64, #3b3026);
      border-radius: 999px;
    }

    .m2guild .flag-cloth{
      width: 84px;
      height: 68px;
      background: radial-gradient(circle at 10% 10%, #f97316 0, #b45309 45%, #7c2d12 100%);
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.95),
        0 0 20px rgba(249, 115, 22, 0.4);
      transform-origin: left center;
      animation: flag-wave 4s ease-in-out infinite;
    }

    @keyframes flag-wave {
      0%, 100% { transform: perspective(600px) rotateY(0deg); }
      50%      { transform: perspective(600px) rotateY(8deg); }
    }

    .m2guild .flag-emblem{
      position: absolute;
      inset: 10px 14px 10px 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(15, 15, 23, 0.35);
      border-radius: 4px;
      box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.9);
    }

    .m2guild #m2g-emblemPreview{
      image-rendering: pixelated;
      width: 48px;
      height: 36px;
      background: #020617;
      border-radius: 2px;
      border: 1px solid rgba(15, 23, 42, 0.9);
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
    }

    .m2guild .preview-text{
      font-size: 12px;
      color: var(--text-main);
      flex: 1;
    }

    .m2guild .preview-text strong{
      display: block;
      margin-bottom: 4px;
      font-size: 13px;
      color: #fbbf24;
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    .m2guild .notice{
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 6px;
    }

    /* KARAKTER ÜSTÜ ÖNİZLEME */
    .m2guild .char-preview-card{
      margin-top: 18px;
      background: radial-gradient(circle at 10% 0%, #2b1b11 0, #110706 40%);
      border-radius: 12px;
      border: 1px solid rgba(92, 56, 31, 0.95);
      padding: 10px 10px 14px;
      box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.75),
        0 20px 40px rgba(0, 0, 0, 0.95);
    }

    .m2guild .char-preview-title{
      font-size: 13px;
      color: var(--text-soft);
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .m2guild .metin-preview{
      position: relative;
      width: 340px;
      max-width: 100%;
      aspect-ratio: 621 / 565;
      overflow: hidden;
      border-radius: 10px;
      border: 1px solid #111827;
      background: #000;
      margin: 0 auto;
      box-shadow:
        0 20px 40px rgba(0, 0, 0, 1),
        0 0 24px rgba(0, 0, 0, 0.8);
    }

    .m2guild .metin-preview img{
      width: 100%;
      object-fit: cover;
      display: block;
      transform: scale(1.02);
    }

    .m2guild .nameplate{
      position: absolute;
      left: 45%;
      top: 2%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      text-shadow:
        0 0 3px #000,
        0 0 6px #000,
        0 0 12px #000;
      font-size: 11px;
      pointer-events: none;
    }

    .m2guild .nameplate::before{
      content: "";
      position: absolute;
      inset: -4px -12px;
      background: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.55));
      z-index: -1;
      border-radius: 6px;
    }

    .m2guild .guild-row{
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .m2guild .guild-emblem{
      width: 16px;
      height: 16px;
      border-radius: 3px;
      overflow: hidden;
      border: 1px solid #111827;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
      background: #020617;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .m2guild .guild-emblem canvas{
      width: 100%;
      height: 100%;
      image-rendering: pixelated;
      display: block;
    }

    .m2guild .guild-name{
      color: #fbbf24;
      font-weight: 600;
      text-shadow:
        0 0 3px #000,
        0 0 6px #000;
    }

    .m2guild .player-row{
      display: inline-flex;
      align-items: baseline;
      gap: 2px;
      font-weight: 600;
    }

    .m2guild .player-row .level{
      color: #22c55e;
    }

    .m2guild .player-row .separator{
      color: #f9fafb;
    }

    .m2guild .player-row .player-name{
      color: #f97316;
    }

    /* Toast */
    .m2guild .toast{
      position: fixed;
      right: 18px;
      bottom: 18px;
      background: #16a34a;
      color: #ecfdf5;
      padding: 9px 13px;
      border-radius: 999px;
      font-size: 13px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.85);
      opacity: 0;
      pointer-events: none;
      transform: translateY(10px);
      transition: opacity .16s ease, transform .16s ease;
      z-index: 999;
    }

    .m2guild .toast.show{
      opacity: 1;
      transform: translateY(0);
    }

    .m2guild .hidden{
      display: none;
    }

    /* Scroll animasyonu için */
    .m2guild [data-animate]{
      opacity: 0;
      transform: translateY(12px);
      transition: opacity .35s ease-out, transform .35s ease-out;
    }

    .m2guild [data-animate].visible{
      opacity: 1;
      transform: translateY(0);
    }

    /* Küçük yardım listesi */
    .m2guild .help-steps{
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 6px;
      padding-left: 16px;
    }
  

/* Metin2Docs lonca atölyesi — tema izolasyonu ve görsel katman */
.m2guild{
  --bg-main:#120806;--bg-panel:#1c110c;--bg-elevated:#25140d;--bg-soft:#2d1a10;
  --border-soft:#3a2515;--border-strong:#7c4a23;--accent:#d85d35;--accent-strong:#e8ae62;
  --accent-soft:rgba(216,93,53,.16);--accent-glow:rgba(216,93,53,.38);
  --text-main:#f2e5d3;--text-muted:#b7a58f;--text-soft:#8f806f;
  position:relative;isolation:isolate;overflow:hidden;width:100%;padding:0 0 28px;
  background:
    radial-gradient(circle at 8% 10%,rgba(118,42,23,.20),transparent 30%),
    radial-gradient(circle at 92% 55%,rgba(190,128,54,.12),transparent 34%),
    linear-gradient(180deg,rgba(17,10,7,.25),rgba(7,6,5,.04));
  color:var(--text-main);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.m2guild,.m2guild *{box-sizing:border-box}
.m2guild-atmosphere{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.m2guild-orb{position:absolute;width:360px;height:360px;border-radius:50%;filter:blur(90px);opacity:.16;animation:m2guildOrb 10s ease-in-out infinite alternate}
.m2guild-orb-a{left:-190px;top:240px;background:#b43f27}.m2guild-orb-b{right:-210px;top:680px;background:#c69645;animation-delay:-4s}
@keyframes m2guildOrb{to{transform:translate3d(35px,-25px,0) scale(1.12)}}
.m2guild-petal{position:absolute;color:rgba(221,160,81,.24);font-size:10px;animation:m2guildPetal 12s linear infinite}
.m2guild-petal-1{left:8%;top:12%}.m2guild-petal-2{left:76%;top:35%;animation-delay:-5s}.m2guild-petal-3{left:45%;top:72%;animation-delay:-9s}
@keyframes m2guildPetal{0%{transform:translateY(-30px) rotate(0);opacity:0}20%{opacity:.8}100%{transform:translateY(300px) rotate(260deg);opacity:0}}
.m2guild-hero{position:relative;min-height:330px;display:grid;grid-template-columns:minmax(0,1fr) 210px;align-items:end;gap:30px;overflow:hidden;margin:0 0 18px;padding:42px;border:1px solid rgba(210,161,87,.25);background:#130b08;clip-path:polygon(0 0,97% 0,100% 11%,100% 100%,3% 100%,0 89%);box-shadow:inset 0 0 80px rgba(0,0,0,.55),0 22px 60px rgba(0,0,0,.35)}
.m2guild-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#6b1d18,#d6a45d,#6b1d18)}
.m2guild-hero-art{position:absolute;inset:0;background:url("../assets/hero-warrior.webp") center 43%/cover no-repeat;filter:saturate(.78) contrast(1.07);transform:scale(1.025);animation:m2guildHero 14s ease-in-out infinite alternate}
@keyframes m2guildHero{to{transform:scale(1.07) translateX(-1.2%)}}
.m2guild-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,5,4,.97) 0%,rgba(10,6,5,.9) 45%,rgba(10,6,5,.48) 75%,rgba(7,5,4,.85) 100%),linear-gradient(0deg,rgba(8,5,4,.94),transparent 65%)}
.m2guild-hero-copy,.m2guild-hero-seal,.m2guild-vertical{position:relative;z-index:2}
.m2guild-kicker{display:inline-flex;align-items:center;gap:11px;color:#d8a967;font-size:9px;font-weight:900;letter-spacing:2px}.m2guild-kicker span{display:grid;place-items:center;width:42px;height:42px;border:1px solid #ae4930;background:rgba(88,23,16,.78);font:700 22px Georgia,serif;box-shadow:inset 0 0 0 5px rgba(0,0,0,.25),0 0 25px rgba(183,61,32,.24);animation:m2guildSeal 3s ease-in-out infinite}.m2guild-kicker i{width:24px;height:1px;background:#9f6a3b}
@keyframes m2guildSeal{50%{box-shadow:inset 0 0 0 5px rgba(0,0,0,.25),0 0 38px rgba(211,78,42,.46)}}
.m2guild-hero h1{max-width:760px;margin:18px 0 11px;font:700 clamp(35px,4.4vw,62px)/1.02 Georgia,"Times New Roman",serif;letter-spacing:-1.5px;color:#f4e7d5;text-shadow:0 5px 25px rgba(0,0,0,.72)}.m2guild-hero h1 strong{color:#e58b53;font-weight:inherit}.m2guild-hero-copy>p{max-width:720px;margin:0;color:#b5a895;font-size:13px;line-height:1.75}.m2guild-hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.m2guild-hero-tags span{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid rgba(204,154,82,.17);background:rgba(6,4,3,.5);color:#c6b59e;font-size:8px;font-weight:800;letter-spacing:.75px}.m2guild-hero-tags i{width:5px;height:5px;border-radius:50%;background:#da9b58;box-shadow:0 0 9px #da9b58}
.m2guild-hero-seal{align-self:center;justify-self:center;width:150px;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(217,166,91,.27);outline:1px solid rgba(217,166,91,.08);outline-offset:-9px;background:rgba(11,7,5,.62);transform:rotate(2deg);box-shadow:0 20px 55px rgba(0,0,0,.55),inset 0 0 36px rgba(173,69,34,.09);backdrop-filter:blur(5px)}.m2guild-hero-seal span{color:#d76038;font:700 57px/1 Georgia,serif;text-shadow:0 0 22px rgba(213,80,43,.35)}.m2guild-hero-seal b{margin-top:4px;color:#d9b476;font-size:10px;letter-spacing:3px}.m2guild-hero-seal small{margin-top:7px;color:#796b5b;font-size:8px;letter-spacing:2px}.m2guild-vertical{position:absolute;right:15px;top:20px;writing-mode:vertical-rl;color:rgba(225,188,128,.32);font-family:"Noto Serif SC",Georgia,serif;font-size:8px;letter-spacing:4px}
.m2guild-guide{display:grid;grid-template-columns:235px 1fr;gap:18px;align-items:center;margin:0 0 18px;padding:16px 18px;border:1px solid rgba(205,157,85,.17);background:linear-gradient(135deg,rgba(25,15,10,.92),rgba(10,7,5,.94));box-shadow:0 16px 38px rgba(0,0,0,.22)}.m2guild-guide-title{display:flex;align-items:center;gap:12px}.m2guild-guide-title>span{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(202,146,76,.3);background:#21120c;color:#d49550;font:700 24px Georgia,serif}.m2guild-guide-title small,.m2guild-guide-title strong{display:block}.m2guild-guide-title small{color:#96734b;font-size:7px;font-weight:900;letter-spacing:1.7px}.m2guild-guide-title strong{margin-top:4px;color:#e8d7bf;font:600 16px Georgia,serif}.m2guild-guide ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}.m2guild-guide li{display:flex;align-items:center;gap:9px;min-height:46px;padding:8px 10px;border-left:1px solid rgba(206,157,84,.16);background:rgba(255,255,255,.015)}.m2guild-guide li b{color:#c77d49;font:700 17px Georgia,serif}.m2guild-guide li span{color:#9e9181;font-size:9px;line-height:1.45}.m2guild-guide code{color:#d7aa69}
.m2guild-workspace{max-width:none!important;margin:0!important;padding:0!important}.m2guild .wrapper{max-width:none;margin:0;padding:0}.m2guild .layout{gap:18px}.m2guild .panel{border-radius:3px;padding:21px;background:linear-gradient(145deg,rgba(27,18,13,.97),rgba(11,8,6,.98));border-color:rgba(200,153,82,.2);box-shadow:0 22px 60px rgba(0,0,0,.36),inset 0 0 0 1px rgba(255,255,255,.014)}.m2guild .panel:after{content:"";position:absolute;inset:7px;pointer-events:none;border:1px solid rgba(211,164,92,.055)}.m2guild .panel h2{color:#dbae6b;font-size:10px;letter-spacing:1.7px}.m2guild .panel h3{color:#ddc091;font-size:10px;letter-spacing:1.2px}.m2guild .tabs{display:flex;width:100%;border-radius:2px;padding:5px;background:rgba(7,5,4,.75);border-color:rgba(197,145,76,.25)}.m2guild .tab-btn{flex:1;justify-content:center;border-radius:2px;padding:10px 13px}.m2guild .tab-btn.active{background:linear-gradient(135deg,#9c2c22,#c66a3d);color:#fff0d8;box-shadow:0 12px 28px rgba(0,0,0,.45),0 0 20px rgba(169,51,34,.22)}.m2guild .tab-btn.active span{background:#27110c}.m2guild .toolbar label{border-radius:2px}.m2guild .toolbar select,.m2guild button{border-radius:2px}.m2guild .btn-primary{background:linear-gradient(135deg,#a52e24,#6c1d18);color:#fff0d5;border:1px solid rgba(228,149,82,.36);box-shadow:0 14px 30px rgba(0,0,0,.48),0 0 18px rgba(169,47,37,.2)}.m2guild .btn-secondary{background:linear-gradient(135deg,#21140f,#160e0a);border-color:rgba(196,145,77,.2);color:#bcaa94}.m2guild .btn-tool-active{border-color:#c75c38;color:#e5b16d;box-shadow:0 0 0 1px rgba(199,92,56,.36),0 11px 25px rgba(0,0,0,.43)}.m2guild button:focus-visible,.m2guild input:focus-visible,.m2guild select:focus-visible{outline:2px solid #d28a4f;outline-offset:2px}.m2guild .source-wrapper,.m2guild .canvas-wrapper,.m2guild .preview-flag,.m2guild .char-preview-card{border-radius:3px;border-color:rgba(193,142,74,.22);background:linear-gradient(145deg,rgba(32,21,15,.9),rgba(9,7,5,.95));box-shadow:0 18px 42px rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,255,255,.014)}.m2guild #m2g-sourceCanvas,.m2guild #m2g-gridCanvas{max-width:100%;height:auto;touch-action:none;border-radius:2px}.m2guild .preview-flag{position:relative;overflow:hidden}.m2guild .preview-flag:after{content:"旗";position:absolute;right:12px;top:-15px;color:rgba(216,164,86,.055);font:700 95px Georgia,serif}.m2guild .flag-cloth{background:radial-gradient(circle at 14% 14%,#ca6741 0,#8e2b22 50%,#531614 100%)}.m2guild .metin-preview{border-radius:3px;border-color:rgba(207,156,82,.18)}.m2guild .metin-preview:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.05),transparent 50%,rgba(0,0,0,.36));box-shadow:inset 0 0 30px rgba(0,0,0,.42)}.m2guild .metin-preview img{height:100%;object-fit:cover}.m2guild .nameplate{z-index:2;left:50%;top:8%}.m2guild .toast{border-radius:2px;background:#1b120e;border:1px solid rgba(205,157,84,.28);color:#e7d5bd}.m2guild .help-steps{display:none}.m2guild .subtitle{display:none}
@media(max-width:1080px){.m2guild-hero{grid-template-columns:1fr 165px}.m2guild-guide{grid-template-columns:1fr}.m2guild-guide ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.m2guild-hero{min-height:360px;grid-template-columns:1fr;padding:34px 22px}.m2guild-hero-seal{display:none}.m2guild-vertical{right:7px}.m2guild-guide ol{grid-template-columns:1fr 1fr}.m2guild .layout{grid-template-columns:1fr}.m2guild .panel{padding:15px}.m2guild .toolbar{align-items:stretch}.m2guild .toolbar label{max-width:100%}.m2guild .btn-row{align-items:stretch}.m2guild button{justify-content:center}.m2guild .preview-flag{align-items:flex-start}.m2guild .flag-cloth{flex:0 0 84px}}
@media(max-width:520px){.m2guild-hero{min-height:390px}.m2guild-hero h1{font-size:34px}.m2guild-hero-copy>p{font-size:11px}.m2guild-hero-tags span{font-size:7px}.m2guild-guide ol{grid-template-columns:1fr}.m2guild .tabs{flex-direction:column}.m2guild .preview-flag{display:grid;grid-template-columns:6px 84px 1fr}.m2guild .preview-text{grid-column:1/-1;margin-top:4px}.m2guild .toolbar>span{display:none}.m2guild .toolbar label{width:100%;justify-content:space-between}.m2guild .toolbar input[type="file"]{max-width:165px}.m2guild .btn-row>span{width:100%;text-align:center}}
@media(prefers-reduced-motion:reduce){.m2guild *,.m2guild *:before,.m2guild *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}