*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--purple:#6C5CE7;--purple-light:#A29BFE;--blue:#0984E3;--blue-light:#74B9FF;--green:#00B894;--yellow:#FDCB6E;--orange:#E17055;--pink:#FD79A8;--dark:#2D3436;--gray:#636E72;--light:#DFE6E9;--bg:#F8F9FA;--white:#FFFFFF;--radius:12px;--shadow:0 2px 8px rgba(0,0,0,0.08);--shadow-lg:0 8px 24px rgba(0,0,0,0.12);--transition:all 0.2s ease}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,sans-serif;color:var(--dark);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
img,svg{max-width:100%;height:auto}
a{color:var(--purple);text-decoration:none}
a:hover{text-decoration:underline}

/* Header */
.site-header{background:var(--white);border-bottom:1px solid var(--light);position:sticky;top:0;z-index:100}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.1rem;color:var(--dark)}
.logo:hover{text-decoration:none}
.nav{display:flex;gap:24px}
.nav a{color:var(--gray);font-weight:500;font-size:0.95rem}
.nav a:hover{color:var(--purple);text-decoration:none}

/* Hero */
.hero{background:linear-gradient(135deg,var(--purple) 0%,var(--purple-light) 100%);color:var(--white);padding:80px 0;text-align:center}
.hero h1{font-size:2.5rem;margin-bottom:16px;max-width:600px;margin-left:auto;margin-right:auto}
.hero-sub{font-size:1.15rem;opacity:0.9;max-width:520px;margin:0 auto 32px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:var(--radius);font-weight:600;font-size:0.95rem;border:none;cursor:pointer;transition:var(--transition);text-decoration:none}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--white);color:var(--purple)}
.btn-primary:hover{box-shadow:var(--shadow-lg)}
.btn-secondary{background:var(--light);color:var(--dark)}
.btn-secondary:hover{background:#c8d6e5}
.btn-danger{background:#ff7675;color:var(--white)}
.btn-danger:hover{background:#d63031}
.btn-lg{padding:16px 32px;font-size:1.05rem}

/* Workspace */
.workspace{padding:48px 0}
.workspace-layout{display:grid;grid-template-columns:320px 1fr;gap:32px;align-items:start}
.workspace-controls{background:var(--white);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);position:sticky;top:88px}
.control-group{margin-bottom:20px}
.control-group label{display:block;font-weight:600;font-size:0.85rem;margin-bottom:6px;color:var(--gray)}
.control-group input[type="text"],.control-group select{width:100%;padding:10px 14px;border:2px solid var(--light);border-radius:8px;font-size:0.95rem;background:var(--white);transition:var(--transition)}
.control-group input[type="text"]:focus,.control-group select:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(108,92,231,0.15)}
.add-row{display:flex;gap:8px}
.add-row input{flex:1}
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.preset-btn{padding:8px 12px;border:2px solid var(--light);border-radius:8px;background:var(--white);font-size:0.85rem;cursor:pointer;transition:var(--transition);text-align:center}
.preset-btn:hover{border-color:var(--purple);background:fafaFF}
.preset-btn.active{border-color:var(--purple);background:var(--purple);color:var(--white)}
.tag-options{display:flex;flex-wrap:wrap;gap:8px}
.tag-btn{padding:6px 14px;border-radius:20px;border:2px solid var(--light);background:var(--white);font-size:0.8rem;cursor:pointer;transition:var(--transition)}
.tag-btn:hover{transform:scale(1.05)}
.tag-btn.active{color:var(--white);border-color:transparent}
.action-row{display:flex;flex-wrap:wrap;gap:8px}
.status{margin-top:8px;padding:8px 12px;border-radius:8px;font-size:0.85rem;min-height:36px}
.status.success{background:#d4edda;color:#155724}
.status.error{background:#f8d7da;color:#721c24}

/* Canvas */
.workspace-canvas{min-width:0}
.canvas-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.canvas-header h2{font-size:1.4rem}
.item-count{color:var(--gray);font-size:0.9rem}
.board{background:var(--white);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);min-height:300px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;align-content:start}
.empty-state{grid-column:1/-1;text-align:center;padding:48px 24px;color:var(--gray)}
.empty-state svg{margin-bottom:16px}
.board-card{border:2px solid var(--light);border-radius:10px;padding:16px;position:relative;transition:var(--transition)}
.board-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.board-card .card-item-name{font-weight:600;margin-bottom:8px;word-break:break-word}
.board-card .card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.board-card .card-tag{padding:2px 10px;border-radius:12px;font-size:0.75rem;color:var(--white);font-weight:500}
.board-card .card-remove{position:absolute;top:8px;right:8px;background:none;border:none;cursor:pointer;font-size:1.1rem;color:var(--gray);opacity:0;transition:var(--transition);line-height:1}
.board-card:hover .card-remove{opacity:1}
.board-card .card-remove:hover{color:#d63031}
.mood-summary{margin-top:24px;background:var(--white);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.mood-summary h3{font-size:1.1rem;margin-bottom:16px}
.mood-bar-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.mood-bar-label{width:80px;font-size:0.85rem;font-weight:500}
.mood-bar-track{flex:1;height:20px;background:var(--light);border-radius:10px;overflow:hidden}
.mood-bar-fill{height:100%;border-radius:10px;transition:width 0.4s ease;min-width:0}
.mood-bar-count{width:30px;text-align:right;font-size:0.85rem;color:var(--gray)}

/* Examples */
.examples{padding:64px 0;background:var(--white)}
.examples h2{text-align:center;font-size:1.8rem;margin-bottom:8px}
.section-sub{text-align:center;color:var(--gray);margin-bottom:40px}
.example-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.example-card{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:var(--transition)}
.example-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.example-header{padding:24px;color:var(--white)}
.example-header h3{font-size:1.2rem;margin-bottom:4px}
.example-header span{font-size:0.85rem;opacity:0.85}
.example-items{padding:16px 24px 0;display:flex;flex-wrap:wrap;gap:8px}
.example-tag{padding:4px 12px;border-radius:12px;font-size:0.8rem;color:var(--white);font-weight:500}
.example-card>p{padding:16px 24px;color:var(--gray);font-size:0.9rem}

/* Guide */
.guide{padding:64px 0}
.guide-layout{display:grid;grid-template-columns:1fr 300px;gap:40px}
.guide-main h2{font-size:1.8rem;margin-bottom:16px}
.guide-main h3{font-size:1.2rem;margin:32px 0 12px;color:var(--purple)}
.guide-main p{margin-bottom:12px;color:var(--gray);line-height:1.7}
.guide-sidebar{display:flex;flex-direction:column;gap:20px}
.sidebar-card{background:var(--white);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.sidebar-card h3{font-size:1rem;margin-bottom:12px;color:var(--purple)}
.sidebar-card ul{list-style:none;padding:0}
.sidebar-card li{padding:6px 0;font-size:0.9rem;color:var(--gray);border-bottom:1px solid var(--light)}
.sidebar-card li:last-child{border:none}
.sidebar-card p{font-size:0.9rem;color:var(--gray);line-height:1.6}

/* Footer */
.site-footer{background:var(--dark);color:var(--light);padding:40px 0;text-align:center}
.site-footer a{color:var(--purple-light)}
.footer-nav{display:flex;justify-content:center;gap:24px;margin:16px 0}
.footer-meta{font-size:0.8rem;opacity:0.6;margin-top:16px}

/* Responsive */
@media(max-width:900px){
  .workspace-layout{grid-template-columns:1fr}
  .workspace-controls{position:static}
  .guide-layout{grid-template-columns:1fr}
  .guide-sidebar{flex-direction:row;flex-wrap:wrap}
  .sidebar-card{flex:1;min-width:240px}
}
@media(max-width:600px){
  .hero{padding:48px 0}
  .hero h1{font-size:1.8rem}
  .nav{gap:16px}
  .nav a{font-size:0.85rem}
  .preset-grid{grid-template-columns:1fr 1fr}
  .board{grid-template-columns:1fr}
  .example-grid{grid-template-columns:1fr}
}

/* Print */
@media print{
  .site-header,.workspace-controls,.site-footer,.hero,.examples,.guide-sidebar,.tag-options,.action-row{display:none!important}
  .workspace{padding:0}
  .workspace-layout{display:block}
  .board{box-shadow:none;border:1px solid #ccc}
  .board-card .card-remove{display:none}
  .mood-summary{box-shadow:none;border:1px solid #ccc}
}

/* Focus styles */
:focus-visible{outline:3px solid var(--purple);outline-offset:2px;border-radius:4px}

/* Selected tag for filtering */
.tag-btn[data-tag="happy"].active{background:var(--yellow);color:var(--dark)}
.tag-btn[data-tag="calm"].active{background:var(--blue-light);color:var(--dark)}
.tag-btn[data-tag="dark"].active{background:var(--gray);color:var(--white)}
.tag-btn[data-tag="romantic"].active{background:var(--pink);color:var(--white)}
.tag-btn[data-tag="nostalgic"].active{background:var(--orange);color:var(--white)}
.tag-btn[data-tag="energetic"].active{background:var(--green);color:var(--white)}

/* Drag and drop */
.board-card.dragging{opacity:0.5;transform:scale(0.98)}
.board-card.drag-over{border-color:var(--purple);border-style:dashed}


/* Factory-injected deployment helpers. The AI owns the site design above this block. */
.ad-unit {
  width: min(100%, 720px);
  min-height: 120px;
  margin: 24px auto;
  display: block;
}

.legal-page {
  width: min(900px, calc(100% - 32px));
  margin: 40px auto;
}

.factory-fallback-nav {
  width: min(900px, calc(100% - 32px));
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  font-size: 0.95rem;
}

.factory-fallback-nav a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}