:root {
    --bg-color: #f1f5f9;
    --sidebar-bg: #0f172a;
    --sidebar-active: #1e293b;
    --primary: #38bdf8;
    --primary-dark: #0ea5e9;
    --text-main: #334155;
    --white: #ffffff;
    --border: #e2e8f0;
}

* { box-sizing: border-box; }
body { font-family: 'Inter', 'Noto Sans JP', sans-serif; margin: 0; background: var(--bg-color); color: var(--text-main); }
.layout-wrapper { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar { width: 260px; background: var(--sidebar-bg); color: #f1f5f9; padding: 25px 15px; flex-shrink: 0; }
.sidebar-brand h2 { font-size: 22px; margin: 0 0 40px 10px; font-weight: 800; letter-spacing: -0.5px; }
.tech-color { color: var(--primary); }
.menu-label { font-size: 11px; color: #64748b; font-weight: bold; margin: 25px 0 10px 10px; text-transform: uppercase; }
.sidebar-menu ul { list-style: none; padding: 0; margin: 0; }
.sidebar-menu a { display: flex; align-items: center; padding: 12px 15px; color: #94a3b8; text-decoration: none; border-radius: 10px; margin-bottom: 4px; transition: 0.2s; }
.sidebar-menu a:hover, .sidebar-menu a.active { background: var(--sidebar-active); color: var(--primary); }
.sidebar-menu i { margin-right: 12px; width: 20px; text-align: center; }

/* Content Area */
.main-content { flex: 1; padding: 40px; overflow-y: auto; }
.page-header { margin-bottom: 35px; }
.card { background: var(--white); border-radius: 16px; padding: 30px; border: 1px solid var(--border); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05); }

/* Tool Grid */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; }
.tool-card { background: var(--white); border-radius: 16px; padding: 25px; text-decoration: none; color: inherit; border: 1px solid var(--border); transition: 0.3s; display: flex; align-items: flex-start; }
.tool-card:hover:not(.disabled) { transform: translateY(-5px); border-color: var(--primary); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.tool-icon { background: #f0f9ff; color: var(--primary); padding: 15px; border-radius: 12px; margin-right: 20px; font-size: 24px; }
.disabled { opacity: 0.6; cursor: not-allowed; }

/* Forms */
.input-group { margin-bottom: 25px; }
label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; }
input[type="url"] { width: 100%; padding: 14px; border: 2px solid var(--border); border-radius: 10px; font-size: 16px; }
.btn-exec { background: var(--primary); color: #0f172a; border: none; padding: 16px; border-radius: 10px; font-weight: 700; cursor: pointer; width: 100%; transition: 0.2s; }
.btn-exec:hover { background: var(--primary-dark); }