.sm-01,
        .sm-01 *,
        .sm-01 *::before,
        .sm-01 *::after {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }

        .sm-01 ::selection {
          background: #7c3aed;
          color: #fff;
        }

        .sm-01 {
          --bg: #0f172a;
          --surface: #1e293b;
          --surface-hover: #334155;
          --menu-bg: #1a1033;
          --accent: #7c3aed;
          --accent2: #a78bfa;
          --text: #e2e8f0;
          --muted: #94a3b8;
          --border: rgba(124,58,237,0.2);
          --font: 'Plus Jakarta Sans', system-ui, sans-serif;
          --menu-w: 280px;
          --duration: 0.4s;
          font-family: var(--font);
          background-image: url("../img/wallpaper.jpg"); 
          background-repeat: no-repeat; 
          background-attachment: fixed; 
          background-position: center; 
          background-size: cover; 
          height: 100vh; 
          margin: 0;
          color: var(--text);
          min-height: 100vh;
          position: relative;
          overflow: hidden;
          border-radius: 12px;
          display: flex;
          flex-direction: column;
        }

        /* Hidden checkbox toggle */
        .sm-01__toggle {
          position: absolute;
          opacity: 0;
          width: 0;
          height: 0;
          pointer-events: none;
        }

        /* Burger label */
        .sm-01__burger {
          position: absolute;
          top: 20px;
          left: 20px;
          z-index: 50;
          width: 42px;
          height: 42px;
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: 10px;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 5px;
          transition: background 0.2s, border-color 0.2s;
        }

        .sm-01__burger:hover {
          background: var(--accent);
          border-color: var(--accent);
        }

        .sm-01__burger span {
          display: block;
          width: 20px;
          height: 2px;
          background: var(--text);
          border-radius: 2px;
          transition: transform var(--duration), opacity var(--duration);
          transform-origin: center;
        }

        /* Burger → X animation */
        .sm-01__toggle:checked ~ .sm-01__burger span:nth-child(1) {
          transform: translateY(7px) rotate(45deg);
        }

        .sm-01__toggle:checked ~ .sm-01__burger span:nth-child(2) {
          opacity: 0;
          transform: scaleX(0);
        }

        .sm-01__toggle:checked ~ .sm-01__burger span:nth-child(3) {
          transform: translateY(-7px) rotate(-45deg);
        }

        /* Slide-in panel - Liquid Glass */
        .sm-01__nav {
          position: absolute;
          top: 0;
          left: 0;
          width: var(--menu-w);
          height: 100%;
          z-index: 40;
          display: flex;
          flex-direction: column;
          padding: 80px 0 24px;
          
          transform: translateX(-100%);
          transition: transform var(--duration) cubic-bezier(0.4, 0, 0.2, 1);

          /* Liquid Glass Background & Filter */
          background: hsl(0 0% 0% / var(--glass-frost, 0.15));
          -webkit-backdrop-filter: var(--filter-id, blur(16px)) saturate(var(--glass-saturation, 1.4));
          backdrop-filter: var(--filter-id, blur(16px)) saturate(var(--glass-saturation, 1.4));
          
          border-right: 1px solid rgba(255, 255, 255, 0.18);
          box-shadow: 
            inset 0 0 2px 1px rgba(255, 255, 255, 0.25),
            inset -4px 0 16px rgba(17, 17, 26, 0.15),
            4px 0 32px rgba(0, 0, 0, 0.37);
        }

        .sm-01__toggle:checked ~ .sm-01__nav {
          transform: translateX(0);
        }

        /* Brand */
        .sm-01__brand {
          padding: 0 24px 24px;
          border-bottom: 1px solid var(--border);
          margin-bottom: 16px;
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .sm-01__logo {
          width: 36px;
          height: 36px;
          background: linear-gradient(135deg, var(--accent), var(--accent2));
          border-radius: 9px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          font-size: 16px;
        }

        .sm-01__brand-name {
          font-weight: 700;
          font-size: 16px;
        }

        .sm-01__brand-sub {
          font-size: 11px;
          color: var(--muted);
        }

        /* Nav links */
        .sm-01__links {
          flex: 1;
          padding: 0 12px;
        }

        .sm-01__link {
          display: flex;
          align-items: center;
          gap: 14px;
          padding: 13px 16px;
          border-radius: 10px;
          color: var(--muted);
          text-decoration: none;
          font-size: 14px;
          font-weight: 500;
          transition: all 0.2s;
          margin-bottom: 4px;
          cursor: pointer;
        }

        .sm-01__link:hover {
          color: var(--text);
          background: rgba(124,58,237,0.15);
        }

        .sm-01__link--active {
          color: var(--text);
          background: rgba(124,58,237,0.2);
        }

        .sm-01__link-icon {
          width: 36px;
          height: 36px;
          background: rgba(255,255,255,0.05);
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          flex-shrink: 0;
          transition: background 0.2s;
        }

        .sm-01__link:hover .sm-01__link-icon,
        .sm-01__link--active .sm-01__link-icon {
          background: var(--accent);
        }

        /* Footer */
        .sm-01__nav-footer {
          padding: 16px 24px 0;
          border-top: 1px solid var(--border);
        }

        .sm-01__avatar {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .sm-01__avatar-img {
          width: 36px;
          height: 36px;
          background: linear-gradient(135deg, #f59e0b, #ef4444);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          font-size: 13px;
        }

        .sm-01__avatar-name {
          font-size: 13px;
          font-weight: 600;
        }

        .sm-01__avatar-role {
          font-size: 11px;
          color: var(--muted);
        }

        /* TOP-RIGHT NOTICES CONTAINER */
        .notice-stack {
          position: fixed;
          top: 20px;
          right: 20px;
          z-index: 100;
          display: flex;
          flex-direction: column;
          gap: 12px;
          max-width: 340px;
          width: calc(100% - 40px);
        }

        .notice-item {
          display: grid;
          grid-template-rows: 1fr;
          transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .notice-item__inner {
          overflow: hidden;
        }

        .notice-container {
          position: relative;
          border-radius: 16px;
          padding: 14px 16px;
          font-size: 13px;
          font-weight: 500;
          color: var(--text);
          display: flex;
          flex-direction: column;
          gap: 8px;
          line-height: 1.4;
          
          background: hsl(0 0% 0% / var(--glass-frost, 0.25));
          -webkit-backdrop-filter: blur(16px) saturate(1.4);
          backdrop-filter: blur(16px) saturate(1.4);
          border: 1px solid rgba(255, 255, 255, 0.15);
          box-shadow: 
            inset 0 0 2px 1px rgba(255, 255, 255, 0.25),
            inset 0 0 10px 2px rgba(255, 255, 255, 0.08),
            0 10px 25px rgba(0, 0, 0, 0.4);

          opacity: 1;
          transform: translateY(0) scale(1);
          transform-origin: top center;
          transition: 
            opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            margin 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .notice-container--warning {
          border-left: 3px solid #f59e0b;
        }

        .notice-container--owner {
          border-left: 3px solid #ef4444;
        }

        .mac-controls {
          display: flex;
          align-items: center;
          gap: 6px;
        }

        .mac-close-toggle {
          display: none;
        }

        .mac-dot {
          width: 11px;
          height: 11px;
          border-radius: 50%;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 8px;
          color: transparent;
          cursor: pointer;
          user-select: none;
          transition: filter 0.15s ease;
        }

        .mac-dot:hover {
          filter: brightness(0.85);
          color: rgba(0, 0, 0, 0.6);
        }

        .mac-dot--close {
          background: #ff5f56;
          border: 0.5px solid #e0443e;
        }

        .notice-body {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .notice-icon {
          font-size: 16px;
          flex-shrink: 0;
        }

        #close-warning:checked ~ .notice-item,
        #close-owner:checked ~ .notice-item {
          grid-template-rows: 0fr;
        }

        #close-warning:checked ~ .notice-item .notice-container,
        #close-owner:checked ~ .notice-item .notice-container {
          opacity: 0;
          transform: translateY(-12px) scale(0.92);
          pointer-events: none;
          margin-bottom: -12px;
        }

        /* --- ABOUT CONTENT CONTAINER --- */
        .about__content {
          flex: 1;
          padding: 80px 24px 40px 80px;
          display: flex;
          flex-direction: column;
          gap: 24px;
          overflow-y: auto;
          max-width: 900px;
          margin: 0 auto;
          width: 100%;
        }

        .about__card {
          padding: 32px;
          border-radius: 24px;
          background: hsl(0 0% 0% / var(--glass-frost, 0.2));
          -webkit-backdrop-filter: blur(16px) saturate(1.3);
          backdrop-filter: blur(16px) saturate(1.3);
          border: 1px solid rgba(255, 255, 255, 0.15);
          box-shadow: 
            inset 0 0 2px 1px rgba(255, 255, 255, 0.25),
            inset 0 0 10px 4px rgba(255, 255, 255, 0.08),
            0 12px 32px rgba(0, 0, 0, 0.3);
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .about__title {
          font-size: 26px;
          font-weight: 700;
          color: #fff;
          border-bottom: 1px solid var(--border);
          padding-bottom: 12px;
        }

        .about__desc {
          font-size: 14px;
          line-height: 1.7;
          color: var(--text);
        }

        .about__grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
          gap: 16px;
          margin-top: 8px;
        }

        .about__feature-box {
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid var(--border);
          border-radius: 14px;
          padding: 16px;
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .about__feature-title {
          font-size: 15px;
          font-weight: 600;
          color: var(--accent2);
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .about__feature-desc {
          font-size: 13px;
          color: var(--muted);
          line-height: 1.5;
        }

        .about__tech-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-top: 8px;
        }

        .about__tag {
          background: rgba(124, 58, 237, 0.2);
          border: 1px solid var(--border);
          color: var(--text);
          padding: 6px 12px;
          border-radius: 20px;
          font-size: 12px;
          font-weight: 600;
        }

        .about__profile {
          display: flex;
          align-items: center;
          gap: 16px;
          background: rgba(0, 0, 0, 0.2);
          padding: 16px;
          border-radius: 16px;
          border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .about__profile-avatar {
          width: 54px;
          height: 54px;
          border-radius: 50%;
          background: linear-gradient(135deg, var(--accent), var(--accent2));
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          font-weight: 700;
        }

        @media (max-width: 600px) {
          .about__content {
            padding: 80px 16px 24px 16px;
          }
        }